/* ==========================================================================
   أوبستاي (Obstay) — customer site design system
   One source of truth for tokens. Colors sampled from website/*.png mockups;
   type from ref/Geusty_PMS_Prototype.html (IBM Plex Sans Arabic + IBM Plex Sans).
   ========================================================================== */

/* -------- 1. Tokens ------------------------------------------------------ */
:root{
  /* brand — emerald scale, sampled from the mockups */
  --brand:#10b981;          /* primary CTA / accent      (sampled #10b880) */
  --brand-hover:#14c48c;    /* hover: lighter + glow      (Buttons.png)    */
  --brand-active:#059669;   /* pressed                    (Buttons.png)    */
  --brand-press:#047857;
  --forest:#064e3b;         /* headings, dark bands, hero (sampled #064e3b) */
  --forest-2:#0b5d47;       /* forest gradient partner                     */
  --mint:#e7f6ee;           /* stat band, pills, hover tints               */
  --mint-2:#d1fae5;         /* icon circles / success ring                 */
  --brand-line:rgba(16,185,129,.40); /* expanded-faq / focus outline       */

  /* neutrals — slate/gray */
  --ink:#111827;            /* primary text            */
  --ink-2:#1f2937;
  --muted:#6b7280;          /* secondary text (AA on white) */
  --muted-2:#9aa3af;        /* placeholders / captions */
  --border:#e5e7eb;         /* fields, dividers        */
  --border-2:#eef1f4;       /* soft dividers           */
  --bg:#f9fafb;             /* page background         */
  --bg-2:#f4f6f8;           /* alt sections            */
  --card:#ffffff;

  /* type */
  --font:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-latin:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;

  /* radii */
  --r-pill:999px; --r-card:20px; --r-lg:16px; --r-btn:11px; --r-input:11px;

  /* elevation */
  --sh-card:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sh-raise:0 2px 6px rgba(16,24,40,.05), 0 12px 28px -14px rgba(16,24,40,.22);
  --sh-float:0 8px 20px -12px rgba(16,24,40,.18), 0 30px 60px -30px rgba(16,24,40,.30);
  --sh-glow:0 10px 22px -8px rgba(16,185,129,.55);

  /* layout */
  --maxw:1200px; --gutter:clamp(20px,5vw,40px);
  --sp-section:clamp(64px,9vw,120px);
}

/* -------- 2. Reset & base ---------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font);
  font-size:16px; line-height:1.8;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:none; cursor:pointer}
:focus-visible{outline:3px solid var(--brand-line); outline-offset:2px; border-radius:6px}
::selection{background:var(--mint-2); color:var(--forest)}

/* -------- 3. Typography ------------------------------------------------ */
h1,h2,h3,h4{line-height:1.32; font-weight:700; color:var(--ink); letter-spacing:0}
.h-forest{color:var(--forest)}
.display{font-size:clamp(2.1rem,1.2rem + 3.9vw,3.5rem); line-height:1.28; font-weight:700}
.h2{font-size:clamp(1.7rem,1.1rem + 2.4vw,2.5rem); line-height:1.3}
.h3{font-size:clamp(1.35rem,1.05rem + 1.1vw,1.75rem)}
.lead{font-size:clamp(1.02rem,.98rem + .35vw,1.18rem); color:var(--muted); line-height:1.85}
.muted{color:var(--muted)}
.latin{font-family:var(--font-latin)}
.tnum{font-family:var(--font-latin); font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums}
p{text-wrap:pretty}

/* -------- 4. Layout ---------------------------------------------------- */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--sp-section)}
.section--tight{padding-block:clamp(48px,7vw,80px)}
.section--alt{background:var(--bg-2)}
.section-head{max-width:640px; margin-inline:auto; text-align:center; margin-bottom:clamp(40px,6vw,64px)}
.section-head .lead{margin-top:14px}
.stack-sm>*+*{margin-top:12px}
.center{text-align:center}

/* eyebrow pill */
.eyebrow{
  display:inline-block; font-size:.82rem; font-weight:600;
  color:var(--forest); background:var(--mint);
  padding:7px 16px; border-radius:var(--r-pill); margin-bottom:18px;
}

/* -------- 5. Buttons --------------------------------------------------- */
.btn{
  --_bg:var(--brand); --_fg:#fff; --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:1rem; font-weight:600; line-height:1;
  padding:14px 26px; border-radius:var(--r-btn);
  background:var(--_bg); color:var(--_fg);
  border:1.5px solid var(--_bd);
  transition:background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .12s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--brand-hover); box-shadow:var(--sh-glow)}
.btn:active{background:var(--brand-active); transform:translateY(1px); box-shadow:none}
.btn[disabled],.btn.is-disabled{background:var(--border); color:var(--muted-2); box-shadow:none; cursor:not-allowed; transform:none}

.btn--lg{padding:16px 30px; font-size:1.05rem}
.btn--sm{padding:10px 18px; font-size:.9rem}
.btn--block{display:flex; width:100%}

.btn--secondary{--_bg:#fff; --_fg:var(--ink); --_bd:var(--border)}
.btn--secondary:hover{background:#fff; border-color:var(--brand); box-shadow:none; color:var(--ink)}
.btn--secondary:active{background:var(--mint); border-color:var(--brand); color:var(--forest); transform:translateY(1px)}
.btn--secondary[disabled]{background:#fff; border-color:var(--border-2); color:var(--muted-2)}

/* secondary sitting on the forest CTA band */
.btn--on-forest{--_bg:var(--brand); --_fg:#fff}

.btn--ghost{--_bg:transparent; --_fg:var(--forest); padding-inline:6px}
.btn--ghost:hover{background:transparent; box-shadow:none; text-decoration:underline; text-underline-offset:4px}

.link{color:var(--brand); font-weight:600}
.link:hover{color:var(--brand-active); text-decoration:underline; text-underline-offset:3px}
.link--forest{color:var(--forest)}

/* -------- 6. Forms ----------------------------------------------------- */
.field{display:block; margin-bottom:20px}
.field-label{display:block; font-size:.9rem; font-weight:600; color:var(--ink); margin-bottom:8px}
.field-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.input,.select,.textarea{
  width:100%; background:#fff; color:var(--ink);
  border:1.5px solid var(--border); border-radius:var(--r-input);
  padding:13px 16px; font-size:1rem; line-height:1.5;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-line)}
.textarea{min-height:132px; resize:vertical}
.select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 16px center; padding-inline-end:44px}

/* input with a trailing (eye) affordance — sits on the inline-end (left in RTL) */
.input-wrap{position:relative}
.input-wrap .input{padding-inline-end:46px}
.input-affix{position:absolute; inset-inline-end:12px; inset-block:0; display:flex; align-items:center; color:var(--muted); background:none}
.input-affix:hover{color:var(--forest)}

/* password strength */
.pw-meter{display:flex; gap:6px; margin-top:12px}
.pw-meter span{height:5px; flex:1; border-radius:99px; background:var(--border); transition:background .2s ease}
.pw-meter[data-score="1"] span:nth-child(-n+1),
.pw-meter[data-score="2"] span:nth-child(-n+2),
.pw-meter[data-score="3"] span:nth-child(-n+3),
.pw-meter[data-score="4"] span:nth-child(-n+4){background:var(--brand)}
.pw-hint{font-size:.85rem; color:var(--brand); font-weight:600; margin-top:8px}

/* OTP */
.otp{display:flex; gap:12px; justify-content:center; direction:ltr; margin:8px 0 4px}
.otp input{
  width:56px; height:60px; text-align:center; font-size:1.5rem; font-weight:600;
  border:1.5px solid var(--border); border-radius:var(--r-input); background:#fff;
}
.otp input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-line)}

/* divider "أو" */
.or{display:flex; align-items:center; gap:16px; color:var(--muted); font-size:.9rem; margin:26px 0}
.or::before,.or::after{content:""; height:1px; flex:1; background:var(--border)}

/* social button */
.btn--social{--_bg:#fff; --_fg:var(--ink); --_bd:var(--border); font-weight:500}
.btn--social:hover{background:var(--bg); border-color:var(--border); box-shadow:none; color:var(--ink)}

/* -------- 7. Header ---------------------------------------------------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border-2)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px}
.brand{display:inline-flex; flex-direction:row-reverse; align-items:center; gap:10px; font-weight:700; font-size:1.3rem; color:var(--forest)}
.brand-mark{width:34px; height:34px; border-radius:9px; background:var(--brand); display:grid; place-items:center; color:#fff; flex:none; box-shadow:0 4px 10px -3px rgba(16,185,129,.6)}
.brand-mark svg{width:19px; height:19px}
.nav-links{display:flex; align-items:center; gap:30px}
.nav-links a{color:var(--ink-2); font-weight:500; font-size:.98rem; padding:6px 2px; position:relative}
.nav-links a:hover{color:var(--forest)}
.nav-links a[aria-current="page"]{color:var(--forest); font-weight:600}
.nav-cta{display:flex; align-items:center; gap:12px}
.nav-toggle{display:none; width:44px; height:44px; border-radius:10px; color:var(--ink); align-items:center; justify-content:center}
.nav-toggle:hover{background:var(--bg-2)}

/* -------- 8. Footer ---------------------------------------------------- */
.site-footer{background:var(--card); border-top:1px solid var(--border-2); padding-block:clamp(48px,7vw,72px) 0}
.footer-grid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px}
.footer-about{max-width:320px}
.footer-about .brand{margin-bottom:16px}
.footer-about p{color:var(--muted); font-size:.95rem}
.footer-social{display:flex; gap:14px; margin-top:20px}
.footer-social a{width:22px; height:22px; color:var(--muted)}
.footer-social a:hover{color:var(--forest)}
.footer-col h4{font-size:.95rem; font-weight:700; color:var(--ink); margin-bottom:16px}
.footer-col a{display:block; color:var(--muted); font-size:.95rem; padding:6px 0}
.footer-col a:hover{color:var(--forest)}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:clamp(40px,6vw,56px); padding-block:24px; border-top:1px solid var(--border-2); color:var(--muted); font-size:.88rem}
.footer-bottom nav{display:flex; gap:26px}
.footer-bottom a:hover{color:var(--forest)}

/* -------- 9. Hero (landing) ------------------------------------------- */
.hero{padding-block:clamp(48px,7vw,84px) clamp(56px,8vw,96px)}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:clamp(32px,5vw,64px)}
.hero-copy .display{margin:6px 0 20px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero-assure{display:flex; flex-wrap:wrap; gap:24px; margin-top:28px; color:var(--muted); font-size:.92rem}
.hero-assure li{display:flex; align-items:center; gap:8px; list-style:none}
.hero-assure .ic{color:var(--brand)}
.hero-media{position:relative}
.hero-media img{width:100%; border-radius:var(--r-lg); border:1px solid var(--border-2); box-shadow:var(--sh-float)}
.hero-media::before{content:""; position:absolute; inset:auto -6% -10% 20%; height:70%; background:radial-gradient(60% 60% at 50% 50%, rgba(16,185,129,.16), transparent 70%); filter:blur(20px); z-index:-1}

/* -------- 10. Trust logos --------------------------------------------- */
.trust{text-align:center}
.trust h2{font-size:clamp(1.3rem,1rem + 1.2vw,1.7rem); color:var(--muted); font-weight:600; margin-bottom:32px}
.trust-logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(32px,6vw,72px)}
.trust-logos img,.trust-logos span{height:30px; opacity:.85; filter:grayscale(.15)}
.trust-logos .logo{font-size:1.5rem; font-weight:700; color:var(--muted); opacity:.7}

/* -------- 11. Stats band ---------------------------------------------- */
.stats-band{background:var(--mint)}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
.stat .num{font-family:var(--font-latin); font-weight:700; font-size:clamp(2.1rem,1.4rem + 2.4vw,3.1rem); line-height:1.1; color:var(--forest)}
.stat .lbl{color:var(--muted); font-size:.98rem; margin-top:6px}

/* -------- 12. Feature rows -------------------------------------------- */
.feature{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(36px,6vw,80px)}
.feature+.feature{margin-top:clamp(64px,9vw,112px)}
.feature--flip .feature-media{order:-1}
.feature-copy .h3{color:var(--forest); margin-bottom:16px}
.feature-copy p{color:var(--muted); margin-bottom:24px}
.feature-media img{width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-raise)}
.feature-media.plain img{box-shadow:none}

/* -------- 13. Pricing ------------------------------------------------- */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch}
.price-card{background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:32px 28px; display:flex; flex-direction:column; box-shadow:var(--sh-card)}
.price-card .tier{font-size:1.15rem; font-weight:700; color:var(--ink)}
.price-card .amt{font-family:var(--font-latin); font-weight:700; font-size:2.6rem; line-height:1.1; margin-top:14px; color:var(--ink)}
.price-card .amt small{font-family:var(--font); font-size:.95rem; font-weight:500; color:var(--muted)}
.price-card .cap{color:var(--muted); font-size:.9rem; margin-top:4px}
.price-card hr{border:none; border-top:1px solid var(--border); margin:22px 0}
.price-card .feats{list-style:none; display:grid; gap:14px; margin-bottom:26px}
.price-card .feats li{display:flex; align-items:flex-start; gap:10px; color:var(--ink-2); font-size:.96rem}
.price-card .feats .ic{color:var(--brand); flex:none; margin-top:3px}
.price-card .btn{margin-top:auto}
.price-card--pop{background:var(--forest); border-color:var(--forest); color:#fff; position:relative; box-shadow:var(--sh-float)}
.price-card--pop .tier,.price-card--pop .amt{color:#fff}
.price-card--pop .amt small,.price-card--pop .cap,.price-card--pop .feats li{color:rgba(255,255,255,.85)}
.price-card--pop hr{border-color:rgba(255,255,255,.16)}
.price-card--pop .feats .ic{color:#6ee7b7}
.price-badge{position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--brand); color:#fff; font-size:.78rem; font-weight:600; padding:6px 16px; border-radius:var(--r-pill); white-space:nowrap}

/* -------- 14. FAQ accordion ------------------------------------------- */
.faq{max-width:820px; margin-inline:auto; display:grid; gap:16px}
.faq-item{border:1px solid var(--border); border-radius:var(--r-lg); background:#fff; transition:border-color .18s ease, background .18s ease, box-shadow .18s ease}
.faq-item[open]{border-color:var(--brand); background:#fff; box-shadow:0 6px 20px -12px rgba(16,185,129,.4)}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:start; padding:20px 22px; font-size:1.02rem; font-weight:600; color:var(--ink); list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-item[open] .faq-q{color:var(--forest)}
.faq-ic{flex:none; width:22px; height:22px; color:var(--brand); position:relative; transition:transform .2s ease}
.faq-ic::before,.faq-ic::after{content:""; position:absolute; background:currentColor; border-radius:2px; left:50%; top:50%; transform:translate(-50%,-50%)}
.faq-ic::before{width:14px; height:2px}
.faq-ic::after{width:2px; height:14px; transition:height .2s ease, opacity .2s ease}
.faq-item[open] .faq-ic::after{height:0; opacity:0}
.faq-a{padding:0 22px 22px; color:var(--muted); line-height:1.9}
.faq-a::before{content:""; display:block; height:1px; background:var(--border-2); margin-bottom:16px}

/* -------- 15. CTA band ------------------------------------------------ */
.cta-band{position:relative; overflow:hidden; background:linear-gradient(135deg,var(--forest),var(--forest-2)); color:#fff; border-radius:28px; text-align:center; padding:clamp(48px,7vw,80px) clamp(24px,5vw,64px)}
.cta-band::before,.cta-band::after{content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.05); pointer-events:none}
.cta-band::before{width:340px; height:340px; inset-block-start:-140px; inset-inline-start:-80px}
.cta-band::after{width:260px; height:260px; inset-block-end:-150px; inset-inline-end:-60px; background:rgba(16,185,129,.12)}
.cta-band h2{color:#fff; position:relative}
.cta-band p{color:rgba(255,255,255,.82); max-width:620px; margin:16px auto 0; position:relative}
.cta-band .btn{margin-top:30px; position:relative}
.cta-band .micro{margin-top:18px; color:rgba(255,255,255,.7); font-size:.9rem; position:relative}

/* -------- 16. Auth ---------------------------------------------------- */
.auth-page{min-height:100vh; display:flex; flex-direction:column}
.auth-main{flex:1; display:flex; align-items:center; justify-content:center; padding:48px var(--gutter)}
.auth-card{width:100%; max-width:460px; background:var(--card); border-radius:24px; box-shadow:var(--sh-float); padding:clamp(30px,5vw,44px)}
.auth-card--wide{max-width:520px}
.auth-brand{display:flex; justify-content:center; margin-bottom:22px}
.auth-head{text-align:center; margin-bottom:28px}
.auth-head h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.05rem); color:var(--forest); margin-bottom:10px}
.auth-head p{color:var(--muted); font-size:.98rem; line-height:1.7}
.auth-alt{text-align:center; margin-top:22px; color:var(--muted); font-size:.95rem}
.auth-foot{text-align:center; color:var(--muted); font-size:.82rem; padding:24px var(--gutter) 40px}
.auth-foot nav{display:inline-flex; gap:22px; margin-inline-start:20px}
.auth-foot a:hover{color:var(--forest)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.resend{text-align:center; margin-top:20px; color:var(--muted); font-size:.94rem}
.resend-clock{color:var(--muted); margin-inline-start:6px}
.resend-link.is-off{color:var(--muted-2); pointer-events:none}
.back-link{display:block; text-align:center; margin-top:14px; color:var(--muted); font-size:.94rem}
.back-link:hover{color:var(--forest)}

/* success check (password-changed) */
.success-ring{width:84px; height:84px; border-radius:50%; background:var(--mint-2); display:grid; place-items:center; margin:6px auto 22px; color:var(--brand)}
.success-ring svg{width:38px; height:38px}

/* -------- 17. Help page ----------------------------------------------- */
.help-hero{background:linear-gradient(135deg,var(--forest),var(--forest-2)); color:#fff; text-align:center; padding:clamp(56px,8vw,88px) var(--gutter)}
.help-hero h1{color:#fff; font-size:clamp(1.5rem,1.1rem + 1.8vw,2.1rem); max-width:640px; margin:0 auto 28px; font-weight:600; line-height:1.6; color:rgba(255,255,255,.92)}
.help-search{position:relative; max-width:640px; margin-inline:auto}
.help-search .input{padding-block:18px; padding-inline-start:52px; border:none; box-shadow:var(--sh-raise); font-size:1.02rem}
.help-search .ic{position:absolute; inset-inline-start:18px; inset-block:0; display:flex; align-items:center; color:var(--muted)}
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.cat-card{background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:32px 24px; text-align:center; box-shadow:var(--sh-card); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.cat-card:hover{transform:translateY(-3px); box-shadow:var(--sh-raise); border-color:var(--brand-line)}
.cat-ic{width:56px; height:56px; border-radius:50%; background:var(--mint); color:var(--brand); display:grid; place-items:center; margin:0 auto 18px}
.cat-ic svg{width:26px; height:26px}
.cat-card h3{font-size:1.05rem; color:var(--ink)}
.help-cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,72px); align-items:start}
.help-cols h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.8rem); margin-bottom:26px}
.article-list{display:grid}
.article-list a{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 4px; border-bottom:1px solid var(--border-2); color:var(--forest); font-weight:500}
.article-list a:hover{color:var(--brand)}
.article-list a .chev{color:var(--muted-2); flex:none}
.support-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.support-card{background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:32px 26px; text-align:center; box-shadow:var(--sh-card)}
.support-card .cat-ic{margin-bottom:14px}
.support-card h3{font-size:1.1rem; margin-bottom:6px}
.support-card p{color:var(--muted); font-size:.9rem; margin-bottom:20px}

/* -------- 18. Sales page ---------------------------------------------- */
.sales-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,5vw,64px); align-items:start}
.form-card{background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:clamp(28px,4vw,40px); box-shadow:var(--sh-card)}
.why-list{list-style:none; display:grid; gap:22px; margin:8px 0 40px}
.why-list li{display:flex; align-items:flex-start; gap:14px; color:var(--ink-2)}
.why-list .ic{flex:none; width:24px; height:24px; border-radius:50%; background:var(--mint); color:var(--brand); display:grid; place-items:center; margin-top:2px}
.why-list .ic svg{width:14px; height:14px}
.testimonial{background:var(--bg); border:1px solid var(--border-2); border-radius:var(--r-card); padding:28px}
.testimonial blockquote{color:var(--ink-2); font-size:1.02rem; line-height:1.9}
.testimonial figcaption{display:flex; align-items:center; gap:12px; margin-top:20px}
.testimonial img{width:48px; height:48px; border-radius:50%; object-fit:cover}
.testimonial .name{font-weight:700; color:var(--ink)}
.testimonial .role{color:var(--muted); font-size:.88rem}
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:clamp(48px,7vw,72px)}
.contact-card{background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:30px; text-align:center; box-shadow:var(--sh-card)}
.contact-card .cat-ic{width:48px; height:48px; margin-bottom:14px}
.contact-card h3{font-size:1rem; color:var(--muted); font-weight:600; margin-bottom:8px}
.contact-card .val{font-weight:700; color:var(--forest)}
.contact-card a.val:hover{color:var(--brand)}

/* -------- 19. About page ---------------------------------------------- */
.about-hero{text-align:center; padding-block:clamp(48px,7vw,80px) 0}
.about-hero h1{max-width:820px; margin-inline:auto}
.about-hero .lead{max-width:640px; margin:16px auto 0}
.about-photo{margin-top:clamp(40px,6vw,56px); border-radius:24px; overflow:hidden; box-shadow:var(--sh-float)}
.about-photo img{width:100%; object-fit:cover}
.about-photo--art{aspect-ratio:16/11}
.mission-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,72px); align-items:center}
.mission-grid .h2{color:var(--forest); margin:8px 0 18px}
.mission-grid p{color:var(--muted)}

/* -------- 20. Utilities & responsive ---------------------------------- */
.mobile-only{display:none}
.no-scroll{overflow:hidden}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* form feedback (onboarding) */
.form-msg{margin:2px 0 6px; padding:11px 14px; border-radius:var(--r-input); font-size:.9rem; font-weight:500; background:#fef2f2; color:#b42318; border:1px solid #fecdca}
.form-msg.is-ok{background:var(--mint); color:var(--forest); border-color:var(--brand-line)}
#reg-success .btn+.btn{margin-top:12px}

/* checkout: package radio cards + bank details */
.pkg-group{display:grid; gap:12px; margin-bottom:24px}
@media (min-width:560px){.pkg-group{grid-template-columns:repeat(3,1fr)}}
.pkg{position:relative; display:block; border:1.5px solid var(--border); border-radius:var(--r-lg); padding:16px 16px 14px; cursor:pointer; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease}
.pkg:hover{border-color:var(--brand-line)}
.pkg input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.pkg:has(input:checked){border-color:var(--brand); background:var(--mint)}
.pkg:has(input:focus-visible){outline:3px solid var(--brand-line); outline-offset:2px}
.pkg-body{display:flex; flex-direction:column; gap:3px}
.pkg-name{font-weight:700; color:var(--forest)}
.pkg-price{font-family:var(--font-latin); font-weight:700; font-size:1.3rem; color:var(--ink); line-height:1.1}
.pkg-price small{font-family:var(--font); font-size:.78rem; font-weight:500; color:var(--muted)}
.pkg-cap{font-size:.82rem; color:var(--muted)}
.pkg-badge{position:absolute; top:-9px; inset-inline-start:14px; background:var(--brand); color:#fff; font-size:.68rem; font-weight:600; padding:3px 10px; border-radius:var(--r-pill)}
.bank-box{background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 20px; margin:18px 0}
.bank-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; font-size:.94rem}
.bank-row+.bank-row{border-top:1px solid var(--border-2)}
.bank-row span{color:var(--muted)}
.bank-row strong{color:var(--ink); font-weight:600}

@media (max-width:960px){
  .hero-grid,.feature,.mission-grid,.help-cols,.sales-grid{grid-template-columns:1fr}
  .feature--flip .feature-media{order:0}
  .hero-media{max-width:560px; margin-inline:auto}
  .stats-grid,.footer-grid,.cat-grid{grid-template-columns:repeat(2,1fr)}
  .footer-about{grid-column:1/-1; max-width:none}
  .pricing-grid,.support-grid,.contact-cards{grid-template-columns:1fr; max-width:440px; margin-inline:auto}
  .price-card--pop{order:-1}

  .nav-links,.nav-cta .btn--secondary{display:none}
  .nav-toggle{display:flex}
  .nav[data-open="true"] .nav-links{
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    position:absolute; inset-inline:var(--gutter); top:70px;
    background:#fff; border:1px solid var(--border); border-radius:var(--r-card);
    padding:12px; box-shadow:var(--sh-float);
  }
  .nav[data-open="true"] .nav-links a{padding:12px 14px; border-radius:10px}
  .nav[data-open="true"] .nav-links a:hover{background:var(--bg)}
}
@media (max-width:560px){
  .stats-grid,.cat-grid{grid-template-columns:1fr 1fr; gap:16px}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:14px}
  .grid-2{grid-template-columns:1fr}
  .otp input{width:46px; height:52px; font-size:1.25rem}
  .auth-foot nav{display:flex; flex-wrap:wrap; justify-content:center; margin:12px 0 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .btn:active{transform:none}
}