/* ============================================================
   BRAND TOKENS  (locked — do not approximate)
   ============================================================ */
:root{
  --paper:      #FAF7F2;   /* warm paper — page base */
  --paper-2:    #F2ECE2;   /* deeper cream — alternating sections */
  --plum:       #2C1036;   /* replaces black EVERYWHERE (text, ink) */
  --purple:     #7A2090;   /* Royal Purple — primary accent */
  --violet:     #4E1560;   /* Deep Violet — gradient partner */
  --rose:       #AE3A48;   /* Crimson-Rose — warm accent, sparing */
  --teal:       #1F9E97;   /* Clinical Teal — SYNCED / FUNCTIONAL states ONLY */

      --bg:#FAF7FC;
    --text:#2C1036;

    --white:#fff;
--transition:.4s ease;

     --bg-gradient: linear-gradient(180deg, #f8f6f9 0%, #ffffff 100%);
      --primary-purple: #3b1d48;
      --accent-color: #703380;
      --card-bg: #ffffff;
      --card-border: #e8dee9;
      --text-dark: #1f1d2b;
      --text-muted: #64607d;
      --shadow-sm: 0 4px 12px rgba(59, 29, 72, 0.03);
      --shadow-hover: 0 12px 24px rgba(112, 51, 128, 0.08);

  --ink-90: rgba(44,16,54,.90);
  --ink-70: rgba(44,16,54,.68);
  --ink-45: rgba(44,16,54,.45);
  --line:   rgba(44,16,54,.12);

  --on-dark-90: rgba(250,247,242,.92);
  --on-dark-60: rgba(250,247,242,.60);
  --on-dark-line: rgba(250,247,242,.14);

  --maxw: 1120px;
  --measure: 62ch;
  --pad-y: clamp(5.5rem, 11vw, 9.5rem);
  --radius: 18px;

  --grad-dark: linear-gradient(155deg, #3A155A 0%, #2C1036 55%, #22052E 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--plum);
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:clamp(1rem,.55vw + .9rem,1.14rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

/* Type roles ------------------------------------------------ */
.display{
  font-family:"Fraunces",Georgia,serif;
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.015em;
  font-optical-sizing:auto;
}
.display em{font-style:italic;font-weight:500;color:var(--purple)}
h1.display{font-size:clamp(2.7rem,6.4vw,5.1rem)}
h2.display{font-size:clamp(2.05rem,4.4vw,3.35rem)}
.eyebrow{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple);
}
.eyebrow.on-dark{color:#C69BE0}
.hand{font-family:"Caveat",cursive;font-weight:500}

/* Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.02rem;
  padding:.95rem 1.7rem;border-radius:999px;border:0;cursor:pointer;
  text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 10px 26px -12px rgba(122,32,144,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(122,32,144,.8)}
.btn-primary.on-dark{background:#fff;color:var(--plum);box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}
.textlink{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--ink-70);text-decoration:none;font-weight:500;font-size:.98rem;
  border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .16s,border-color .16s;
}
.textlink:hover{color:var(--purple);border-color:var(--purple)}
.textlink.on-dark{color:var(--on-dark-60);border-color:var(--on-dark-line)}
.textlink.on-dark:hover{color:#fff;border-color:#fff}

/* ============================================================
   NAV
   ============================================================ */
/* .nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(1.4) blur(8px);
  transition:background .25s ease,box-shadow .25s ease;
}
.nav.solid{background:rgba(250,247,242,.86);box-shadow:0 1px 0 var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding-block:1rem}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .nm{font-family:"Fraunces",serif;font-weight:600;font-size:1.35rem;letter-spacing:-.02em;color:var(--plum)}
.brand .by{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);margin-top:.28rem}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a:not(.btn){color:var(--ink-70);text-decoration:none;font-weight:500;font-size:.96rem;transition:color .15s}
.nav-links a:not(.btn):hover{color:var(--purple)}
@media(max-width:820px){.nav-links a:not(.btn){display:none}} */

/* ============================================================
   [1] WALKTHROUGH HANDOFF  (stub — the 3D cinema lands here)
   Dev B: this dark panel is where the existing 80%-done 3D
   walkthrough ends. The SEAM is the dark→cream dissolve into
   the Promise below. Replace the inner placeholder with the
   final frame / canvas handoff of the walkthrough.
   ============================================================ */
.handoff{
  position:relative;background:var(--grad-dark);color:var(--on-dark-90);
  min-height:100vh;display:grid;place-items:center;text-align:center;
  overflow:hidden;
}
.handoff::after{ /* the seam: dissolve into paper */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:38%;
  background:linear-gradient(to bottom,rgba(250,247,242,0),var(--paper));
  pointer-events:none;
}
.handoff-inner{position:relative;z-index:2;padding:2rem}
.handoff .stub-tag{
  display:inline-block;border:1px dashed var(--on-dark-line);border-radius:999px;
  padding:.5rem 1.1rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-60);margin-bottom:1.6rem;
}
.handoff h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--on-dark-90);max-width:20ch;margin-inline:auto;line-height:1.15}
.scrollcue{position:absolute;bottom:calc(38% + 14px);left:50%;transform:translateX(-50%);z-index:2;color:var(--on-dark-60);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .4s ease;pointer-events:none}
.scrollcue.show{opacity:1}

/* ---- scroll-scrubbed walkthrough (frame sequence) ---- */
#handoff-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.handoff-veil{position:absolute;inset:0;z-index:1;opacity:.45;pointer-events:none}
.handoff-vignette{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
}
#handoff-loader{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  color:var(--on-dark-90);
  font-family:"Bricolage Grotesque",sans-serif;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;
}
#handoff-prog{position:absolute;top:0;left:0;height:3px;width:0%;z-index:3;background:var(--purple);transition:width .05s linear}
.handoff-st{
  position:absolute;left:50%;bottom:22%;transform:translateX(-50%);z-index:2;
  text-align:center;padding:0 1.5rem;opacity:0;pointer-events:none;max-width:30ch;
}
.handoff-st .stub-tag{
  display:inline-block;border:1px dashed var(--on-dark-line);border-radius:999px;
  padding:.5rem 1.1rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-60);margin-bottom:1.6rem;
}
.handoff-st h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.4rem,3vw,2.1rem);color:var(--on-dark-90);line-height:1.15}

/* ============================================================
   [2] PROMISE
   ============================================================ */
/* .promise{padding-block:clamp(3rem,6vw,5rem) var(--pad-y);text-align:center}
.promise .eyebrow{margin-bottom:1.5rem}
.promise h1{max-width:15ch;margin-inline:auto}
.promise .sub{
  font-size:clamp(1.12rem,1.4vw,1.32rem);color:var(--ink-70);
  max-width:46ch;margin:1.7rem auto 0;line-height:1.55;
}
.promise .ped{margin-top:1.6rem;font-size:.95rem;color:var(--ink-45);font-style:italic;font-family:"Fraunces",serif}
.promise .cta-row{margin-top:2.4rem;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.cta-note{font-size:.9rem;color:var(--ink-45)} */



  .hero-section{
    max-width:100%;
    width:100%;
    text-align:center;
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100dvh;
  }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-weight:600;
    font-size:12px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--purple);
    margin-bottom:28px;
  }

  /* animation start */

  .zoomInUpTitle{
    opacity: 0;
    transform: scale(0.2) translateY(300px);
    animation: zoomInUp 2.5s cubic-bezier(.175,.885,.32,1.275) forwards;
    transform-origin: center bottom;
    font-family: 'IBM Plex Mono', monospace;
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale(0.2) translateY(300px);
    }

    60% {
        opacity: 1;
        transform: scale(0.6) translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}




.zoomInDownTitle{
    opacity: 0;
    transform: scale(0.15) translateY(-250px);
    transform-origin: center top;
    animation: zoomInDown 2.5s cubic-bezier(.175,.885,.32,1.275) forwards;
}

.zoomInDownTitle .line2{
    display: block;
    color: #7A2090;
}

@keyframes zoomInDown{
    0%{
        opacity: 0;
        transform: scale(0.15) translateY(-250px);
    }

    60%{
        opacity: 1;
        transform: scale(0.6) translateY(20px);
    }

    100%{
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* animation end */

  /* .eyebrow::before{
    content:'';
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--amber);
    margin-right:10px;
    vertical-align:middle;
    box-shadow:0 0 0 4px rgba(217,140,43,0.15);
  } */

  h1{
    font-family:'Newsreader', serif;
    font-weight:500;
    font-size:clamp(38px, 5.6vw, 66px);
    line-height:1.08;
    letter-spacing:-0.01em;
    margin:0 0 6px;
    color:var(--ink);
  }

  h1 .line2{
    display:block;
    font-style:italic;
    font-weight:500;
    color:var(--teal);
    margin-top:4px;
  }

  .sub{
    max-width:560px;
    margin:30px auto 0;
    font-size:17px;
    line-height:1.65;
    color:var(--slate);
  }

  .byline{
    font-family:'Newsreader', serif;
    font-style:italic;
    font-weight:500;
    font-size:15px;
    color:#8A9198;
    margin-top:22px;
  }

  .promise-row{
    margin-top:38px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
  }

  .promise{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#7A2090;
    /* color:var(--paper); */
    color: #fff;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:15px;
    padding:16px 30px;
    border-radius:100px;
    text-decoration:none;
    border:none;
    cursor:pointer;
    transition:transform 0.18s ease, background 0.18s ease;
  }
  .promise:hover{
    background:var(--teal);
    transform:translateY(-1px);
  }
  .promise svg{width:16px;height:16px;}

  .caption{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.06em;
    color:#9CA3A8;
  }

  /* --- signature trace graphic --- */
  .trace-wrap{
    margin-top:64px;
    width:100%;
  }
  .trace-wrap svg{
    width:100%;
    height:auto;
    display:block;
    overflow:visible;
  }

  .trace-path{
    fill:none;
    stroke:var(--ink);
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .branch{
    fill:none;
    stroke:var(--teal);
    stroke-width:2;
    stroke-linecap:round;
    opacity:0.85;
  }
  .dot{
    fill:var(--amber);
  }
  .pulse-dot{
    fill:var(--amber);
  }
  .node-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    font-weight:600;
    fill:var(--ink);
    letter-spacing:0.01em;
  }
  .note-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    fill:#9CA3A8;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }

  @media (max-width:640px){
    .trace-wrap{margin-top:44px;}
    .sub{font-size:16px;}
  }

  @media (prefers-reduced-motion: no-preference){
    .trace-path{
      stroke-dasharray: 900;
      stroke-dashoffset: 900;
      animation: draw 1.8s ease-out forwards;
    }
    .branch{
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      animation: draw 1s ease-out forwards;
      animation-delay: 1.4s;
    }
    .node-label, .dot{
      opacity:0;
      animation: fadein 0.6s ease-out forwards;
      animation-delay: 2.1s;
    }
    @keyframes draw{ to { stroke-dashoffset: 0; } }
    @keyframes fadein{ to { opacity:1; } }
  }







/* ============================================================
   [3] VILLAIN
   ============================================================ */
.villain{background:var(--paper-2);padding-block:var(--pad-y);position:relative}
.villain .eyebrow{color:var(--rose)}
.villain h2 {
    max-width: 16ch;
    margin-top: 1.3rem;
    font-size: 35px;
}
.beats{margin-top:3rem;display:flex;flex-direction:column;gap:0;max-width:760px}
.beat {
    padding: 0.7rem 0;
    border-top: 1px solid var(--line);
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink-90);
    font-family: "Fraunces", serif;
    font-weight: 400;
}
.beat:last-of-type{border-bottom:1px solid var(--line)}
.beat.grow{color:var(--plum)} /* third beat — the one that breathes */
.payroll {
    margin-top: 3%;
    font-family: "Fraunces", serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--rose);
}
.villain .tease {
    margin-top: 0.5rem;
}

/* Layout */
/* .villain-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.4fr) minmax(420px, 0.9fr);
    align-items:center;
    gap: 90px;
} */
 .villain-grid {
    display: grid;
    /* grid-template-columns: 1fr 0.85fr; */
        grid-template-columns: 0.7fr 0.89fr;
    align-items: center;
    gap: 70px;
}



/* Right Image */
.villain-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

/* .villain-image img{
    width:100%;
    max-width:600px;
    height:auto;
    display:block;
} */
 .villain-image video {
    width: 100%;
    max-width: 700px;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* Responsive */
@media (max-width:1100px){

    .villain-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .villain-image{
        order:-1; /* remove this line if you want image below content */
    }

    .villain-image img{
        max-width:700px;
        margin:auto;
    }
}






/* ============================================================
   [4] WEDGE  + note-flow SIGNATURE animation
   ============================================================ */
.wedge{background:var(--grad-dark);color:var(--on-dark-90);padding-block:var(--pad-y);position:relative;overflow:hidden}
.wedge .eyebrow{color:#C69BE0}
.wedge h2{color:#fff;max-width:18ch;margin-top:1.2rem}
.wedge .lead{color:var(--on-dark-60);max-width:52ch;margin-top:1.4rem;font-size:1.08rem}
.wedge .lead b{color:var(--on-dark-90);font-weight:500}
.nobridge{
  font-family:"Fraunces",serif;font-weight:500;font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.35rem);color:#fff;margin:2.4rem 0 1rem;max-width:20ch;
}
.wedge .kicker{color:var(--on-dark-90);max-width:48ch;font-size:1.06rem}
.wedge .kicker em{color:var(--teal);font-style:normal;font-weight:600}

/* --- the animation stage --- */
.flow{
  margin-top:3.4rem;background:rgba(250,247,242,.04);
  border:1px solid var(--on-dark-line);border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.6rem);display:grid;gap:1.8rem;
  grid-template-columns:1fr;max-width:920px;
}
@media(min-width:780px){.flow{grid-template-columns:minmax(0,340px) 1fr;align-items:center}}
.note-card{
  background:var(--paper);color:var(--plum);border-radius:12px;padding:1.4rem 1.5rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);position:relative;
}
.note-card .formlabel{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);margin-bottom:.7rem}
.note-line{height:1px;background:var(--line);margin:.85rem 0}
.note-hand{font-family:"Caveat",cursive;font-size:1.5rem;line-height:1.3;color:var(--violet);min-height:2.6em}
.note-hand .cursor{display:inline-block;width:2px;height:1.1em;background:var(--purple);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.synced{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  font-weight:600;font-size:.92rem;color:var(--teal);
  opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s;
}
.synced.on{opacity:1;transform:none}
.synced .tick{width:18px;height:18px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:.7rem}

.flow-right{display:flex;flex-direction:column;gap:.9rem}
.flow-cap{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-60);margin-bottom:.2rem}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.chip{
  border:1px solid var(--on-dark-line);border-radius:11px;padding:.85rem 1rem;
  display:flex;align-items:center;gap:.6rem;color:var(--on-dark-60);
  transition:border-color .5s,color .5s,background .5s,box-shadow .5s;
}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--on-dark-60);transition:background .5s,box-shadow .5s}
.chip .lbl{font-weight:500;font-size:.98rem}
.chip.lit{border-color:rgba(31,158,151,.6);color:#fff;background:rgba(31,158,151,.10)}
.chip.lit .dot{background:var(--teal);box-shadow:0 0 0 4px rgba(31,158,151,.22)}
.flow-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.4rem;gap:1rem;flex-wrap:wrap}
.flow-foot .simul{font-size:.9rem;color:var(--on-dark-60)}
.flow-foot .simul b{color:var(--teal);font-weight:600}
.replay{
  background:transparent;border:1px solid var(--on-dark-line);color:var(--on-dark-90);
  border-radius:999px;padding:.5rem 1rem;font-family:inherit;font-size:.85rem;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:.45rem;transition:border-color .15s,background .15s;
}
.replay:hover{border-color:var(--teal);background:rgba(31,158,151,.08)}

/* 
.wedge .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.wedge-content {
    max-width: 600px;
}

.wedge .flow {
    margin-top: 0;
    max-width: none;
}


@media(min-width:780px){

    .flow{

        grid-template-columns: 1fr;

        align-items: stretch;

    }

} */


/* --- Side-by-Side Grid Layout --- */
.wedge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 992px) {
  .wedge-grid {
    grid-template-columns: 1fr 1fr; /* Text on Left, Flow Stage on Right */
    gap: 3.5rem;
  }
}

/* Adjust Flow Container for Right Side Placement */
.wedge .flow {
  margin-top: 0;                   /* Removes top margin now that it is inline */
  width: 100%;
  max-width: 100%;
  grid-template-columns: 1fr;       /* Stacks Note Card above Chips on right side */
  gap: 1.8rem;
}

/* Ensure flow grid maintains vertical card-above-chips stack on all screens */
@media (min-width: 780px) {
  .wedge .flow {
    grid-template-columns: 1fr;    /* Keeps Top (Card) -> Bottom (Chips) layout */
    align-items: stretch;
  }
}




/* ============================================================
   [5] ADOPTION
   ============================================================ */
.adopt{padding-block:var(--pad-y)}
.adopt-grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media(min-width:860px){.adopt-grid{grid-template-columns:1.05fr .95fr;align-items:center}}
.adopt h2{max-width:15ch;margin-top:1.2rem}
.adopt .lines{margin-top:1.8rem;display:flex;flex-direction:column;gap:1.15rem;max-width:44ch}
.adopt .lines p{font-size:1.12rem;color:var(--ink-90)}
.adopt .lines .lead-line{font-family:"Fraunces",serif;font-size:1.28rem;color:var(--plum)}
.adopt .oneday{
  margin-top:1.9rem;font-family:"Fraunces",serif;font-weight:600;font-style:italic;
    font-size:clamp(1.8rem, 3.5vw, 2.8rem);
  color:var(--purple);
}
.imgslot{
  aspect-ratio:4/5;border-radius:var(--radius);border:1px dashed var(--line);
  background:
    radial-gradient(120% 90% at 70% 20%,rgba(122,32,144,.10),transparent 60%),
    var(--paper-2);
  display:grid;place-items:center;text-align:center;padding:2rem;color:var(--ink-45);
}
.imgslot .ph{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;max-width:22ch;line-height:1.5}
.imgslot .hand{font-size:1.6rem;color:var(--purple);opacity:.6;margin-top:.8rem}

/* ===========================
   Adoption Image Slider
=========================== */

.imgslot{
    overflow:hidden;
    position:relative;
    padding:0;
}

.slider{
    width:100%;
    height:100%;
    position:relative;
}

.slide{
    position:absolute;
    inset:0;

    opacity:0;
    transition:opacity .9s ease;

    display:flex;
    align-items:center;
    justify-content:center;
}

.slide.active{
    opacity:1;
    z-index:2;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;

    border-radius:inherit;
    display:block;
}

/* Pause animation on hover */

.imgslot:hover .slide{
    transition-duration:.9s;
}





/* ============================================================
   [6] CALCULATOR  (PARKED — awaiting sales/research numbers)
   Dev B: build the interactive component into this container
   once numbers are locked. Inputs: beds + nurses/shift.
   Output: nurse-hours returned/month (headline) + ₹ saved (support).
   NEVER show per-user price here — that stays in the demo.
   ============================================================ */
.calc{padding-top: 0;
    padding-bottom: 140px;
    ;text-align:center}
.calc-shell{
  max-width:820px;margin:2.2rem auto 0;border:1px dashed var(--purple);
  border-radius:var(--radius);background:
    linear-gradient(180deg,rgba(122,32,144,.05),rgba(122,32,144,.02));
  padding:clamp(2.5rem,6vw,4.5rem) 1.5rem;color:var(--ink-45);
}
.calc-shell .tag{display:inline-block;border:1px solid var(--purple);color:var(--purple);border-radius:999px;padding:.4rem 1rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:1.2rem}
.calc-shell h3{font-family:"Fraunces",serif;font-weight:500;font-size:1.5rem;color:var(--plum);margin-bottom:.6rem}
.calc-shell p{max-width:44ch;margin-inline:auto;font-size:.98rem}

/* ============================================================
   [7] PROOF / PEDIGREE / PORTFOLIO
   ============================================================ */
.proof{background:var(--paper-2);padding-block:var(--pad-y);text-align:center}
.proof h2{max-width:14ch;margin:1.2rem auto 0}
.stats{
  margin:3rem auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:820px;
}
@media(max-width:640px){.stats{grid-template-columns:1fr;gap:1.8rem}}
.stat .big{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--purple);line-height:1}
.stat .lbl{margin-top:.7rem;font-size:.9rem;color:var(--ink-70);letter-spacing:.02em}
.proof .portfolio-line{
  margin:3rem auto 0;max-width:52ch;font-family:"Fraunces",serif;font-size:1.24rem;
  line-height:1.5;color:var(--plum);font-style:italic;
}
.products{
  margin:1.7rem auto 0;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;
  font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);font-weight:600;
}
.products span{position:relative}
.products span:not(:last-child)::after{content:"·";position:absolute;right:-.85rem;color:var(--ink-45)}
/* quote slot */
.quote{
  margin:3.4rem auto 0;max-width:640px;border-top:1px solid var(--line);padding-top:2.4rem;
}
.quote blockquote{font-family:"Fraunces",serif;font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.45;color:var(--plum);font-style:italic}
.quote .who{margin-top:1.1rem;font-size:.92rem;color:var(--ink-45);font-style:normal}
.quote .slotnote{margin-top:.6rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);opacity:.7}


/* ============================================================
   [7] PROOF / PEDIGREE
============================================================ */

.proof{
    /* padding-block:var(--pad-y); */
    padding-top: 0;
    background:var(--paper);
    overflow:hidden;
}

.proof-head{
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

.proof h2{
    margin-top:1rem;
}

.proof-intro{
    margin:1.8rem auto 0;
    max-width:56ch;
    color:var(--ink-70);
    font-size:1.05rem;
    line-height:1.8;
}

/* ===========================
   Premium Container
=========================== */

.proof-stage{

    position:relative;

    margin-top:4rem;

    padding:clamp(2rem,4vw,3.5rem);

    border-radius:28px;

    overflow:hidden;

    background:linear-gradient(145deg,#351047,#5B1772);

    box-shadow:
        0 30px 60px rgba(44,16,54,.18);

}

/* Background Glow */

.proof-bg{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(circle at 80% 10%,
    rgba(255,255,255,.10),
    transparent 35%),

    radial-gradient(circle at 15% 90%,
    rgba(122,32,144,.30),
    transparent 45%),

    radial-gradient(circle at 60% 40%,
    rgba(255,255,255,.03),
    transparent 45%);

}

/* ===========================
   Header
=========================== */

.proof-stage-head{

    position:relative;

    z-index:2;

    text-align:center;

    margin-bottom:3.2rem;

}

.proof-tag{

    display:inline-block;

    font-size:.78rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#F06B6B;

    font-weight:600;

    margin-bottom:1rem;

}

.proof-stage-head h3{

    color:#fff;

    font-family:"Fraunces",serif;

    font-size:clamp(2rem,4vw,3rem);

    font-weight:400;

    line-height:1.25;

}

.proof-stage-head h3 em{

    color:#D8B5E6;

    font-style:italic;

}

/* ===========================
   Cards
=========================== */

.proof-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:1.6rem;

}

/* Card */

.proof-card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.12);

    border-radius:18px;

    padding:2rem;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:330px;

    transition:.35s ease;

    backdrop-filter:blur(10px);

}

.proof-card:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.09);

    border-color:#D8B5E6;

}

/* Highlight Card */

.proof-card.active{

    background:#fff;

    color:var(--plum);

    border:1px solid #D56A74;

    transform:translateY(-12px);
    margin-top: 6%;

    box-shadow:

    0 20px 45px rgba(0,0,0,.18);

}

.proof-card.active:hover{

    transform:translateY(-18px);

}

/* Label */

.proof-label{

    display:block;

    color:#D8B5E6;

    font-size:.76rem;

    letter-spacing:.16em;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:1rem;

}

.proof-card.active .proof-label{

    color:#D56A74;

}

/* Heading */

.proof-card h4{

    font-family:"Fraunces",serif;

    font-size:2rem;

    font-weight:500;

    color:#fff;

    line-height:1.2;

    margin-bottom:1rem;

}

.proof-card.active h4{

    color:var(--purple);

}

/* Description */

.proof-card p{

    color:rgba(255,255,255,.82);

    line-height:1.8;

    font-size:.96rem;

}

.proof-card.active p{

    color:var(--ink-80);

}

/* Badge */

/* .proof-badge{

    align-self:flex-start;

    margin-top:2rem;

    padding:.75rem 1.3rem;

    border-radius:100px;

    border:1px solid rgba(255,255,255,.30);

    color:#fff;

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    font-weight:600;

} */

.proof-badge{

    align-self:center;

    margin-top:2rem;

    padding:.75rem 1.3rem;

    border-radius:100px;

    border:1px solid rgba(255,255,255,.30);

    color:#fff;

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    font-weight:600;

}

.proof-card.active .proof-badge{

    background:#F4ECF8;

    color:var(--purple);

    border-color:#A14AB6;

}

/* ===========================
   Products
=========================== */

.proof-products{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:.8rem;

    margin-top:3rem;

}

.proof-products span{

    padding:.8rem 1.2rem;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.10);

    color:#fff;

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.12em;

}

/* ===========================
   Quote
=========================== */

.proof-quote{

    position:relative;

    z-index:2;

    margin-top:3rem;

    padding-top:2rem;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.15);

}

.proof-quote blockquote{

    font-family:"Fraunces",serif;

    font-size:clamp(1.25rem,2vw,1.7rem);

    color:#fff;

    font-style:italic;

    line-height:1.6;

    max-width:38ch;

    margin:auto;

}

.proof-author{

    margin-top:1.3rem;

    color:#D8B5E6;

    font-size:.92rem;

}

.proof-note{

    margin-top:.6rem;

    font-size:.74rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    color:#F06B6B;

    opacity:.8;

}

/* ===========================
   Responsive
=========================== */

@media(max-width:991px){

.proof-grid{

grid-template-columns:1fr;

}

.proof-card.active{

transform:none;

}

.proof-card{

min-height:auto;

}

}

@media(max-width:600px){

.proof-stage{

padding:1.5rem;

border-radius:22px;

}

.proof-stage-head{

margin-bottom:2rem;

}

.proof-card{

padding:1.5rem;

}

.proof-products{

gap:.6rem;

}

.proof-products span{

width:100%;

text-align:center;

}

}

/* ============================================================
   PROOF - PREMIUM EFFECTS
============================================================ */

/* Floating Gradient Animation */

.proof-bg{

    animation: proofGlow 10s ease-in-out infinite alternate;

}

@keyframes proofGlow{

    0%{

        transform:scale(1) rotate(0deg);

        opacity:1;

    }

    100%{

        transform:scale(1.08) rotate(4deg);

        opacity:.92;

    }

}

/* Card Shine */

.proof-card{

    position:relative;

    overflow:hidden;

}

.proof-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:65%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );

    transition:.8s;

}

.proof-card:hover::before{

    left:150%;

}

/* Product Pills */

.proof-products span{

    transition:.3s ease;

}

.proof-products span:hover{

    transform:translateY(-3px);

    background:rgba(255,255,255,.16);

}

/* Quote Animation */

.proof blockquote{

    transition:.4s ease;

}

.proof-quote:hover blockquote{

    transform:translateY(-3px);

}

/* Card Headings */

.proof-card h4{

    transition:.35s ease;

}

.proof-card:hover h4{

    letter-spacing:.01em;

}

/* Smooth Transition */

.proof *{

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease;

}



/* ============================================================
   [8] FAQ
   ============================================================ */
/* .faq{padding-block:var(--pad-y)}
.faq h2{text-align:center;max-width:18ch;margin-inline:auto}
.faq-list{max-width:800px;margin:3rem auto 0;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa button{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:1.5rem 0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  font-family:"Fraunces",serif;font-size:clamp(1.1rem,1.8vw,1.32rem);font-weight:500;color:var(--plum);
}
.qa .sign{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);position:relative;transition:border-color .2s,background .2s}
.qa .sign::before,.qa .sign::after{content:"";position:absolute;background:var(--purple);border-radius:2px;transition:transform .25s,opacity .2s}
.qa .sign::before{width:12px;height:2px;top:11px;left:6px}
.qa .sign::after{width:2px;height:12px;top:6px;left:11px}
.qa[aria-open="true"] .sign::after{transform:scaleY(0)}
.qa[aria-open="true"] .sign{background:rgba(122,32,144,.08);border-color:transparent}
.qa .ans{overflow:hidden;max-height:0;transition:max-height .3s ease}
.qa .ans-in{padding:0 0 1.6rem;color:var(--ink-70);max-width:64ch;font-size:1.04rem}
.qa .ans-in b{color:var(--plum);font-weight:600} */


/* Section Wrapper */
    .faq-section {
      max-width: 800px;
      margin: 0 auto;
    }

    /* Header Styling */
    .faq-header {
      text-align: center;
      margin-bottom: 48px;
    }

    .faq-pill {
      display: inline-block;
      background-color: #f1e4f3;
      color: var(--accent-color);
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      padding: 6px 16px;
      border-radius: 50px;
      margin-bottom: 12px;
    }

    .faq-header h2 {
      font-size: 2.5rem;
      color: var(--primary-purple);
      font-weight: 700;
      letter-spacing: -0.5px;
      margin-bottom: 10px;
    }

    .faq-header p {
      color: var(--text-muted);
      font-size: 1.05rem;
    }

    /* Accordion Container */
    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Individual Card Style */
    .faq-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 16px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .faq-card:hover {
      box-shadow: var(--shadow-hover);
      border-color: #d8c3dc;
    }

    .faq-card[open] {
      border-color: var(--accent-color);
      box-shadow: var(--shadow-hover);
      background-color: #ffffff;
    }

    /* Summary / Question Header */
    .faq-question {
      padding: 22px 28px;
      font-size: 1.32rem;
      font-weight: 600;
      color: var(--primary-purple);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      list-style: none;
      user-select: none;
    }

    .faq-question::-webkit-details-marker {
      display: none;
    }

    /* Toggle Icon Box */
    .faq-toggle-icon {
      width: 32px;
      height: 32px;
      background-color: #f6eef7;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease, background-color 0.3s ease;
      flex-shrink: 0;
      margin-left: 16px;
    }

    .faq-toggle-icon::before {
      content: "↓";
      font-size: 1.1rem;
      color: var(--accent-color);
      font-weight: bold;
    }

    /* Rotate icon when opened */
    .faq-card[open] .faq-toggle-icon {
      transform: rotate(180deg);
      background-color: var(--accent-color);
    }

    .faq-card[open] .faq-toggle-icon::before {
      color: #ffffff;
    }

    /* Content / Answer Styling */
    .faq-answer {
      padding: 0 28px 24px 28px;
      color: var(--text-muted);
      font-size: 1.04rem;
      line-height: 1.6;
      border-top: 1px solid transparent;
    }

    .faq-card[open] .faq-answer {
      border-top-color: #f4ecf5;
      padding-top: 16px;
    }

    /* Mobile Responsiveness */
    @media (max-width: 600px) {
      .faq-header h2 {
        font-size: 1.8rem;
      }
      
      .faq-question {
        padding: 18px 20px;
        font-size: 1.05rem;
      }

      .faq-answer {
        padding: 0 20px 20px 20px;
      }
    }








/* ============================================================
   [9] FINAL CTA
   ============================================================ */
/* .final{background:var(--grad-dark);color:var(--on-dark-90);padding-block:var(--pad-y);text-align:center}
.final h2{color:#fff;max-width:16ch;margin-inline:auto}
.final .sub{color:var(--on-dark-60);max-width:42ch;margin:1.4rem auto 0;font-size:1.08rem}
.final .ped{color:var(--on-dark-60);font-family:"Fraunces",serif;font-style:italic;margin-top:1.4rem;font-size:.98rem}
.final .cta-row{margin-top:2.2rem;display:flex;flex-direction:column;align-items:center;gap:1.1rem} */

/* ============================================================
   [9] DEEP VIOLET BACKGROUND CTA SECTION (#4E1560)
   ============================================================ */

:root {
  /* Brand Operating Manual Variables */
  --brand-purple: #7A2090;
  --deep-violet: #4E1560;
  --brand-rose: #AE3A48;
  --plum: #2C1036;
  --mid-purple: #A24FB5;
  --lilac: #C9A4D4;
  --paper: #FAF7FC;
}

.final {
  position: relative;
  background: var(--deep-violet); /* #4E1560 Base Background */
  color: var(--paper);
  padding: clamp(100px, 13vw, 150px) 0;
  text-align: center;
  overflow: hidden;
  border-bottom: none;
  margin-top: 3%;
}

/* Tonal ambient overlay over Deep Violet canvas */
.final .premium-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(70% 60% at 50% 10%, rgba(122, 32, 144, 0.35) 0%, transparent 70%),
    radial-gradient(85% 75% at 50% 90%, rgba(174, 58, 72, 0.2) 0%, transparent 80%),
    linear-gradient(180deg, var(--deep-violet) 0%, #3B0F49 100%);
  pointer-events: none;
  z-index: 1;
}

/* Subtle Animated Ambient Glow Spot */
.final .ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 380px;
  background: radial-gradient(circle, rgba(201, 164, 212, 0.15), rgba(162, 79, 181, 0.15), transparent 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 1;
  animation: floatGlowViolet 10s ease-in-out infinite alternate;
}

@keyframes floatGlowViolet {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
  100% { transform: translate(-50%, -46%) scale(1.15); opacity: 0.9; }
}

.final .stroke-wm {
  position: absolute;
  right: -3%;
  bottom: -10%;
  width: 50%;
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
  stroke: #FFFFFF;
}

.final-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-header {
  margin-bottom: 1.5rem;
}

.final .eyebrow {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lilac); /* Lilac for high clarity on Deep Violet */
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.final h2.display {
  color: #FFFFFF;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin-inline: auto;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  font-family: "Fraunces", serif;
  font-style: italic;
}

.final .sub {
  color: rgba(250, 247, 252, 0.88);
  font-family: var(--body);
  max-width: 46ch;
  margin: 0 auto 3.2rem;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  font-weight: 300;
}

/* Action Container Layout */
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  width: 100%;
}

/* Primary Button Design: Brand Rose (#AE3A48) */
/* .final .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.1rem 2.8rem;
  border-radius: 50px;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--brand-rose);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 28px -4px rgba(174, 58, 72, 0.45);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
} */
 .final .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.1rem 2.8rem;
    border-radius: 50px;
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    background: #fff9f9;
    color: #040303;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 28px -4px rgb(225 208 210 / 45%);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.final .btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  /* box-shadow: 0 18px 36px -4px rgba(174, 58, 72, 0.65); */
  /* background: #fc7687; */
  /* background: transparent; */
  /* background: rgba(250, 247, 252, 0.08);
  box-shadow: none;
  color: white; */
  background: rgba(250, 247, 252, 0.14);
  border-color: rgba(250, 247, 252, 0.35);
  transform: translateY(-2px);
  color: #FFFFFF;
  box-shadow: none;
}

.final .btn-primary .btn-arrow {
  transition: transform 0.3s ease;
  font-size: 1.15rem;
  line-height: 1;
}

.final .btn-primary:hover .btn-arrow {
  transform: translateX(5px);
}

/* Premium WhatsApp Link: Glassmorphic Pill */
.wa-premium-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.4rem 0.6rem 0.7rem;
  background: rgba(250, 247, 252, 0.08);
  border: 1px solid rgba(250, 247, 252, 0.18);
  border-radius: 40px;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 400;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wa-premium-link .wa-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  background: rgba(37, 211, 102, 0.2);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #25D366;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wa-premium-link .wa-icon {
  fill: #25D366;
}

.wa-premium-link .wa-arrow {
  transition: transform 0.3s ease, color 0.3s ease;
  color: var(--lilac);
  font-size: 1.1rem;
}

.wa-premium-link:hover {
  background: rgba(250, 247, 252, 0.14);
  border-color: rgba(250, 247, 252, 0.35);
  transform: translateY(-2px);
  color: #FFFFFF;
}

.wa-premium-link:hover .wa-arrow {
  transform: translateX(4px);
  color: #FFFFFF;
}

/* Decorative Lilac Glow Divider */
.final .divider-glow {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lilac), transparent);
  margin: 3.8rem auto 2.2rem;
  opacity: 0.4;
}

/* Trust Statement */
.final .ped {
  color: var(--lilac);
  font-family: var(--display);
  font-style: italic;
  /* font-size: 1.02rem; */
      font-size: 1.09rem;
  letter-spacing: 0.01em;
  opacity: 0.9;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .final {
    padding: 75px 0;
  }

  .wa-premium-link {
    width: 100%;
    max-width: 330px;
    justify-content: center;
    padding: 0.65rem 1rem;
  }

  .final .btn-primary {
    width: 100%;
    max-width: 330px;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    /* background: var(--plum); */
    color: var(--on-dark-60);
    padding-block: 3.5rem 0px;
    background: rgba(250, 247, 252, .96);
}
* 
.foot-top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot-brand .nm{font-family:"Fraunces",serif;font-weight:600;font-size:1.4rem;color:#fff}
.foot-brand .by{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin-top:.35rem;    color: var(--text);}
.foot-cols{display:flex;gap:3rem;flex-wrap:wrap}
.foot-cols .col a{display:block;    color: var(--text);;text-decoration:none;font-size:.95rem;margin-bottom:.7rem;transition:color .15s}
.foot-cols .col a:hover{color:var(--purple)}
.foot-cols .ch{color:#333;font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.1rem}
.certs{margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--text);font-size:.8rem;line-height:1.7;    color: var(--text);}
.foot-bot{margin-top:1.4rem;font-size:.82rem;color:var(--ink-45)}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}





/* ==========floating whatsapp css============ */

.whatsapp-btn {
    position: fixed;
    right: 35px;
    bottom: 27px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

.whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.6);
}

.whatsapp-btn svg {
    width: 34px;
    height: 34px;
}

.wa-tooltip {
    position: absolute;
    right: 80px;
    background: #222;
    color: #fff;
    padding: 8px 12px;
    border-radius: 30px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transition: 0.3s;
}

.whatsapp-btn:hover .wa-tooltip {
    opacity: 1;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37,211,102,.7);
    }
    70% {
        box-shadow: 0 0 0 18px rgba(37,211,102,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37,211,102,0);
    }
}










/* Base Container Typography */
/* .beat {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.4;
  max-width: 800px;
} */

/* Highlight Target Wrapper (Dark Purple & Extra Bold) */
.animated-highlight {
  position: relative;
  display: inline-block;
  color: var(--purple);;             /* Dark Purple Text Color */
  font-weight: 800;           /* Extra Bold */
  white-space: nowrap;
}

/* SVG Placement below text */
.stroke-underline {
  position: absolute;
  left: -2%;
  bottom: -0.35em;
  width: 104%;
  height: 0.5em;
  overflow: visible;
  pointer-events: none;
}

/* Stroke Styling (Marker/Brush Feel) */
.stroke-path {
  fill: none;
  stroke: var(--primary);;            /* Dark Purple Underline Stroke */
  stroke-width: 3.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  
  /* Dash offset trick for line animation */
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: drawStroke 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Bottom line delay for natural hand-drawn effect */
.stroke-bottom {
  stroke-width: 2.8px;
  opacity: 0.85;
  animation-delay: 0.25s;
}

/* Infinite Drawing Keyframes */
@keyframes drawStroke {
  0% {
    stroke-dashoffset: 220;    /* Hidden */
  }
  35% {
    stroke-dashoffset: 0;      /* Drawn completely */
  }
  75% {
    stroke-dashoffset: 0;      /* Hold/Stay visible */
  }
  100% {
    stroke-dashoffset: -220;   /* Fade out / erase smoothly */
  }
}
/* ==========================================================
   SKIP-SCROLL BUTTON (fixed, bottom-right)
   Only visible while the pinned walkthrough is in play — jumps
   straight past the scroll-scrubbed intro to the rest of the page.
   ========================================================== */
.skip-scroll-btn{
  position:fixed;right:8%;bottom:1.6rem;z-index:950;
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--purple);color:#fff;border:0;border-radius:999px;
  padding:.85rem 1.35rem;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:.86rem;
  box-shadow:0 10px 26px -10px rgba(122,32,144,.7);cursor:pointer;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.skip-scroll-btn.show{opacity:1;pointer-events:auto}
.skip-scroll-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(122,32,144,.8)}
.skip-scroll-btn svg{flex:none;display:block}
.skip-scroll-btn .ss-label{white-space:nowrap}
@media(max-width:560px){
  .skip-scroll-btn .ss-label{display:none}
  .skip-scroll-btn{padding:.85rem;border-radius:50%}
}