*{box-sizing:border-box}
:root{
  /* ClinicX Logo Source of Truth Palette (images/logo.png) */
  --brand-primary:#013A9E;            /* Logo Deep Royal Blue */
  --brand-primary-dark:#0A1C3E;       /* Logo Midnight Deep Navy */
  --brand-primary-light:#EBF3FF;      /* Logo Royal Soft Tint */
  --brand-secondary:#01735D;          /* Logo Supporting Deep Teal / Cyan */
  --brand-accent:#01E9BD;             /* Logo Vibrant Bright Cyan / Green */
  --brand-accent-glow:rgba(1,233,189,.28);
  --brand-blue-accent:#014AB0;        /* Logo Cobalt Blue */
  --brand-blue-sky:#0088E8;           /* Logo Azure Sky Blue */

  /* Neutral & Semantic Surfaces */
  --bg:#F8FAFC;                       /* Premium neutral healthcare canvas */
  --surface:#FFFFFF;                  /* Pure white card surface */
  --surface-soft:#F1F5F9;             /* Soft neutral surface */
  --s2:#EDF2F7;                       /* Secondary section surface */
  --border:#E2E8F0;                   /* Clean subtle border */
  --border-subtle:rgba(1,58,158,.12);

  /* Typography / Text (Strict WCAG AAA/AA compliance) */
  --text:#0F172A;                     /* High-contrast deep slate (AAA on white) */
  --text-primary:#0F172A;
  --text-secondary:#475569;           /* Slate body neutral (AA on white) */
  --muted:#475569;

  /* Dark Sections (Hero, How It Works Band, Footer) */
  --dark:#071739;                     /* Midnight Royal Navy (matches logo dark tone) */
  --dark-surface:#0B214D;             /* Card surface on dark */
  --dark-text:#F1F5F9;                /* Crisp white-slate text on dark */
  --dark-muted:#94A3B8;               /* Accessible slate text on dark */

  /* Semantic UI mappings */
  --accent:#01735D;                   /* Deep teal for accessible text accents on light bg */
  --accent-bright:#01E9BD;           /* Bright cyan for badges & dark surfaces */
  --a2:#01E9BD;                       /* Bright cyan store button & highlights */
  --ease:cubic-bezier(.2,.7,.2,1)
}
html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden}
.js body{animation:pg .45s var(--ease)}
@keyframes pg{from{opacity:0}}
body.leaving{opacity:0;transition:opacity .18s}
img{max-width:100%;height:auto}

/* Global Link & Focus Normalization (Prevents red user-agent active styles) */
a{color:inherit;text-decoration:none;transition:color .2s var(--ease),opacity .2s var(--ease)}
a:visited{color:inherit}
a:active{color:inherit}
:focus-visible{outline:3px solid var(--brand-blue-sky);outline-offset:3px}
.hero :focus-visible,.final :focus-visible,.dkband :focus-visible,.ftr :focus-visible{outline:3px solid var(--brand-accent);outline-offset:3px}

.skip{position:absolute;top:-9999px;left:0}
.skip:focus{top:8px;left:8px;background:#fff;color:#000;padding:8px;z-index:99}
.wrap{max-width:1180px;margin:auto;padding:0 22px}
.narrow{max-width:780px}

/* Header & Navigation */
.hdr{position:fixed;inset:0 0 auto;z-index:60;color:#fff;transition:background .3s,border-color .3s,color .3s;border-bottom:1px solid transparent}
.hdr .bar{display:flex;align-items:center;justify-content:space-between;height:82px;transition:height .3s var(--ease)}
.hdr.scrolled{background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-color:var(--border);color:var(--text)}
.hdr.scrolled .bar{height:62px}
.hdr.menu-open{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:transparent!important;border-color:transparent!important}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;letter-spacing:-.01em;transition:opacity .2s var(--ease)}
.brand:hover{opacity:.9}
.brand:active{opacity:.8}
.brand img{width:32px;height:32px;aspect-ratio:1/1;object-fit:contain;flex-shrink:0}

nav{display:flex;gap:30px;align-items:center}
nav a{text-decoration:none;font-weight:500;position:relative;padding:6px 0;color:#fff;transition:color .2s var(--ease)}
nav a:visited{color:#fff}
nav a:hover{color:var(--brand-accent)}
nav a:active{color:var(--brand-accent)}
nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand-accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1)}

/* Scrolled Header Navigation (Scoped strictly to Desktop to prevent mobile drawer leakage) */
@media(min-width:901px){
  .hdr.scrolled nav a{color:var(--text)}
  .hdr.scrolled nav a:visited{color:var(--text)}
  .hdr.scrolled nav a:hover{color:var(--brand-primary)}
  .hdr.scrolled nav a:active{color:var(--brand-primary)}
  .hdr.scrolled nav a:not(.btn)::after{background:var(--brand-primary)}
}

/* Mobile Menu Button */
.menu-btn{display:none;background:none;border:0;width:48px;height:48px;cursor:pointer;position:relative;z-index:70;color:#fff;transition:color .2s var(--ease)}
.menu-btn span{display:block;width:24px;height:2px;background:currentColor;margin:6px auto;transition:transform .35s var(--ease),opacity .2s}
.menu-btn:hover{color:var(--brand-accent)}
.menu-btn:active{color:var(--brand-accent)}
.hdr.scrolled .menu-btn{color:var(--text)}
.hdr.scrolled .menu-btn:hover{color:var(--brand-primary)}
.menu-btn[aria-expanded=true]{color:#fff}
.menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* --- Button Architecture & Polished Hover System --- */
.btn{display:inline-flex;align-items:center;gap:10px;background-color:var(--brand-primary);color:#fff!important;padding:14px 26px;min-height:48px;border-radius:999px;font:700 1rem Manrope,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:transform .25s cubic-bezier(.22,1,.36,1),background-color .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1),color .25s cubic-bezier(.22,1,.36,1);box-shadow:0 4px 14px rgba(1,58,158,.2)}
.btn:visited{color:#fff!important}
.btn:not(.store)::after{content:"→";transition:transform .25s var(--ease)}
.btn:hover{background-color:var(--brand-blue-accent);color:#fff!important;transform:translateY(-3px) scale(1.02);box-shadow:0 12px 28px rgba(1,58,158,.38)}
.btn:hover::after{transform:translateX(4px)}
.btn:active{background-color:var(--brand-primary-dark);color:#fff!important;transform:translateY(0);box-shadow:0 4px 12px rgba(1,58,158,.25)}

/* Primary Cyan Store Button */
.btn.store{background-color:var(--brand-accent);color:var(--dark)!important;box-shadow:0 4px 14px rgba(1,233,189,.28)}
.btn.store:visited{color:var(--dark)!important}
.btn.store:hover{background-color:#18FFE0;color:var(--dark)!important;transform:translateY(-3px) scale(1.02);box-shadow:0 12px 30px rgba(1,233,189,.5),0 0 24px rgba(1,233,189,.35)}
.btn.store:active{background-color:#00CDA6;color:var(--dark)!important;transform:translateY(0);box-shadow:0 4px 12px rgba(1,233,189,.25)}

/* Small / Header Nav Download Button */
.btn.sm{padding:9px 18px;min-height:42px;font-size:.92rem}
.hdr.scrolled .btn.store{background-color:var(--brand-primary);color:#fff!important;box-shadow:0 4px 14px rgba(1,58,158,.2)}
.hdr.scrolled .btn.store:visited{color:#fff!important}
.hdr.scrolled .btn.store:hover{background-color:var(--brand-blue-accent);color:#fff!important;transform:translateY(-3px) scale(1.02);box-shadow:0 10px 24px rgba(1,58,158,.35)}
.hdr.scrolled .btn.store:active{background-color:var(--brand-primary-dark);color:#fff!important;transform:translateY(0)}

/* Ghost / Secondary Outline Button on Dark */
.btn.ghost,.btn.store.alt2{background-color:transparent;color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.btn.ghost:visited,.btn.store.alt2:visited{color:#fff!important}
.btn.ghost:hover,.btn.store.alt2:hover{background-color:rgba(1,233,189,.14);color:var(--brand-accent)!important;box-shadow:inset 0 0 0 2px var(--brand-accent),0 8px 24px rgba(1,233,189,.28);transform:translateY(-3px) scale(1.02)}
.btn.ghost:active,.btn.store.alt2:active{background-color:rgba(1,233,189,.22);color:var(--brand-accent)!important;transform:translateY(0)}

/* Secondary Action Button (e.g. See all screens) */
.btn.dk2{background-color:var(--brand-primary-light);color:var(--brand-primary)!important;box-shadow:0 2px 8px rgba(1,58,158,.1)}
.btn.dk2:visited{color:var(--brand-primary)!important}
.btn.dk2:hover{background-color:var(--brand-primary);color:#fff!important;transform:translateY(-3px) scale(1.02);box-shadow:0 10px 26px rgba(1,58,158,.3)}
.btn.dk2:active{background-color:var(--brand-blue-accent);color:#fff!important;transform:translateY(0)}
.btn[aria-disabled=true]{opacity:.5;pointer-events:none}

/* Store Buttons Layout & Light/Dark Variant Cascade */
.stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.stores.c{justify-content:center}

.sec .stores .store:not(.alt2){background-color:var(--brand-primary);color:#fff!important;box-shadow:0 4px 14px rgba(1,58,158,.2)}
.sec .stores .store:not(.alt2):visited{color:#fff!important}
.sec .stores .store:not(.alt2):hover{background-color:var(--brand-blue-accent);color:#fff!important;transform:translateY(-2px);box-shadow:0 10px 25px rgba(1,58,158,.35)}
.sec .stores .store:not(.alt2):active{background-color:var(--brand-primary-dark);color:#fff!important;transform:translateY(0)}

.sec .stores .store.alt2{background-color:transparent;color:var(--text)!important;box-shadow:inset 0 0 0 1.5px var(--border)}
.sec .stores .store.alt2:visited{color:var(--text)!important}
.sec .stores .store.alt2:hover{background-color:var(--brand-primary-light);color:var(--brand-primary)!important;box-shadow:inset 0 0 0 1.5px var(--brand-primary),0 8px 20px rgba(1,58,158,.15);transform:translateY(-2px)}
.sec .stores .store.alt2:active{background-color:#DEEBFF;color:var(--brand-primary)!important;transform:translateY(0)}

.final .stores .store:not(.alt2){background-color:var(--brand-accent);color:var(--dark)!important;box-shadow:0 4px 14px rgba(1,233,189,.3)}
.final .stores .store:not(.alt2):visited{color:var(--dark)!important}
.final .stores .store:not(.alt2):hover{background-color:#18FFE0;color:var(--dark)!important;transform:translateY(-3px) scale(1.02);box-shadow:0 12px 30px rgba(1,233,189,.5),0 0 24px rgba(1,233,189,.35)}
.final .stores .store:not(.alt2):active{background-color:#00CDA6;color:var(--dark)!important;transform:translateY(0)}

.final .store.alt2{background-color:transparent;color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.final .store.alt2:visited{color:#fff!important}
.final .store.alt2:hover{background-color:rgba(1,233,189,.14);color:var(--brand-accent)!important;box-shadow:inset 0 0 0 2px var(--brand-accent),0 8px 24px rgba(1,233,189,.28);transform:translateY(-3px) scale(1.02)}
.final .store.alt2:active{background-color:rgba(1,233,189,.22);color:var(--brand-accent)!important;transform:translateY(0)}

/* Typography & Headings */
h1{font-size:clamp(2.6rem,8vw,6rem);line-height:.98;letter-spacing:-.045em;margin:0 0 22px;font-weight:800}
h2{letter-spacing:-.035em;line-height:1.05;font-weight:800;margin:0 0 20px}
h2.big{font-size:clamp(2.2rem,5.4vw,4.2rem)}
h2.mid{font-size:clamp(1.9rem,4vw,3rem)}
h3{letter-spacing:-.02em}
.lead{font-size:1.25rem;color:var(--muted);max-width:30em}
.hero .lead,.final .lead,.dkband p{color:#CBD5E1}

/* Hero Section */
.hero{position:relative;background:var(--dark);color:#fff;padding:170px 0 90px;overflow:hidden;isolation:isolate}
.hero.home{padding:130px 0 60px;min-height:calc(100vh - 40px);display:flex;flex-direction:column;justify-content:center}
.mesh{position:absolute;inset:-20%;z-index:-2;background:radial-gradient(45% 45% at 75% 30%,rgba(1,233,189,.32),transparent),radial-gradient(40% 40% at 20% 65%,rgba(1,58,158,.52),transparent);animation:mesh 14s ease-in-out infinite alternate;filter:blur(30px)}
@keyframes mesh{to{transform:translate(4%,-3%) scale(1.08)}}
.grid-bg{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(70% 70% at 60% 40%,#000,transparent)}
.hgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.hcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* Phone Mockup Frame */
.hphone{position:relative;display:flex;justify-content:center;align-items:center}
.phone{
  --phone-pad:clamp(4px,1.8vw,8px);
  --phone-border:clamp(1px,0.4vw,2px);
  --phone-radius:clamp(24px,8vw,44px);
  --screen-radius:calc(var(--phone-radius) - var(--phone-pad) - var(--phone-border));
  --phone-shadow:0 clamp(12px,3.5vw,30px) clamp(25px,6vw,70px) rgba(0,0,0,.45);
  position:relative;
  margin:auto;
  width:240px;
  aspect-ratio:270/560;
  background:#000;
  border:var(--phone-border) solid rgba(255,255,255,.18);
  border-radius:var(--phone-radius);
  padding:var(--phone-pad);
  box-shadow:var(--phone-shadow);
  box-sizing:border-box;
}
.phone.main{
  width:270px;
  box-shadow:0 clamp(16px,4vw,40px) clamp(35px,7vw,90px) rgba(0,0,0,.55),
              0 0 clamp(20px,4.5vw,60px) rgba(1,233,189,.22);
}
.app-screen{
  position:relative;
  width:100%;
  height:100%;
  border-radius:var(--screen-radius,34px);
  overflow:hidden;
  background:#000;
}
.app-screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.app-screen.empty::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.1rem;text-align:center;padding:20px;box-sizing:border-box;background:linear-gradient(145deg,#0a2147,#071739)}

/* Hero Floating Elements (Balanced distributed composition relative to hero phone container) */
.fl{position:absolute;z-index:4;pointer-events:none;white-space:nowrap}
.fi{display:inline-flex;align-items:center;gap:8px;background:rgba(7,23,57,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16);color:#fff;padding:10px 18px;border-radius:999px;font-size:.88rem;font-weight:700;box-shadow:0 14px 35px rgba(0,0,0,.4),0 0 20px rgba(1,233,189,.12)}
.f1{top:14%;left:-15px}
.f2{top:38%;right:5px}
.f3{bottom:14%;left:5px}

@media(max-width:1100px) and (min-width:901px){
  .f1{top:12%;left:0}
  .f2{top:38%;right:0}
  .f3{bottom:12%;left:5px}
  .fi{font-size:.82rem;padding:8px 14px}
}

.seq{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.rise{transform:translateY(40px) scale(.96)}
.go .seq{opacity:1;transform:none}
.badge{display:inline-block;padding:6px 14px;border-radius:999px;border:1px solid rgba(1,233,189,.4);color:var(--brand-accent);font-weight:700;font-size:.9rem;margin-bottom:22px;backdrop-filter:blur(6px)}

/* Sections */
.sec{padding:110px 0}
.sec a:not(.btn):not(.acc-b){color:var(--brand-primary);text-decoration:none;transition:color .2s var(--ease)}
.sec a:not(.btn):not(.acc-b):visited{color:var(--brand-primary)}
.sec a:not(.btn):not(.acc-b):hover{color:var(--brand-blue-accent);text-decoration:underline}
.sec a:not(.btn):not(.acc-b):active{color:var(--brand-primary-dark)}

.intro{text-align:center;padding:90px 0 70px}
.intro h2{max-width:14em;margin:0 auto 24px;color:var(--text);font-size:clamp(2.2rem,5vw,4rem);line-height:1.1}
.words{display:flex;justify-content:center;align-items:center;gap:10px 28px;flex-wrap:wrap;font-size:clamp(1.05rem,2.2vw,1.3rem);font-weight:700;color:var(--muted);margin:0 auto}
.words span{display:inline-flex;align-items:center}
.words span:not(:last-child)::after{content:"/";margin-left:clamp(14px,2vw,28px);color:var(--brand-primary);opacity:.75}

/* Story Section */
.story{padding:40px 0}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.sstep{min-height:90vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .4s var(--ease)}
.sstep.on{opacity:1}
.k{font-size:.9rem;text-transform:uppercase;letter-spacing:.12em;color:var(--brand-primary);font-weight:800;margin:0 0 10px}
.sstep h3{font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;margin:0 0 14px}
.sstep p{font-size:1.2rem;color:var(--muted);max-width:24em;margin:0}
.sstick{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;gap:34px}
.big .app-screen{position:relative}
.ss{position:absolute;inset:0;opacity:0;transform:scale(1.04) translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ss.on{opacity:1;transform:none}
.dots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;position:relative}
.dots::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--border)}
.dots li{position:relative;padding-left:26px;font-size:.85rem;font-weight:700;color:var(--muted);transition:color .3s}
.dots li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--border);transition:.3s}
.dots li.on{color:var(--text)}
.dots li.on::before{background:var(--brand-primary);border-color:var(--brand-primary);transform:scale(1.25)}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:40px}
.tile{position:relative;overflow:hidden;border-radius:14px;padding:34px;min-height:380px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--border);transition:transform .35s var(--ease),border-color .3s;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0),rgba(1,233,189,.12),transparent 60%),var(--surface)}
.tile:hover{transform:translateY(-4px);border-color:var(--brand-primary)}
.tile.dk{background:radial-gradient(500px circle at var(--mx,50%) var(--my,0),rgba(1,233,189,.2),transparent 60%),var(--dark);color:#fff;border-color:#142B55}
.tile.dk p{color:#CBD5E1}
.t-lg{grid-column:span 12}
.t-m{grid-column:span 7}
.t-s{grid-column:span 5}
.tile h3{font-size:1.9rem;margin:0 0 8px}
.tile p{color:var(--muted);max-width:22em;margin:0}
.tx{position:relative;z-index:1}
.vis{display:flex;gap:20px;justify-content:flex-end;align-items:flex-start;height:260px;overflow:visible;margin:20px -10px -34px}
.t-lg{flex-direction:row;align-items:flex-start;justify-content:space-between}
.t-lg .vis{margin:0 -10px -34px 0;height:auto;max-height:none;align-self:stretch}
.phone.crop{width:220px;transition:transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);will-change:transform}
.phone.crop.b{margin-top:50px}
.tile:hover .phone.crop{transform:translateY(-4px) scale(1.015)}
.t-m,.t-s{flex-direction:column}
.quiet{color:var(--muted);margin-top:26px}

/* Dark Band */
.dkband{background:var(--dark);color:#fff}
.dkband a:not(.btn){color:var(--brand-accent)!important}
.dkband a:not(.btn):visited{color:var(--brand-accent)!important}
.dkband a:not(.btn):hover{color:#fff!important;text-decoration:underline}
.tl{list-style:none;margin:50px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative}
.tl-line{position:absolute;left:0;right:0;top:22px;height:2px;background:#183364}
.tl-fill{display:block;height:100%;background:linear-gradient(90deg,var(--brand-accent),var(--brand-blue-sky));transform:scaleX(var(--p,0));transform-origin:left}
.tl-i{padding-top:60px;position:relative}
.tl-i::before{content:"";position:absolute;top:15px;left:0;width:16px;height:16px;border-radius:50%;background:var(--dark);border:2px solid var(--brand-accent)}
.num{font-size:.9rem;font-weight:800;color:var(--brand-accent)}
.tl-i h3{font-size:1.8rem;margin:6px 0}
.tl-i p{margin:0}

/* Duo & Two-Column Layout */
.duo{display:flex;gap:24px;justify-content:center;max-width:100%}
.duo>div:nth-child(2){margin-top:70px}
.duo.one{justify-content:center}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.pat .btn{margin-top:30px}
.dl{background:var(--s2)}

/* Final CTA Section */
.final{background:linear-gradient(135deg,#071739 0%,#013A9E 50%,#0A1C3E 100%);background-size:200% 200%;animation:gr 10s ease infinite;color:#fff;text-align:center}
@keyframes gr{50%{background-position:100% 50%}}
.final .lead{margin:0 auto}

/* Cards */
.cards{display:grid;gap:0}
.card{border-top:1px solid var(--border);padding:26px 0}
.card h3{margin:0 0 6px;font-size:1.4rem}
.card p{margin:0;color:var(--muted)}
.cards+.cards{margin-top:0}

/* Accordion */
.acc h3{margin:0;border-bottom:1px solid var(--border)}
.acc-b{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;width:100%;padding:20px 4px;cursor:pointer;font-weight:700;color:var(--text);transition:color .2s var(--ease)}
.acc-b:visited{color:inherit}
.acc-b:hover{color:var(--brand-primary)}
.acc-b:active{color:var(--brand-primary-dark)}
.acc-b::after{content:"+";font-size:1.5rem;transition:transform .3s}
.acc-b[aria-expanded=true]::after{transform:rotate(45deg)}
.acc-b:focus-visible{outline:3px solid var(--brand-blue-sky);outline-offset:3px}
.acc-p{padding:0 4px 18px;color:var(--muted)}

/* Forms */
.form{display:grid;gap:8px}
.form label{font-weight:700;margin-top:10px}
.form input,.form textarea{padding:14px;border:1.5px solid var(--border);border-radius:10px;font:inherit;width:100%;background:#fff;transition:border-color .25s,box-shadow .25s}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--brand-primary);box-shadow:0 0 0 4px rgba(1,58,158,.16)}
.msg{color:var(--muted)}

/* Legal Pages */
.legal h2{font-size:1.5rem;margin-top:2.2em;scroll-margin-top:90px}
.legal p{color:var(--muted)}
.legal a{color:var(--brand-primary);text-decoration:underline;text-underline-offset:3px;transition:color .2s var(--ease)}
.legal a:visited{color:var(--brand-primary)}
.legal a:hover{color:var(--brand-blue-accent)}
.legal a:active{color:var(--brand-primary-dark)}
.legal-wrap{display:grid;grid-template-columns:230px 1fr;gap:50px;max-width:1080px}
.toc{position:sticky;top:90px;align-self:start;max-height:80vh;overflow-y:auto;overflow-x:hidden;font-size:.9rem;display:flex;flex-direction:column;gap:0;align-items:stretch}
.toc a{display:block;padding:5px 0 5px 14px;color:var(--muted);text-decoration:none;border-left:2px solid var(--border);transition:.2s}
.toc a::after{display:none!important}
.toc a.on{color:var(--brand-primary);border-color:var(--brand-primary);font-weight:700}
.toc a:hover{color:var(--brand-primary);border-color:var(--brand-primary)}

/* Screenshots Showcase & Lightbox */
.mag{display:grid;grid-template-columns:repeat(6,1fr);gap:40px 24px;align-items:start}
.shot{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;font-weight:700;transition:transform .4s var(--ease)}
.shot:hover{transform:translateY(-8px)}
.shot:hover .app-screen img{transform:scale(1.04)}
.app-screen img{transition:transform .6s var(--ease)}
.shot:focus-visible{outline:3px solid var(--brand-blue-sky);border-radius:30px}
.s1{grid-column:span 2}
.s2{grid-column:span 3}
.s3{grid-column:span 2;margin-top:60px}
.s2 .phone{width:300px}
.s1 .phone,.s3 .phone{width:230px}

.lb{position:fixed;inset:0;background:rgba(5,15,38,.96);display:flex;align-items:center;justify-content:center;gap:10px;z-index:100;color:#fff;animation:pg .3s}
.lb[hidden]{display:none}
.lb figure{margin:0;text-align:center;max-width:70vw}
.lb img{max-height:76vh;border-radius:20px}
.lb button{background:none;border:0;color:#fff;font-size:2.6rem;cursor:pointer;min-width:48px;min-height:48px}
.lb-x{position:absolute;top:12px;right:16px}

/* --- Clean, Professional Footer Architecture --- */
.ftr{background:var(--dark);color:#94A3B8;padding:70px 0 26px}
.grid4{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.grid4 > div{display:flex;flex-direction:column;align-items:flex-start}
.ftr a{display:inline-block;color:#CBD5E1;padding:5px 0;width:fit-content;text-decoration:none;background:none!important;transition:color .2s var(--ease),transform .2s var(--ease)}
.ftr a:visited{color:#CBD5E1}
.ftr a:hover{color:var(--brand-accent)!important;background:none!important;transform:translateX(2px)}
.ftr a:active{color:#00CDA6!important;background:none!important}
.ftr h2{font-size:.95rem;color:#fff;margin:0 0 10px}
.ftr strong{color:#fff;font-size:1.3rem}
.ftr .brand{display:inline-flex;align-items:center;color:#fff!important;font-size:1.3rem;margin-bottom:8px;padding:0;background:none!important;transform:none!important}
.ftr .brand:visited{color:#fff!important}
.ftr .brand:hover{color:#fff!important;background:none!important;transform:none!important}
.ftr .brand:active{color:#fff!important}
.fstore{display:flex;gap:24px;flex-wrap:wrap;margin-top:30px}
.fstore a{color:var(--brand-accent)!important;font-weight:700;background:none!important;transform:none}
.fstore a:visited{color:var(--brand-accent)!important}
.fstore a:hover{color:#fff!important;background:none!important;transform:translateY(-2px)}
.fstore a:active{color:var(--brand-accent)!important;transform:translateY(0)}
.copy{margin-top:30px;font-size:.9rem;overflow-wrap:break-word}

/* Reveal Animations & Desktop Cursor */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
/* Desktop Custom Difference Cursor */
#cdot{
  position:fixed;
  left:0;
  top:0;
  width:10px;
  height:10px;
  margin:-5px;
  border-radius:50%;
  background:#ffffff;
  pointer-events:none;
  z-index:9999;
  transition:width .22s cubic-bezier(.22,1,.36,1),height .22s cubic-bezier(.22,1,.36,1),margin .22s cubic-bezier(.22,1,.36,1),opacity .2s,border .22s,background-color .2s;
  mix-blend-mode:difference;
}
#cdot.hidden{opacity:0}

/* Cursor on text links: smooth difference magnifying lens */
#cdot.on-link{
  width:36px;
  height:36px;
  margin:-18px;
  background:#ffffff;
  border-radius:50%;
  opacity:.95;
}

/* Cursor on buttons: distinct precision target ring that preserves button readability */
#cdot.on-btn{
  width:48px;
  height:48px;
  margin:-24px;
  background:transparent;
  border:2px solid #ffffff;
  border-radius:50%;
  opacity:1;
}
#cdot.on-btn::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ffffff;
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .seq,.rv{opacity:1!important;transform:none!important}
}