/* ===================================================================
   ODEM — Clinic management for aesthetic and medical practices
   Design system  ·  deep green + cream + gold, modern/futuristic
   =================================================================== */

/* ----------  Fonts  ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ----------  Tokens  ---------- */
:root{
  /* greens — Odem brand palette */
  --green-950:#27332F;   /* derived deep — footer / cta depth */
  --green-900:#2F403D;   /* dark text / nav */
  --green-800:#3D504C;   /* brand green (primary) */
  --green-700:#465D58;   /* soft nav green */
  --green-600:#4F6862;   /* derived hover */
  --green-500:#56716B;   /* derived light */
  --green-200:#CAD3CF;   /* derived soft sage tint */

  /* cream / paper — brand palette */
  --cream:#F6F4ED;       /* page background */
  --cream-2:#F0EADC;     /* secondary surface */
  --cream-3:#E6DEC9;     /* derived (surface ↔ border) */
  --paper:#FFFDF7;       /* main surface */
  --linen:#EFEDE4;       /* linen */
  --surface-soft:#F8F5EC;/* soft surface */
  --taupe:#CABFA2;       /* taupe */
  --ink:#2F403D;         /* dark text */
  --ink-soft:#69726F;    /* muted text */
  --line:#DED7C6;        /* border */

  /* gold — brand gold #CCA566 + derived highlights */
  --gold-1:#CCA566;
  --gold-2:#DCC088;
  --gold-3:#B5904F;
  --gold-4:#D9BE84;
  --gold-grad:linear-gradient(120deg,#B5904F 0%,#CCA566 34%,#DCC088 60%,#CCA566 100%);
  --gold-grad-soft:linear-gradient(120deg,#CCA566,#DCC088);

  /* functional accents */
  --acc-blue:#557787;
  --acc-green:#4F7A64;
  --acc-amber:#A66F2B;
  --acc-red:#A25B4F;
  --acc-violet:#806F5C;

  /* type */
  --f-head:'Plus Jakarta Sans',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'Space Grotesk',system-ui,sans-serif;

  /* shape */
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;
  --shadow-sm:0 2px 8px rgba(20,40,31,.06);
  --shadow-md:0 18px 40px -18px rgba(20,40,31,.28);
  --shadow-lg:0 40px 90px -30px rgba(15,31,26,.45);
  --shadow-gold:0 18px 50px -16px rgba(181,144,79,.55);

  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----------  Reset  ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
section{position:relative}
#home,#features,#privacy,#clinics,#faq,#demo{scroll-margin-top:82px}

/* ----------  Layout helpers  ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sec{padding:clamp(44px,5.5vw,84px) 0}
.center{text-align:center}
.eyebrow{
  font-family:var(--f-mono);
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--acc-amber);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold-grad)}
.eyebrow.no-line::before{display:none}

h1,h2,h3,h4{font-family:var(--f-head);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--green-900)}
h1{font-size:clamp(2.5rem,6vw,4.4rem)}
h2{font-size:clamp(2rem,4.4vw,3.2rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:700}
#features .center h2{color:#111827}
.lede{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--ink-soft);max-width:60ch}
.muted{color:var(--ink-soft)}
.gold-text{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ----------  Buttons  ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--f-head);font-weight:700;font-size:.98rem;
  padding:.92em 1.5em;border-radius:var(--r-pill);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
  white-space:nowrap;position:relative;
}
.btn svg{width:18px;height:18px}
.btn-gold{color:#3b2a09;background:var(--gold-grad);background-size:200% 200%;box-shadow:var(--shadow-gold)}
.btn-gold:hover{transform:translateY(-3px);background-position:100% 50%;box-shadow:0 26px 60px -16px rgba(181,144,79,.7)}
.btn-green{background:var(--green-800);color:#fff}
.btn-green:hover{transform:translateY(-3px);background:var(--green-700);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--green-800);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--green-600);background:rgba(27,58,47,.04);transform:translateY(-3px)}
.btn-light{background:#fff;color:var(--green-800);box-shadow:var(--shadow-sm)}
.btn-light:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn-lg{padding:1.05em 1.9em;font-size:1.05rem}

/* ----------  Navbar  ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transition:background .4s,box-shadow .4s,padding .4s;
  padding:18px 0;
}
.nav.scrolled{
  background:rgba(247,243,234,.82);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 var(--line);padding:11px 0;
}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:.55em;font-family:var(--f-head);font-weight:800;font-size:1.4rem;color:var(--green-900)}
.brand__mark{width:34px;height:34px;flex:0 0 auto}
.brand__logo{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto}
.brand__logo img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
.brand__fallback{display:none;width:34px;height:34px}
.brand__logo.noimg img{display:none}
.brand__logo.noimg .brand__fallback{display:block}
.foot .brand__logo{width:44px;height:44px}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{font-weight:600;font-size:.96rem;color:var(--green-900);position:relative;padding:4px 0;opacity:.85;transition:opacity .2s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--gold-grad);transition:width .3s var(--ease)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after,.nav__links a.active::after{width:100%}
.nav__links a.active{opacity:1}
.nav__cta{display:flex;align-items:center;gap:14px}
.nav__signin{font-weight:600;color:var(--green-900)}
.nav__toggle{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center}
.nav__toggle span{display:block;width:22px;height:2px;background:var(--green-900);position:relative;transition:.3s}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--green-900);transition:.3s}
.nav__toggle span::before{top:-7px}.nav__toggle span::after{top:7px}
.nav__toggle.open span{background:transparent}
.nav__toggle.open span::before{top:0;transform:rotate(45deg)}
.nav__toggle.open span::after{top:0;transform:rotate(-45deg)}

@media(max-width:940px){
  .nav__links,.nav__signin{display:none}
  .nav__toggle{display:flex}
  .nav__menu{
    position:fixed;inset:0 0 0 auto;width:min(86vw,360px);
    background:var(--green-900);color:#fff;z-index:95;
    transform:translateX(100%);transition:transform .4s var(--ease);
    padding:96px 30px 30px;display:flex;flex-direction:column;gap:6px;
  }
  .nav__menu.open{transform:translateX(0)}
  .nav__menu a{font-family:var(--f-head);font-weight:600;font-size:1.15rem;color:#fff;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav__menu .btn{margin-top:20px;width:100%}
  .nav__scrim{position:fixed;inset:0;background:rgba(15,31,26,.5);backdrop-filter:blur(3px);z-index:94;opacity:0;visibility:hidden;transition:.3s}
  .nav__scrim.open{opacity:1;visibility:visible}
}
@media(min-width:941px){
  .nav__menu{display:flex;align-items:center;gap:30px;margin-left:auto}
  .nav__menu a:not(.btn){font-weight:600;font-size:.96rem;color:var(--green-900);position:relative;padding:4px 0;opacity:.85;transition:opacity .2s}
  .nav__menu a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--gold-grad);transition:width .3s var(--ease)}
  .nav__menu a:not(.btn):hover{opacity:1}
  .nav__menu a:not(.btn):hover::after,.nav__menu a.active:not(.btn)::after{width:100%}
  .nav__menu a.active:not(.btn){opacity:1}
  .nav__menu .btn{margin-left:8px}
  .nav__cta{display:none}
  .nav__scrim{display:none}
}

/* ----------  Hero  ---------- */
.hero{position:relative;padding:clamp(120px,16vw,180px) 0 clamp(60px,8vw,90px);overflow:hidden;
  background:linear-gradient(180deg,rgba(246,244,237,0) 76%,var(--cream) 100%),url('../assets/images/odem-hero-bg.svg') center/cover no-repeat,#f6f8fb}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:float 18s ease-in-out infinite}
.blob.b1{width:520px;height:520px;background:radial-gradient(circle,#CAD3CF,transparent 70%);top:-120px;left:-80px}
.blob.b2{width:460px;height:460px;background:radial-gradient(circle,#DCC088,transparent 70%);top:40px;right:-120px;opacity:.36;animation-delay:-6s}
.blob.b3{width:380px;height:380px;background:radial-gradient(circle,#56716B,transparent 70%);bottom:-160px;left:40%;opacity:.2;animation-delay:-11s}
.grid-overlay{position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 75%);
  opacity:.5;
}
.hero__inner{display:grid;gap:40px;text-align:center;place-items:center}
.pillrow{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:680px}
.pill{
  font-size:.82rem;font-weight:600;color:var(--green-700);
  background:rgba(255,255,255,.7);border:1px solid var(--line);
  padding:.45em 1em;border-radius:var(--r-pill);backdrop-filter:blur(6px);
}
.hero h1{max-width:16ch}
.hero .lede{margin:0 auto;text-align:center}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* stat strip */
.stats{display:flex;gap:clamp(24px,6vw,72px);flex-wrap:wrap;justify-content:center;padding-top:8px}
.stat{text-align:center}
.stat__n{font-family:var(--f-head);font-weight:800;font-size:clamp(1.8rem,3vw,2.5rem);color:var(--green-800);line-height:1}
.stat__l{font-size:.9rem;color:var(--ink-soft);margin-top:6px;max-width:18ch}

/* ----------  Coded product mockup  ---------- */
.mock{
  position:relative;margin:54px auto 0;max-width:1000px;
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fbf8f1);box-shadow:var(--shadow-lg);
}
.mock__bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);background:#fff}
.mock__bar i{width:11px;height:11px;border-radius:50%;display:block;background:var(--cream-3)}
.mock__bar i:nth-child(1){background:#e6b8af}.mock__bar i:nth-child(2){background:#f0d9a8}.mock__bar i:nth-child(3){background:#bcd4c4}
.mock__url{margin-left:14px;font-family:var(--f-mono);font-size:.74rem;color:var(--ink-soft);background:var(--cream);padding:5px 14px;border-radius:var(--r-pill)}
.app{display:grid;grid-template-columns:64px 1fr;min-height:420px}
.app__side{background:var(--green-800);padding:20px 0;display:flex;flex-direction:column;align-items:center;gap:22px}
.app__side .logo{width:26px;height:26px}
.app__side i{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.14);display:block}
.app__side i.on{background:var(--gold-grad)}
.app__main{padding:24px;display:grid;gap:16px;align-content:start;background:var(--cream)}
.app__welcome{font-family:var(--f-head);font-weight:800;font-size:1.35rem;color:var(--green-900)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px}
.kpi small{font-size:.7rem;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.kpi b{display:block;font-family:var(--f-head);font-size:1.5rem;color:var(--green-900);margin-top:6px}
.kpi.gold b{color:var(--acc-amber)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.panel h5{font-family:var(--f-head);font-size:.95rem;margin-bottom:12px;color:var(--green-900)}
.appt{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.appt:first-of-type{border-top:none}
.appt .t{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-soft);width:62px}
.appt .who{flex:1;height:8px;border-radius:4px;background:var(--cream-2)}
.appt .who.w2{width:60%}
.appt .tag{font-size:.66rem;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);background:rgba(85,119,135,.14);color:var(--acc-blue)}
.appt .tag.done{background:rgba(79,122,100,.16);color:var(--acc-green)}
.app__cols{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}

/* real product mockup image showcase */
.shot{position:relative;margin:54px auto 0;max-width:1040px}
.shot__img{width:100%;height:auto;display:block;border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}

/* floating cards near mock */
.floatcard{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-md);padding:13px 16px;display:flex;align-items:center;gap:11px;
  font-weight:600;font-size:.86rem;z-index:3;animation:bob 5s ease-in-out infinite;
}
.floatcard .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto}
.floatcard small{display:block;font-weight:500;color:var(--ink-soft);font-size:.74rem}
.fc1{top:64px;left:-26px;animation-delay:-1s}
.fc2{bottom:48px;right:-22px;animation-delay:-3s}
@media(max-width:560px){.fc1,.fc2{display:none}}

/* ----------  Hero · floating Odem UI card stack  ---------- */
.herostack{--fxb:32px;--fxm:28px;--hcw:250px;--hch:300px;
  position:relative;width:100%;max-width:1100px;min-height:clamp(230px,26vw,300px);
  margin:0 auto;display:flex;align-items:center;justify-content:center}
.odem-word{font-family:var(--f-head);font-weight:300;letter-spacing:-.03em;text-transform:uppercase;
  color:var(--green-900);line-height:1;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;
  gap:0;font-size:clamp(72px,13vw,168px)}
.odem-word .ow-half{display:inline-flex;align-items:center}
.odem-mark{height:1.08em;width:auto;flex:0 0 auto;margin-right:.04em;transform:translateY(-.03em)}
.odem-word span{color:#000}
.hcards{position:relative;flex:0 0 auto;width:var(--hcw);height:var(--hch);z-index:10;animation:bob 6s ease-in-out infinite}
.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}
.hcard{position:absolute;inset:0;display:flex;flex-direction:column;
  background:#fff;border:1px solid #e8eaf0;border-radius:26px;padding:22px;
  box-shadow:var(--shadow-lg);transition:transform .55s var(--ease),box-shadow .35s;text-align:left}
.hcard__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto}
.hic svg{width:22px;height:22px}
.hcard h4{font-family:var(--f-head);font-weight:700;font-size:1.1rem;color:var(--green-900);margin-bottom:4px}
.hcard small{color:var(--ink-soft);font-size:.86rem}
.htag{font-size:.7rem;font-weight:700;padding:.34em .85em;border-radius:var(--r-pill);white-space:nowrap}
.htag--gold{background:rgba(204,165,102,.2);color:var(--acc-amber)}
.htag--green{background:rgba(79,122,100,.16);color:var(--acc-green)}
.htag--soft{background:#eef0f4;color:var(--ink-soft)}
.hc-back{transform:rotate(-9deg) translate(calc(var(--fxb) * -1),16px) scale(.94);
  background:linear-gradient(160deg,#eef1f6,#fff)}
.hc-mid{transform:rotate(6deg) translate(var(--fxm),8px) scale(.97)}
.hc-front{transform:rotate(-2deg)}
.hcards:hover{animation-play-state:paused}
.hcards:hover .hc-back{transform:rotate(-13deg) translate(-78px,22px) scale(.95)}
.hcards:hover .hc-mid{transform:rotate(11deg) translate(76px,12px) scale(.97)}
.hcards:hover .hc-front{transform:rotate(0) translateY(-10px) scale(1.03);box-shadow:var(--shadow-gold)}

/* drifting feature pills */
.hpill{position:absolute;z-index:6;background:rgba(255,255,255,.9);border:1px solid #e3e6ec;
  border-radius:var(--r-pill);padding:.45em 1.05em;font-size:.82rem;font-weight:600;color:var(--green-700);
  backdrop-filter:blur(6px);box-shadow:var(--shadow-sm);white-space:nowrap}
.hp1{top:13%;left:12%;animation:bob 4.2s ease-in-out infinite}
.hp2{top:19%;right:12%;animation:bob 5s ease-in-out -1.2s infinite}
.hp3{bottom:19%;left:15%;animation:bob 4.6s ease-in-out -2s infinite}
.hp4{bottom:13%;right:14%;animation:bob 5.4s ease-in-out -.6s infinite}
@media(max-width:900px){
  .odem-word{gap:0;font-size:clamp(54px,15vw,112px)}
  .herostack{min-height:clamp(150px,38vw,230px)}
  .hpill{font-size:.76rem;padding:.4em .85em}
  .hp1{left:2%}.hp2{right:2%}.hp3{left:3%}.hp4{right:3%}
}

/* ----------  Generic cards / grids  ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
  position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(27,58,47,.2)}
.card .ic{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(150deg,var(--green-700),var(--green-800));color:var(--gold-2);
}
.card .ic svg{width:24px;height:24px}
.card h3{margin-bottom:9px}
.card p{color:var(--ink-soft);font-size:.98rem}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:700;font-size:.9rem;color:var(--acc-amber)}
.card .more svg{width:16px;height:16px;transition:transform .25s}
.card:hover .more svg{transform:translateX(4px)}
/* accent variants for icons */
.ic--blue{background:linear-gradient(150deg,#5d8090,#41606e)!important;color:#eaf1f4!important}
.ic--green{background:linear-gradient(150deg,#5a8a72,#3c6150)!important;color:#e7f1ea!important}
.ic--amber{background:linear-gradient(150deg,#c08a3e,#8a5a20)!important;color:#fbeed3!important}
.ic--violet{background:linear-gradient(150deg,#8f7e69,#6a5b48)!important;color:#f2ebe0!important}
.ic--red{background:linear-gradient(150deg,#b5695c,#854339)!important;color:#fbe7e2!important}

.card.glow::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--gold-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;
}
.card.glow:hover::before{opacity:1}
.module-grid{margin-top:0}
.grid-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(15rem,auto);gap:20px}
.bento-card{
  --card-accent:var(--green-800);
  --card-accent-rgb:61,80,76;
  --card-ink:var(--card-accent);
  --card-icon-color:#fff;
  min-height:15rem;padding:30px;display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 100% 0%,rgba(var(--card-accent-rgb),.06),transparent 58%),
    linear-gradient(-225deg,var(--paper) 0%,rgba(var(--card-accent-rgb),.045) 100%);
  border:1px solid rgba(var(--card-accent-rgb),.12);border-radius:var(--r-xl);color:var(--ink);
  box-shadow:0 20px 30px -10px rgba(20,40,31,.07);text-wrap:balance;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.bento-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(var(--card-accent-rgb),.26)}
.bento-card.calendar{--card-accent:#3D504C;--card-accent-rgb:61,80,76;--card-icon-color:#DCC088;grid-area:1 / 1 / 3 / 2;padding:34px}
.bento-card.patients{--card-accent:#557787;--card-accent-rgb:85,119,135;--card-icon-color:#eaf1f4;grid-area:1 / 2 / 2 / 4}
.bento-card.forms{--card-accent:#B5904F;--card-accent-rgb:181,144,79;--card-icon-color:#fbeed3}
.bento-card.inventory{--card-accent:#4F7A64;--card-accent-rgb:79,122,100;--card-icon-color:#e7f1ea}
.bento-card.finance{--card-accent:#CCA566;--card-accent-rgb:204,165,102;--card-ink:#8A6428;--card-icon-color:#3b2a09;grid-area:3 / 1 / 4 / 3}
.bento-card.invoicing{--card-accent:#806F5C;--card-accent-rgb:128,111,92;--card-icon-color:#f2ebe0}
.bento-card.leads{--card-accent:#A25B4F;--card-accent-rgb:162,91,79;--card-icon-color:#fbe7e2}
.bento-card.marketing{--card-accent:#A66F2B;--card-accent-rgb:166,111,43;--card-icon-color:#fbeed3}
.bento-card.reports{--card-accent:#56716B;--card-accent-rgb:86,113,107;--card-icon-color:#e7f1ea}
.bento-card-description{display:flex;flex-direction:column;gap:12px;width:100%}
.bento-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;width:100%}
.bento-card .ic{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,var(--green-700),var(--green-800));color:var(--gold-2);
}
.bento-card .ic[class*="ic--"]{background:linear-gradient(150deg,var(--green-700),var(--green-800))!important;color:var(--gold-2)!important}
.bento-card .ic svg{width:24px;height:24px}
.bento-card h2,.bento-card h3{font-family:var(--f-head);letter-spacing:0;color:var(--green-900)}
.bento-card h2{font-weight:800;font-size:clamp(2.2rem,3.6vw,3.7rem);line-height:.96}
.bento-card h3{font-weight:800;font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.05}
.bento-card p{color:var(--ink-soft);font-weight:500;font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.42;max-width:40ch}
.module-mini{width:100%;margin-top:auto;padding-top:22px}
/* patients · overlapping avatar stack */
.module-mini--patients{display:flex;align-items:center}
.module-mini--patients .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;margin-left:-9px;border:2px solid var(--paper);font-family:var(--f-head);font-weight:800;font-size:.74rem;color:var(--gold-2);background:linear-gradient(150deg,var(--green-700),var(--green-800))}
.module-mini--patients .av:first-child{margin-left:0}
.module-mini--patients .lbl{margin-left:14px;font-family:var(--f-mono);font-weight:700;font-size:.8rem;color:var(--card-ink)}
/* finance · gold mini bar chart */
.module-mini--finance{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.module-mini--finance .bars{display:flex;align-items:flex-end;gap:8px;height:56px;flex:1;max-width:300px}
.module-mini--finance .bars i{flex:1;height:var(--h);border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--gold-2),var(--gold-1))}
.module-mini--finance .lbl{font-family:var(--f-mono);font-weight:700;font-size:.82rem;color:var(--card-ink);white-space:nowrap}
.module-mini--calendar{display:grid;gap:8px}
.module-mini--calendar span{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(var(--card-accent-rgb),.16);border-radius:12px;background:rgba(255,253,247,.78);padding:8px 10px;color:var(--card-ink);font-family:var(--f-mono);font-size:.78rem;font-weight:700}
.module-mini--calendar span::after{content:"";width:42%;height:7px;border-radius:999px;background:rgba(var(--card-accent-rgb),.16)}
@media(max-width:980px){
  .grid-features{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .bento-card.calendar,.bento-card.patients,.bento-card.finance{grid-area:auto;grid-column:span 2}
}
@media(max-width:640px){
  .grid-features{grid-template-columns:1fr;gap:16px}
  .bento-card,.bento-card.calendar,.bento-card.patients,.bento-card.finance{grid-area:auto;grid-column:span 1;min-height:0;padding:24px;border-radius:var(--r-lg)}
  .bento-card h2{font-size:clamp(2rem,12vw,3rem)}
}

/* ----------  Feature network · hub-and-spoke  ---------- */
.netviz{margin-top:6px}
.nv-stage{position:relative;width:100%;max-width:940px;margin:0 auto;aspect-ratio:16/9}

/* concentric rings behind the hub */
.nv-rings{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(27,58,47,.025);box-shadow:inset 0 0 38px rgba(27,58,47,.05);
  display:grid;place-items:center;z-index:1}
.nv-rings::before,.nv-rings::after{content:"";position:absolute;border-radius:50%;
  background:rgba(27,58,47,.03);box-shadow:inset 0 0 22px rgba(27,58,47,.05)}
.nv-rings::before{width:66%;height:66%}
.nv-rings::after{width:34%;height:34%;background:rgba(27,58,47,.04)}

/* gold connecting lines */
.nv-lines{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.nv-line{fill:none;stroke:url(#nvGold);stroke-width:1.6;stroke-linecap:round;opacity:.72;
  --ld:0s;stroke-dasharray:460;stroke-dashoffset:460}
.nv-stage.in .nv-line{animation:nv-draw 1.3s var(--ease) var(--ld) forwards}
.nv-l1,.nv-r1{--ld:.12s}
.nv-l2,.nv-r2{--ld:0s}
.nv-l3,.nv-r3{--ld:.24s}

/* center hub */
.nv-center{position:absolute;left:50%;top:50%;width:clamp(86px,12vw,118px);aspect-ratio:1;
  transform:translate(-50%,-50%);z-index:6}
.nv-disc{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#fff,#f7f1e4);box-shadow:var(--shadow-lg);
  opacity:0;transform:scale(.5)}
.nv-stage.in .nv-disc{animation:nv-pop .7s var(--ease) .05s both,nv-bob 6s ease-in-out 1.2s infinite}
.nv-disc::before{content:"";position:absolute;inset:0;border-radius:50%;padding:2.5px;background:var(--gold-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.nv-disc img{width:54%;height:54%;object-fit:contain}
.nv-disc .brand__fallback{display:none;width:50%;height:50%}
.nv-disc.noimg img{display:none}
.nv-disc.noimg .brand__fallback{display:block}

/* nodes */
.nv-node{position:absolute;width:clamp(54px,8vw,66px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:5}
.nv-pop{position:relative;width:100%;height:100%;opacity:0;transform:scale(.5)}
.nv-stage.in .nv-pop{animation:nv-pop .6s var(--ease) var(--d,.2s) both}
.nv-float{width:100%;height:100%;animation:nv-bob 5s ease-in-out infinite}
.nv-tile{display:grid;place-items:center;width:100%;height:100%;border-radius:16px;
  background:#56716B;color:var(--gold-2);
  box-shadow:var(--shadow-md);border:1px solid transparent;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s,color .3s}
.nv-tile:hover{transform:scale(1.12);box-shadow:var(--shadow-gold);border-color:rgba(204,165,102,.6);color:var(--gold-4)}
.nv-tile svg{width:46%;height:46%}
.nv-label{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--f-head);font-weight:700;font-size:.86rem;color:var(--green-900)}
.nv-desc{position:absolute;bottom:calc(100% + 13px);left:50%;transform:translateX(-50%) translateY(6px);
  width:max-content;max-width:200px;padding:.55em .8em;border-radius:var(--r-sm);
  background:var(--green-900);color:rgba(247,243,234,.92);font-size:.78rem;line-height:1.4;text-align:center;
  box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transition:.25s var(--ease);pointer-events:none;z-index:8}
.nv-desc::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--green-900)}
.nv-node:hover .nv-desc{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* node anchors (match SVG line endpoints) + reveal stagger + float offsets */
.n-l1{left:20%;top:27%;--d:.34s}
.n-l2{left:15%;top:50%;--d:.2s}
.n-l3{left:20%;top:73%;--d:.48s}
.n-r1{left:80%;top:27%;--d:.34s}
.n-r2{left:85%;top:50%;--d:.2s}
.n-r3{left:80%;top:73%;--d:.48s}
.n-l1 .nv-float{animation-delay:-.4s}
.n-l2 .nv-float{animation-delay:-1.4s}
.n-l3 .nv-float{animation-delay:-2.1s}
.n-r1 .nv-float{animation-delay:-1s}
.n-r2 .nv-float{animation-delay:-2.6s}
.n-r3 .nv-float{animation-delay:-.8s}

@keyframes nv-draw{to{stroke-dashoffset:0}}
@keyframes nv-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes nv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* mobile: reflow the spokes into a calm 2-col card grid */
@media(max-width:720px){
  .nv-stage{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:460px}
  .nv-rings,.nv-lines,.nv-center{display:none}
  .nv-node{position:static;transform:none;width:auto;aspect-ratio:auto;display:flex;flex-direction:column;
    align-items:center;gap:12px;padding:22px 14px;background:var(--paper);border:1px solid var(--line);
    border-radius:var(--r-lg);text-align:center}
  .nv-pop{width:52px;height:52px;flex:0 0 auto}
  .nv-tile{border-radius:14px}
  .nv-float{animation:none}
  .nv-label{position:static;transform:none}
  .nv-desc{position:static;transform:none;opacity:1;visibility:visible;background:none;color:var(--ink-soft);
    box-shadow:none;padding:0;max-width:none;font-size:.82rem}
  .nv-desc::after{display:none}
}

/* ----------  Wave goodbye · pain rotator  ---------- */
.wg{--wg-ih:74px;--wg-fs:clamp(1.6rem,4.4vw,2.6rem);background:var(--cream)}
.wg-row{display:flex;align-items:center;justify-content:center;gap:14px 18px;flex-wrap:wrap}
.wg-head{font-family:var(--f-head);font-weight:800;letter-spacing:-.02em;color:#111827;
  font-size:var(--wg-fs);line-height:1.1;white-space:nowrap}
.wg-window{position:relative;width:min(90vw,460px);height:calc(var(--wg-ih) * 3);overflow:hidden;
  -webkit-mask:linear-gradient(to bottom,transparent,#000 33%,#000 67%,transparent);
  mask:linear-gradient(to bottom,transparent,#000 33%,#000 67%,transparent)}
.wg-list{list-style:none;display:flex;flex-direction:column;animation:wgScroll 16s infinite linear;will-change:transform}
.wg-list li{height:var(--wg-ih);line-height:var(--wg-ih);font-family:var(--f-head);font-weight:800;
  font-size:var(--wg-fs);letter-spacing:-.02em;white-space:nowrap;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
@media(max-width:780px){
  .wg-row{flex-direction:column;gap:6px}
  .wg-window{margin-inline:auto}
  .wg-head,.wg-list li{text-align:center}
}
@media(max-width:600px){.wg{--wg-ih:54px}}

@keyframes wgScroll{
  0%,10.41%{transform:translateY(calc(var(--wg-ih) * -2))}
  12.5%,22.91%{transform:translateY(calc(var(--wg-ih) * -3))}
  25%,35.41%{transform:translateY(calc(var(--wg-ih) * -4))}
  37.5%,47.91%{transform:translateY(calc(var(--wg-ih) * -5))}
  50%,60.41%{transform:translateY(calc(var(--wg-ih) * -6))}
  62.5%,72.91%{transform:translateY(calc(var(--wg-ih) * -7))}
  75%,85.41%{transform:translateY(calc(var(--wg-ih) * -8))}
  87.5%,97.91%{transform:translateY(calc(var(--wg-ih) * -9))}
  100%{transform:translateY(calc(var(--wg-ih) * -10))}
}

/* ----------  Split feature rows  ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,72px);align-items:center}
.split.rev .split__media{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev .split__media{order:0}}
.split h2{margin-bottom:18px}
.checklist{display:grid;gap:14px;margin-top:26px}
.checklist li{display:flex;gap:13px;align-items:flex-start;font-weight:500}
.checklist .ck{width:24px;height:24px;border-radius:8px;background:rgba(79,122,100,.14);color:var(--acc-green);display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.checklist .ck svg{width:14px;height:14px}

/* media frames (for photos / coded UI) */
.frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-md);background:linear-gradient(150deg,var(--cream-2),var(--cream));
}
.frame img{width:100%;height:100%;object-fit:cover;display:block}

/* photo-slot: shows uploaded photo, or an elegant fallback if the file is missing */
.photo-slot{position:relative;aspect-ratio:4/3}
.photo-slot .ph{
  position:absolute;inset:0;display:none;place-items:center;text-align:center;color:var(--green-700);
  background:radial-gradient(circle at 30% 20%,#e9f0ea,transparent 60%),linear-gradient(150deg,var(--cream-2),var(--cream-3));
}
.photo-slot.noimg img{display:none}
.photo-slot.noimg .ph{display:grid}
.photo-slot .ph .inner{padding:30px;display:grid;gap:12px;justify-items:center;max-width:34ch}
.photo-slot .ph .badge{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:#fff;box-shadow:var(--shadow-sm);color:var(--green-700)}
.photo-slot .ph .badge svg{width:30px;height:30px}
.photo-slot .ph strong{font-family:var(--f-head);color:var(--green-900)}
.photo-slot .ph small{font-size:.8rem;color:var(--ink-soft)}
.photo-slot .tagpic{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:var(--r-pill);padding:.5em 1em;font-size:.82rem;font-weight:600;color:var(--green-800);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:.5em}
.photo-slot .tagpic .d{width:8px;height:8px;border-radius:50%;background:var(--gold-grad)}

/* mini coded UI panels used in splits */
.uipanel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:22px;display:grid;gap:14px}

/* ----------  Dark band  ---------- */
.band{background:var(--green-900);color:var(--cream);overflow:clip}
.band h2,.band h3{color:#fff}
.band .lede,.band .muted{color:rgba(247,243,234,.72)}
.band .eyebrow{color:var(--gold-4)}
.band .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.band .card h3{color:#fff}.band .card p{color:rgba(247,243,234,.7)}
.band .card .ic{background:rgba(255,255,255,.08);color:var(--gold-3)}

/* logo / keyword marquee */
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:18px;width:max-content;animation:scrollx 34s linear infinite}
.chip{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:.7em 1.3em;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;font-weight:700;color:var(--green-800);font-size:.95rem}
.band .chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#fff}
.chip .d{width:9px;height:9px;border-radius:50%;background:var(--gold-grad)}


/* ----------  Pricing  ---------- */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
@media(max-width:880px){.prices{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.price{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column;gap:18px;position:relative;transition:transform .35s var(--ease),box-shadow .35s}
.price:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.price.feat{background:linear-gradient(180deg,var(--green-800),var(--green-900));color:#fff;border:none;box-shadow:var(--shadow-lg)}
.price.feat h3,.price.feat .amt{color:#fff}
.price.feat .muted,.price.feat .per{color:rgba(247,243,234,.7)}
.price.feat .feat-list li{color:rgba(247,243,234,.92)}
.price__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold-grad);color:#3b2a09;font-family:var(--f-head);font-weight:700;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;padding:.4em 1em;border-radius:var(--r-pill);box-shadow:var(--shadow-gold)}
.price .amt{font-family:var(--f-head);font-weight:800;font-size:2.6rem;line-height:1;color:var(--green-900)}
.price .per{font-size:.9rem;color:var(--ink-soft)}
.feat-list{display:grid;gap:12px;margin-top:6px}
.feat-list li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem}
.feat-list .ck{width:21px;height:21px;border-radius:6px;background:rgba(79,122,100,.16);color:var(--acc-green);display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.price.feat .feat-list .ck{background:rgba(204,165,102,.2);color:var(--gold-4)}
.feat-list .ck svg{width:13px;height:13px}

/* ----------  FAQ  ---------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:14px}
.qa{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:border-color .3s}
.qa.open{border-color:rgba(181,144,79,.5);box-shadow:var(--shadow-sm)}
.qa__q{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;font-family:var(--f-head);font-weight:700;font-size:1.05rem;color:var(--green-900)}
.qa__q .pm{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:0 0 auto;transition:.3s}
.qa.open .qa__q .pm{background:var(--gold-grad);border-color:transparent;transform:rotate(135deg)}
.qa__q .pm svg{width:14px;height:14px}
.qa__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.qa__a p{padding:0 24px 24px;color:var(--ink-soft)}

/* ----------  CTA band  ---------- */
.cta-band{position:relative;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(135deg,var(--green-800),var(--green-950));color:#fff;padding:clamp(40px,6vw,72px);text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(204,165,102,.22),transparent 50%),radial-gradient(circle at 10% 90%,rgba(70,93,88,.4),transparent 55%)}
.cta-band>*{position:relative}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band .lede{color:rgba(247,243,234,.8);margin:0 auto 28px}
.cta-band .hero__cta{justify-content:center}

/* ----------  Coming soon  ---------- */
.soon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:900px){.soon-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.soon-grid{grid-template-columns:1fr}}
.soon-item{position:relative;background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-lg);padding:26px 20px;text-align:center;display:grid;gap:12px;justify-items:center;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.soon-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(27,58,47,.18)}
.soon-item .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(150deg,var(--green-700),var(--green-800));color:var(--gold-2)}
.soon-item .ic svg{width:22px;height:22px}
.soon-item h3{font-size:1rem;font-weight:700}
.soon-badge{position:absolute;top:12px;right:12px;font-family:var(--f-mono);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#3b2a09;background:var(--gold-grad);padding:.3em .7em;border-radius:var(--r-pill)}

/* ----------  Statement band (brand positioning line)  ---------- */
.statement{position:relative;overflow:hidden;background:var(--green-900);color:#fff}
.statement .wrap{position:relative;text-align:center;padding-top:clamp(44px,5.5vw,84px);padding-bottom:clamp(44px,5.5vw,84px)}
.statement__mark{height:50px;width:auto;margin:0 auto 22px;display:block;object-fit:contain}
.statement p{font-family:var(--f-head);font-weight:700;line-height:1.28;letter-spacing:-.01em;color:#fff;font-size:clamp(1.5rem,3.4vw,2.5rem);max-width:20ch;margin:0 auto}
.statement .hl{background:var(--gold-grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ----------  Forms  ---------- */
.form{display:grid;gap:18px}
.demo-form{padding:28px}
.field{display:grid;gap:7px}
.field label{font-weight:600;font-size:.9rem;color:var(--green-900)}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:1rem;color:var(--ink);
  padding:.85em 1em;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:#fff;transition:border-color .25s,box-shadow .25s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-600);box-shadow:0 0 0 4px rgba(70,93,88,.12)}
.field textarea{min-height:130px;resize:vertical}
/* custom select — strip native macOS/Safari widget, add a palette chevron */
.field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  cursor:pointer;padding-right:2.8em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2369726F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05em center;background-size:14px;
}
.field select::-ms-expand{display:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}

/* ----------  Footer  ---------- */
.foot{background:var(--green-950);color:rgba(247,243,234,.72);padding:72px 0 32px}
.foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
@media(max-width:820px){.foot__top{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot__top{grid-template-columns:1fr}}
.foot .brand{color:#fff;margin-bottom:14px}
.foot p{max-width:34ch;font-size:.94rem}
.foot h6{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-4);margin-bottom:16px}
.foot a{display:block;padding:6px 0;font-size:.95rem;transition:color .2s}
.foot a:hover{color:#fff}
.foot__socials{display:flex;gap:12px;margin-top:6px}
.foot__socials a{width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center}
.foot__socials a:hover{background:rgba(255,255,255,.07)}
.foot__socials svg{width:18px;height:18px}
.foot__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:46px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:.88rem}
.foot__bar a{display:inline;font-size:inherit}
.foot__credit{text-align:center}
.foot__credit a{color:var(--gold-4);font-weight:600}
.foot__credit a:hover{color:#fff;text-decoration:underline}

/* page hero (inner pages) */
.phero{padding:clamp(130px,15vw,180px) 0 clamp(40px,6vw,70px);text-align:center;position:relative;overflow:hidden}
.phero .lede{margin:18px auto 0}

/* disclaimer note */
.note{background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 28px;font-size:.92rem;color:var(--ink-soft);max-width:760px;margin:0 auto;text-align:center}
.band .note{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(247,243,234,.78)}

/* ----------  Reveal animations  ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .blob,.floatcard,.marquee__track{animation:none!important}
  .nv-line{stroke-dashoffset:0!important;animation:none!important}
  .nv-pop,.nv-disc{opacity:1!important;transform:none!important;animation:none!important}
  .nv-float{animation:none!important}
  .wg-list{animation:none!important;transform:translateY(calc(var(--wg-ih) * -2))!important}
  .hcards,.hpill{animation:none!important}
  *{scroll-behavior:auto!important}
}

/* keyframes */
@keyframes float{0%,100%{transform:translate(0,0)}33%{transform:translate(28px,-26px)}66%{transform:translate(-22px,18px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes scrollx{to{transform:translateX(-50%)}}
@keyframes shine{to{background-position:200% center}}

/* gradient animated text used on hero word */
.shimmer{background:var(--gold-grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 5s linear infinite}

/* ===================================================================
   Uploaded hero · Odem dashboard (self-contained, scoped to .odem-page)
   =================================================================== */
.odem-page{
  --page:#f6f1e8; --ink:#111827; --muted:#4b5563; --soft:#efe7d9;
  --line:rgba(220,210,193,0.55); --accent:#b68a37; --accent-dark:#8f6d2a; --green:#5c7a4a;
  position:relative;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  color:var(--ink);
  background:
    radial-gradient(circle at 78% 48%, rgba(201,158,79,0.13), transparent 28rem),
    radial-gradient(circle at 42% 112%, rgba(92,122,74,0.08), transparent 30rem),
    var(--page);
}
.odem-container{width:min(1280px,100%);margin:0 auto;padding:0 32px}
.odem-nav{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(246,241,232,0.92);backdrop-filter:blur(16px)}
.odem-nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.odem-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;font-family:var(--f-head);font-weight:800;letter-spacing:-0.02em;color:var(--muted)}
.odem-brand img{width:32px;height:32px;object-fit:contain}
.odem-brand span{font-size:20px}
.odem-nav-links,.odem-nav-actions{display:flex;align-items:center}
.odem-nav-links{gap:32px}
.odem-nav-actions{gap:16px}
.odem-nav-links a,.odem-signin{color:var(--muted);font-size:14px;font-weight:700}
.odem-lang{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:3px;border:1px solid rgba(17,24,39,.12);border-radius:10px;background:rgba(255,255,255,.58);color:var(--muted);font-size:13px;font-weight:800;letter-spacing:.02em}
.odem-lang button{min-width:34px;height:28px;border-radius:7px;color:inherit;font-size:12px;font-weight:800;letter-spacing:.02em;transition:background .2s,color .2s,box-shadow .2s}
.odem-lang button:hover,.odem-lang button:focus-visible{background:rgba(17,24,39,.06);outline:none}
.odem-lang button.is-active{background:var(--accent);color:#fff;box-shadow:0 10px 18px -14px var(--accent)}
.odem-nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:10px;background:var(--accent);color:#fff;font-family:var(--f-head);font-size:14px;font-weight:800;box-shadow:0 16px 28px -18px var(--accent)}
.odem-menu{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:var(--ink)}
.odem-menu span,.odem-menu span::before,.odem-menu span::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;content:""}
.odem-menu span::before{transform:translateY(-6px)}
.odem-menu span::after{transform:translateY(4px)}
.odem-hero{position:relative;overflow:hidden}
.odem-hero::before{position:absolute;right:-12rem;bottom:-20rem;width:58rem;height:58rem;border-radius:50%;background:radial-gradient(circle,rgba(201,158,79,0.14),transparent 64%);content:"";pointer-events:none}
.odem-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,0.94fr) minmax(440px,1.06fr);gap:54px;align-items:center;min-height:calc(100vh - 64px);padding:58px 0 76px}
.odem-copy{max-width:590px}
.odem-title{margin:0 0 22px;color:var(--ink);font-size:clamp(44px,5vw,68px);font-weight:800;letter-spacing:-0.055em;line-height:1.03;text-wrap:balance}
.odem-gradient-text{background:linear-gradient(90deg,var(--accent),var(--accent-dark));color:transparent;background-clip:text;-webkit-background-clip:text}
.odem-subtitle{max-width:570px;margin:0 0 30px;color:var(--muted);font-size:20px;line-height:1.7}
.odem-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px;margin-bottom:32px}
.odem-benefit{display:flex;align-items:center;gap:11px;color:#374151;font-size:16px;line-height:1.4}
.odem-check{flex:0 0 auto;width:20px;height:20px;color:var(--green)}
.odem-ctas{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:30px}
.odem-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;border-radius:10px;font-family:var(--f-head);font-size:18px;font-weight:800}
.odem-btn svg{width:20px;height:20px}
.odem-btn-primary{padding:0 30px;background:var(--accent);color:#fff;box-shadow:0 18px 34px -20px var(--accent)}
.odem-btn-secondary{padding:0 6px;color:#374151}
.odem-proof{display:flex;align-items:center;gap:10px;color:#6b7280;font-size:14px;line-height:1.35}
.odem-avatars{display:flex}
.odem-avatar{width:32px;height:32px;margin-left:-8px;border:2px solid #fff;border-radius:999px}
.odem-avatar:first-child{margin-left:0}
.odem-avatar.gold{background:linear-gradient(135deg,#d8b55b,#b68a37)}
.odem-avatar.ink{background:linear-gradient(135deg,#5c544a,#241f1a)}
.odem-avatar.green{background:linear-gradient(135deg,#9dbb82,#5c7a4a)}
.odem-visual{position:relative;min-width:0}
.odem-dashboard{position:relative;width:min(760px,100%);margin-left:auto;transform:rotate(2deg);animation:odem-float 6s ease-in-out infinite}
.odem-dashboard-screenshot{display:block;width:100%;height:auto;aspect-ratio:1600/1000;object-fit:contain;border-radius:20px;border:1px solid rgba(17,24,39,0.08);
  filter:drop-shadow(0 2px 3px rgba(17,24,39,0.16)) drop-shadow(0 26px 48px rgba(17,24,39,0.26)) drop-shadow(0 52px 92px rgba(17,24,39,0.22))}
@keyframes odem-float{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.odem-dashboard{transform:none;animation:none}}
@media (max-width:1000px){
  .odem-hero-inner{grid-template-columns:1fr;gap:54px;min-height:auto;padding:56px 0 74px}
  .odem-copy{max-width:720px;margin:0 auto;text-align:center}
  .odem-benefits{max-width:620px;margin-right:auto;margin-left:auto;text-align:left}
  .odem-ctas,.odem-proof{justify-content:center}
  .odem-visual{width:min(680px,100%);margin:0 auto}
  .odem-dashboard{margin:0 auto}
}
@media (max-width:860px){
  .odem-nav-links,.odem-nav-cta{display:none}
  .odem-nav-actions{gap:10px}
  .odem-menu{display:flex}
  .odem-container{padding:0 22px}
  .odem-nav.open .odem-nav-links{position:absolute;left:22px;right:22px;top:64px;display:grid;gap:4px;padding:12px;border:1px solid rgba(17,24,39,.1);border-radius:16px;background:#fff;box-shadow:0 22px 50px -28px rgba(17,24,39,.36)}
  .odem-nav.open .odem-nav-links a{padding:11px 12px;border-radius:10px;color:#374151}
  .odem-nav.open .odem-nav-links a:hover{background:#f6f1e8;color:#111827}
  .odem-menu.open span{background:transparent}
  .odem-menu.open span::before{transform:translateY(1px) rotate(45deg)}
  .odem-menu.open span::after{transform:translateY(-1px) rotate(-45deg)}
}
@media (max-width:640px){
  .odem-container{padding:0 18px}
  .odem-hero-inner{gap:44px;padding:48px 0 62px}
  .odem-title{font-size:42px;letter-spacing:-0.045em}
  .odem-subtitle{font-size:18px;line-height:1.6}
  .odem-benefits{grid-template-columns:1fr}
  .odem-ctas{align-items:stretch}
  .odem-btn{width:100%;font-size:17px}
  .odem-proof{align-items:center;justify-content:flex-start;text-align:left}
  .odem-copy{text-align:left}
  .odem-dashboard{transform:none;animation:none}
  .odem-dashboard-screenshot{border-radius:14px}
}

/* ----------  Coded dashboard mockup (vector · crisp at any zoom) ---------- */
.odem-dashboard{container-type:inline-size}
.dash{width:100%;aspect-ratio:16/10;display:flex;overflow:hidden;border-radius:2.2cqw;
  border:.16cqw solid rgba(17,24,39,.07);background:#fff;color:#2b3a33;
  font-family:Inter,system-ui,sans-serif;font-size:1.5cqw;line-height:1.3;
  box-shadow:0 .3cqw .5cqw rgba(17,24,39,.10),0 4cqw 7cqw rgba(17,24,39,.20)}
.dash-side{width:21cqw;flex:0 0 auto;background:linear-gradient(180deg,#2c4338,#21332b);color:#cfe0d6;padding:2cqw 1.5cqw;display:flex;flex-direction:column;gap:.4cqw}
.dash-logo{display:flex;align-items:center;gap:.8cqw;font-weight:800;color:#fff;font-size:2.05cqw;letter-spacing:-.02em;margin:.2cqw 0 2cqw .3cqw}
.dash-logo img{height:2.5cqw;width:auto;object-fit:contain;display:block}
.dash-nav{display:flex;flex-direction:column;gap:.3cqw}
.dash-nav a{display:flex;align-items:center;gap:1cqw;padding:.9cqw 1cqw;border-radius:1cqw;color:#a7c0b2;font-size:1.42cqw;font-weight:600}
.dash-nav svg{width:1.7cqw;height:1.7cqw;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dash-nav a.on{background:rgba(255,255,255,.10);color:#fff}
.dash-nav a.on svg{color:#dcc088}
.dash-side .sp{flex:1}
.dash-profile{display:flex;align-items:center;gap:.9cqw;padding:1cqw;border-radius:1.2cqw;background:rgba(0,0,0,.20)}
.dash-profile .av{width:2.6cqw;height:2.6cqw;border-radius:50%;background:linear-gradient(135deg,#9dbb82,#5c7a4a);flex:0 0 auto}
.dash-profile b{display:block;color:#fff;font-size:1.38cqw;font-weight:700}
.dash-profile small{font-size:1.12cqw;color:#9bb3a5}
.dash-main{flex:1;min-width:0;background:#f7f6f1;display:flex;flex-direction:column;padding:2cqw}
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:1.4cqw;margin-bottom:1.7cqw}
.dash-top h3{font-size:2.2cqw;font-weight:800;color:#23332c;margin:0}
.dash-tools{display:flex;align-items:center;gap:1cqw}
.dash-search{display:flex;align-items:center;gap:.7cqw;background:#fff;border:.16cqw solid #e7e4da;border-radius:1.3cqw;padding:.78cqw 1.2cqw;color:#9aa39c;font-size:1.28cqw;width:17cqw}
.dash-search svg{width:1.5cqw;height:1.5cqw;stroke:currentColor;fill:none;stroke-width:2}
.dash-clinic{display:flex;align-items:center;gap:.8cqw;background:#fff;border:.16cqw solid #e7e4da;border-radius:1.3cqw;padding:.7cqw 1.1cqw;font-size:1.28cqw;font-weight:700;color:#33433b;white-space:nowrap}
.dash-clinic .av{width:2.1cqw;height:2.1cqw;border-radius:50%;background:linear-gradient(135deg,#dcc088,#b5904f);flex:0 0 auto}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3cqw;margin-bottom:1.5cqw}
.kpi{background:#fff;border:.16cqw solid #ece9e0;border-radius:1.7cqw;padding:1.4cqw 1.5cqw}
.kpi small{font-size:1.22cqw;color:#8a948d;font-weight:600}
.kpi b{display:block;font-size:2.9cqw;font-weight:800;color:#23332c;margin-top:.4cqw;letter-spacing:-.02em}
.kpi .chip{display:inline-block;margin-top:.6cqw;font-size:1.12cqw;font-weight:700;padding:.18cqw .8cqw;border-radius:1cqw;background:#eef1ec;color:#6b756e}
.kpi .chip.up{background:rgba(92,122,74,.16);color:#4d6b3c}
.kpi .chip.gold{background:rgba(181,144,79,.18);color:#8f6d2a}
.dash-row{display:grid;gap:1.3cqw}
.dash-row.a{grid-template-columns:1.5fr 1fr;margin-bottom:1.3cqw}
.dash-row.b{grid-template-columns:1fr 1fr 1fr;flex:1}
.dcard{background:#fff;border:.16cqw solid #ece9e0;border-radius:1.7cqw;padding:1.4cqw 1.5cqw;min-width:0}
.dcard h4{font-size:1.5cqw;font-weight:800;color:#23332c;margin:0 0 1cqw;display:flex;justify-content:space-between;align-items:center}
.dcard h4 em{font-style:normal;font-size:1.12cqw;color:#b5904f;font-weight:700}
.appt{display:flex;align-items:center;gap:1cqw;padding:.8cqw 0;border-top:.14cqw solid #f0ede4;font-size:1.3cqw}
.appt:first-of-type{border-top:0}
.appt .t{color:#8a948d;width:6.5cqw;flex:0 0 auto}
.appt .nm{flex:1;font-weight:600;color:#33433b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bdg{font-size:1.08cqw;font-weight:700;padding:.18cqw .7cqw;border-radius:.8cqw;background:#eaf0e7;color:#5c7a4a;flex:0 0 auto}
.bdg.warn{background:#faf0dc;color:#9a6f1f}
.li{display:flex;align-items:center;gap:.9cqw;padding:.78cqw 0;border-top:.14cqw solid #f0ede4;font-size:1.28cqw}
.li:first-of-type{border-top:0}
.li .dot{width:1.4cqw;height:1.4cqw;border-radius:.45cqw;background:#e7e1d2;flex:0 0 auto}
.li .dot.g{background:#9dbb82}.li .dot.gd{background:#dcc088}.li .dot.r{background:#e3a88e}
.li .nm{flex:1;color:#33433b;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .meta{color:#9aa39c;font-size:1.1cqw;flex:0 0 auto}
.pulse{display:flex;align-items:center;gap:1.3cqw}
.donut{position:relative;width:8.6cqw;height:8.6cqw;border-radius:50%;flex:0 0 auto;background:conic-gradient(#b5904f 72%,#e9e4d6 0);display:grid;place-items:center}
.donut::after{content:"";position:absolute;inset:1.25cqw;border-radius:50%;background:#fff}
.donut span{position:relative;font-size:2cqw;font-weight:800;color:#23332c}
.pulse ul{flex:1;display:flex;flex-direction:column;gap:.55cqw;margin:0;padding:0;list-style:none}
.pulse li{display:flex;justify-content:space-between;font-size:1.22cqw;color:#6b756e}
.pulse li b{color:#23332c;font-weight:700}

/* footer brand — align logo + wordmark like the nav */
.foot .brand{display:flex;align-items:center;gap:10px;width:max-content;padding:0;color:#fff;font-size:20px;letter-spacing:-0.02em}
.foot .brand__logo{width:32px;height:32px}
.foot .brand__logo img{width:32px;height:32px;object-fit:contain}
.foot .brand span:last-child{line-height:1}

/* ----------  For-clinics · 3-column editorial macro grid  ---------- */
.clinic-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:4rem;margin-top:6px}
.clinic-col{padding-bottom:2.4rem;border-bottom:1px solid rgba(47,64,61,.12)}
.clinic-num{display:block;font-family:var(--f-body);font-weight:300;font-size:clamp(2.6rem,3.4vw,3.4rem);
  line-height:1;letter-spacing:-.02em;color:rgba(31,42,36,.30);font-variant-numeric:tabular-nums;margin-bottom:1.2rem}
.clinic-title{font-family:var(--f-body);font-weight:700;font-size:clamp(1.35rem,1.7vw,1.6rem);
  letter-spacing:-.02em;line-height:1.2;color:#1f2a24;margin:0 0 .75rem}
.clinic-desc{font-family:var(--f-body);font-size:1.02rem;line-height:1.7;color:var(--ink-soft);max-width:36ch;margin:0}
@media(max-width:900px){
  .clinic-cols{grid-template-columns:1fr;gap:0}
  .clinic-col{padding:2rem 0}
  .clinic-col:first-child{padding-top:0}
}

/* ----------  Access · sticky scrollytelling  ---------- */
.access-scroll{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:stretch}
.access-text{display:flex;flex-direction:column}
.access-node{min-height:80vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .55s var(--ease)}
.access-node.is-active{opacity:1}
.access-step{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.2em;font-weight:600;color:var(--gold-4);margin-bottom:16px}
.access-node h3{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.08;color:#fff;margin-bottom:14px}
.access-node p{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.6;color:rgba(247,243,234,.82);max-width:32ch}
.access-visual{position:sticky;top:0;align-self:start;height:100vh}
.access-sticky{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:center}
.device{position:relative;background:#0f1f1a;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden;
  transition:all .5s ease}
.device.is-desktop{width:min(100%,540px);height:304px;border-radius:14px}
.device.is-tablet{width:392px;height:296px;border-radius:20px}
.device.is-phone{width:188px;height:366px;border-radius:30px}
.screen{position:absolute;inset:6px;border-radius:inherit;background:linear-gradient(165deg,#fbfcf9,#eef1f4);display:flex;flex-direction:column;overflow:hidden}
.screen-bar{flex:0 0 auto;height:26px;display:flex;align-items:center;gap:5px;padding:0 11px;border-bottom:1px solid rgba(20,40,31,.07)}
.screen-bar i{width:7px;height:7px;border-radius:50%;background:#cfd6d0}
.screen-pill{margin-left:auto;width:60px;height:8px;border-radius:5px;background:var(--gold-grad)}
.screen-body{flex:1;min-height:0;padding:13px;display:flex;flex-direction:column;gap:9px}
.screen-row{flex:0 0 auto;height:11px;border-radius:5px;background:#dde3e8}
.screen-row.s{width:55%}
.screen-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.screen-tile{border-radius:9px;background:linear-gradient(135deg,#e7ecef,#f3f6f8);border:1px solid rgba(20,40,31,.05)}
.screen-tile.gold{background:linear-gradient(135deg,rgba(204,165,102,.30),rgba(220,192,136,.14));border-color:rgba(181,144,79,.25)}
@media(max-width:900px){
  .access-scroll{grid-template-columns:1fr;gap:0}
  .access-visual{order:-1;position:sticky;top:70px;height:auto;z-index:2;padding:14px 0 10px;
    background:linear-gradient(180deg,var(--green-900) 78%,transparent)}
  .access-sticky{position:static;transform:none;height:auto}
  .device.is-desktop{width:min(84vw,420px);height:236px}
  .device.is-tablet{width:300px;height:226px}
  .device.is-phone{width:148px;height:288px}
  .access-node{min-height:72vh}
}
@media(prefers-reduced-motion:reduce){
  .access-node{opacity:1!important;transition:none!important}
  .device{transition:none!important}
}