/* =========================================================
   RondPasand — Naming service page (naming.html)
   Layout inspired by name-suggestion tools: a colored hero,
   three white feature cards with line-icons, and a lead form —
   restyled with the site's own emerald/gold/teal palette.
   ========================================================= */

/* ---------- Hero ---------- */
.naming-hero{
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  padding:64px 0 84px; position:relative; overflow:hidden;
}
.naming-hero-grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center;
}
.naming-hero-text .eyebrow{ color:var(--gold-tint); }
.naming-hero-text .eyebrow .dot{ background:var(--gold-tint); }
.naming-hero-text h1{ color:#fff; font-size:2.4rem; margin:14px 0 16px; }
.naming-hero-text p{ color:rgba(255,255,255,.85); font-size:1rem; line-height:1.9; margin-bottom:26px; max-width:520px; }
.naming-hero-art{ display:flex; justify-content:center; }
.naming-hero-art svg{ width:100%; max-width:340px; height:auto; }
@media (max-width:860px){
  .naming-hero-grid{ grid-template-columns:1fr; text-align:center; }
  .naming-hero-text p{ margin-inline:auto; }
  .naming-hero-art{ order:-1; max-width:240px; margin:0 auto; }
}

/* ---------- Service cards ---------- */
.naming-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .naming-cards{ grid-template-columns:1fr; } }

.naming-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px 26px; text-align:center; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:transform var(--transition), box-shadow var(--transition);
}
.naming-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.naming-card::before{ content:''; position:absolute; inset:0 0 auto 0; height:5px; }
.naming-card.cat-brand{ background:linear-gradient(165deg, var(--gold-tint) 0%, #fff 55%); }
.naming-card.cat-brand::before{ background:linear-gradient(90deg, var(--gold), var(--gold-dark)); }
.naming-card.cat-company{ background:linear-gradient(165deg, var(--accent-tint) 0%, #fff 55%); }
.naming-card.cat-company::before{ background:linear-gradient(90deg, var(--accent), var(--accent-dark)); }
.naming-card.cat-site{ background:linear-gradient(165deg, var(--brand-tint) 0%, #fff 55%); }
.naming-card.cat-site::before{ background:linear-gradient(90deg, var(--brand), var(--brand-dark)); }

.naming-icon{
  width:68px; height:68px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:var(--shadow-sm); margin-bottom:6px;
}
.naming-card.cat-brand .naming-icon{ color:var(--gold-dark); }
.naming-card.cat-company .naming-icon{ color:var(--accent-dark); }
.naming-card.cat-site .naming-icon{ color:var(--brand-dark); }
.naming-icon svg{ width:32px; height:32px; }

.naming-card h3{ font-size:1.08rem; margin:0; }
.naming-card p{ color:var(--text-muted); font-size:.86rem; line-height:1.9; margin:0 0 8px; }

/* ---------- Consultation form ---------- */
.naming-form-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:start; }
@media (max-width:860px){ .naming-form-grid{ grid-template-columns:1fr; } }
.naming-form-text h2{ color:#fff; margin:12px 0 14px; }
.naming-form-text p{ color:rgba(255,255,255,.82); line-height:1.9; }
.naming-form-text .eyebrow{ color:var(--gold-tint); }
.naming-form-text .eyebrow .dot{ background:var(--gold-tint); }

.naming-form{
  background:#fff; border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-card);
  border-top:4px solid var(--gold);
}
.naming-form .form-row{ margin-bottom:16px; }
.naming-form label{ display:block; font-size:.82rem; color:var(--text-muted); margin-bottom:6px; }
.naming-form input, .naming-form select, .naming-form textarea{
  width:100%; background:var(--surface); border:1.5px solid var(--border); border-radius:8px;
  padding:11px 14px; font-family:var(--font-body); font-size:.9rem; color:var(--text);
  transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.naming-form textarea{ min-height:90px; resize:vertical; }
.naming-form input:focus, .naming-form select:focus, .naming-form textarea:focus{
  background:#fff; border-color:var(--brand); box-shadow:0 0 0 3px rgba(14,107,78,.12);
}

/* ---------- Real AI naming assistant tool ---------- */
.naming-tool-panel{
  background:linear-gradient(165deg, var(--brand-tint) 0%, var(--gold-tint) 100%);
  border:1px solid #D8E4DD; border-radius:var(--radius-lg); padding:30px;
}
.naming-tool-panel form{ max-width:none; }
.naming-tool-panel .form-row{ margin-bottom:16px; }
.naming-tool-panel label{ display:block; font-size:.82rem; color:var(--text-muted); margin-bottom:6px; }
.naming-tool-panel input, .naming-tool-panel select, .naming-tool-panel textarea{
  width:100%; background:#fff; border:1.5px solid #D3C9A6; border-radius:8px;
  padding:11px 14px; font-family:var(--font-body); font-size:.9rem; color:var(--text);
  transition:border-color var(--transition), box-shadow var(--transition);
}
.naming-tool-panel textarea{ min-height:80px; resize:vertical; }
.naming-tool-panel input:focus, .naming-tool-panel select:focus, .naming-tool-panel textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(14,107,78,.12);
}
.naming-tool-panel .modal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .naming-tool-panel .modal-grid{ grid-template-columns:1fr; } }

.tool-loading{ text-align:center; padding:26px; color:var(--text-muted); font-size:.88rem; }
.naming-tool-results:not(:empty){ margin-top:24px; }
.tool-results-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:14px; }
.tool-suggestion-card{
  background:#fff; border:1px solid #D8E4DD; border-radius:var(--radius-md); padding:18px;
  display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow-sm);
}
.tool-suggestion-name{ font-weight:800; font-size:1.05rem; color:var(--brand-dark); direction:ltr; text-align:center;
  background:var(--brand-tint); border-radius:8px; padding:10px; }
.tool-suggestion-card p{ color:var(--text-muted); font-size:.82rem; line-height:1.8; margin:0; flex:1; }

.error{ color:var(--live); font-size:.82rem; margin:6px 0 0; min-height:1.1em; }
.empty{ text-align:center; padding:30px; color:var(--text-muted); background:var(--surface); border-radius:var(--radius-md); }