/* ==========================================================================
   OdontoHamad — Marketing Site Stylesheet
   Built on the Oceanic design system (Sora + DM Mono, deep-sea palette)
   ========================================================================== */

:root{
  --cp:#1A4A5E;   --cph:#133849;  --cpm:#2D6880;  --cpt:#D0E5EE;
  --ca:#5B9BB5;   --cad:#3F7A93;  --cas:#E2F0F6;  --cap:#F0F8FC;
  --ch:#4BA893;   --chd:#37856F;  --chs:#DDF2ED;  --chg:#C0EAE2;
  --cw:#C8823A;   --cws:#FBF0E4;
  --ce:#C0424A;   --ces:#FAE6E7;
  --cx:#7E57C2;   --cxs:#EFE8F9; /* local anesthesia purple */
  --cbg:#EDF4F8;  --cs:#FFFFFF;  --csa:#E2ECF2;
  --cb:#C8D8E2;   --cbs:#9DB8C7;
  --ct1:#0D2535;  --ct2:#1A4A5E; --ct3:#6C7E87; --ct4:#96A8B0; --ct5:#BDC9CE;
  --midnight:#0D2535;
  --shsm:0 2px 8px rgba(26,74,94,.08);
  --shmd:0 8px 24px rgba(26,74,94,.12);
  --shlg:0 24px 56px rgba(13,37,53,.18);
  --radius-s:10px; --radius-m:16px; --radius-l:24px;
  --maxw:1180px;
}

[data-theme="dark"]{
  --cp:#5B9BB5;   --cph:#72B0C8;  --cpm:#3D7A94;  --cpt:#0D2535;
  --ca:#7DBDD6;   --cad:#9DCFE6;  --cas:#0E2A38;  --cap:#0A1E29;
  --ch:#5DCAAF;   --chd:#7EDAC3;  --chs:#0C2922;  --chg:#0F3330;
  --cw:#E8A05A;   --cws:#2A1A08;
  --ce:#E56B73;   --ces:#2A0C0E;
  --cx:#B49BE0;   --cxs:#241A38;
  --cbg:#0D2535;  --cs:#132F42;  --csa:#1A3A50;
  --cb:#1F4560;   --cbs:#2A5870;
  --ct1:#EDF4F8;  --ct2:#B0D4E4; --ct3:#8FA8B4; --ct4:#5A7280; --ct5:#2E4A5A;
  --shsm:0 2px 8px rgba(0,0,0,.3);
  --shmd:0 8px 24px rgba(0,0,0,.4);
  --shlg:0 24px 56px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Sora',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--cbg); color:var(--ct3); line-height:1.65;
  -webkit-font-smoothing:antialiased; transition:background .3s,color .3s;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.mono{font-family:'DM Mono',monospace;}

.skip-link{position:absolute;left:-999px;top:0;background:var(--cp);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;z-index:1000;}
.skip-link:focus{left:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ---------- Nav ---------- */
.site-nav{position:sticky;top:0;z-index:200;background:color-mix(in srgb, var(--cs) 88%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--cb);}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 28px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.nav-brand{display:flex;align-items:center;gap:11px;}
.nav-logo{width:34px;height:34px;border-radius:9px;box-shadow:var(--shsm);}
.nav-brandtext{display:flex;flex-direction:column;line-height:1.15;}
.nav-title{font-size:15px;font-weight:700;color:var(--ct1);letter-spacing:-.01em;}
.nav-sub{font-family:'DM Mono',monospace;font-size:10px;color:var(--ct4);letter-spacing:.08em;text-transform:uppercase;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-link{padding:9px 16px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ct3);transition:all .18s;}
.nav-link:hover,.nav-link.active{color:var(--cp);background:var(--csa);}
.nav-actions{display:flex;align-items:center;gap:10px;}
.theme-toggle{width:38px;height:38px;border-radius:10px;border:1px solid var(--cb);background:var(--cs);color:var(--ct3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;}
.theme-toggle:hover{border-color:var(--ca);color:var(--cp);}
.nav-toggle{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--cb);background:var(--cs);cursor:pointer;align-items:center;justify-content:center;}
.mobile-panel{display:none;flex-direction:column;gap:4px;padding:12px 28px 20px;border-bottom:1px solid var(--cb);background:var(--cs);}
.mobile-panel.open{display:flex;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:12px;font-family:'Sora',sans-serif;font-size:14.5px;font-weight:600;cursor:pointer;transition:all .18s;border:none;white-space:nowrap;}
.btn-primary{background:var(--cp);color:#fff;box-shadow:var(--shmd);}
.btn-primary:hover{background:var(--cph);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--ct2);border:1.5px solid var(--cb);}
.btn-ghost:hover{border-color:var(--ca);color:var(--cp);}
.btn-error{background:var(--ce);color:#fff;}
.btn-sm{padding:9px 18px;font-size:13px;border-radius:9px;}

/* ---------- Eyebrow / tags ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--cas);border:1px solid var(--cb);border-radius:99px;padding:6px 16px;font-family:'DM Mono',monospace;font-size:11px;font-weight:500;color:var(--ca);letter-spacing:.08em;text-transform:uppercase;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ch);}

/* ---------- Hero ---------- */
.hero{position:relative;padding:76px 0 64px;overflow:hidden;}
.hero-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;z-index:0;}
.hero-blob.b1{width:420px;height:420px;background:var(--ca);top:-140px;right:-120px;}
.hero-blob.b2{width:340px;height:340px;background:var(--ch);bottom:-160px;left:-100px;opacity:.22;}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero h1{font-size:46px;line-height:1.12;color:var(--ct1);letter-spacing:-.02em;font-weight:700;margin:20px 0 20px;}
.hero h1 em{font-style:normal;color:var(--cp);}
.hero p.lead{font-size:17px;color:var(--ct3);max-width:520px;margin-bottom:32px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px;}
.store-badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.store-badges img{height:48px;width:auto;border-radius:8px;}
.hero-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;}
.hero-meta-item{display:flex;flex-direction:column;gap:2px;}
.hero-meta-num{font-family:'DM Mono',monospace;font-size:20px;font-weight:500;color:var(--ct1);}
.hero-meta-label{font-size:11.5px;color:var(--ct4);font-family:'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;}

/* Hero visual: stylized app preview built from CSS, not a screenshot */
.hero-visual{position:relative;display:flex;justify-content:center;}
.phone-mock{width:270px;background:var(--midnight);border-radius:36px;padding:14px;box-shadow:var(--shlg);position:relative;}
.phone-notch{width:90px;height:22px;background:var(--midnight);border-radius:0 0 14px 14px;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:3;}
.phone-screen{background:var(--cbg);border-radius:24px;padding:20px 14px 16px;min-height:490px;position:relative;overflow:hidden;}
.phone-screen .mock-hero{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.mock-logo{width:30px;height:30px;border-radius:8px;box-shadow:var(--shsm);}
.mock-greet{font-size:11px;color:var(--ct4);font-family:'DM Mono',monospace;}
.mock-greet strong{display:block;font-family:'Sora',sans-serif;font-size:13.5px;color:var(--ct1);font-weight:700;}
.mock-tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.mock-tile{border-radius:14px;padding:12px 10px;height:74px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shsm);}
.mock-tile svg{width:18px;height:18px;}
.mock-tile span{font-size:10.5px;font-weight:600;}
.mock-tile.solid{background:var(--cp);color:#fff;}
.mock-tile.t1{background:var(--cas);color:var(--cp);}
.mock-tile.t2{background:var(--chs);color:var(--chd);}
.mock-tile.t3{background:var(--cws);color:var(--cw);}
.mock-tile.t4{background:var(--cxs);color:var(--cx);}
.mock-emerg{margin-top:10px;background:linear-gradient(120deg,var(--ce),#a53540);border-radius:14px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;color:#fff;box-shadow:var(--shmd);}
.mock-emerg span{font-size:11.5px;font-weight:700;}
.mock-emerg small{font-family:'DM Mono',monospace;font-size:9.5px;opacity:.85;}

/* ---------- Section shell ---------- */
section{padding:88px 0;}
.section-head{max-width:640px;margin:0 auto 52px;text-align:center;}
.section-head.left{margin:0 0 48px;text-align:left;}
.section-head h2{font-size:32px;color:var(--ct1);font-weight:700;letter-spacing:-.015em;margin:16px 0 14px;}
.section-head p{font-size:15.5px;color:var(--ct3);}
.section-alt{background:var(--cs);}

/* ---------- Feature tiles (9 clinical sections) ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.feature-card{position:relative;overflow:hidden;background:var(--cs);border:1px solid var(--cb);border-radius:var(--radius-m);padding:26px 24px;box-shadow:var(--shsm);transition:transform .22s,box-shadow .22s;}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shmd);}
.feature-card .blob{position:absolute;width:120px;height:120px;border-radius:50%;filter:blur(36px);opacity:.28;top:-40px;right:-40px;}
.feature-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--shsm);position:relative;z-index:1;}
.feature-icon svg{width:22px;height:22px;}
.feature-card h3{font-size:16px;color:var(--ct1);font-weight:700;margin-bottom:8px;position:relative;z-index:1;}
.feature-card p{font-size:13.5px;color:var(--ct3);position:relative;z-index:1;}
.feature-card.primary{background:var(--cp);border-color:var(--cp);}
.feature-card.primary h3,.feature-card.primary p{color:#fff;}
.feature-card.primary .feature-icon{background:rgba(255,255,255,.16);}
.feature-card.primary svg{color:#fff;}

/* ---------- Emergency banner ---------- */
.emergency-banner{position:relative;overflow:hidden;background:linear-gradient(120deg,#C0424A,#8f2e35);border-radius:var(--radius-l);padding:44px 40px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:var(--shlg);}
.pulse-ring{position:absolute;border:1.5px solid rgba(255,255,255,.5);border-radius:50%;animation:pulse 2.4s ease-out infinite;}
.pulse-ring.r1{width:140px;height:140px;right:-30px;top:-30px;}
.pulse-ring.r2{width:140px;height:140px;right:-30px;top:-30px;animation-delay:.8s;}
@keyframes pulse{0%{transform:scale(.6);opacity:.8;}100%{transform:scale(1.7);opacity:0;}}
@media (prefers-reduced-motion: reduce){.pulse-ring{animation:none;}}
.emergency-text h3{font-size:22px;font-weight:700;margin-bottom:8px;}
.emergency-text p{color:rgba(255,255,255,.88);font-size:14.5px;max-width:480px;}
.emergency-cta{flex-shrink:0;position:relative;z-index:1;}

/* ---------- Platform strip ---------- */
.platform-strip{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.platform-chip{display:flex;align-items:center;gap:10px;background:var(--cs);border:1px solid var(--cb);border-radius:99px;padding:11px 22px;font-size:13.5px;font-weight:600;color:var(--ct2);}
.platform-chip svg{width:18px;height:18px;color:var(--cp);}

/* ---------- Calculator/preview strip ---------- */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.calc-card{background:var(--cs);border:1px solid var(--cb);border-radius:var(--radius-m);padding:28px;box-shadow:var(--shsm);}
.calc-card h4{color:var(--ct1);font-size:15.5px;margin-bottom:10px;font-weight:700;}
.calc-card p{font-size:13.5px;}
.gauge-mini{width:88px;height:88px;border-radius:50%;background:conic-gradient(var(--cp) 0deg 260deg, var(--csa) 260deg 360deg);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.gauge-mini span{width:70px;height:70px;border-radius:50%;background:var(--cs);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-weight:600;color:var(--ct1);font-size:14px;}

/* ---------- Guideline strip ---------- */
.source-strip{display:flex;flex-wrap:wrap;gap:34px;justify-content:center;align-items:center;opacity:.85;}
.source-strip span{font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.06em;color:var(--ct4);font-weight:500;}

/* ---------- Bilingual card ---------- */
.split-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--cb);border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shmd);}
.split-half{padding:40px;}
.split-half.en{background:var(--cs);}
.split-half.ar{background:var(--cap);direction:rtl;font-family:'Sora',sans-serif;}
.split-half h4{color:var(--ct1);font-size:13px;font-family:'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;}
.split-half p{font-size:15px;color:var(--ct2);}

/* ---------- CTA band ---------- */
.cta-band{background:var(--midnight);border-radius:var(--radius-l);padding:64px 48px;text-align:center;position:relative;overflow:hidden;}
.cta-band h2{color:#fff;font-size:30px;margin-bottom:14px;}
.cta-band p{color:rgba(237,244,248,.75);max-width:480px;margin:0 auto 30px;}
.cta-band .hero-blob{opacity:.5;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--cb);padding:56px 0 34px;background:var(--cs);}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px;}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-logo{width:30px;height:30px;border-radius:8px;}
.footer-brandname{font-weight:700;color:var(--ct1);font-size:14.5px;}
.footer-desc{font-size:13px;max-width:280px;color:var(--ct4);}
.footer-col h5{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ct4);margin-bottom:14px;}
.footer-col a{display:block;font-size:13.5px;color:var(--ct3);margin-bottom:10px;transition:color .15s;}
.footer-col a:hover{color:var(--cp);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:26px;border-top:1px solid var(--cb);}
.footer-bottom p{font-size:12.5px;color:var(--ct4);}
.footer-legal-links{display:flex;gap:18px;}
.footer-legal-links a{font-size:12.5px;color:var(--ct4);}
.footer-legal-links a:hover{color:var(--cp);}

/* ---------- Legal / document pages ---------- */
.doc-hero{padding:56px 0 24px;border-bottom:1px solid var(--cb);}
.doc-hero h1{font-size:34px;color:var(--ct1);margin:16px 0 8px;}
.doc-meta{font-family:'DM Mono',monospace;font-size:12.5px;color:var(--ct4);}
.doc-layout{display:grid;grid-template-columns:240px 1fr;gap:56px;padding:56px 0 100px;align-items:start;}
.doc-toc{position:sticky;top:96px;border-left:2px solid var(--cb);padding-left:18px;}
.doc-toc a{display:block;font-size:13px;color:var(--ct4);padding:7px 0;transition:color .15s;}
.doc-toc a:hover{color:var(--cp);}
.doc-body h2{font-size:20px;color:var(--ct1);margin:40px 0 14px;scroll-margin-top:96px;}
.doc-body h2:first-child{margin-top:0;}
.doc-body h3{font-size:15.5px;color:var(--ct2);margin:22px 0 8px;}
.doc-body p{font-size:14.5px;margin-bottom:14px;color:var(--ct3);}
.doc-body ul{margin:0 0 16px 0;}
.doc-body li{font-size:14.5px;margin-bottom:8px;padding-left:18px;position:relative;color:var(--ct3);}
.doc-body li::before{content:"—";position:absolute;left:0;color:var(--ct5);}
.doc-body strong{color:var(--ct1);}
.doc-callout{background:var(--cas);border:1px solid var(--cb);border-left:3px solid var(--cp);border-radius:10px;padding:16px 20px;font-size:13.5px;margin:20px 0;color:var(--ct2);}
.doc-callout.warn{background:var(--cws);border-left-color:var(--cw);}
.doc-callout.err{background:var(--ces);border-left-color:var(--ce);}

/* ---------- Support page ---------- */
.support-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:56px;}
.support-card{background:var(--cs);border:1px solid var(--cb);border-radius:var(--radius-m);padding:28px;box-shadow:var(--shsm);}
.support-card .feature-icon{margin-bottom:14px;}
.support-card h3{color:var(--ct1);font-size:16px;margin-bottom:8px;}
.support-card p{font-size:13.5px;margin-bottom:14px;}
.faq-item{border-bottom:1px solid var(--cb);}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:20px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:'Sora',sans-serif;font-size:15px;font-weight:600;color:var(--ct1);gap:16px;}
.faq-q svg{flex-shrink:0;transition:transform .2s;color:var(--ct4);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{padding:0 0 20px;font-size:14px;color:var(--ct3);max-width:640px;}
.contact-list{display:flex;flex-direction:column;gap:16px;}
.contact-row{display:flex;align-items:center;gap:14px;padding:16px;background:var(--csa);border-radius:12px;}
.contact-row .feature-icon{margin-bottom:0;width:38px;height:38px;flex-shrink:0;}
.contact-row div strong{display:block;color:var(--ct1);font-size:14px;}
.contact-row div span{font-size:12.5px;color:var(--ct4);font-family:'DM Mono',monospace;}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1;margin-bottom:8px;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .doc-layout{grid-template-columns:1fr;}
  .doc-toc{display:none;}
  .split-card{grid-template-columns:1fr;}
  .support-grid{grid-template-columns:1fr;}
  .calc-grid{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .hero h1{font-size:32px;}
  .hero-grid{gap:36px;}
  section{padding:60px 0;}
  .feature-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .emergency-banner{flex-direction:column;text-align:center;padding:36px 26px;}
  .cta-band{padding:48px 24px;}
  .phone-mock{width:230px;}
}