/* PainCure marketing site — Bootstrap 5 + plain CSS (no build step) */
:root{
  --paper:#f4f4f5;
  --snow:#fff;
  --ink:#09090b;
  --ink-2:#3f3f46;
  --muted:#71717a;
  --border:#ececee;
  --accent:#0f8f7e;          /* clinic teal */
  --accent-2:#1e5a96;        /* clinic blue */
  --accent-soft:#dff4ef;
  --disp:'Bricolage Grotesque','DM Sans',sans-serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --hand:'Caveat',cursive;
  --radius:26px;
}

body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--disp);color:var(--ink);letter-spacing:-.025em}
img,video{display:block;max-width:100%}
.hl{color:var(--accent)}

/* ── Buttons ── */
.btn{font-weight:600;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:#fff;border:1.5px solid var(--ink)}
.btn-ink:hover,.btn-ink:focus{background:#27272a;color:#fff;box-shadow:0 12px 28px rgba(9,9,11,.22)}
.btn-glass{background:rgba(255,255,255,.78);color:var(--ink);border:1.5px solid rgba(255,255,255,.95)}
.btn-glass:hover{background:#fff;color:var(--ink)}
.btn-whatsapp{background:#25d366;color:#06331a;border:none}
.btn-whatsapp:hover{background:#1fbe5b;color:#06331a}
.play-dot{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:6px;border-radius:50%;background:var(--ink);color:#fff}
.btn .play-dot .fa-icon,.play-dot .fa-icon{width:9px;height:9px;margin:0 0 0 2px}

/* Attention animations for the hero buttons (off for reduced-motion users) */
.btn-pulse{position:relative;animation:btnGlow 2.4s ease-in-out infinite}
.btn-pulse .play-dot{position:relative}
.btn-pulse .play-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ink);animation:playRipple 1.8s ease-out infinite}
@keyframes btnGlow{0%,100%{box-shadow:0 0 0 0 rgba(15,143,126,0)}50%{box-shadow:0 0 0 7px rgba(15,143,126,.18)}}
@keyframes playRipple{from{transform:scale(1);opacity:.7}to{transform:scale(2.1);opacity:0}}
.btn-shine{position:relative;overflow:hidden}
.btn-shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:btnShine 3.5s ease-in-out infinite}
@keyframes btnShine{0%,60%{left:-60%}100%{left:130%}}

/* ── Navbar: transparent over the orb, frosted after scrolling ── */
.site-nav{padding:16px 0;transition:background .3s ease,box-shadow .3s ease,padding .3s ease}
.site-nav.scrolled{background:rgba(244,244,245,.96);box-shadow:0 1px 0 var(--border);padding:10px 0}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:22px;color:var(--ink);text-decoration:none}
/* Font Awesome SVG icons (inline sprite in index.html) */
.fa-icon{width:1em;height:1em;fill:currentColor;flex-shrink:0;vertical-align:-.125em}
.brand-mark{display:inline-flex;color:var(--accent)}
.brand-mark .fa-icon{width:30px;height:30px}
.site-nav .nav-link{color:var(--ink-2);font-weight:500}
.site-nav .nav-link:hover{color:var(--ink)}
.navbar-toggler{border:none;box-shadow:none!important}

/* ── Pills & small type ── */
.pill{display:inline-block;padding:7px 16px;border-radius:999px;background:var(--snow);color:var(--ink);font-size:13px;font-weight:600;box-shadow:0 6px 22px rgba(9,9,11,.07)}
.pill-light{background:rgba(255,255,255,.75)}
.scribble{font-family:var(--hand);font-size:24px;color:var(--ink-2);margin-top:22px;transform:rotate(-2deg)}
.scribble-left{text-align:left;color:var(--accent);margin-top:14px}

/* ── Hero + glowing orb ── */
.hero{position:relative;padding:150px 0 90px;overflow:hidden}
.orb-wrap{position:absolute;top:0;left:50%;width:100vw;height:max(min(90vh,720px),600px);transform:translateX(-50%);overflow:hidden;z-index:0;
  -webkit-mask:linear-gradient(180deg,#000 78%,transparent 99%);mask:linear-gradient(180deg,#000 78%,transparent 99%)}
/* Performance: no live blur filters — the soft look comes from wide gradient fades,
   and only transform/opacity animate (GPU-friendly). Animations pause off-screen (.paused). */
.orb-wrap{contain:paint}
.orb{position:absolute;left:50%;top:calc(max(107vw,1500px) * -.62);width:max(107vw,1500px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  transform:translateX(-50%);transform-origin:50% 22%;will-change:transform,opacity;
  background:radial-gradient(circle at 50% 32%,#c8f5e8 0%,#8fe3cf 14%,#4fc9b0 28%,#2fb09d 40%,#3a9cc4 54%,#6c9be0 66%,#a9a6ee 78%,#c9c3f4 87%,rgba(220,226,248,.55) 93%,rgba(240,242,252,0) 100%);
  animation:orbIn 1.4s cubic-bezier(.16,.8,.3,1) both,orbBreathe 14s ease-in-out 1.4s infinite alternate}
.orb::before{content:"";position:absolute;inset:-14%;will-change:transform;
  background:linear-gradient(112deg,transparent 12%,rgba(236,255,250,.45) 30%,transparent 50%,rgba(210,244,255,.35) 68%,transparent 88%);
  animation:orbVeil 13s ease-in-out infinite alternate}
.orb::after{content:"";position:absolute;inset:-14%;background:radial-gradient(40% 32% at 32% 24%,rgba(245,255,252,.55),transparent 75%)}
.orb-tint{position:absolute;inset:-10%;will-change:opacity;background:radial-gradient(48% 42% at 66% 62%,rgba(160,140,235,.32),transparent 75%);animation:orbTint 19s ease-in-out infinite alternate}
.paused .orb,.paused .orb::before,.paused .orb-tint{animation-play-state:paused}
@keyframes orbIn{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes orbBreathe{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.03)}}
@keyframes orbVeil{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
@keyframes orbTint{from{opacity:.55}to{opacity:1}}

/* Hero content animates in with pure CSS on page load — never waits for JavaScript */
.hero-anim{animation:heroUp .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.hero-inner{z-index:2}
.display-title{font-size:clamp(44px,8vw,96px);font-weight:700;line-height:.98;margin:22px 0 22px}
/* Loss-led hero: a longer headline, so it runs a size smaller */
.display-loss{font-size:clamp(38px,6.2vw,80px)}

/* ── Hero 2-column layout & Melone-style graphical hero ── */
.hero-main{position:relative;overflow:hidden;padding:125px 0 75px}
.hero-main .orb-wrap{height:100%;min-height:760px;-webkit-mask:linear-gradient(180deg,#000 86%,transparent 100%);mask:linear-gradient(180deg,#000 86%,transparent 100%)}
.hero-main .orb{top:calc(max(107vw,1500px) * -.48)}
.hero-main .pill{display:inline-flex;align-items:center;gap:8px}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(15,143,126,.6);animation:pulseDot 1.8s infinite}
@keyframes pulseDot{70%{box-shadow:0 0 0 9px rgba(15,143,126,0)}100%{box-shadow:0 0 0 0 rgba(15,143,126,0)}}

.main-title{font-size:clamp(36px,4.4vw,62px);font-weight:700;line-height:1.04;margin:20px 0 16px;text-wrap:balance}
.main-lead{font-size:clamp(16px,1.4vw,19px);color:var(--ink-2);max-width:560px;margin:0}
.main-fineprint{margin:16px 0 0;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.main-fineprint .fa-icon{color:var(--accent);width:15px;height:15px}

.loss-line{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:8px 16px 8px 10px;border-radius:16px;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(247,193,195,.85);color:#8f1418;font-size:14px;line-height:1.4;text-decoration:none;box-shadow:0 8px 24px rgba(200,40,46,.08);transition:transform .2s ease,box-shadow .2s ease}
.loss-line:hover{color:#8f1418;transform:translateY(-2px);box-shadow:0 12px 28px rgba(200,40,46,.15)}
.loss-line strong{color:#c8282e;font-family:var(--disp);font-size:15px;white-space:nowrap}
.loss-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:10px;background:#e5484d;color:#fff}
.loss-icon .fa-icon{width:15px;height:15px}
.loss-cta{display:inline-block;margin-left:4px;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ── Hero Side-by-Side Comparison Card (Without vs With PainCure) ── */
.hero-compare-card{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1.5px solid rgba(255,255,255,.95);border-radius:28px;box-shadow:0 28px 70px rgba(12,40,55,.11), inset 0 1px 1px rgba(255,255,255,.95);overflow:hidden;position:relative}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;position:relative}
.compare-vs-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid rgba(15,23,42,.10);box-shadow:0 6px 18px rgba(9,9,11,.12);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:13px;font-weight:800;color:var(--ink);letter-spacing:.5px;z-index:3}
.compare-col{padding:28px 24px;display:flex;flex-direction:column}

/* Side A: Without PainCure */
.compare-without{background:rgba(255,245,245,.65);border-right:1px solid rgba(254,202,202,.65)}
.badge-bad{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}

/* Side B: With PainCure */
.compare-with{background:rgba(240,253,244,.82);position:relative}
.badge-good{background:#dcfce7;color:#166534;border:1px solid #86efac}

/* Shared Comparison element styles */
.compare-head{margin-bottom:18px}
.compare-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 15px;border-radius:999px;font-family:var(--disp);font-weight:700;font-size:13.5px;letter-spacing:-.01em}
.compare-badge .fa-icon{width:13px;height:13px}
.compare-lead{font-size:13.5px;color:var(--muted);margin:6px 0 0;font-weight:500}

.compare-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;flex:1}
.compare-tile{border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:13px;transition:transform .15s ease}
.tile-bad{background:rgba(255,255,255,.82);border:1px solid rgba(254,202,202,.75);box-shadow:0 2px 8px rgba(220,38,38,.04)}
.tile-bad .compare-icon{background:#fee2e2;color:#dc2626}
.tile-good{background:rgba(255,255,255,.94);border:1px solid rgba(134,239,172,.7);box-shadow:0 2px 8px rgba(15,143,126,.06)}
.tile-good .compare-icon{background:var(--accent);color:#fff}

.compare-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;flex-shrink:0}
.compare-icon .fa-icon{width:13px;height:13px}
.compare-tile-text{display:flex;flex-direction:column;min-width:0}
.compare-tile-text strong{display:block;font-size:15px;color:var(--ink);line-height:1.25}
.compare-tile-text span{display:block;font-size:13px;color:var(--ink-2);line-height:1.35;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.compare-footer-bar{padding:12px 20px;background:rgba(255,255,255,.65);border-top:1px solid rgba(15,143,126,.14);display:flex;align-items:center;justify-content:center}
.compare-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--accent)}

/* Mobile adjustments */
@media(max-width:991.98px){
  .hero-main{padding:110px 0 50px;text-align:center}
  .hero-main .main-lead{margin:0 auto}
  .hero-main .d-flex{justify-content:center}
  .hero-main .main-fineprint{justify-content:center}
  .hero-compare-card{margin-top:24px;text-align:left}
  .hero-main .orb{top:calc(max(107vw,1100px) * -.42)}
}
@media(max-width:575.98px){
  .hero-main{padding:90px 0 40px}
  .main-title{font-size:32px}
  .compare-grid{grid-template-columns:1fr}
  .compare-vs-badge{display:none}
  .loss-line{width:100%;justify-content:center;font-size:13px;padding:8px 12px}
  .compare-without{border-right:none;border-bottom:1px solid rgba(254,202,202,.65)}
  .compare-col{padding:18px 16px}
  .compare-tile{padding:10px 14px}
  .compare-tile-text strong{font-size:14px}
  .compare-tile-text span{font-size:12px}
}
/* Loss calculator: its own section, a white panel with the slider card */
.loss-wrap{background:var(--snow);border-radius:32px;padding:clamp(28px,5vw,64px);border:1px solid var(--border);box-shadow:0 30px 80px rgba(9,9,11,.06)}
.loss-wrap .section-title{text-align:left}
.loss-lead{font-size:18px;color:var(--ink-2);max-width:520px}
.loss-points{margin-top:18px}
@media (max-width:991.98px){.loss-wrap .section-title,.loss-wrap .col-lg-6{text-align:center}.loss-lead{margin:0 auto}.loss-points{display:inline-block;text-align:left}}
.loss-calc{background:var(--snow);border-radius:var(--radius);padding:22px;box-shadow:0 20px 50px rgba(9,9,11,.10);border:1px solid var(--border);margin:0}
.lc-title{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:19px;margin:0 0 16px;color:var(--ink)}
.lc-title .fa-icon{width:18px;height:18px;color:var(--accent)}
.lc-row{display:block;margin-bottom:14px;font-size:14px;color:var(--ink-2)}
.lc-row>span{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.lc-row b{color:var(--ink);white-space:nowrap}
.lc-row input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.lc-step{display:inline-flex;align-items:center;gap:6px}
.lc-step button{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--paper);color:var(--ink);font-weight:700;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.lc-step button:hover{background:var(--accent-soft);border-color:var(--accent);color:#075e52}
.lc-money{display:inline-flex;align-items:center;font-weight:700;color:var(--ink);border:1px solid var(--border);border-radius:10px;padding:2px 8px;background:#fff}
.lc-money:focus-within{border-color:var(--accent)}
.lc-money input{width:64px;border:0;outline:0;font:inherit;color:inherit;text-align:right;background:none;-moz-appearance:textfield}
.lc-money input::-webkit-inner-spin-button,.lc-money input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.lc-result{position:relative;background:#fef3f2;border-radius:18px;padding:16px 20px;margin:8px 0 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;overflow:visible;transition:transform .2s ease}
.lc-result-data{position:relative;z-index:2}
.lc-amount{display:block;font-family:var(--disp);font-weight:800;font-size:38px;line-height:1.05;color:#b42318}
.lc-sub{display:block;font-size:13.5px;color:#7a271a;font-weight:600;margin-top:2px}
.lc-sub small{font-weight:400}

/* ── Rubber Stamp (Exact style from reference: double rounded border with 'LOSS') ── */
.loss-stamp{position:relative;z-index:3;pointer-events:none;opacity:0;transform:rotate(-24deg) scale(2.8);will-change:transform,opacity;transition:opacity .15s ease;flex-shrink:0}
.loss-stamp-box{display:inline-flex;align-items:center;justify-content:center;padding:5px 14px;border:3.5px solid #dc2626;outline:1.5px solid #dc2626;outline-offset:-5px;border-radius:9px;background:rgba(254,242,242,.92);box-shadow:0 4px 14px rgba(220,38,38,.18);user-select:none}
.loss-stamp-txt{font-family:var(--disp);font-weight:900;font-size:25px;line-height:1;letter-spacing:.08em;color:#dc2626;text-transform:uppercase;text-shadow:0 0 1px rgba(220,38,38,.4)}
.lc-result.stamped{animation:lcImpact .32s ease-out}
.lc-result.stamped .loss-stamp{animation:lcStampSlam .42s cubic-bezier(.16,1.25,.35,1.15) forwards}
@keyframes lcStampSlam{
  0%{opacity:0;transform:rotate(-24deg) scale(2.8)}
  65%{opacity:1;transform:rotate(-11deg) scale(.92)}
  85%{opacity:1;transform:rotate(-11deg) scale(1.04)}
  100%{opacity:1;transform:rotate(-11deg) scale(1)}
}
@keyframes lcImpact{
  0%,100%{transform:none}
  45%{transform:scale(.98) translateY(1.5px)}
  75%{transform:scale(1.01) translateY(-1px)}
}
@media(prefers-reduced-motion:reduce){
  .lc-result.stamped,.lc-result.stamped .loss-stamp{animation:none!important}
  .lc-result.stamped .loss-stamp{opacity:1!important;transform:rotate(-11deg) scale(1)!important}
}
@media(max-width:575.98px){
  .lc-result{padding:14px 16px}
  .lc-amount{font-size:30px}
  .loss-stamp-box{padding:4px 10px}
  .loss-stamp-txt{font-size:20px}
}
.loss-calc .btn .fa-icon{width:14px;height:14px;margin-left:6px}
.lc-note{font-size:12px;color:var(--muted);margin:10px 0 0;text-align:center}
@media (max-width:575.98px){.lc-amount{font-size:34px}}
.hero-lead{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:640px;margin:0 auto}
.hero-stage{z-index:2;margin-top:70px}

/* ── AI image slots (files go in website/images/) ── */
.img-slot{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,#dff4ef,#e6ebfb);box-shadow:0 24px 60px rgba(9,9,11,.10)}
.img-hero{aspect-ratio:16/10}
.img-slot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.img-slot:hover img{transform:scale(1.03)}
.img-slot.missing img{display:none}
.img-slot.missing::after{content:"AI image · " attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-weight:600;font-size:14px;color:#3f6b66;
  background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(255,255,255,.4) 16px 32px)}

/* ── Live front-desk feed (messages pop in one by one) ── */
.desk-feed{background:var(--snow);border-radius:var(--radius);padding:20px;box-shadow:0 30px 70px rgba(9,9,11,.14);border:1px solid var(--border)}
.feed-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--border)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:livePulse 1.8s infinite}
@keyframes livePulse{70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.feed-body{display:flex;flex-direction:column;gap:8px;padding-top:14px;min-height:250px}
.msg{align-self:flex-start;max-width:92%;font-size:14px;line-height:1.35;padding:10px 13px;border-radius:17px;border-bottom-left-radius:5px;background:#ececee;color:var(--ink);
  opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom left}
.msg small{color:var(--muted)}
.msg-accent{background:var(--accent-soft);color:#075e52}
.msg-out{align-self:flex-end;background:var(--ink);color:#fff;border-radius:17px;border-bottom-right-radius:5px;transform-origin:bottom right}
.msg-typing{display:inline-flex;gap:4px;align-items:center}
.msg-typing span{width:6px;height:6px;border-radius:50%;background:#a1a1aa;animation:typingDot 1.3s infinite}
.msg-typing span:nth-child(2){animation-delay:.18s}
.msg-typing span:nth-child(3){animation-delay:.36s}
@keyframes typingDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
.desk-feed.play .msg{animation:msgPop .44s cubic-bezier(.22,.7,.3,1) forwards;animation-delay:var(--d)}
.desk-feed.play .msg-typing{animation:msgPop .3s ease forwards,msgHide .3s ease 1s forwards}
@keyframes msgPop{to{opacity:1;transform:none}}
@keyframes msgHide{to{opacity:0;height:0;padding:0;margin:0}}
.feed-time{display:block;margin-top:12px;font-family:var(--hand);font-size:21px;color:var(--accent)}

/* ── Marquee strip ── */
.marquee{overflow:hidden;padding:22px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--snow)}
.marquee-track{display:flex;width:max-content;gap:28px;align-items:center;animation:marquee 38s linear infinite}
.marquee-track span{font-family:var(--disp);font-size:22px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.marquee-track i{font-style:normal;color:var(--accent);display:inline-flex}
.marquee-track i .fa-icon{width:16px;height:16px}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── Sections ── */
.section{padding:110px 0}
.section-paper{background:var(--snow)}
.section-head{max-width:760px;margin:0 auto 60px;text-align:center}
.section-title{font-size:clamp(32px,4.6vw,56px);font-weight:700;line-height:1.04;margin:18px 0 16px}
.section-head p{font-size:18px;color:var(--muted)}

.soft-card{background:var(--snow);border-radius:var(--radius);padding:30px 26px;border:1px solid var(--border);transition:transform .3s ease,box-shadow .3s ease}
.soft-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(9,9,11,.08)}
.ic{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:16px;background:var(--accent-soft);color:var(--accent);transition:background .3s ease,color .3s ease}
.ic .fa-icon{width:24px;height:24px}
.ic-sm{width:42px;height:42px;border-radius:12px;margin-bottom:4px}
.ic-sm .fa-icon{width:19px;height:19px}
.soft-card:hover .ic{background:var(--accent);color:#fff}
.soft-card h3{font-size:21px;font-weight:700;margin:14px 0 8px}
.soft-card p{color:var(--muted);margin:0}

/* ── Benefits ── */
.benefit{margin-bottom:110px}
.benefit:last-child{margin-bottom:0}
.num{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--accent);letter-spacing:.12em}
.benefit-title{font-size:clamp(28px,3.4vw,42px);font-weight:700;margin:8px 0 16px}
.benefit-text{font-size:18px;color:var(--ink-2)}

/* ── Dark statement cards ── */
.section-ink{background:var(--ink);padding:90px 0}
.stat-card{height:100%;border-radius:var(--radius);padding:30px 26px;background:#18181b;border:1px solid #27272a}
.stat-big{display:block;font-family:var(--disp);font-size:64px;font-weight:700;line-height:1;background:linear-gradient(120deg,#8fe3cf,#6c9be0 60%,#c9c3f4);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-card p{color:#a1a1aa;margin:14px 0 0;font-size:16px}

/* ── Demo video ── */
.video-frame{position:relative;max-width:1000px;margin:0 auto;border-radius:30px;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(140deg,#0f2d2a,#13304d 60%,#2a2550);box-shadow:0 40px 90px rgba(9,9,11,.25)}
.video-frame video,.video-frame iframe{width:100%;height:100%;border:0;object-fit:cover}
.video-cover{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.video-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.video-cover:hover img{transform:scale(1.02)}
.video-cover:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.video-placeholder{display:none}
.video-frame.missing video{display:none}
.video-frame.missing{background:linear-gradient(rgba(9,9,11,.45),rgba(9,9,11,.55)),url(../images/video-poster.jpg) center/cover}
.video-frame.missing .video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.75);text-align:center;padding:24px}
.video-placeholder strong{color:#fff;font-family:var(--disp);font-size:26px}
.video-placeholder code{color:#c8f5e8;background:rgba(255,255,255,.1);padding:2px 8px;border-radius:6px}
.video-play{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:10px;animation:playPulse 2.4s ease-in-out infinite}
.video-play .fa-icon{width:26px;height:26px;margin-left:4px}
@keyframes playPulse{0%,100%{box-shadow:0 0 0 0 rgba(143,227,207,.35)}50%{box-shadow:0 0 0 18px rgba(143,227,207,0)}}

/* ── A day with PainCure ── */
.day-list{max-width:820px;margin:0 auto;display:grid;gap:14px}
.day-item{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start;background:var(--paper);border-radius:22px;padding:24px 28px;transition:transform .3s ease}
.day-item:hover{transform:translateX(6px)}
.day-time{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--accent)}
.day-item h3{font-size:20px;font-weight:700;margin:0 0 4px}
.day-item p{margin:0;color:var(--muted)}

/* ── Trust ── */
.trust-card{height:100%;display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:22px;background:var(--snow);border:1px solid var(--border)}
.trust-card strong{font-family:var(--disp);font-size:19px}
.trust-card > span:not(.ic){color:var(--muted)}

/* ── Closer ── */
.closer{position:relative;overflow:hidden;padding:150px 0 120px}
.orb-small{height:640px}
.step-card{height:100%;border-radius:var(--radius);padding:30px 26px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95)}
.step-card>span{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700}
.step-card h3{font-size:21px;font-weight:700;margin:16px 0 6px}
.step-card p{margin:0;color:var(--ink-2)}
.cta-card{max-width:720px;margin:0 auto;text-align:center;background:var(--snow);border-radius:32px;padding:48px 28px;box-shadow:0 30px 80px rgba(9,9,11,.10)}
.cta-card h2,.cta-card h3{font-size:clamp(28px,3.6vw,40px);font-weight:700}
.cta-card p{color:var(--muted);font-size:18px;margin:8px 0 0}
.btn .fa-icon{width:1.05em;height:1.05em;margin-right:4px}
.btn .fa-icon:last-child:not(:first-child){margin:0 0 0 6px}

/* ── Outline button + active menu item ── */
.btn-outline-ink{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-outline-ink:hover,.btn-outline-ink:focus{background:var(--ink);color:#fff}
.site-nav .nav-link.active{color:var(--ink);font-weight:700}

/* ── Outcome / specialty / team cards ── */
.feature-card,.spec-card,.role-card{background:var(--snow);border-radius:var(--radius);padding:28px 24px;border:1px solid var(--border);transition:transform .3s ease,box-shadow .3s ease}
.feature-card:hover,.spec-card:hover,.role-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(9,9,11,.08)}
.feature-card:hover .ic,.spec-card:hover .ic{background:var(--accent);color:#fff}
.feature-card h3,.spec-card h3,.role-card h3{font-size:19px;font-weight:700;margin:16px 0 8px}
.feature-card p,.spec-card p,.role-card p{color:var(--muted);margin:0}
.section-paper .spec-card{background:var(--paper)}
.ic-dark{background:var(--ink);color:#fff}
.role-card:hover .ic-dark{background:var(--accent)}

/* ── Repeat-patients section (dark) with animated reminder chat ── */
.pill-dark{display:inline-flex;align-items:center;gap:8px;background:#18181b;color:#8fe3cf;border:1px solid #27272a;box-shadow:none}
.pill-dark .fa-icon{width:14px;height:14px}
.hl-light{background:linear-gradient(120deg,#8fe3cf,#6c9be0);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead-dark{color:#a1a1aa;font-size:18px}
.check-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.check-list .fa-icon{width:20px;height:20px;margin-top:2px;color:var(--accent)}
.check-list.dark li{color:#e4e4e7}
.check-list.dark .fa-icon{color:#8fe3cf}
.section-ink#reminders{padding:110px 0}
.phone-card{max-width:400px;margin:0 auto;background:#efeae2;border-radius:30px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.45);border:8px solid #18181b}
.phone-head{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#075e54;color:#fff}
.phone-head strong{display:block;font-size:15px}
.phone-head small{color:#cfe9e5;font-size:12px}
.phone-avatar{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#075e54}
.phone-avatar .fa-icon{width:20px;height:20px}
.phone-body{display:flex;flex-direction:column;gap:10px;padding:20px 16px 26px;min-height:290px}
.bubble{align-self:flex-start;max-width:85%;background:#fff;color:#111b21;font-size:14.5px;line-height:1.4;padding:9px 12px;border-radius:12px;border-top-left-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,.08);
  opacity:0;transform:translateY(10px) scale(.96);transform-origin:top left}
.bubble-out{align-self:flex-end;background:#d9fdd3;border-radius:12px;border-top-right-radius:3px;transform-origin:top right}
.phone-card.play .bubble{animation:msgPop .44s cubic-bezier(.22,.7,.3,1) forwards;animation-delay:var(--d)}
.section-stats{padding:0 0 100px}

/* ── FAQ accordion ── */
.faq .accordion-item{border:1px solid var(--border);border-radius:18px!important;overflow:hidden;margin-bottom:12px;background:var(--snow)}
.faq .accordion-button{font-family:var(--disp);font-weight:600;font-size:18px;color:var(--ink);background:var(--snow);padding:20px 24px;box-shadow:none}
.faq .accordion-button:not(.collapsed){color:var(--accent);background:var(--snow)}
.faq .accordion-button:focus{box-shadow:none}
.faq .accordion-body{color:var(--ink-2);padding:0 24px 22px;font-size:16px}

/* ── Footer ── */
.site-footer{background:var(--ink);color:#a1a1aa;padding:80px 0 0;font-size:15px}
.brand-light{color:#fff;font-size:22px}
.brand-light .brand-mark{color:#8fe3cf}
.footer-about{margin:18px 0 22px;max-width:340px;line-height:1.7}
.footer-social{display:flex;gap:10px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#18181b;border:1px solid #27272a;color:#e4e4e7;transition:background .2s,color .2s,transform .2s}
.footer-social a:hover{background:var(--accent);color:#fff;transform:translateY(-3px)}
.footer-title{font-family:var(--disp);font-size:17px;font-weight:700;color:#fff;margin-bottom:18px}
.footer-links,.footer-contact{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.footer-links a,.footer-contact a{color:#a1a1aa;text-decoration:none;transition:color .2s,padding .2s}
.footer-links a:hover{color:#fff;padding-left:4px}
.footer-contact a:hover{color:#fff}
.footer-contact li{display:flex;gap:12px;align-items:flex-start}
.footer-contact .fa-icon{width:17px;height:17px;margin-top:3px;color:#8fe3cf}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:60px;padding:24px 0;border-top:1px solid #27272a;font-size:14px}
.footer-tag{display:flex;align-items:center;gap:8px;color:#8fe3cf}
.footer-tag .fa-icon{width:15px;height:15px}

/* ── Scroll reveal (staggered with --d) ── */
/* Only hidden once JavaScript is confirmed running (html.js), so content never stays invisible */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.msg,.bubble{opacity:1!important;transform:none!important}
  .msg-typing{display:none}
}

/* ── Responsive ── */
@media (max-width:991.98px){
  .site-nav .navbar-collapse{background:var(--snow);border-radius:20px;padding:12px 16px 16px;margin-top:10px;box-shadow:0 20px 50px rgba(9,9,11,.12)}
  .site-nav .btn-ink{width:100%;margin-top:8px}
  .benefit{margin-bottom:80px}
  .scribble-left{text-align:center}
  .benefit .col-lg-6:last-child{text-align:center}
}
@media (max-width:575.98px){
  .container{padding-left:16px;padding-right:16px}
  .hero{padding:120px 0 64px}
  .section{padding:80px 0}
  .hero .btn,.cta-card .btn{width:100%}
  .orb-wrap{height:560px}
  .orb{width:214vw;top:calc(214vw * -.2)}
  .day-item{grid-template-columns:1fr;gap:6px;padding:20px}
  .stat-big{font-size:52px}
}

/* ── Inner pages: smaller hero ── */
.page-hero{position:relative;padding:160px 0 70px;overflow:hidden}
.page-hero .orb-wrap{height:100%;min-height:420px}
.page-hero .display-title{font-size:clamp(40px,6.4vw,76px)}

/* ── About: story + values ── */
.story-text p{font-size:18px;color:var(--ink-2)}
.story-quote{font-family:var(--disp);font-size:clamp(24px,2.6vw,32px);font-weight:600;line-height:1.25;color:var(--ink);border-left:4px solid var(--accent);padding-left:22px;margin:0}

/* ── Solutions: feature list ── */
.tool-card{display:flex;gap:16px;align-items:flex-start;height:100%;background:var(--snow);border-radius:22px;padding:24px;border:1px solid var(--border)}
.tool-card h3{font-size:18px;font-weight:700;margin:2px 0 6px}
.tool-card p{margin:0;color:var(--muted)}
.tool-card .ic{flex-shrink:0}

/* ── Pricing ── */
.plan-card{position:relative;height:100%;display:flex;flex-direction:column;background:var(--snow);border-radius:var(--radius);padding:34px 28px;border:1px solid var(--border)}
.plan-card.featured{border:2px solid var(--accent);box-shadow:0 30px 70px rgba(15,143,126,.14)}
.plan-badge{position:absolute;top:-14px;left:28px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:5px 14px;border-radius:999px}
.plan-card h3{font-size:24px;font-weight:700;margin:0 0 6px}
.plan-for{color:var(--muted);margin:0 0 18px}
.plan-price{font-family:var(--disp);font-size:30px;font-weight:700;color:var(--ink);margin:0 0 4px}
.plan-note{font-size:14px;color:var(--muted);margin:0 0 20px}
.plan-card .check-list{margin:0 0 28px;flex-grow:1}
.plan-card .btn{width:100%}

/* ── Contact ── */
.contact-card{background:var(--snow);border-radius:var(--radius);padding:36px 30px;border:1px solid var(--border);box-shadow:0 24px 60px rgba(9,9,11,.06)}
.contact-card .form-label{font-weight:600;font-size:14px;color:var(--ink-2)}
.contact-card .form-control,.contact-card .form-select{border-radius:14px;border:1px solid #dcdce0;padding:12px 14px;background:var(--paper)}
.contact-card .form-control:focus,.contact-card .form-select:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(15,143,126,.12);background:#fff}
.form-alert{border-radius:16px;padding:16px 18px;margin-bottom:22px;font-weight:500}
.form-alert.ok{background:var(--accent-soft);color:#075e52}
.form-alert.err{background:#fdecec;color:#9b1c1c}
.hp-field{position:absolute;left:-9999px}
.reach-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.reach-list li a,.reach-list li > div{display:flex;gap:16px;align-items:center;background:var(--snow);border:1px solid var(--border);border-radius:20px;padding:18px 20px;color:var(--ink);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.reach-list li a:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(9,9,11,.08)}
.reach-list strong{display:block;font-family:var(--disp);font-size:17px}
.reach-list span.sub{color:var(--muted);font-size:15px}
@media (max-width:575.98px){
  .page-hero{padding:120px 0 50px}
  .contact-card{padding:26px 20px}
}

/* ── Floating WhatsApp button (bottom-right, whole button pulses) ── */
.wa-float{position:fixed;right:32px;bottom:32px;z-index:1050;display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 0 0 0 rgba(37,211,102,.6),0 12px 30px rgba(37,211,102,.45);animation:waBlink 1.4s ease-in-out infinite}
.wa-float .fa-icon{display:block;width:38px;height:38px;margin:0;vertical-align:0}
.wa-float:hover{color:#fff;animation:none;transform:scale(1.08)}
.wa-float-tip{position:absolute;right:80px;white-space:nowrap;background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:7px 14px;border-radius:999px;opacity:0;transform:translateX(8px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.wa-float:hover .wa-float-tip{opacity:1;transform:none}
@keyframes waBlink{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(37,211,102,.6),0 12px 30px rgba(37,211,102,.45)}50%{transform:scale(1.12);box-shadow:0 0 0 14px rgba(37,211,102,0),0 12px 30px rgba(37,211,102,.45)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(37,211,102,0),0 12px 30px rgba(37,211,102,.45)}}
@media (prefers-reduced-motion:reduce){.wa-float{animation:none}}
@media (max-width:575.98px){.wa-float{right:18px;bottom:18px;width:60px;height:60px}.wa-float .fa-icon{width:34px;height:34px}}

/* ── Responsive polish (tablets & phones) ── */
html{overflow-x:hidden}
html,body{max-width:100%}
@supports (overflow:clip){html,body{overflow-x:clip}}

/* Tablets */
@media (max-width:991.98px){
  .section{padding:90px 0}
  .section-head{margin-bottom:44px}
  .hero-stage{margin-top:50px}
  .desk-feed{max-width:460px;margin:0 auto}
  .closer{padding:110px 0 90px}
  .site-footer{padding-top:64px}
  .plan-card.featured{margin-top:10px}
}

/* Phones */
@media (max-width:575.98px){
  /* keep wide column gaps inside the screen */
  .row.g-5{--bs-gutter-x:1.5rem;--bs-gutter-y:2rem}
  .section{padding:64px 0}
  .section-ink,.section-ink#reminders{padding:64px 0}
  .section-stats{padding:0 0 64px}
  .section-head{margin-bottom:32px}
  .section-head p,.benefit-text,.lead-dark,.story-text p{font-size:16px}
  .benefit{margin-bottom:56px}
  .benefit-title{margin:6px 0 10px}
  .scribble{font-size:21px}
  .hero-stage{margin-top:40px}
  .feed-body{min-height:0}
  .closer{padding:80px 0 64px}
  .cta-card{padding:34px 20px;border-radius:26px}
  .cta-card p{font-size:16px}
  .video-frame{border-radius:20px}
  .phone-body{min-height:0}
  .marquee-track span{font-size:18px}

  /* compact cards: icon on the left, text on the right */
  .soft-card,.feature-card,.spec-card,.role-card{display:grid;grid-template-columns:46px 1fr;column-gap:16px;align-items:start;padding:20px 18px;border-radius:20px}
  .soft-card .ic,.feature-card .ic,.spec-card .ic,.role-card .ic{grid-row:span 2;width:46px;height:46px;border-radius:14px;margin:0}
  .soft-card .ic .fa-icon,.feature-card .ic .fa-icon,.spec-card .ic .fa-icon,.role-card .ic .fa-icon{width:21px;height:21px}
  .soft-card h3,.feature-card h3,.spec-card h3,.role-card h3{font-size:18px;margin:2px 0 4px}
  .soft-card p,.feature-card p,.spec-card p,.role-card p{font-size:15px}
  .feature-card .num{grid-column:1/-1;margin-bottom:8px}
  .feature-card br{display:none}
  .tool-card{padding:18px;border-radius:20px}
  .tool-card .ic{width:46px;height:46px;border-radius:14px}
  .stat-card{padding:24px 20px}
  .step-card{padding:24px 20px}
  .day-item{border-radius:18px}

  .plan-card{padding:30px 22px}
  .plan-price{font-size:24px}
  .faq .accordion-button{font-size:16px;padding:16px 18px}
  .faq .accordion-body{padding:0 18px 18px;font-size:15px}
  .story-quote{padding-left:16px}
  .footer-bottom{flex-direction:column;align-items:flex-start;margin-top:40px;padding-bottom:90px}
}

/* Very small phones (320px) */
@media (max-width:359.98px){
  .brand{font-size:19px}
  .brand-mark .fa-icon{width:26px;height:26px}
  .display-title{font-size:38px}
  .section-title{font-size:28px}
  .pill{font-size:12px;padding:6px 13px}
}

