/* =============================================================
   Shared stylesheet for Auki AI service pages
   (/services/web-design, /services/ai-voice-agent, and the rest).

   All service pages use the main site's palette and typography —
   deliberately NOT the Nova product theme, which is a separate
   design system with its own cyan accent and system font stack.

   Page-specific rules stay in the page's own <style> block; anything
   that should look identical across every service page belongs here.
   ============================================================= */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#04040a;
  --surface:#0a0a14;
  --surface2:#10101c;
  --accent:#00f5c3;
  --accent2:#4d7cff;
  --red:#ff4d6d;
  --text:#eeeef5;
  --muted:#5a5a72;
  --border:rgba(0,245,195,0.1);
  --font-d:'Plus Jakarta Sans',sans-serif;
  --font-b:'Inter',sans-serif;
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);line-height:1.6;-webkit-font-smoothing:antialiased}

/* Farsi / RTL. The logo wordmark keeps its Latin face. */
[dir=rtl] body{font-family:'Vazirmatn',sans-serif}
[dir=rtl] *:not(.logo):not(em){font-family:'Vazirmatn',sans-serif!important;letter-spacing:0!important}

.wrap{max-width:1100px;margin:0 auto;padding:2rem 1.5rem 5rem}

/* ---- Header ------------------------------------------------- */

/* ---- Hero --------------------------------------------------- */
.eyebrow{display:inline-block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:1rem}
h1{font-family:var(--font-d);font-weight:800;font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;letter-spacing:-.03em;margin-bottom:1.2rem}
h1 .g{background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lede{color:var(--muted);font-size:1.05rem;max-width:640px;margin-bottom:3.5rem}

/* ---- Section label (rendered as an h2) ---------------------- */
.s-label{display:flex;align-items:center;gap:.6rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:1.2rem}
.s-label::before{content:'';width:24px;height:1px;background:var(--accent)}
[dir=rtl] .s-label::before{order:2}

/* ---- Benefit / offering cards ------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;margin-bottom:4.5rem}
.card{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1.8rem;transition:border-color .2s,transform .2s}
.card:hover{border-color:rgba(0,245,195,.35);transform:translateY(-2px)}
.card .ic{font-size:1.6rem;display:block;margin-bottom:.9rem}
.card h3{font-family:var(--font-d);font-weight:700;font-size:1.02rem;margin-bottom:.5rem;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:.88rem;line-height:1.65}

/* ---- Order form --------------------------------------------- */
.form-box{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:2.5rem}
.form-box h3{font-family:var(--font-d);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;margin-bottom:.5rem}
.form-box .sub{color:var(--muted);font-size:.9rem;margin-bottom:2rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fg{margin-bottom:1.1rem}
.fg label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.45rem;font-weight:600}
.fg .req{color:var(--accent)}
.fg input,.fg select,.fg textarea{width:100%;padding:.85rem;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:2px;font-family:inherit;font-size:.9rem}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--accent)}
.fg textarea{min-height:130px;resize:vertical}
.submit{width:100%;padding:1.05rem;background:var(--accent);color:#04040a;border:none;border-radius:2px;font-family:var(--font-d);font-weight:700;font-size:.9rem;cursor:pointer;transition:opacity .2s;margin-top:.5rem}
.submit:hover{opacity:.88}
.submit:disabled{opacity:.55;cursor:not-allowed}

/* ---- Footer -------------------------------------------------- */
footer{border-top:1px solid var(--border);padding:2rem 1.5rem;text-align:center;color:var(--muted);font-size:.8rem}
footer a{color:var(--accent);text-decoration:none}

@media(max-width:640px){
  .row{grid-template-columns:1fr}
  .form-box{padding:1.5rem}
  .wrap{padding:1.5rem 1rem 3rem}
}

/* ---- iOS zoom guard --------------------------------------------------
   Safari on iOS zooms the whole page when a focused form control has a
   font-size below 16px, forcing the reader to pinch back out. Scoped to
   the mobile breakpoint so desktop density is unchanged. !important is
   needed because several inputs carry their font-size inline. */
@media(max-width:900px){
  input,select,textarea{font-size:16px !important}
}