/* Exact 1440px desktop geometry from Figma node 142:3. */
@font-face{font-family:Inter;src:url("assets/Inter-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Inter;src:url("assets/Inter-Medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}@font-face{font-family:Inter;src:url("assets/Inter-SemiBold.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
:root{
  --ink:#f8fafc;--paper:#080a0f;--dark:#07080a;

  /* -- Brand ------------------------------------------------------------
     Vishnu Blue #0136A6 - primary. Structure, actions, trust surfaces.
     Lakshmi Red #CD0812 - accent. Live signals, risk, the wordmark mark.
     Scales exist because #0136A6 only reaches 2.1:1 on #010101; the dark
     sections use the lifted 400/300 tints for anything that carries text. */
  --vishnu:#0136A6;
  --vishnu-900:#01235F;
  --vishnu-800:#012A80;
  --vishnu-700:#0136A6;
  --vishnu-600:#0A47C4;
  --vishnu-500:#1D5EE0;
  --vishnu-400:#4A82EF;
  --vishnu-300:#7BA6F6;
  --vishnu-100:#DCE7FD;
  --vishnu-50:#F0F5FF;
  --vishnu-rgb:1,54,166;
  --vishnu-400-rgb:74,130,239;
  --vishnu-300-rgb:123,166,246;
  --vishnu-600-rgb:10,71,196;

  /* Primary CTA fill: a left-to-right sweep from bright azure into deep
     royal blue, lit faintly from the top. Gradients can't cross-fade, so
     hover brightens instead of swapping fills. --cta stays as the solid
     fallback for the few flat uses (dialog button, footer mark, 404 ghost
     ring); --cta-rgb, used by the button glows, is the sweep's midpoint. */
  --cta-gradient:linear-gradient(95deg,#0A6CFF 0%,#0A46E6 50%,#0A1FCC 100%);
  --cta-light-rgb:10,108,255;
  --cta-deep-rgb:10,31,204;
  --cta:#0A46E6;
  --cta-hover:#2A5FFF;
  --cta-rgb:10,70,230;
  /* Hairline top light and bottom lip that give the pill a rounded body.
     Folded into every primary's box-shadow, at rest and on hover. */
  --cta-edge:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(1,35,95,.35);
  /* The logo's own sweep, sampled off va_logo_gradient.png — lakshmi red
     through the mark's purple into vishnu blue. Kept for the decorative
     brand touches (process step numbers, progress track). */
  --logo-gradient:linear-gradient(90deg,#CD0812 0%,#80158A 50%,#0136A6 100%);
  /* Every secondary CTA (hero, how-it-works, final card) draws its 1px
     outline from this — the primary's sweep with its royal end lifted, since
     #0A1FCC is only 1.9:1 on black and a hairline of it would vanish. The
     pair still reads as one family: filled vs. outlined. */
  --cta-gradient-ring:linear-gradient(95deg,#0A6CFF 0%,#1F58F2 50%,#2A4BE6 100%);
  /* Every primary CTA's hover shadow (nav, hero, how-it-works, final card,
     footer, dialogs, track record, 404). Used to add a three-layer blue
     ambient glow on top of the edge highlight; now just the edge, so hover
     reads as brighten + lift with no halo. Kept as a variable since every
     hover rule below still references it. */
  --cta-glow-hover:var(--cta-edge);

  --lakshmi:#CD0812;
  --lakshmi-800:#8E050D;
  --lakshmi-700:#CD0812;
  --lakshmi-500:#F0424D;
  --lakshmi-400:#FF6B74;
  --lakshmi-200:#F7C4C7;
  --lakshmi-100:#FBD9DB;
  --lakshmi-50:#FFF1F1;
  --lakshmi-rgb:205,8,18;

  --emerald:#059669;
  --emerald-500:#10B981;
  --emerald-300:#6EE7B7;
  --emerald-rgb:5,150,105;
  --emerald-400-rgb:52,211,153;

  --focus:var(--vishnu-400);

  /* -- Rhythm -----------------------------------------------------------
     One vertical inset for every section. Content sits this far inside the
     section's top and bottom edge, so any two neighbours read exactly 2×
     this apart. Fixed-height Figma sections switch to padding + a wrapper
     sized to its content so they follow the same token. */
  --section-pad:104px;
}
@media(max-width:1024px){:root{--section-pad:72px}}
@media(max-width:640px){:root{--section-pad:60px}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
/* Page scrolls as normal, just without the vertical scrollbar track. */
html{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar{display:none}
body{margin:0;background:var(--dark);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;text-align:inherit;border:0;padding:0;background:transparent}a{color:inherit;text-decoration:none}.page{position:relative;width:100%;max-width:1440px;margin:0 auto;overflow-x:clip}.node{position:absolute;margin:0;padding:0;transform-origin:0 0}.text{white-space:normal;overflow-wrap:normal;font-feature-settings:normal}.section{position:relative;left:0!important;top:0!important;width:100%;max-width:1440px;margin:0 auto}.asset{display:block;object-fit:fill;pointer-events:none}.action{cursor:pointer}.action:hover{filter:brightness(1.13)}a.text:hover{text-decoration:underline}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:4px}.skip-link{position:fixed;top:8px;left:8px;z-index:60;padding:12px;background:white;color:#111;transform:translateY(-150%)}.skip-link:focus{transform:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}
.notice{border:1px solid #444;border-radius:16px;padding:28px;background:#181a22;color:#ededed;max-width:420px;width:calc(100% - 40px);font:15px/1.6 Inter,Arial,sans-serif}.notice::backdrop{background:#0009}.notice h2{font-size:22px;margin:0 0 12px}.notice p{margin:0 0 20px}.notice button{border-radius:999px;background:var(--cta);color:#ffffff;padding:10px 22px;cursor:pointer}.notice form{margin:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Anchor landing. The flowing sections open with --section-pad of empty
   black above the header, so a jump that stops at the section's edge leaves
   the pill a third of the way down the screen. The negative margin pulls the
   landing spot down to 28px above the header. Native jumps honour it on their
   own; script.js (initSmoothScroll) hands it to Lenis as the scroll offset.
   The hero and the pinned Trades canvas keep their own top edge. */
#why-vittaara,#our-process,#about-harsh,#how-it-works,#faq{scroll-margin-top:calc(28px - var(--section-pad))}

/* ==========================================================================
   SHARED SECTION HEADER
   --------------------------------------------------------------------------
   Every section opens with the same two pieces, so their type and surface
   live here once. Declared ahead of the Figma node rules: a section's own
   classes only add layout on top (a max-width, a card offset, About's
   left alignment).

   .section-head    · flex column: pill → heading → optional lede, 16px apart
   .section-pill    · frosted neutral glass eyebrow pill, white label
   .section-heading · the h2 — the "Who it's for" heading, shared everywhere
   .section-lede    · optional one-liner under the h2, muted, 680px max
   ========================================================================== */
.section-head{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;
}
.section-pill{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;margin:0;padding:0 20px;border-radius:999px;
  /* Frosted neutral glass, the nav's recipe: a translucent white wash with
     the backdrop blurred and saturated through it, a 1px glass edge and a
     top highlight. No brand tint — the label is the only colour. Flat rgba
     (not a gradient) so hover can cross-fade. */
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
          backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 6px 14px -4px rgba(0,0,0,.5);
  color:#ffffff;
  font-family:"Inter",Arial,sans-serif;font-size:15px;font-weight:500;line-height:1;letter-spacing:-.1px;
  text-transform:none;text-decoration:none;white-space:nowrap;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
a.section-pill:hover{
  filter:none;text-decoration:none;
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 8px 18px -4px rgba(0,0,0,.55);
}
.section-heading{
  margin:0;
  color:#ededed;
  font-family:"Inter",Arial,sans-serif;
  font-size:48px;font-weight:600;line-height:1.1;letter-spacing:-1.2px;
  text-align:center;text-wrap:balance;white-space:normal;
}
.section-lede{
  margin:0;max-width:680px;
  color:rgba(166,166,166,1);
  font-family:"Inter",Arial,sans-serif;
  font-size:15px;font-weight:400;line-height:22.5px;
  text-align:center;text-wrap:balance;white-space:normal;
}
@media(max-width:1024px){
  .section-heading{font-size:40px;line-height:1.12}
}
@media(max-width:640px){
  .section-head{gap:14px}
  .section-heading{font-size:36px;line-height:1.15;letter-spacing:-1px}
}

.n-172-48.brand-lockup{
  left:22px;
  top:11.5px;
  width:auto;
  height:35px;
  overflow:visible;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
  transition:opacity 0.2s ease;
  z-index:2;
}

.brand-lockup:hover{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  opacity:0.85;
}

.brand-logo-img{
  height:26px;
  width:auto;
  aspect-ratio:3447 / 2210;
  object-fit:contain;
  flex-shrink:0;
  display:block;
}

.brand-text-col{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
}

.brand-text-col .n-142-7{
  position:relative;
  left:auto;
  top:auto;
  width:auto;
  height:auto;
  color:#ffffff;
  font-family:"Inter",Arial,sans-serif;
  font-size:14.5px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:0.3px;
  text-align:left;
  white-space:nowrap;
}

.brand-text-col .n-172-49{
  position:relative;
  left:auto;
  top:auto;
  width:auto;
  height:auto;
  color:#94a3b8;
  font-family:"Inter",Arial,sans-serif;
  font-size:9.5px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:-0.1px;
  text-align:left;
  white-space:nowrap;
}
.n-142-9{left:0px;top:0px;width:44px;height:20px;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left;white-space:pre}
.n-142-10{left:64px;top:0px;width:82px;height:20px;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left;white-space:pre}
.n-142-11{left:166px;top:0px;width:78px;height:20px;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left;white-space:pre}
.n-142-12{left:264px;top:0px;width:80px;height:20px;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left;white-space:pre}
.n-142-13{left:364px;top:0px;width:85px;height:20px;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left;white-space:pre}
.n-147-2{left:469px;top:0px;width:26px;height:20px;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left;white-space:pre}
.n-142-8{left:calc(50% - 242px);top:19px;width:495px;height:20px;overflow:hidden}

.n-142-14{
  position:absolute !important;
  left:auto !important;
  right:8px !important;
  top:8px !important;
  width:auto !important;
  min-width:142px !important;
  height:42px !important;
  padding:0 24px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  overflow:visible !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
}

.n-142-15{
  position:static !important;
  left:auto !important;
  top:auto !important;
  width:auto !important;
  height:auto !important;
  color:#ffffff !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:0.5px !important;
  white-space:nowrap !important;
  text-align:center !important;
  display:inline-block !important;
}

.n-142-6{
  left:120px;
  top:18px;
  width:1200px;
  height:58px;
  background:rgba(22, 25, 34, 0.82);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  overflow:visible !important;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 32px -4px rgba(0, 0, 0, 0.5);
}
/* Floating nav: the wrapper is sticky at the top of .page (not inside the
   hero, whose overflow:hidden would trap it). It takes no height, so the
   glass pill floats over the hero at rest and stays put while scrolling. */
.n-142-5{position:sticky;left:0;top:0;z-index:40;width:100%;height:0;overflow:visible;pointer-events:none}
.n-142-6{pointer-events:auto}
.n-142-20{left:13px;top:6px;width:192px;height:18px;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px;text-align:left;white-space:pre}
.n-142-19{left:0px;top:0px;width:218px;height:30px;overflow:hidden;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(52,52,52,1)}
.n-142-21{left:0px;top:40px;width:640px;height:245px;color:rgba(237,237,237,1);font-family:"Inter",Arial,sans-serif;font-size:60px;font-weight:600;line-height:62px;letter-spacing:-1.8px;text-align:left}
.n-142-22{left:0px;top:305px;width:580px;height:23px;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:15px;font-weight:400;line-height:22.5px;letter-spacing:0px;text-align:left}
.n-142-25{left:20px;top:11px;width:101px;height:20px;color:#010101;font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left;white-space:pre}
.n-142-24{left:0px;top:0px;width:141px;height:42px;background:rgba(237,237,237,1);overflow:hidden;border-radius:999px}
.n-142-27{left:20px;top:11px;width:113px;height:20px;color:rgba(237,237,237,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left;white-space:pre}
.n-142-26{left:153px;top:0px;width:153px;height:42px;overflow:hidden;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(237,237,237,1)}
.n-142-23{left:0px;top:352px;width:306px;height:42px;overflow:hidden}
.n-142-28{left:0px;top:418px;width:580px;height:18px;color:rgba(112,112,112,1);font-family:"Inter",Arial,sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px;text-align:left}
.n-142-18{left:0px;top:47px;width:640px;height:445px;overflow:hidden}
.n-142-30{left:0px;top:0px;width:428px;height:523px;transform:matrix(1.0,-0.0,-0.0,1.0,0,0)}
/* Hero Visual Card (Recreated from Trade Call Wireframe) */
/* Hero Visual Card Deck (Recreated from Trade Call Wireframe) */
.n-142-29,
.hero-visual-container{
  position:relative;
  left:772px;
  top:0px;
  width:428px;
  height:523px;
  background:transparent;
  overflow:visible;
  border-radius:28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.hero-deck-container{
  position:relative;
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:1;
  filter:drop-shadow(0 20px 38px rgba(0, 0, 0, 0.5));
}

/* 3D Stacked Cards Deck (React Bits CardSwap Engine) */
.hero-deck-stack{
  position:relative;
  width:100%;
  height:490px;
  perspective:900px;
  transform-style:preserve-3d;
  overflow:visible;
  margin-top:0;
}

.hero-trade-card{
  position:absolute;
  top:50%;
  left:50%;
  width:414px;
  max-width:92vw;
  background:#ffffff;
  border-radius:24px;
  border:1px solid #e2e8f0;
  box-shadow:0 24px 60px -10px rgba(0,0,0,0.48), 0 0 0 1px rgba(0,0,0,0.06);
  overflow:visible;
  transform-style:preserve-3d;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  cursor:pointer;
  transition:box-shadow 0.3s ease, border-color 0.3s ease;
}


.card-glare{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.4), transparent 60%);
  opacity:0;
  transition:opacity 0.35s ease;
  mix-blend-mode:overlay;
  border-radius:22px;
  z-index:20;
}


/* Stack Pagination Indicator Dots */
.hero-deck-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  margin-top:14px;
  z-index:10;
}

.deck-dot{
  width:20px;
  height:4px;
  border-radius:2px;
  background:rgba(255, 255, 255, 0.2);
  border:none;
  padding:0;
  cursor:pointer;
  transition:all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}


.deck-dot.is-active{
  width:38px;
  background:linear-gradient(90deg, var(--lakshmi-400) 0%, var(--vishnu-400) 100%);
  box-shadow:0 0 12px rgba(var(--lakshmi-rgb), 0.65), 0 0 10px rgba(var(--vishnu-rgb), 0.55);
}

/* Topbar: Performance & Time */
.trade-card-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 22px;
  background:#f8fafc;
  border-top-left-radius:24px;
  border-top-right-radius:24px;
  border-bottom:1px solid #f1f5f9;
  font-family:Inter,Arial,sans-serif;
}

.trade-perf-badge{
  font-size:13px;
  font-weight:500;
  color:#475569;
}

.trade-perf-badge .perf-down{
  color:#dc2626;
  font-weight:700;
}

.trade-perf-badge .perf-up{
  color:#059669;
  font-weight:700;
}

.trade-time{
  font-size:12px;
  font-weight:500;
  color:#94a3b8;
}

/* Card Body */
.trade-card-body{
  padding:20px 22px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:18px;
  background:#ffffff;
  border-bottom-left-radius:24px;
  border-bottom-right-radius:24px;
  font-family:Inter,Arial,sans-serif;
}

/* Asset Info Row */
.trade-main-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.trade-asset-info{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex:1;
}

/* Badges Themes with Official Logos */
.nifty-badge-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
  background:#ffffff;
  border:1px solid #e2e8f0;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  overflow:hidden;
}

.nifty-badge-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:4px;
}

.nifty-badge-icon.tata-theme,
.nifty-badge-icon.reliance-theme,
.nifty-badge-icon.hdfc-theme,
.nifty-badge-icon.bank-nifty-theme{
  background:#ffffff;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}

.asset-title-group{
  display:flex;
  flex-direction:column;
}

.asset-name{
  font-size:14.5px;
  font-weight:600;
  color:#334155;
  line-height:1.3;
}

.asset-strike{
  font-size:22px;
  font-weight:700;
  color:#0f172a;
  letter-spacing:-0.5px;
  line-height:1.2;
  margin:2px 0 5px 0;
}

.asset-tags{
  display:flex;
  align-items:center;
  gap:6px;
}

.tag-buy{
  background:#ecfdf5;
  color:#059669;
  border:1px solid #a7f3d0;
  font-size:11.5px;
  font-weight:600;
  padding:2px 8px;
  border-radius:6px;
  line-height:1.4;
}

.tag-sep{
  color:#94a3b8;
  font-size:10px;
}

.tag-type{
  font-size:13px;
  font-weight:500;
  color:#64748b;
}

/* Potential Box on the right */
.potential-box{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:12px 16px;
  text-align:center;
  min-width:116px;
  flex-shrink:0;
  transition:transform 0.3s ease, background 0.3s ease;
}


.potential-label{
  font-size:12px;
  font-weight:500;
  color:#64748b;
  margin-bottom:3px;
}

.potential-value{
  font-size:22px;
  font-weight:700;
  color:#059669;
  letter-spacing:-0.4px;
  line-height:1.1;
}

/* Target / SL Track */
.trade-track-container{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:2px 0 0 0;
}

.trade-slider-track{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  position:relative;
  height:32px;
}

.track-node{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  user-select:none;
}

.node-sl{
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#dc2626;
  font-size:12px;
  font-weight:700;
  border-radius:8px;
  padding:4px 9px;
  line-height:1.2;
}

.node-tp{
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  color:#059669;
  font-size:12px;
  font-weight:700;
  border-radius:8px;
  padding:4px 9px;
  line-height:1.2;
}

.node-entry{
  width:28px;
  height:28px;
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  border-radius:8px;
}

.entry-bars-svg{
  width:16px;
  height:16px;
}

.node-current{
  position:relative;
  width:14px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.current-dot{
  width:10px;
  height:10px;
  background:#059669;
  border-radius:50%;
  position:relative;
  z-index:2;
  box-shadow:0 0 0 3px rgba(5, 150, 105, 0.2);
}

.current-pulse{
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:rgba(5, 150, 105, 0.35);
  animation:currentPulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  z-index:1;
}

@keyframes currentPulse{
  0%{ transform:scale(0.85); opacity:0.8; }
  60%{ transform:scale(1.7); opacity:0; }
  100%{ transform:scale(1.7); opacity:0; }
}

.node-mid{
  width:10px;
  height:10px;
  border-radius:50%;
  border:2px solid #059669;
  background:#ffffff;
}

.track-line{
  height:2px;
}

.track-line.line-dashed{
  border-top:2px dashed #cbd5e1;
  flex:1;
  margin:0 4px;
}

.track-line.line-sl{
  flex:1;
}

.track-line.line-solid-green{
  position:relative;
  height:2.5px;
  background:#059669;
  border-radius:1px;
  overflow:hidden;
}

.track-line.line-solid-green::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform:translateX(-100%);
  animation:trackShimmer 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes trackShimmer{
  0%{ transform:translateX(-100%); }
  50%, 100%{ transform:translateX(100%); }
}

.track-line.line-curr{
  flex:0.8;
}

.track-line.line-tp{
  flex:0.8;
}

/* Metrics Row */
.trade-metrics-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-top:2px;
}

.metric-col{
  display:flex;
  flex-direction:column;
}

.metric-col.col-sl{
  text-align:left;
}

.metric-col.col-entry{
  text-align:center;
  align-items:center;
}

.metric-col.col-tp{
  text-align:right;
  align-items:flex-end;
}

.metric-label{
  font-size:12px;
  font-weight:500;
  color:#64748b;
  display:flex;
  align-items:center;
  gap:3px;
  margin-bottom:3px;
}

.info-icon{
  color:#94a3b8;
  font-size:12px;
}

.metric-val{
  font-size:18px;
  font-weight:700;
  color:#0f172a;
  letter-spacing:-0.3px;
}

/* Action Buttons */
.trade-actions-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:4px;
}

.btn-trade-view{
  background:#ffffff;
  border:1.5px solid #e2e8f0;
  color:#334155;
  font-family:Inter,Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  border-radius:12px;
  padding:12px 16px;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
}


.btn-trade-action{
  background:#059669;
  border:none;
  color:#ffffff;
  font-family:Inter,Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  border-radius:12px;
  padding:12px 16px;
  text-align:center;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(5, 150, 105, 0.25);
  transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
}


.n-142-17{left:120px;top:112px;width:1200px;height:523px;overflow:visible}
.n-142-16{left:0px;top:94px;width:1440px;height:747px;overflow:hidden}
.n-142-34{left:0px;top:0px;width:180px;height:17px;color:rgba(112,112,112,1);font-family:"Inter",Arial,sans-serif;font-size:11px;font-weight:500;line-height:16.5px;letter-spacing:1.76px;text-align:left;text-transform:uppercase}
.n-142-35{left:0px;top:23px;width:180px;height:40px;color:rgba(237,237,237,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left}
.n-142-36{left:0px;top:69px;width:180px;height:18px;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px;text-align:left}
.n-142-33{left:0px;top:0px;width:190.39999px;height:87px;overflow:hidden}
.n-142-38{left:0px;top:0px;width:180px;height:17px;color:rgba(112,112,112,1);font-family:"Inter",Arial,sans-serif;font-size:11px;font-weight:500;line-height:16.5px;letter-spacing:1.76px;text-align:left;text-transform:uppercase}
.n-142-39{left:0px;top:23px;width:180px;height:20px;color:rgba(237,237,237,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left}
.n-142-40{left:0px;top:49px;width:180px;height:18px;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px;text-align:left}
.n-142-37{left:216.39999px;top:0px;width:190.39999px;height:67px;overflow:hidden}
.n-142-42{left:0px;top:0px;width:180px;height:17px;color:rgba(112,112,112,1);font-family:"Inter",Arial,sans-serif;font-size:11px;font-weight:500;line-height:16.5px;letter-spacing:1.76px;text-align:left;text-transform:uppercase}
.n-142-43{left:0px;top:23px;width:180px;height:20px;color:rgba(237,237,237,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left}
.n-142-44{left:0px;top:49px;width:180px;height:18px;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px;text-align:left}
.n-142-41{left:432.79999px;top:0px;width:190.39998px;height:67px;overflow:hidden}
.n-142-46{left:0px;top:0px;width:180px;height:17px;color:rgba(112,112,112,1);font-family:"Inter",Arial,sans-serif;font-size:11px;font-weight:500;line-height:16.5px;letter-spacing:1.76px;text-align:left;text-transform:uppercase}
.n-142-47{left:0px;top:23px;width:180px;height:20px;color:rgba(237,237,237,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left}
.n-142-45{left:649.19995px;top:0px;width:190.39999px;height:43px;overflow:hidden}
.n-142-49{left:0px;top:0px;width:180px;height:17px;color:rgba(112,112,112,1);font-family:"Inter",Arial,sans-serif;font-size:11px;font-weight:500;line-height:16.5px;letter-spacing:1.76px;text-align:left;text-transform:uppercase}
.n-142-50{left:0px;top:23px;width:180px;height:20px;color:rgba(237,237,237,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left}
.n-142-48{left:865.59998px;top:0px;width:190.39999px;height:43px;overflow:hidden}
.n-142-32{left:192px;top:24px;width:1056px;height:87px;overflow:hidden}
.n-142-31{left:0px;top:841px;width:1440px;height:139px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(52,52,52,1)}
.n-142-4{left:0;top:0;width:1440px;height:980px;background:#010101;overflow:hidden}
.n-142-53{left:192px;top:0px;width:1056px}
.n-142-62{left:5.81074px;top:-41.34558px;width:354.41975px;height:449.74239px;transform:matrix(0.9902680266875563,0.13917309347756054,-0.13917309347756054,0.9902680266875563,0,0)}
.n-142-61{left:0px;top:0px;width:300px;height:412px;background:rgba(210,210,210,1);overflow:hidden;border-radius:18px;box-shadow:0px 22px 46px 0px rgba(18,18,18,0.14)}
.n-142-64{left:15px;top:12.5px;width:7px;height:7px;background:rgba(17,17,17,1);border-radius:50%}
.n-142-65{left:30px;top:8px;width:73px;height:16px;color:rgba(17,17,17,1);font-family:"Inter",Arial,sans-serif;font-size:10.5px;font-weight:600;line-height:15.75px;letter-spacing:1.575px;text-align:left;white-space:pre;text-transform:uppercase}
.n-142-63{left:90.09592px;top:357.6904px;width:118px;height:32px;transform:matrix(1.0,-2.7755575615628914e-17,2.7755575615628914e-17,1.0,0,0);background:rgba(255,255,255,1);overflow:hidden;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(216,216,216,1),0px 2px 6px 0px rgba(18,18,18,0.1)}
.n-142-60{left:66px;top:38.75193px;width:300px;height:412px;transform:matrix(0.9902681112289429,-0.13917310535907745,0.13917310535907745,0.9902681112289429,0,0)}
.n-142-68{left:-56.78123px;top:7.98008px;width:354.41975px;height:449.74239px;transform:matrix(0.9902680266875563,-0.13917309347756054,0.13917309347756054,0.9902680266875563,0,0)}
.n-142-67{left:0px;top:0px;width:300px;height:412px;background:rgba(210,210,210,1);overflow:hidden;border-radius:18px;box-shadow:0px 22px 46px 0px rgba(18,18,18,0.14)}
.n-142-70{left:15px;top:12.5px;width:7px;height:7px;background:rgba(130,130,130,1);border-radius:50%}
.n-142-71{left:30px;top:8px;width:187px;height:16px;color:rgba(17,17,17,1);font-family:"Inter",Arial,sans-serif;font-size:10.5px;font-weight:600;line-height:15.75px;letter-spacing:1.575px;text-align:left;white-space:pre;text-transform:uppercase}
.n-142-69{left:-24.26733px;top:351.57742px;width:232px;height:32px;transform:matrix(1.0,2.7755575615628914e-17,-2.7755575615628914e-17,1.0,0,0);background:rgba(255,255,255,1);overflow:hidden;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(216,216,216,1),0px 2px 6px 0px rgba(18,18,18,0.1)}
.n-142-66{left:693.33929px;top:2px;width:300px;height:412px;transform:matrix(0.9902681112289429,0.13917310535907745,-0.13917310535907745,0.9902681112289429,0,0)}
.n-142-74{left:0px;top:0px;width:330px;height:452px;transform:matrix(1.0,-0.0,-0.0,1.0,0,0)}
.n-142-73{left:0px;top:0px;width:330px;height:452px;background:rgba(210,210,210,1);overflow:hidden;border-radius:18px;box-shadow:0px 22px 46px 0px rgba(18,18,18,0.14)}
.n-142-76{left:15px;top:12.5px;width:7px;height:7px;background:rgba(78,78,78,1);border-radius:50%}
.n-142-77{left:30px;top:8px;width:59px;height:16px;color:rgba(17,17,17,1);font-family:"Inter",Arial,sans-serif;font-size:10.5px;font-weight:600;line-height:15.75px;letter-spacing:1.575px;text-align:left;white-space:pre;text-transform:uppercase}
.n-142-75{left:87px;top:385px;width:104px;height:32px;background:rgba(255,255,255,1);overflow:hidden;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(216,216,216,1),0px 2px 6px 0px rgba(18,18,18,0.1)}
.n-142-72{left:363px;top:0px;width:330px;height:452px}
.n-142-59{left:192px;top:202px;width:1056px;height:500px}
.n-142-78{left:192px;top:683px;width:1056px;height:48px;overflow:hidden}
.n-142-79{left:192px;top:750px;width:1056px;height:36px;color:rgba(130,130,130,1);font-family:"Inter",Arial,sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px;text-align:center}
.n-142-52{position:relative;left:0;top:0;width:1440px;height:666px;overflow:hidden} /* header + tilted card stack */
.n-142-51{left:0;top:0;width:1440px;height:auto;padding:var(--section-pad) 0;background:#010101;overflow:hidden}
.n-142-87{display:none}
/* Trades & Research: pinned horizontal track.
   The section is 100vh + --trades-travel tall (script.js measures how far
   the card row overflows the stage and sets the custom property); the
   wrapper inside sticks for 100vh while scroll progress slides the row
   left. Head, row and footer stack in the stage and centre vertically; the
   card visuals flex to whatever height is left so the stage fits any
   viewport. The pin holds at every width (the ≤1024 and ≤640 blocks resize
   the stage); under reduced motion, or when script.js finds the stage too
   short for its content, the same markup lays out statically (TRADES:
   STATIC LAYOUT, after the breakpoint blocks). */
.n-142-82{
  position:relative;
  left:auto;
  top:auto;
  width:1200px;
  max-width:100%;
  margin:0 auto;
  flex:0 0 auto;
}

.trades-grid,
.n-142-88{
  --trade-card-w:420px;
  position:relative;
  left:auto;
  top:auto;
  width:max-content;
  height:auto;
  flex:1 1 auto;
  min-height:0;
  max-height:720px;
  align-self:flex-start;
  display:flex;
  gap:24px;
  padding:0 120px;
  overflow:visible;
  will-change:transform;
}

.trade-card,
.n-142-89,
.n-142-100,
.n-142-111,
.n-142-122{
  position:relative;
  left:auto;
  top:auto;
  width:var(--trade-card-w,420px);
  height:auto;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  opacity:0;
  transform:translateY(42px);
  transition:opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
  will-change:transform, opacity;
}

.trade-card.is-revealed{
  opacity:1;
  transform:translateY(0);
}

.trade-visual-box,
.n-142-90,
.n-142-101,
.n-142-112,
.n-142-123{
  position:relative;
  left:auto;
  top:auto;
  width:100%;
  height:auto;
  flex:1 1 auto;
  min-height:220px;
  border-radius:20px;
  overflow:hidden;
  background:#17171a;
  box-shadow:0 10px 24px -8px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.06);
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
}

.trade-card:hover .trade-visual-box{
  transform:translateY(-5px);
  box-shadow:0 20px 40px -10px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.1);
}

.trade-img,
.n-142-91,
.n-142-102,
.n-142-113,
.n-142-124{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
}

.trade-card:hover .trade-img{
  transform:scale(1.03);
}

/* Card visuals: SVG charts drawn by initTradeVisuals in script.js.
   Base styles are each chart's finished state; the keyframes only add the
   way in, so reduced motion (animation:none) still shows a complete chart.
   Keyframes stay paused until the section is on screen. */
.trade-chart{background:#0d1119}
.trade-chart svg{display:block;width:100%;height:100%;font-family:"Inter",Arial,sans-serif}
.trade-chart text{fill:#e2e8f0;font-size:10px;font-weight:500;letter-spacing:.2px}
.tc-title{font-size:12.5px;font-weight:600;fill:#f8fafc;letter-spacing:-.1px}
.tc-tag{font-size:10px;font-weight:600;fill:#7f8ba3;letter-spacing:.6px}
.tc-axis{fill:#6b7690;font-size:9.5px;font-weight:500}
.tc-grid{stroke:rgba(255,255,255,.06);stroke-width:1}
.tc-dash{stroke-width:1;stroke-dasharray:3 4}
.tc-chip{fill:#0a0d14;font-size:10.5px;font-weight:700}
.tc-up{fill:#34D399}
.tc-down{fill:#FF6B74}
.tc-pulse{transform-box:fill-box;transform-origin:center;animation:tc-pulse 1.8s ease-out infinite}
@keyframes tc-pulse{from{transform:scale(.5);opacity:.7}to{transform:scale(2.2);opacity:0}}
#trades:not(.trades-visuals-live) .trade-chart *{animation-play-state:paused}

/* Intraday: candles rise in one after another, then tick live. */
.ir-c{animation:tc-rise .5s cubic-bezier(.16,1,.3,1) both}
.trade-chart.is-live .ir-c{animation:none}
@keyframes tc-rise{from{opacity:0;transform:translateY(8px)}}
.ir-last{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.ir-tag{fill:#0a0d14;font-size:10px;font-weight:700}

/* Swing: the line draws itself (10s loop), the area fills behind it and the
   breakout call-out pops once the line clears the trendline. */
.sw-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,0);stroke-dashoffset:0;animation:sw-draw 10s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sw-draw{0%{stroke-dashoffset:var(--len,0);opacity:1}40%{stroke-dashoffset:0}92%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.sw-area{animation:sw-fade 10s infinite}
@keyframes sw-fade{0%,34%{opacity:0}46%,92%{opacity:1}96%,100%{opacity:0}}
.sw-pop{transform-box:fill-box;transform-origin:center;animation:sw-pop 10s infinite}
@keyframes sw-pop{0%,30%{opacity:0;transform:scale(.7)}36%{opacity:1;transform:scale(1.08)}40%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
.sw-end{animation:sw-end 10s infinite}
@keyframes sw-end{0%,39%{opacity:0}43%,92%{opacity:1}96%,100%{opacity:0}}

/* Positional: a panel-coloured cover shrinks to the right to reveal the
   area (9s loop); the closing marker pops once the reveal completes. The
   cover snaps back into place while the group is faded out (96%–100%), so
   nothing jumps on the loop wrap — resetting it at 0% alongside the opacity
   reset let the finished curve flash for a frame between iterations. */
.po-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.po-cover{transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(0);animation:po-reveal 9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes po-reveal{0%{transform:scaleX(1)}46%,97.5%{transform:scaleX(0);animation-timing-function:step-end}98%,100%{transform:scaleX(1)}}
.po-anim{animation:po-fade 9s infinite}
@keyframes po-fade{0%,92%{opacity:1}96%,100%{opacity:0}}
.po-end{transform-box:fill-box;transform-origin:center;animation:po-end 9s infinite}
@keyframes po-end{0%,44%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}54%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}

/* Thematic: tiles scale in, then re-colour as their numbers move. */
.th-tile{transform-box:fill-box;transform-origin:center;animation:th-in .55s cubic-bezier(.16,1,.3,1) both}
.trade-chart.is-live .th-tile{animation:none}
@keyframes th-in{from{opacity:0;transform:scale(.85)}}
.th-tile rect{transition:fill .9s ease}
.th-name{font-size:11px;font-weight:600;fill:#fff}
.th-val{font-size:10px;font-weight:500;fill:rgba(255,255,255,.8)}
.th-focus{fill:none;stroke:#fff;stroke-width:1.5;opacity:.9;transition:opacity .25s ease}
@media(prefers-reduced-motion:reduce){
  .trade-chart *{animation:none!important;transition:none!important}
}

/* Timeframe pill badge */
.trade-pill,
.n-142-92,
.n-142-103,
.n-142-114,
.n-142-125{
  position:absolute;
  left:16px;
  bottom:16px;
  top:auto;
  width:auto;
  max-width:calc(100% - 32px);
  height:32px;
  padding:0 16px;
  background:rgba(18, 22, 30, 0.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:20px;
  box-shadow:0 4px 14px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.trade-pill p,
.n-142-94,
.n-142-105,
.n-142-116,
.n-142-127{
  position:static;
  left:auto;
  top:auto;
  width:auto;
  height:auto;
  margin:0;
  color:#f1f5f9;
  font-family:"Inter",Arial,sans-serif;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:-0.1px;
  text-align:center;
  white-space:nowrap;
  text-transform:none;
}

.trade-info,
.n-142-97,
.n-142-108,
.n-142-119,
.n-142-130{
  position:relative;
  left:auto;
  top:auto;
  width:100%;
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:0 0 auto;
  overflow:visible;
}

.trade-info p:first-child,
.n-142-98,
.n-142-109,
.n-142-120,
.n-142-131{
  position:static;
  left:auto;
  top:auto;
  width:auto;
  height:auto;
  margin:0;
  color:#f8fafc;
  font-family:"Inter",Arial,sans-serif;
  font-size:20px;
  font-weight:600;
  line-height:26px;
  letter-spacing:-0.3px;
  text-align:left;
}

.trade-info p:last-child,
.n-142-99,
.n-142-110,
.n-142-121,
.n-142-132{
  position:static;
  left:auto;
  top:auto;
  width:auto;
  height:auto;
  margin:0;
  color:#94a3b8;
  font-family:"Inter",Arial,sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:21px;
  letter-spacing:0px;
  text-align:left;
  white-space:normal;
}

.n-142-93,.n-142-95,.n-142-96,.n-142-104,.n-142-106,.n-142-107,.n-142-115,.n-142-117,.n-142-118,.n-142-126,.n-142-128,.n-142-129{display:none}

.trades-footer{
  position:relative;
  left:auto;
  top:auto;
  width:1200px;
  max-width:100%;
  margin:0 auto;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.75s cubic-bezier(0.16,1,0.3,1) 0.3s, transform 0.75s cubic-bezier(0.16,1,0.3,1) 0.3s;
}
.trades-footer.is-revealed{
  opacity:1;
  transform:translateY(0);
}
.trades-review-notice{
  margin:0;
  color:#cbd5e1;
  font-family:"Inter",Arial,sans-serif;
  font-size:14px;
  line-height:21px;
  font-weight:500;
}
.trades-disclaimer{
  margin:0;
  color:#64748b;
  font-family:"Inter",Arial,sans-serif;
  font-size:12.5px;
  line-height:18px;
  font-weight:400;
}
.n-142-81{position:sticky;left:0;top:0;width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:60px;padding:56px 0;overflow:hidden} /* pinned stage: header + card track + footer note */
/* The stage frames its content 56px inside the viewport; the rest of the
   section rhythm goes outside as margin (not padding: script.js maps scroll
   progress to the section's own box). The margin strip would show the
   body's #07080a, so ::before paints it in the section's #010101: it sits
   under everything (z-index:-1, no stacking context on the section), and
   overshoots well past any breakpoint's margin - the neighbours' own
   backgrounds cover the excess, and in the static layouts (no margin) it is
   hidden entirely. Wide enough for the >=1441 gutters; .page clips it below. */
.n-142-80{left:0;top:0;width:1440px;height:calc(100vh + var(--trades-travel,0px));padding:0;margin:calc(var(--section-pad) - 56px) auto;background:#010101;overflow:visible}
.n-142-80::before{content:"";position:absolute;left:-1440px;right:-1440px;top:-160px;bottom:-160px;background:#010101;z-index:-1;pointer-events:none}
/* Not pinned (reduced motion, or a stage too short for its content): the
   row scrolls natively. The rules sit after the breakpoint blocks, which
   pin with !important at every width - see TRADES: STATIC LAYOUT. */

.n-142-141{
  position:relative;
  left:120px;
  top:0px;
  width:1200px;
}
/* Long one-liner: cap the measure so it breaks as two balanced lines. */
.n-142-145{max-width:920px}
.n-142-146{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  width:100%;
  max-width:680px;
  height:auto;
  margin:0;
  color:rgba(166,166,166,1);
  font-family:"Inter",Arial,sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:22.5px;
  letter-spacing:0px;
  text-align:center;
  white-space:normal;
}

/* Why Vittaara Bento Grid & Directional Scroll Animations */
.n-142-148{left:0px;top:0px;width:1200px;height:368px;overflow:visible;display:flex;gap:24px}
.n-142-149{
  position:relative;
  left:auto;
  top:auto;
  width:784px;
  height:368px;
  background:linear-gradient(180deg,#11141c 0%,#0a0c12 100%);
  overflow:hidden;
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.06), 0 24px 48px -24px rgba(0,0,0,.75);
  opacity:0;
  transform:translateX(-70px);
  transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
  will-change:transform, opacity;
}
.n-142-150{position:absolute;left:26px;top:22px;width:732px;height:62px;overflow:visible}
.n-142-151{position:relative;left:0;top:0;width:100%;height:auto;color:rgba(237,237,237,1);font-family:"Inter",Arial,sans-serif;font-size:20px;font-weight:600;line-height:24px;letter-spacing:-0.3px;text-align:left;white-space:normal}
.n-142-152{position:relative;left:0;top:4px;width:100%;height:auto;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:19px;letter-spacing:0px;text-align:left;white-space:normal}
.n-142-153{position:absolute;left:26px;top:92px;width:732px;height:252px;background:#07080a;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 24px -6px rgba(0,0,0,0.4)}
.n-142-154{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.n-142-155{
  position:relative;
  left:auto;
  top:auto;
  width:392px;
  height:368px;
  background:linear-gradient(180deg,#11141c 0%,#0a0c12 100%);
  overflow:hidden;
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.06), 0 24px 48px -24px rgba(0,0,0,.75);
  opacity:0;
  transform:translateX(70px);
  transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1) 0.1s, transform 0.85s cubic-bezier(0.16,1,0.3,1) 0.1s, box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
  will-change:transform, opacity;
}
.n-142-156{position:absolute;left:26px;top:22px;width:340px;height:62px;overflow:visible}
.n-142-157{position:relative;left:0;top:0;width:100%;height:auto;color:rgba(237,237,237,1);font-family:"Inter",Arial,sans-serif;font-size:20px;font-weight:600;line-height:24px;letter-spacing:-0.3px;text-align:left;white-space:normal}
.n-142-158{position:relative;left:0;top:4px;width:100%;height:auto;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:19px;letter-spacing:0px;text-align:left;white-space:normal}
.n-142-159{position:absolute;left:26px;top:92px;width:340px;height:252px;background:#07080a;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 24px -6px rgba(0,0,0,0.4)}
.n-142-160{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Row 2: Accountable (Spread entirely across 1056px width) */
.n-142-161{left:0px;top:392px;width:1200px;height:368px;overflow:visible}
.n-142-162{
  position:relative;
  left:0px;
  top:0px;
  width:1200px;
  height:368px;
  background:linear-gradient(180deg,#11141c 0%,#0a0c12 100%);
  overflow:hidden;
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.06), 0 24px 48px -24px rgba(0,0,0,.75);
  opacity:0;
  transform:translateY(55px) scale(0.98);
  transition:opacity 0.95s cubic-bezier(0.16,1,0.3,1) 0.22s, transform 0.95s cubic-bezier(0.16,1,0.3,1) 0.22s, box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
  will-change:transform, opacity;
}
.n-142-163{position:absolute;left:26px;top:22px;width:1148px;height:62px;overflow:visible}
.n-142-164{position:relative;left:0;top:0;width:100%;height:auto;color:rgba(237,237,237,1);font-family:"Inter",Arial,sans-serif;font-size:20px;font-weight:600;line-height:24px;letter-spacing:-0.3px;text-align:left;white-space:normal}
.n-142-165{position:relative;left:0;top:4px;width:100%;max-width:920px;height:auto;color:rgba(166,166,166,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:19px;letter-spacing:0px;text-align:left;white-space:normal}
.n-142-166{position:absolute;left:26px;top:92px;width:1148px;height:252px;background:#07080a;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 24px -6px rgba(0,0,0,0.4)}
.n-142-154,
.n-142-160,
.n-142-167{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  transition:filter 0.35s ease;
}

/* Revealed States */
.why-card-left.is-revealed,
.n-142-149.is-revealed{
  opacity:1;
  transform:translateX(0);
}

.why-card-right.is-revealed,
.n-142-155.is-revealed{
  opacity:1;
  transform:translateX(0);
}

.why-card-bottom.is-revealed,
.n-142-162.is-revealed{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Hover Elevation States */
.n-142-149.is-revealed:hover,
.n-142-155.is-revealed:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 16px 36px -12px rgba(0,0,0,0.6);
}

.n-142-162.is-revealed:hover{
  transform:translateY(-4px) scale(1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 16px 36px -12px rgba(0,0,0,0.6);
}

/* The frames hold UI mockups with content at the edges, so no zoom on
   hover (it crops them); lift the render slightly instead. */
.n-142-149:hover .n-142-154,
.n-142-155:hover .n-142-160,
.n-142-162:hover .n-142-167{
  transform:none;
  filter:brightness(1.06);
}

.n-142-147{left:120px;top:236px;width:1200px;height:732px;overflow:visible}

/* Why Vittaara · the three visuals are live markup (index.html), drawn in
   the dashboard language of the Our Process boards: navy ground, faint
   grid, hairline panels, blue entry / green target / red stop, Reliance as
   the running example. On the 1440 canvas each fills its fixed frame
   (Research 732x252, Risk 340x252, Accountable 1148x232; the section's
   research-only line is under the card rows, see .section-disclaimer);
   below 1025px the frames are fluid and the boards size to their content. The
   hero's SEBI badge and the audit line sit in the Accountable card, not
   its frame. */
.why-board{
  --blue:#4A82EF;--blue-deep:#1F5EFF;--green:#34D399;--green-deep:#10B981;--red:#F06B6B;--red-deep:#E5484D;--amber:#F5B546;
  --ink:#eceff4;--soft:#9aa3b5;--mute:#6b7488;--line:rgba(255,255,255,.08);--panel:rgba(255,255,255,.03);
  --ease:cubic-bezier(.2,.8,.2,1);
  position:absolute;inset:0;background:#07080a;color:var(--ink);
  font-family:"Inter",Arial,sans-serif;font-size:11px;line-height:1.35;
  -webkit-font-smoothing:antialiased;
}
.why-board::before{ display:none; }
.why-board::after{ /* brand glow, top-left */
  content:"";position:absolute;width:420px;height:300px;left:-120px;top:-150px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(31,94,255,.14),transparent 72%);
}
.why-board > *{position:relative;z-index:1}
.wb-title,.wb-meta,.wb-eyebrow,.wbr-cmp,.wbr-cmp-sub,.wbk-eye,.acct-title,.acct-meta,.acct-t,.acct-d{margin:0}

/* Shared parts */
.wb-head{display:flex;align-items:center;gap:12px}
.wb-logo{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.wb-logo img{display:block;width:28px;height:28px;object-fit:contain;padding:2px;box-sizing:border-box}
.wb-id{flex:1 1 auto;min-width:0}
.wb-title{font-size:15px;font-weight:600;letter-spacing:-.3px;line-height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-meta{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;margin-top:3px;font-size:11.5px;line-height:16px;color:var(--soft);white-space:nowrap}
.wb-meta i{width:4px;height:4px;border-radius:50%;background:#4b5364}
.wb-buy{
  display:inline-flex;align-items:center;height:18px;padding:0 9px;border-radius:999px;
  font-size:11px;font-weight:600;color:var(--green);
  background:rgba(52,211,153,.10);box-shadow:inset 0 0 0 1px rgba(52,211,153,.4);
}
.wb-eyebrow{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);line-height:13px}
.wb-pill{
  flex:0 0 auto;display:inline-flex;align-items:center;height:24px;padding:0 12px;border-radius:999px;
  font-size:12px;font-weight:600;color:var(--soft);
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);white-space:nowrap;
}
.wb-chip{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;
  font-size:10px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  color:#aab2c0;background:rgba(255,255,255,.06);
}
.wb-chip.blue{color:#9dbcff;background:rgba(74,130,239,.16)}
.wb-chip.amber{color:var(--amber);background:rgba(245,181,70,.12)}
.wb-chip.up{color:var(--green);background:rgba(52,211,153,.10)}
.wb-chip.dn{color:var(--red);background:rgba(240,107,107,.12)}

/* ── Research-Backed: the trade note (left) and the daily chart (right) ── */
.wbr{display:grid;grid-template-columns:380px minmax(0,1fr)}
.wbr-left{padding:16px 18px 16px 20px;display:flex;flex-direction:column;gap:7px;border-right:1px solid var(--line);min-width:0}
.wbr .wb-head{gap:10px}
.wbr .wb-logo,.wbr .wb-logo img{width:26px;height:26px}
.wbr .wb-meta{font-size:10.5px;gap:0 6px;flex-wrap:nowrap;overflow:hidden}
.wbr .wb-buy{height:16px;padding:0 7px;font-size:10px}
.wbr-right{padding:16px 20px 16px 18px;display:flex;flex-direction:column;min-width:0}
.wbr-price{margin-left:auto;text-align:right;flex:0 0 auto}
.wbr-cmp{font-size:15px;font-weight:600;letter-spacing:-.3px;line-height:19px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wbr-cmp b{font-size:11px;font-weight:600;color:var(--green);margin-left:2px}
.wbr-cmp-sub{font-size:10px;color:var(--mute);margin-top:2px;white-space:nowrap}
.wbr-eyebrow{margin-top:2px}
.wbr-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.wbr-point{
  display:flex;align-items:center;gap:10px;padding:4px 10px;border-radius:9px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);min-width:0;
}
.wbr-point.is-on{border-color:rgba(74,130,239,.45);background:rgba(74,130,239,.08);box-shadow:inset 0 0 0 1px rgba(74,130,239,.12)}
.wbr-num{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:600;background:rgba(74,130,239,.18);color:#9dbcff;border:1px solid rgba(74,130,239,.35);
}
.wbr-point.is-on .wbr-num{background:var(--blue-deep);color:#fff;border-color:transparent}
.wbr-body{display:flex;flex-direction:column;min-width:0}
.wbr-pt{font-size:12px;font-weight:600;letter-spacing:-.1px;line-height:15px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.wbr-pd{font-size:10.5px;line-height:13px;color:var(--soft);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbr-chart-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wbr-tabs{display:flex;gap:2px;font-size:10px;font-weight:600;color:var(--mute)}
.wbr-tabs span{padding:2px 6px;border-radius:5px;line-height:13px}
.wbr-tabs .on{background:rgba(255,255,255,.08);color:var(--ink)}
.wbr-chart{position:relative;flex:1 1 auto;min-height:0;margin-top:10px}
.wbr-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.wbr-lvl{stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.75}
.wbr-lvl.t{stroke:var(--green)}
.wbr-lvl.e{stroke:var(--blue)}
.wbr-lvl.sl{stroke:var(--red)}
.wbr-vol rect{fill:rgba(74,130,239,.26)}
.wbr-vol .hi{fill:rgba(74,130,239,.7)}
.wbr-area{fill:url(#wbr-area)}
.wbr-line{fill:none;stroke:#7fa6ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* Centred with margins, not a transform: ps-pop ends on transform:none. */
.wbr-mark{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%}
.wbr-mark-brk{background:#0b0f18;border:1.5px solid #9dbcff;box-sizing:border-box}
.wbr-mark-cmp{background:#9dbcff;box-shadow:0 0 0 4px rgba(74,130,239,.25),0 0 12px rgba(74,130,239,.6)}
.wbr-tag{
  position:absolute;right:0;margin-top:-9px;height:18px;padding:0 6px;border-radius:5px;
  font-size:10px;font-weight:600;line-height:16px;white-space:nowrap;box-sizing:border-box;
  background:#0b0f18;border:1px solid;font-variant-numeric:tabular-nums;
}
.wbr-tag.t{color:var(--green);border-color:rgba(52,211,153,.45)}
.wbr-tag.e{color:#9dbcff;border-color:rgba(74,130,239,.55)}
.wbr-tag.sl{color:var(--red);border-color:rgba(240,107,107,.45)}
.wbr-months{display:flex;justify-content:space-between;width:78%;margin-top:4px;font-size:10px;line-height:14px;color:var(--mute)}

/* ── Risk-Defined: the ladder from stop-loss to target, and the tiles ── */
.wbk{padding:16px 18px;display:flex;gap:18px}
.wbk-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.wbk-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wbk-eye{display:flex;align-items:center;gap:7px;color:#9aa3b5;white-space:nowrap}
.wbk-eye i{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(74,130,239,.22)}
/* On the fixed 252px frame the slack splits between the two auto margins
   (above the levels, above the tiles); in flow (under 1025px) they are 0. */
.wbk-levels{display:grid;grid-template-columns:33% 1fr auto;margin-top:auto;padding-top:10px}
.wbk-lvl b{display:block;font-size:17px;font-weight:600;letter-spacing:-.4px;line-height:20px;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wbk-lvl-t{text-align:right}
.wbk-ladder{position:relative;height:18px;margin:10px 0 6px}
.wbk-rail{
  position:absolute;left:7px;right:7px;top:7px;height:4px;border-radius:2px;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--red-deep) 0%,rgba(229,72,77,.85) 20%,var(--blue) 33%,var(--green-deep) 100%);
}
.wbk-node{position:absolute;top:9px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;box-sizing:border-box;background:#0b0f18}
.wbk-node::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%}
.wbk-node.stop{left:7px;border:2px solid var(--red-deep);box-shadow:0 0 0 3px rgba(229,72,77,.18)}
.wbk-node.stop::after{background:var(--red-deep)}
.wbk-node.entry{left:33%;width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--blue);box-shadow:0 0 0 4px rgba(74,130,239,.25),0 0 14px rgba(74,130,239,.6)}
.wbk-node.entry::after{background:#fff}
.wbk-node.target{left:calc(100% - 7px);border:2px solid var(--green-deep);box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.wbk-node.target::after{background:var(--green-deep)}
.wbk-rr{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;line-height:14px;color:var(--mute);white-space:nowrap}
.wbk-rr b{font-weight:600}
.wbk-rr .dn{color:var(--red)}
.wbk-rr .up{color:var(--green)}
.wbk-tiles{display:grid;grid-template-columns:auto auto 1fr;gap:5px;margin-top:auto;padding-top:10px}
.wbk-tile{padding:10px 7px 9px 8px;border-radius:9px;border:1px solid var(--line);background:var(--panel);min-width:0}
.wbk-tile b{display:block;font-size:15px;font-weight:600;letter-spacing:-.4px;line-height:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
.wbk-tile b small{font-size:10px;font-weight:600;color:var(--soft);letter-spacing:.04em;margin-left:1px}
.wbk-tile .wb-eyebrow{display:block;margin-top:4px;font-size:7px;letter-spacing:.09em;white-space:nowrap}
.wbk-tile.hot{border-color:rgba(229,72,77,.45);background:rgba(229,72,77,.08)}
.wbk-tile.hot b{color:var(--red);letter-spacing:-.5px}
.wbk-tile.hot .wb-eyebrow{color:var(--red);opacity:.85}

/* ── Accountable: the card head, the trade record, the audit line ── */
.acct-head-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.acct-head-text{flex:1 1 auto;min-width:0}
/* The hero's SEBI badge (see .hero-badge), a step smaller beside a 20px
   card heading than under the 60px headline. */
.acct-sebi.hero-badge{flex:0 0 auto;height:30px;padding:0 14px 0 11px;gap:7px}
.acct-sebi .hero-badge-icon{width:14px;height:14px}
.acct-sebi .hero-badge-label{font-size:13px}
.acct-frame{height:232px}
.acct-audit{
  position:absolute;left:26px;right:26px;top:332px;margin:0;
  display:flex;align-items:center;justify-content:flex-end;gap:7px;
  font-family:"Inter",Arial,sans-serif;font-size:12px;line-height:16px;color:#7f8797;white-space:nowrap;
}
.acct-audit i{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,.16)}
.acct-board{padding:14px 20px;display:flex;flex-direction:column;gap:12px}
.acct-head{display:flex;align-items:center;gap:12px}
.acct-logo{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.acct-logo img{display:block;width:28px;height:28px;object-fit:contain;padding:2px;box-sizing:border-box}
.acct-id{flex:1 1 auto;min-width:0}
.acct-title{font-size:15px;font-weight:600;letter-spacing:-.3px;line-height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-meta{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;margin-top:3px;font-size:11.5px;line-height:16px;color:var(--soft);white-space:nowrap}
.acct-meta i{width:4px;height:4px;border-radius:50%;background:#4b5364}
.acct-buy{
  display:inline-flex;align-items:center;height:18px;padding:0 9px;border-radius:999px;
  font-size:11px;font-weight:600;color:var(--green);
  background:rgba(52,211,153,.10);box-shadow:inset 0 0 0 1px rgba(52,211,153,.4);
}
.acct-pill{
  flex:0 0 auto;display:inline-flex;align-items:center;height:24px;padding:0 12px;border-radius:999px;
  font-size:12px;font-weight:600;color:var(--soft);
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);white-space:nowrap;
}
.acct-tl{
  list-style:none;margin:0;padding:0;counter-reset:upd;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;
}
.acct-ev{position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.acct-ev.is-update{counter-increment:upd}
.acct-when{display:block;font-size:10.5px;line-height:14px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.acct-when b{font-weight:600;color:#b4bccb}
.acct-node{
  position:relative;z-index:1;box-sizing:border-box;width:18px;height:18px;margin:7px 0 8px;border-radius:50%;
  background:#0a0d14;border:2px solid var(--blue);
}
.acct-node::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--blue)}
.acct-ev.is-amber .acct-node{border-color:var(--amber)}
.acct-ev.is-amber .acct-node::after{background:var(--amber)}
.acct-ev.is-done .acct-node{border-color:var(--green);background:var(--green);box-shadow:0 0 0 5px rgba(52,211,153,.16)}
.acct-ev.is-done .acct-node::after{
  width:9px;height:5px;margin:-4px 0 0 -4.5px;border-radius:0;background:none;
  border-left:2px solid #07110c;border-bottom:2px solid #07110c;transform:rotate(-45deg);
}
/* The connector: from this node's centre to the next one's, so it runs
   the column width plus the gap; green into the closing event. */
.acct-ev::before{content:"";position:absolute;left:9px;right:-25px;top:calc(14px + 7px + 8px);height:2px;background:var(--blue);opacity:.9;transform-origin:0 50%}
.acct-ev:nth-last-child(2)::before{background:linear-gradient(90deg,var(--blue),var(--green))}
.acct-ev:last-child::before{display:none}
.acct-t{font-size:13px;font-weight:600;line-height:17px;letter-spacing:-.15px;color:var(--ink)}
.acct-d{margin-top:2px;font-size:11px;line-height:15px;color:var(--soft)}
.acct-chip{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-top:8px;border-radius:5px;
  font-size:10px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  color:#aab2c0;background:rgba(255,255,255,.06);
}
.acct-chip-n::before{content:"Update " counter(upd)}
.acct-chip.blue{color:#9dbcff;background:rgba(74,130,239,.16)}
.acct-chip.amber{color:var(--amber);background:rgba(245,181,70,.12)}
.acct-chip.up{color:var(--green);background:rgba(52,211,153,.10)}

.n-142-149:hover .why-board,.n-142-155:hover .why-board,.n-142-162:hover .why-board{filter:brightness(1.06);transition:filter .35s ease}

/* ── Why Vittaara · motion ─────────────────────────────────────────────────
   Each board plays once script.js reveals its card (.is-revealed), in the
   Our Process language: parts rise into place in reading order, the chart
   line and the ladder draw, markers pop. Every part fills both ways, so it
   holds its start during the delay; without motion the finished state shows. */
@media (prefers-reduced-motion:no-preference){
  /* Research: the note lands, the levels and volume appear, the line draws
     across, the breakout is marked and the price arrives on the entry. */
  .n-142-149.is-revealed .wb-head{animation:ps-rise .6s .3s var(--ease) both}
  .n-142-149.is-revealed .wbr-eyebrow{animation:ps-fade .5s .45s ease both}
  /* The research points rise in, then the highlight walks 1 → 2 → 3 and
     keeps going: a 6s cycle, each point lit for a third of it with a short
     crossfade, offset so point 1 lights first once the three have landed.
     (Without motion, point 1 stays lit via .is-on.) */
  .n-142-149.is-revealed .wbr-point:nth-child(1){animation:ps-rise .55s .5s var(--ease) both,wbr-cycle 6s -2.8s linear infinite}
  .n-142-149.is-revealed .wbr-point:nth-child(2){animation:ps-rise .55s .62s var(--ease) both,wbr-cycle 6s -.8s linear infinite}
  .n-142-149.is-revealed .wbr-point:nth-child(3){animation:ps-rise .55s .74s var(--ease) both,wbr-cycle 6s 1.2s linear infinite}
  .n-142-149.is-revealed .wbr-point:nth-child(1) .wbr-num{animation:wbr-cycle-num 6s -2.8s linear infinite}
  .n-142-149.is-revealed .wbr-point:nth-child(2) .wbr-num{animation:wbr-cycle-num 6s -.8s linear infinite}
  .n-142-149.is-revealed .wbr-point:nth-child(3) .wbr-num{animation:wbr-cycle-num 6s 1.2s linear infinite}
  .n-142-149.is-revealed .wbr-chart-head{animation:ps-fade .5s .4s ease both}
  .n-142-149.is-revealed .wbr-lvls{animation:ps-fade .6s .6s ease both}
  .n-142-149.is-revealed .wbr-tag.t{animation:ps-slide-l .5s .7s var(--ease) both}
  .n-142-149.is-revealed .wbr-tag.e{animation:ps-slide-l .5s .8s var(--ease) both}
  .n-142-149.is-revealed .wbr-tag.sl{animation:ps-slide-l .5s .9s var(--ease) both}
  .n-142-149.is-revealed .wbr-months{animation:ps-fade .5s .9s ease both}
  .n-142-149.is-revealed .wbr-vol{animation:ps-wipe 1.1s .8s linear both}
  .n-142-149.is-revealed .wbr-line{animation:ps-wipe 1.2s .85s linear both}
  .n-142-149.is-revealed .wbr-area{animation:ps-fade .8s 1.45s ease both}
  .n-142-149.is-revealed .wbr-mark-brk{animation:ps-pop .5s 1.55s var(--ease) both}
  .n-142-149.is-revealed .wbr-mark-cmp{animation:ps-pop .5s 1.95s var(--ease) both}
  /* Risk: the levels land, the rail runs from the stop to the target with
     the nodes popping as it reaches them, then the tiles. Looping sequence
     plays on a 6s cycle while in section. */
  .n-142-155.is-revealed .wbk-head{animation:ps-rise .6s .3s var(--ease) both}
  .n-142-155.is-revealed .wbk-lvl:nth-child(1){animation:ps-rise .55s .45s var(--ease) both}
  .n-142-155.is-revealed .wbk-lvl:nth-child(2){animation:ps-rise .55s .57s var(--ease) both}
  .n-142-155.is-revealed .wbk-lvl:nth-child(3){animation:ps-rise .55s .69s var(--ease) both}
  .n-142-155.is-revealed .wbk-rail{animation:ps-grow-x 1s .75s var(--ease) both}
  .n-142-155.is-revealed .wbk-node.stop{animation:ps-pop .5s .7s var(--ease) both}
  .n-142-155.is-revealed .wbk-node.entry{animation:wbk-entry-breathe 2.8s ease-in-out infinite}
  .n-142-155.is-revealed .wbk-node.target{animation:ps-pop .5s 1.5s var(--ease) both}
  .n-142-155.is-revealed .wbk-rr{animation:ps-fade .5s 1.25s ease both}
  .n-142-155.is-revealed .wbk-tile:nth-child(1){animation:ps-rise .6s 1.35s var(--ease) both,wbk-tile-1 6s 2.2s ease-in-out infinite}
  .n-142-155.is-revealed .wbk-tile:nth-child(2){animation:ps-rise .6s 1.47s var(--ease) both,wbk-tile-2 6s 2.2s ease-in-out infinite}
  .n-142-155.is-revealed .wbk-tile:nth-child(3){animation:ps-rise .6s 1.59s var(--ease) both,wbk-tile-3 6s 2.2s ease-in-out infinite}

  /* Accountable: head, then each event rising as the connector reaches it,
     the closing node popping last, then the audit line. Looping timeline cycle
     walks events 1 → 2 → 3 → 4 while in section. */
  .n-142-162.is-revealed .acct-head{animation:ps-rise .6s .35s var(--ease) both}
  .n-142-162.is-revealed .acct-ev{animation:ps-rise .55s var(--ease) both}
  .n-142-162.is-revealed .acct-ev:nth-child(1){animation-delay:.5s}
  .n-142-162.is-revealed .acct-ev:nth-child(2){animation-delay:.65s}
  .n-142-162.is-revealed .acct-ev:nth-child(3){animation-delay:.8s}
  .n-142-162.is-revealed .acct-ev:nth-child(4){animation-delay:.95s}
  .n-142-162.is-revealed .acct-ev::before{animation:ps-grow-x .45s ease-out both}
  .n-142-162.is-revealed .acct-ev:nth-child(1)::before{animation-delay:.7s}
  .n-142-162.is-revealed .acct-ev:nth-child(2)::before{animation-delay:.85s}
  .n-142-162.is-revealed .acct-ev:nth-child(3)::before{animation-delay:1s}
  .n-142-162.is-revealed .acct-ev:nth-child(4)::before{animation-delay:1.15s}

  .n-142-162.is-revealed .acct-ev:nth-child(1) .acct-node{animation:acct-node-1 8s 2s linear infinite}
  .n-142-162.is-revealed .acct-ev:nth-child(2) .acct-node{animation:acct-node-2 8s 2s linear infinite}
  .n-142-162.is-revealed .acct-ev:nth-child(3) .acct-node{animation:acct-node-3 8s 2s linear infinite}
  .n-142-162.is-revealed .acct-ev:nth-child(4) .acct-node{animation:acct-node-4 8s 2s linear infinite}

  .n-142-162.is-revealed .acct-ev:nth-child(1) .acct-t{animation:acct-t-1 8s 2s linear infinite}
  .n-142-162.is-revealed .acct-ev:nth-child(2) .acct-t{animation:acct-t-2 8s 2s linear infinite}
  .n-142-162.is-revealed .acct-ev:nth-child(3) .acct-t{animation:acct-t-3 8s 2s linear infinite}
  .n-142-162.is-revealed .acct-ev:nth-child(4) .acct-t{animation:acct-t-4 8s 2s linear infinite}

  .n-142-162.is-revealed .acct-ev:nth-child(1) .acct-chip{animation:acct-chip-1 8s 2s linear infinite}
  .n-142-162.is-revealed .acct-ev:nth-child(2) .acct-chip{animation:acct-chip-2 8s 2s linear infinite}
  .n-142-162.is-revealed .acct-ev:nth-child(3) .acct-chip{animation:acct-chip-3 8s 2s linear infinite}
  .n-142-162.is-revealed .acct-ev:nth-child(4) .acct-chip{animation:acct-chip-4 8s 2s linear infinite}

  .n-142-162.is-revealed .acct-ev:nth-child(1)::after{animation:acct-beam-1 8s 2s linear infinite}
  .n-142-162.is-revealed .acct-ev:nth-child(2)::after{animation:acct-beam-2 8s 2s linear infinite}
  .n-142-162.is-revealed .acct-ev:nth-child(3)::after{animation:acct-beam-3 8s 2s linear infinite}

  .n-142-162.is-revealed .acct-audit{animation:ps-fade .5s 1.7s ease both}
  .n-142-162.is-revealed .acct-audit i{animation:acct-audit-pulse 2.5s ease-in-out infinite}
}
@media (prefers-reduced-motion:no-preference) and (max-width:640px){
  .n-142-162.is-revealed .acct-ev::before{transform-origin:50% 0;animation-name:ps-grow-y}
  .acct-ev::after{display:none}
}

/* ── Why Vittaara · looping keyframes ── */
@keyframes wbk-entry-breathe{
  0%,100%{box-shadow:0 0 0 4px rgba(74,130,239,.25),0 0 14px rgba(74,130,239,.6)}
  50%{box-shadow:0 0 0 7px rgba(74,130,239,.42),0 0 22px rgba(74,130,239,.85)}
}
@keyframes wbk-tile-1{
  0%{border-color:rgba(74,130,239,.65);background:rgba(74,130,239,.10);box-shadow:0 0 0 0 rgba(74,130,239,.4)}
  10%{box-shadow:0 0 0 6px rgba(74,130,239,.22),0 0 14px rgba(74,130,239,.25)}
  25%{border-color:rgba(74,130,239,.65);background:rgba(74,130,239,.10);box-shadow:0 0 0 3px rgba(74,130,239,.15)}
  33.3%,100%{border-color:var(--line);background:var(--panel);box-shadow:none}
}
@keyframes wbk-tile-2{
  0%,30%{border-color:var(--line);background:var(--panel);box-shadow:none}
  33.3%{border-color:rgba(74,130,239,.65);background:rgba(74,130,239,.10);box-shadow:0 0 0 0 rgba(74,130,239,.4)}
  43%{box-shadow:0 0 0 6px rgba(74,130,239,.22),0 0 14px rgba(74,130,239,.25)}
  58%{border-color:rgba(74,130,239,.65);background:rgba(74,130,239,.10);box-shadow:0 0 0 3px rgba(74,130,239,.15)}
  66.6%,100%{border-color:var(--line);background:var(--panel);box-shadow:none}
}
@keyframes wbk-tile-3{
  0%,63%{border-color:rgba(229,72,77,.45);background:rgba(229,72,77,.08);box-shadow:none}
  66.6%{border-color:rgba(229,72,77,.8);background:rgba(229,72,77,.16);box-shadow:0 0 0 0 rgba(229,72,77,.5)}
  76%{box-shadow:0 0 0 7px rgba(229,72,77,.28),0 0 16px rgba(229,72,77,.3)}
  92%{border-color:rgba(229,72,77,.8);background:rgba(229,72,77,.16);box-shadow:0 0 0 3px rgba(229,72,77,.2)}
  100%{border-color:rgba(229,72,77,.45);background:rgba(229,72,77,.08);box-shadow:none}
}

.acct-ev::after{
  content:"";position:absolute;left:9px;right:-25px;top:calc(14px + 7px + 8px);height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.9) 50%,transparent 100%);
  background-size:50px 100%;background-repeat:no-repeat;background-position:-50px 0;
  opacity:0;pointer-events:none;z-index:0;
}
.acct-ev:last-child::after{display:none}

@keyframes acct-node-1{
  0%,22%{box-shadow:0 0 0 5px rgba(74,130,239,.4);border-color:#9dbcff}
  25%,100%{box-shadow:none;border-color:var(--blue)}
}
@keyframes acct-node-2{
  0%,24%{box-shadow:none;border-color:var(--amber)}
  25%,47%{box-shadow:0 0 0 5px rgba(245,181,70,.4);border-color:#fcd34d}
  50%,100%{box-shadow:none;border-color:var(--amber)}
}
@keyframes acct-node-3{
  0%,49%{box-shadow:none;border-color:var(--blue)}
  50%,72%{box-shadow:0 0 0 5px rgba(74,130,239,.4);border-color:#9dbcff}
  75%,100%{box-shadow:none;border-color:var(--blue)}
}
@keyframes acct-node-4{
  0%,74%{box-shadow:0 0 0 5px rgba(52,211,153,.16)}
  75%,97%{box-shadow:0 0 0 8px rgba(52,211,153,.32),0 0 14px rgba(52,211,153,.22)}
  100%{box-shadow:0 0 0 5px rgba(52,211,153,.16)}
}

@keyframes acct-t-1{0%,22%{color:#9dbcff}25%,100%{color:var(--ink)}}
@keyframes acct-t-2{0%,24%{color:var(--ink)}25%,47%{color:#fcd34d}50%,100%{color:var(--ink)}}
@keyframes acct-t-3{0%,49%{color:var(--ink)}50%,72%{color:#9dbcff}75%,100%{color:var(--ink)}}
@keyframes acct-t-4{0%,74%{color:var(--ink)}75%,97%{color:#34d399}100%{color:var(--ink)}}

@keyframes acct-chip-1{0%,22%{filter:brightness(1.25) drop-shadow(0 0 6px rgba(74,130,239,.4))}25%,100%{filter:none}}
@keyframes acct-chip-2{0%,24%{filter:none}25%,47%{filter:brightness(1.25) drop-shadow(0 0 6px rgba(245,181,70,.4))}50%,100%{filter:none}}
@keyframes acct-chip-3{0%,49%{filter:none}50%,72%{filter:brightness(1.25) drop-shadow(0 0 6px rgba(74,130,239,.4))}75%,100%{filter:none}}
@keyframes acct-chip-4{0%,74%{filter:none}75%,97%{filter:brightness(1.2) drop-shadow(0 0 6px rgba(52,211,153,.4))}100%{filter:none}}

@keyframes acct-beam-1{
  0%,16%{background-position:-50px 0;opacity:0}
  17%{opacity:1}
  24%{background-position:calc(100% + 50px) 0;opacity:1}
  25%,100%{opacity:0}
}
@keyframes acct-beam-2{
  0%,41%{background-position:-50px 0;opacity:0}
  42%{opacity:1}
  49%{background-position:calc(100% + 50px) 0;opacity:1}
  50%,100%{opacity:0}
}
@keyframes acct-beam-3{
  0%,66%{background-position:-50px 0;opacity:0}
  67%{opacity:1}
  74%{background-position:calc(100% + 50px) 0;opacity:1}
  75%,100%{opacity:0}
}

@keyframes acct-audit-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(52,211,153,.16)}
  50%{box-shadow:0 0 0 6px rgba(52,211,153,.45),0 0 8px rgba(52,211,153,.35)}
}

/* Pause Why Vittaara looping animations when scrolled outside the section */
#why-vittaara:not(.in-view) :is(.wbr-point .wbr-num, .wbk-node.entry, .acct-node, .acct-ev::after, .acct-ev .acct-t, .acct-chip, .acct-audit i){
  animation-play-state: paused !important;
}
#why-vittaara:not(.in-view) :is(.wbr-point, .wbk-tile){
  animation-play-state: running, paused !important;
}

@keyframes wbr-cycle{
  0%,62%{border-color:var(--line);background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(74,130,239,0)}
  67%,95%{border-color:rgba(74,130,239,.45);background:rgba(74,130,239,.08);box-shadow:inset 0 0 0 1px rgba(74,130,239,.12)}
  100%{border-color:var(--line);background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(74,130,239,0)}
}
@keyframes wbr-cycle-num{
  0%,62%{background:rgba(74,130,239,.18);color:#9dbcff;border-color:rgba(74,130,239,.35)}
  67%,95%{background:var(--blue-deep);color:#fff;border-color:transparent}
  100%{background:rgba(74,130,239,.18);color:#9dbcff;border-color:rgba(74,130,239,.35)}
}

/* Below the canvas: fluid frames, the boards in flow. */
@media (max-width:1024px){
  .why-frame{aspect-ratio:auto;height:auto}
  .why-board{position:relative;inset:auto;height:auto}
  .wbr{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .wbr-chart{height:150px;flex:none}
  .wbk-levels{padding-top:18px}
  .wbk-tiles{padding-top:14px;gap:8px}
  .wbk-tile{padding:10px 12px 9px}
  .wbk-tile b{font-size:16px}
  .wbk-tile .wb-eyebrow{font-size:9px;letter-spacing:.1em}
  .acct-head-row{align-items:flex-start}
  .acct-wide{display:none !important}
  .acct-audit{position:static;left:auto;right:auto;top:auto}
}
@media (max-width:760px){
  .wbr{grid-template-columns:minmax(0,1fr)}
  .wbr-left{border-right:0;border-bottom:1px solid var(--line);padding:14px 16px}
  .wbr-right{padding:12px 16px 14px}
  .wbr-chart{height:130px}
}
@media (max-width:719px){
  .wbk{flex-direction:column;gap:14px}
}
@media (max-width:920px){
  .wbk-tiles{grid-template-columns:1fr 1fr}
  .wbk-tile.hot{grid-column:1 / -1}
}
@media (max-width:640px){
  .wbr-right{display:none}
  .wbr-left{border-bottom:0}
  .wbk{padding:14px 16px}
  .acct-head-row{flex-direction:column;align-items:flex-start;gap:14px}
  .acct-board{padding:14px 16px 6px;gap:10px}
  .acct-title{font-size:14px}
  .acct-meta{font-size:11px}
  .acct-tl{display:block;padding-left:0}
  .acct-ev{
    display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px;align-items:start;
    padding-bottom:16px;
  }
  .acct-ev:last-child{padding-bottom:10px}
  .acct-node{grid-column:1;grid-row:1;margin:0;align-self:center}
  .acct-when{grid-column:2;grid-row:1;align-self:center;line-height:18px}
  .acct-t{grid-column:2;grid-row:2;margin-top:4px}
  .acct-d{grid-column:2;grid-row:3}
  .acct-chip{grid-column:2;grid-row:4;margin-top:6px;justify-content:flex-end}
  .acct-pill{display:none}
  /* Vertical connector, from this node down to the next. */
  .acct-ev::before{left:8px;right:auto;top:18px;bottom:-2px;width:2px;height:auto}
  .acct-ev:nth-last-child(2)::before{background:linear-gradient(180deg,var(--blue),var(--green))}
}

@media (max-width:1024px){
  .acct-head-row{align-items:flex-start}
  .acct-frame{height:auto}
  .acct-board{position:relative;inset:auto}
  .acct-wide{display:none !important}
  .acct-audit{position:static;left:auto;right:auto;top:auto}
}
@media (max-width:640px){
  .acct-head-row{flex-direction:column;align-items:flex-start;gap:14px}
  .acct-board{padding:14px 16px 6px;gap:10px}
  .acct-title{font-size:14px}
  .acct-meta{font-size:11px}
  .acct-tl{display:block;padding-left:0}
  .acct-ev{
    display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px;align-items:start;
    padding-bottom:16px;
  }
  .acct-ev:last-child{padding-bottom:10px}
  .acct-node{grid-column:1;grid-row:1;margin:0;align-self:center}
  .acct-when{grid-column:2;grid-row:1;align-self:center;line-height:18px}
  .acct-t{grid-column:2;grid-row:2;margin-top:4px}
  .acct-d{grid-column:2;grid-row:3}
  .acct-chip{grid-column:2;grid-row:4;margin-top:6px;justify-content:flex-end}
  .acct-pill{display:none}
  /* Vertical connector, from this node down to the next. */
  .acct-ev::before{left:8px;right:auto;top:18px;bottom:-2px;width:2px;height:auto}
  .acct-ev:nth-last-child(2)::before{background:linear-gradient(180deg,var(--blue),var(--green))}
}
.n-142-140{position:relative;left:0;top:0;width:1440px;height:968px;overflow:visible} /* header + two card rows */
.n-142-139{left:0;top:0;width:1440px;height:auto;padding:var(--section-pad) 0;background:#010101;overflow:hidden}
.n-142-312{left:120px;top:0px;width:1200px}
.n-142-351{left:0px;top:0px;width:576px;height:378px;transform:matrix(1.0,-0.0,-0.0,1.0,0,0)}
.n-142-352{left:238px;top:157px;width:64px;height:64px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(60,60,60,1)}
.n-142-353{left:251px;top:149px;width:90px;height:90px}
.n-142-350{left:0px;top:0px;width:576px;height:378px;background:rgba(43,43,43,1);border-radius:12px}
.n-142-349{left:0px;top:0px;width:576px;height:398px;overflow:hidden}
.n-142-363{left:20px;top:11px;width:101px;height:20px;color:#010101;font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left;white-space:pre}
.n-142-362{left:0px;top:0px;width:141px;height:42px;background:rgba(237,237,237,1);overflow:hidden;border-radius:999px}
.n-142-365{left:20px;top:11px;width:152px;height:20px;color:rgba(237,237,237,1);font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left;white-space:pre}
.n-142-364{left:153px;top:0px;width:192px;height:42px;overflow:hidden;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(237,237,237,1)}
.n-142-361{left:0px;top:463px;width:504px;height:42px;overflow:hidden}
.n-142-348{left:588px;top:36px;width:576px;height:505px}
.n-142-318{left:120px;top:140px;width:1200px;height:577px;background:#010101;overflow:hidden;border-radius:20px}
.n-142-311{left:0px;top:104px;width:1440px;height:717px;overflow:hidden}
.n-142-310{left:0;top:0;width:1440px;height:925px;background:#010101;overflow:hidden}
.n-142-475{left:300px;top:88px;width:600px}
.n-142-476{left:360px;top:150px;width:480px;height:20px;color:#94a3b8;font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:center}
.n-142-479{left:20px;top:11px;width:84px;height:20px;color:#ffffff;font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left;white-space:pre}
.n-142-478{left:0px;top:0px;width:124px;height:42px;background:var(--cta);overflow:hidden;border-radius:999px;box-shadow:0 4px 16px rgba(var(--cta-rgb),0.4)}
.n-142-481{left:20px;top:11px;width:113px;height:20px;color:#ffffff;font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:20.25px;letter-spacing:0px;text-align:left;white-space:pre}
.n-142-480{left:136px;top:0px;width:153px;height:42px;background:rgba(255,255,255,0.08);overflow:hidden;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2)}
.n-142-477{left:455.5px;top:188px;width:289px;height:42px;overflow:hidden}
.n-142-472{left:120px;top:0px;width:1200px;height:420px;background:linear-gradient(135deg, #0e121c 0%, #121828 50%, #161018 100%);border:1px solid rgba(255,255,255,0.12);box-shadow:0 24px 64px -16px rgba(0,0,0,0.7);overflow:hidden;border-radius:20px}
.n-142-471{position:relative;left:0;top:0;width:1440px;height:420px;overflow:hidden}
.n-142-470{left:0;top:0;width:1440px;height:auto;padding:var(--section-pad) 0;background:#ffffff;overflow:hidden}
.n-142-470::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(11,18,32,.10) 25%,rgba(11,18,32,.10) 75%,transparent)}
/* Match the rounded line metrics of the Figma hero. */
.n-142-21{line-height:55px;translate:0 1px}
/* Modern 3D interactive audience cards */
.n-142-52{overflow:visible}
.audience-grid,
.n-142-59{
  left:164px;
  /* 183 (not the Figma 202) so the heading → card gap matches the
     Trades section: the middle card lands ~90px under the h2 line box,
     same as .n-142-88 sits under its .section-heading. */
  top:183px;
  width:1112px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:44px;
  align-items:center;
  perspective:1400px;
  perspective-origin:center 45%;
}

.audience-card,
.n-142-60,
.n-142-66,
.n-142-72{
  position:relative;
  left:auto;
  top:auto;
  width:100%;
  height:464px;
  border-radius:20px;
  /* .node sets transform-origin:0 0; the hover tilt/scale and the wheel
     placement below both pivot on the card's middle. */
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  cursor:pointer;
  outline:none;
  -webkit-user-select:none;
  user-select:none;
  --mouse-x:50%;
  --mouse-y:50%;
  --card-rx:0deg;
  --card-ry:0deg;
  --card-tz:0px;
  --card-scale:1;
  opacity:0;
  filter:blur(4px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change:transform, opacity, filter;
}

.audience-card.is-revealed,
.n-142-60.is-revealed,
.n-142-66.is-revealed,
.n-142-72.is-revealed{
  opacity:1;
  filter:blur(0);
}

/* Three-up row, one card a column: desktop, and every width under reduced
   motion. The hover tilt (script.js, --card-*) is the only transform. */
.n-142-60{grid-column:1;grid-row:1}
.n-142-72{grid-column:2;grid-row:1}
.n-142-66{grid-column:3;grid-row:1}
.audience-card{
  transform:
    rotateY(var(--card-ry)) rotateX(var(--card-rx))
    translateZ(var(--card-tz)) scale(var(--card-scale));
}

/* Active card elevation state */
.audience-card.is-active,
.audience-card:focus-visible{
  z-index:10;
}

/* -- Scroll-driven carousel, under 1025px (script.js adds .arc-pinned
   there without reduced motion; desktop keeps the row above).
   The three cards ride the rim of one circle whose hub is --arc-r below the
   row: a card at angle --arc is carried down to the hub, turned, and carried
   back, so it sits on the circumference leaning with the rim. All three
   share one grid cell; the wheel is what spreads them.

   The section is 100vh + --arc-travel tall and the stage sticks for 100vh.
   Before the pin only Investors is on the wheel, at the top. Scroll progress
   through the travel (script.js, whoScroll) turns the wheel a step per
   arrival: the previous card rolls out of the left edge as the next rolls
   in from the right. script.js sizes the wheel (--arc-r) so that neighbours
   a step apart keep clear air between them even where the lean brings
   their lower corners closest. The hover tilt is left out of the transform
   (touch would trigger it). Nothing here transitions transform: the scroll
   drives it. The tablet/phone block above lays the row out with !important
   throughout, so these carry it too (the id outranks it). */
.arc-pinned .audience-grid{--arc-r:1326px} /* script.js measures */
@media (max-width:1024px){
  #who-its-for.arc-pinned{
    --arc-travel:120vh;
    height:calc(100vh + var(--arc-travel))!important;
    padding:0!important;
    /* The stage's empty lower half, past one --section-pad, is given back
       (script.js measures --arc-slack) so Trades follows the cards at the
       usual distance rather than that plus the slack. */
    margin:0 auto calc(-1 * var(--arc-slack,0px))!important;
    overflow:visible!important;
  }
  #who-its-for.arc-pinned .n-142-52{
    position:sticky!important;top:0!important;
    height:100vh!important;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:0 32px;
    overflow:visible;
  }
  #who-its-for.arc-pinned .audience-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:center;
    gap:0!important;
    width:100%!important;
  }
  #who-its-for.arc-pinned .audience-card{
    grid-column:1;grid-row:1;
    --arc:0deg;
    flex:none!important;
    width:100%!important;
    transform:translateY(var(--arc-r)) rotate(var(--arc)) translateY(calc(-1 * var(--arc-r)))!important;
  }
}
@media (max-width:640px){
  #who-its-for.arc-pinned .n-142-52{padding:0 20px}
}

/* Card inner with glassmorphism border highlight and deep diffused shadow */
.audience-inner,
.n-142-61,
.n-142-67,
.n-142-73{
  position:relative;
  width:100%;
  height:100%;
  border-radius:20px;
  overflow:hidden;
  background:#17171a;
  transform-style:preserve-3d;
  box-shadow:
    0 18px 36px -12px rgba(18, 18, 22, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.audience-card:hover .audience-inner,
.audience-card:focus-visible .audience-inner,
.audience-card.is-active .audience-inner{
  box-shadow:
    0 32px 64px -16px rgba(10, 10, 15, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.26),
    0 0 28px rgba(96, 165, 250, 0.16),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.n-142-63,.n-142-69,.n-142-75{display:none}

/* Background visual with cinematic zoom */
.audience-visual{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.002);
  transition:transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.audience-card:hover .audience-visual,
.audience-card:focus-visible .audience-visual,
.audience-card.is-active .audience-visual{
  transform:scale(1.065);
  filter:brightness(1.05) contrast(1.02);
}

/* Rich cinematic gradient scrim */
.audience-inner::after,
.n-142-61::after,
.n-142-67::after,
.n-142-73::after{
  content:"";
  position:absolute;
  inset:0;
  /* Heavier, truly black scrim: the photos are busy right where the copy
     sits (≈60–95% down), so the lower half goes almost opaque. */
  background:linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.10) 30%,
    rgba(0, 0, 0, 0.55) 50%,
    rgba(0, 0, 0, 0.86) 66%,
    rgba(0, 0, 0, 0.96) 82%,
    #000 100%
  );
  pointer-events:none;
  z-index:1;
}

/* Dynamic Glare / Spotlight reflection that follows mouse */
.audience-glare{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(
    circle 340px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.06) 38%,
    transparent 72%
  );
  opacity:0;
  mix-blend-mode:screen;
  pointer-events:none;
  transition:opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index:2;
}

.audience-card:hover .audience-glare,
.audience-card:focus-visible .audience-glare,
.audience-card.is-active .audience-glare{
  opacity:1;
}

/* Floating content layer */
.audience-copy{
  position:absolute;
  left:24px;
  right:24px;
  top:331px; /* platforms card (3-line copy + partner link) */
  bottom:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0;
  color:#fff;
  text-align:center;
  z-index:3;
  transform:translateZ(26px);
  transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.audience-copy h3{
  margin:0;
  font-size:18px;
  line-height:22px;
  font-weight:600;
  letter-spacing:-.3px;
  text-transform:uppercase;
  max-width:100%;
}

.audience-copy p{
  margin:0;
  color:#b8b8b8;
  font-size:14px;
  line-height:20px;
}

.n-142-61 .audience-copy,
.n-142-73 .audience-copy,
[data-card="investors"] .audience-copy,
[data-card="traders"] .audience-copy{
  top:348px;
}

.audience-partner{
  display:block;
  align-self:center;
  margin:2px 0 0;
  color:#60a5fa;
  font-size:13px;
  line-height:20px;
  font-weight:600;
  text-align:center;
}

.audience-partner:hover{
  text-decoration:underline;
}

/* Accessibility reduced motion */
@media(prefers-reduced-motion:reduce){
  .audience-card,
  .n-142-60,
  .n-142-66,
  .n-142-72{
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    transition:none !important;
  }
  .audience-visual{
    transition:none !important;
  }
  .audience-glare{
    display:none !important;
  }
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM (iPad / Tablet & Mobile Viewports)
   Matching Figma Node 142:544 (Tablet 834px) & Node 142:1080 (Mobile 390px)
   ========================================================================== */

@media (max-width: 1024px) {
  .section,
  .n-142-4,
  .n-142-51,
  .n-142-80,
  .n-142-139,
  .n-142-310,
  .n-142-366,
  .n-142-470 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Nav */
  .n-142-5 {
    width: 100% !important;
    height: auto !important;
    padding: 18px 32px !important;
    position: sticky !important;
    top: 0 !important;
  }
  .n-142-6 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 16px 8px 22px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
  }
  .n-172-48.brand-lockup {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .n-142-7, .n-172-49 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
  }
  .n-142-8 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
  }
  .n-142-8 a {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    font-size: 13.5px !important;
  }
  .n-142-14 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: 40px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .n-142-15 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
  }

  /* Hero */
  .n-142-16 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 32px 32px 48px 32px !important;
  }
  .n-142-17 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px !important;
  }
  .n-142-18 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 54% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .n-142-19 {
    position: relative !important;
    margin-bottom: 16px !important;
  }
  .n-142-20 {
    position: static !important;
    width: auto !important;
    height: auto !important;
  }
  .n-142-21 {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    font-size: 38px !important;
    line-height: 1.12 !important;
    letter-spacing: -1px !important;
    margin: 0 0 16px 0 !important;
  }
  .n-142-22 {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 24px 0 !important;
  }
  .n-142-23 {
    position: static !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    gap: 12px !important;
    margin: 0 0 20px 0 !important;
  }
  .n-142-24, .n-142-26 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: 48px !important;
    padding: 0 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .n-142-25, .n-142-27 {
    position: static !important;
    width: auto !important;
    height: auto !important;
  }
  .n-142-28 {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }
  .n-142-29,
  .hero-visual-container {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 44% !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .hero-trade-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Regulatory Bar */
  .n-142-31 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 24px 32px !important;
  }
  .n-142-32 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
  .n-142-33, .n-142-37, .n-142-41, .n-142-45, .n-142-48 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .n-142-34, .n-142-35, .n-142-36,
  .n-142-38, .n-142-39, .n-142-40,
  .n-142-42, .n-142-43, .n-142-44,
  .n-142-46, .n-142-47,
  .n-142-49, .n-142-50 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Section 02: Who Vittaara Is For */
  .n-142-51 {
    padding: var(--section-pad) 32px !important;
  }
  .n-142-52 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  .n-142-53 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 40px !important;
  }
  .n-142-58 {
    position: static !important;
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    text-align: center !important;
  }
  .audience-grid, .n-142-59 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
  }
  .audience-card,
  .n-142-60, .n-142-72, .n-142-66 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 240px !important;
    height: 360px !important;
  }
  .n-142-61, .n-142-73, .n-142-67 {
    width: 100% !important;
    height: 100% !important;
  }
  .n-142-78, .n-142-79 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    text-align: center !important;
    margin-top: 24px !important;
  }

  /* Section 03: Research Services. The pin stays: the row slides on scroll
     here too. The block above flattens the section (height:auto,
     overflow:hidden, !important); the pinned run needs its 100svh + travel
     and a visible overflow, or position:sticky stops at the section. The
     section drops its side padding so the stage spans the viewport and
     clips the row at its edges; head, row and footer carry the gutter
     themselves (--trades-gutter, also the static scroller's scroll
     padding). Cards narrow to leave a 40px peek of the next one. */
  #trades {
    --trades-gutter: 32px;
    --trades-stage-pad: 24px;
    height: calc(100vh + var(--trades-travel, 0px)) !important;
    height: calc(100svh + var(--trades-travel, 0px)) !important;
    margin: calc(var(--section-pad) - var(--trades-stage-pad)) auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .n-142-81 {
    height: 100vh;
    height: 100svh;
    gap: 28px;
    padding: var(--trades-stage-pad) 0;
  }
  .n-142-82, .trades-footer {
    width: 100%;
    padding: 0 var(--trades-gutter);
    box-sizing: border-box;
  }
  .trades-grid {
    --trade-card-w: min(420px, 100vw - 2 * var(--trades-gutter) - 40px);
    max-height: 560px;
    padding: 0 var(--trades-gutter);
  }

  /* Section 04: Why Vittaara */
  .n-142-139 {
    padding: var(--section-pad) 32px !important;
  }
  .n-142-140, .n-142-141 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  .n-142-146 {
    position: static !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 36px !important;
  }
  /* Why Vittaara bento: one column below 1024px. The Figma row wrappers
     (n-142-148 / n-142-161) drop out so the cards sit directly in the grid,
     and the fixed-width heading blocks and image frames flow inside the
     fluid card instead of overflowing behind its clip. */
  .n-142-147 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .n-142-148, .n-142-161 {
    display: contents !important;
  }
  .why-card-left, .n-142-149,
  .why-card-right, .n-142-155,
  .why-card-bottom, .n-142-162 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-column: 1 !important;
  }
  .n-142-150, .n-142-156, .n-142-163 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 22px 26px 0 !important;
  }
  .n-142-153, .n-142-159, .n-142-166 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 732 / 224;
    margin: 18px 26px 24px !important;
  }
  /* The Accountable frame is live markup and sizes to its content; the
     audit line sits under it, inside the card. */
  .why-frame {
    aspect-ratio: auto;
  }
  .n-142-166.acct-frame {
    margin: 18px 26px 0 !important;
  }
  .acct-audit {
    margin: 12px 26px 22px !important;
  }

  /* Section 07: How It Works */
  .n-142-310 {
    padding: var(--section-pad) 32px !important;
  }
  .n-142-311 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  .n-142-312 {
    margin-bottom: 36px !important;
  }
  .n-142-318 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 36px !important;
    gap: 32px !important;
    border-radius: 20px !important;
  }
  .n-142-348 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  .n-142-349 {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
  }
  .n-142-350 {
    position: relative !important;
    width: 100% !important;
    height: 380px !important;
    border-radius: 14px !important;
  }
  .n-142-351 {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .n-142-352 {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  .n-142-353 {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  .n-142-361 {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }
  .n-142-362, .n-142-364 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: 48px !important;
    padding: 0 26px !important;
  }


  /* Section 10: Final Trust CTA */
  .n-142-470 {
    padding: var(--section-pad) 32px !important;
    height: auto !important;
  }
  .n-142-471 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  .n-142-472 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 72px 32px !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .n-142-475 {  /* heading */
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 12px !important;
  }
  .n-142-476 {  /* subline */
    position: static !important;
    width: 100% !important;
    max-width: 620px !important;
    height: auto !important;
    margin-bottom: 24px !important;
  }
  .n-142-477 {  /* button row */
    position: static !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .n-142-478, .n-142-480 {  /* buttons */
    position: static !important;
    width: auto !important;
    height: 42px !important;
    padding: 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .n-142-479, .n-142-481 {  /* button labels */
    position: static !important;
    width: auto !important;
    height: auto !important;
  }
}

/* ==========================================================================
   MOBILE VIEWPORT (Figma Node 142:1080 - 390px)
   ========================================================================== */

@media (max-width: 640px) {
  /* Nav */
  .n-142-5 {
    padding: 16px 20px !important;
  }
  .n-142-6 {
    padding: 6px 12px 6px 18px !important;
  }
  .n-142-8 {
    display: none !important;
  }
  .n-142-14 {
    height: 36px !important;
    padding: 0 14px !important;
  }
  .n-142-15 {
    font-size: 12px !important;
  }

  /* Hero */
  .n-142-16 {
    padding: 24px 20px 36px 20px !important;
  }
  .n-142-17 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }
  .n-142-18 {
    width: 100% !important;
  }
  .n-142-21 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.75px !important;
  }
  .n-142-23 {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .n-142-24, .n-142-26 {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .n-142-29,
  .hero-visual-container {
    width: 100% !important;
    max-width: 414px !important;
    height: auto !important;
    margin: 12px auto 0 auto !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .trade-card-body {
    padding: 18px 16px 20px 16px !important;
  }
  .asset-strike {
    font-size: 21px !important;
  }
  .potential-box {
    padding: 10px 12px !important;
    min-width: 100px !important;
  }
  .potential-value {
    font-size: 18px !important;
  }
  .metric-val {
    font-size: 16px !important;
  }

  /* Regulatory Bar */
  .n-142-31 {
    padding: 20px 20px !important;
  }
  .n-142-32 {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* Section 02: Who Vittaara Is For */
  .n-142-51 {
    padding: var(--section-pad) 20px !important;
  }
  .audience-grid, .n-142-59 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
  }
  .audience-card,
  .n-142-60, .n-142-72, .n-142-66 {
    width: 100% !important;
    max-width: 320px !important;
    height: 380px !important;
  }

  /* Section 03: Research Services. A phone's small viewport (~660px) has to
     hold the whole stage, so the pinned stage packs tighter: the heading
     drops to two lines (at 36px the forced break gave four), the chart
     may shrink to 200px, footer lines close up. Static layouts keep the
     shared sizes. */
  #trades {
    --trades-gutter: 20px;
    --trades-stage-pad: 16px;
    --trades-stage-pad-top: 44px;
  }
  .n-142-81 {
    gap: 20px;
  }
  .trades-grid {
    gap: 20px;
  }
  .trades-footer {
    margin-top: 16px; /* stands the note off the card copy (gap + 16) */
  }
  @media (prefers-reduced-motion: no-preference) {
    /* Pinned, the row flexes to fill the stage, so the pill sat right under
       the status bar. The stage opens wider at the top; the section's top
       margin gives that back, so the run into the section still measures
       --section-pad. */
    #trades:not(.trades-static) {
      margin-top: calc(var(--section-pad) - var(--trades-stage-pad-top)) !important;
    }
    #trades:not(.trades-static) .n-142-81 {
      padding-top: var(--trades-stage-pad-top);
    }
    #trades:not(.trades-static) .section-heading {
      font-size: clamp(24px, 7vw, 32px);
      letter-spacing: -0.6px;
    }
    #trades:not(.trades-static) .trade-visual-box {
      min-height: 200px;
    }
    #trades:not(.trades-static) .trades-footer {
      gap: 6px;
    }
  }

  /* Section 04: Why Vittaara */
  .n-142-139 {
    padding: var(--section-pad) 20px !important;
  }
  .n-142-147 {
    gap: 16px !important;
  }
  .n-142-150, .n-142-156, .n-142-163 {
    margin: 20px 20px 0 !important;
  }
  .n-142-153, .n-142-159, .n-142-166 {
    aspect-ratio: 360 / 270;
    margin: 16px 20px 20px !important;
  }
  .why-frame {
    aspect-ratio: auto;
  }
  .n-142-166.acct-frame {
    margin: 16px 20px 0 !important;
  }
  .acct-audit {
    margin: 12px 20px 18px !important;
  }

  /* Section 07: How It Works */
  .n-142-310 {
    padding: var(--section-pad) 20px !important;
  }
  .n-142-318 {
    padding: 24px 20px !important;
  }
  .n-142-350 {
    height: 220px !important;
  }
  .n-142-361 {
    flex-direction: column !important;
    width: 100% !important;
  }
  .n-142-362, .n-142-364 {
    width: 100% !important;
    justify-content: center !important;
  }


  /* Section 10: Final Trust CTA */
  .n-142-470 {
    padding: var(--section-pad) 20px !important;
  }
  .n-142-472 {
    padding: 56px 20px !important;
  }
  .n-142-477 {
    flex-direction: column !important;
    width: 100% !important;
  }
  .n-142-478, .n-142-480 {
    width: 100% !important;
  }
}


/* Tight stage: when the pinned stage can't hold head, cards and footer at
   full spacing, script.js (tradesFits) adds .trades-tight before giving up
   on the pin: less padding and gap, and the chart may drop to 150px
   (initTradeVisuals redraws it to its box). The nav hides on the way down,
   so the top padding can close up. */
#trades.trades-tight:not(.trades-static){margin-top:calc(var(--section-pad) - 32px)}
#trades.trades-tight:not(.trades-static) .n-142-81{gap:28px;padding:32px 0 20px}
#trades.trades-tight:not(.trades-static) .trade-visual-box{min-height:150px}


/* ==========================================================================
   TRADES: STATIC LAYOUT
   --------------------------------------------------------------------------
   Not pinned: the section flows and the wide row scrolls natively, snapping
   card to card, its gutter as scroll padding so the first and last cards
   park at the edges. Two ways in, one CSS-only so reduced motion never
   paints the pin, one from script.js (.trades-static) once it has measured
   that the stage is too short to hold head, cards and footer - small and
   landscape phones. After the breakpoint blocks, and !important, because
   they pin with it at every width.
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  #trades{height:auto!important;margin:0 auto!important;padding:var(--section-pad) 0!important}
  #trades .n-142-81{position:relative!important;height:auto!important;overflow:visible!important}
  #trades .trades-grid{width:100%!important;max-height:none!important;flex:0 0 auto!important;overflow-x:auto!important;scroll-snap-type:x mandatory;scroll-padding:0 var(--trades-gutter,120px);scrollbar-width:none;transform:none!important}
  #trades .trades-grid::-webkit-scrollbar{display:none}
  #trades .trade-card{scroll-snap-align:start}
  #trades .trade-visual-box{flex:0 0 auto!important;height:390px!important}
}
#trades.trades-static{height:auto!important;margin:0 auto!important;padding:var(--section-pad) 0!important}
#trades.trades-static .n-142-81{position:relative!important;height:auto!important;overflow:visible!important}
#trades.trades-static .trades-grid{width:100%!important;max-height:none!important;flex:0 0 auto!important;overflow-x:auto!important;scroll-snap-type:x mandatory;scroll-padding:0 var(--trades-gutter,120px);scrollbar-width:none;transform:none!important}
#trades.trades-static .trades-grid::-webkit-scrollbar{display:none}
#trades.trades-static .trade-card{scroll-snap-align:start}
#trades.trades-static .trade-visual-box{flex:0 0 auto!important;height:390px!important}


/* ==========================================================================
   BRAND LAYER - Vishnu Blue #0136A6 / Lakshmi Red #CD0812
   --------------------------------------------------------------------------
   Appended last so it wins over the Figma-exported node rules and the
   breakpoint blocks above (which re-declare colour at each size).
   Only colour is touched here - no geometry, no layout.

   Division of labour:
     Vishnu Blue  -> primary actions, active/selected state, trust surfaces,
                    structural accents. Carries ~90% of the brand presence.
     Lakshmi Red  -> punctuation only: the wordmark mark, live indicators,
                    and downside/stop-loss semantics. Roughly 1 mark per view.

   Tints exist because #0136A6 lands at 2.1:1 on #010101 - unreadable as
   text on the dark sections. Those use --vishnu-400 (5.7:1) / -300 instead.
   ========================================================================== */

/* -- Global --------------------------------------------------------------- */
::selection{background:var(--vishnu-700);color:#fff;}
::-moz-selection{background:var(--vishnu-700);color:#fff;}

.skip-link{background:var(--vishnu-700);color:#fff;}


/* -- Primary CTAs -----------------------------------------------------------
   Were all identical white-on-black pills, so "GET TRADES" read the same
   weight as "See How It Works". The blue-gradient fill establishes the
   hierarchy (white on every stop is ≥ 4.5:1). */
.n-142-14,   /* nav · GET TRADES        */
.n-142-24,   /* hero · GET TRADES →     */
.n-142-362,  /* how-it-works · GET TRADES → */
.n-142-478,  /* final CTA · GET TRADES  */
.vf-cta{     /* partner dialog · SEND AN EMAIL */
  background:var(--cta-gradient);
  box-shadow:var(--cta-edge),0 6px 20px -4px rgba(var(--cta-rgb),0.5);
  transition:filter 0.25s cubic-bezier(0.16,1,0.3,1),
             box-shadow 0.25s cubic-bezier(0.16,1,0.3,1),
             transform 0.2s ease;
}

.n-142-14:hover,.n-142-24:hover,.n-142-362:hover,
.n-142-478:hover,.vf-cta:hover{
  background:var(--cta-gradient);
  filter:brightness(1.12);
  box-shadow:var(--cta-glow-hover);
  transform:translateY(-1px);
}

.n-142-15,.n-142-25,.n-142-363,
.n-142-479{
  color:#fff;
}

/* Secondary CTAs - outline only, so they read as the quieter option. */
.n-142-26:hover{  /* hero · See How It Works */
  box-shadow:inset 0 0 0 1.5px var(--lakshmi-400);
}
.n-142-364:hover{  /* how-it-works · Already an INDmoney user ? */
  box-shadow:inset 0 0 0 1px var(--vishnu-400);
}
.n-142-26:hover .n-142-27{
  color:var(--lakshmi-400);
}
.n-142-364:hover .n-142-365{
  color:var(--vishnu-300);
}

.n-142-480{  /* final CTA · See How It Works */
  box-shadow:inset 0 0 0 1px rgba(var(--vishnu-400-rgb),0.35);
}
.n-142-480:hover{
  box-shadow:inset 0 0 0 2px rgba(var(--vishnu-400-rgb),0.55);
}
.n-142-481{color:#ffffff;}

/* ── Hero badge ─────────────────────────────────────────────────────────────
   Section eyebrows are the shared .section-pill; only the hero badge keeps
   the two-tone brand wash. */
.n-142-19{   /* hero · SEBI Registered Research Analyst */
  background:linear-gradient(90deg, rgba(var(--lakshmi-rgb),0.18), rgba(var(--vishnu-rgb),0.16));
  box-shadow:inset 0 0 0 1px rgba(var(--lakshmi-rgb),0.4), 0 0 14px rgba(var(--lakshmi-rgb),0.12);
}
.n-142-20{
  color:var(--vishnu-300);
}


/* ── Regulatory strip ───────────────────────────────────────────────────────
   The actionable item in the credentials bar gets the brand colour. */
.n-142-50{color:var(--vishnu-300);}
.n-142-50:hover{color:var(--vishnu-400);}

/* ── Hero trade deck ──────────────────────────────────────────────────────── */
.nifty-badge-icon .nifty-num{
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.nifty-badge-icon.nifty-50-theme{
  background:rgba(var(--vishnu-rgb),0.20);
  border:1.5px solid rgba(var(--vishnu-400-rgb),0.45);
  box-shadow:0 2px 10px rgba(var(--vishnu-rgb),0.3);
}
.nifty-badge-icon.nifty-50-theme    .nifty-num{background-image:linear-gradient(135deg,#ffffff 20%,var(--vishnu-300) 100%);}

.nifty-badge-icon.bank-nifty-theme{
  background:rgba(var(--lakshmi-rgb),0.22);
  border:1.5px solid rgba(var(--lakshmi-rgb),0.55);
  box-shadow:0 2px 10px rgba(var(--lakshmi-rgb),0.35);
}
.nifty-badge-icon.bank-nifty-theme  .nifty-num{background-image:linear-gradient(135deg,#ffffff 20%,var(--lakshmi-400) 100%);}

.nifty-badge-icon.reliance-theme{
  background:rgba(var(--vishnu-rgb),0.20);
  border:1.5px solid rgba(var(--vishnu-400-rgb),0.45);
  box-shadow:0 2px 10px rgba(var(--vishnu-rgb),0.3);
}
.nifty-badge-icon.reliance-theme    .nifty-num{background-image:linear-gradient(135deg,#ffffff 20%,var(--vishnu-300) 100%);}

.nifty-badge-icon.tatamotors-theme{
  background:rgba(var(--lakshmi-rgb),0.22);
  border:1.5px solid rgba(var(--lakshmi-rgb),0.55);
  box-shadow:0 2px 10px rgba(var(--lakshmi-rgb),0.35);
}
.nifty-badge-icon.tatamotors-theme  .nifty-num{background-image:linear-gradient(135deg,#ffffff 20%,var(--lakshmi-400) 100%);}

.nifty-badge-icon.hdfc-theme{
  background:linear-gradient(135deg,rgba(var(--lakshmi-rgb),0.22),rgba(var(--vishnu-rgb),0.22));
  border:1.5px solid rgba(255,255,255,0.35);
  box-shadow:0 2px 10px rgba(var(--lakshmi-rgb),0.25);
}
.nifty-badge-icon.hdfc-theme        .nifty-num{background-image:linear-gradient(135deg,var(--lakshmi-400) 20%,var(--vishnu-400) 100%);}

.deck-dot.is-active{
  width:38px;
  background:linear-gradient(90deg,var(--lakshmi-400) 0%,var(--vishnu-400) 100%);
  box-shadow:0 0 12px rgba(var(--lakshmi-rgb),0.65), 0 0 10px rgba(var(--vishnu-rgb),0.55);
}

/* Downside / stop-loss carries Lakshmi Red */
.trade-perf-badge .perf-down{color:var(--lakshmi-400);}
.node-sl{
  background:rgba(var(--lakshmi-rgb),0.15);
  border-color:rgba(var(--lakshmi-rgb),0.4);
  color:var(--lakshmi-400);
}

/* "Trade Now" with dual brand gradient */
.btn-trade-action{
  background:linear-gradient(135deg,var(--lakshmi-700) 0%,var(--vishnu-700) 100%);
  box-shadow:0 4px 14px rgba(var(--vishnu-rgb),0.35), 0 3px 12px rgba(var(--lakshmi-rgb),0.3);
  transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
}


/* ── Trades & Research ──────────────────────────────────────────────────── */
.trade-pill p,
.n-142-94,.n-142-105,.n-142-116,.n-142-127{
  color:#ffffff;
}

/* ── Why Vittaara (dark bento) ──────────────────────────────────────────── */
.n-142-149.is-revealed:hover,
.n-142-155.is-revealed:hover{
  box-shadow:inset 0 0 0 1px rgba(var(--vishnu-400-rgb),0.40),
             0 16px 36px -12px rgba(0,0,0,0.6),
             0 0 34px -10px rgba(var(--vishnu-rgb),0.55);
}
.n-142-162.is-revealed:hover{
  box-shadow:inset 0 0 0 1px rgba(var(--vishnu-400-rgb),0.40),
             0 16px 36px -12px rgba(0,0,0,0.6),
             0 0 34px -10px rgba(var(--vishnu-rgb),0.55);
}

/* ── How It Works · video progress ──────────────────────────────────────── */
.n-142-352{box-shadow:inset 0 0 0 1px rgba(var(--vishnu-400-rgb),0.45);}
.n-142-350{overflow:hidden}
.hiw-video{object-fit:cover;background:#000;display:block}
.n-142-350.is-playing .n-142-352,.n-142-350.is-playing .hiw-play{display:none !important}
.hiw-mute,.hiw-full,.hiw-toggle{
  position:absolute;right:12px;bottom:12px;z-index:2;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s ease;
}
.hiw-mute{right:58px}
.hiw-toggle{right:auto;left:12px}
.hiw-mute:hover,.hiw-full:hover,.hiw-toggle:hover{background:rgba(0,0,0,.75)}
.hiw-toggle-play{fill:#fff}
.hiw-toggle-pause{stroke-width:2.6!important}
.hiw-toggle .hiw-toggle-pause,.hiw-toggle[aria-pressed="true"] .hiw-toggle-play{display:none}
.hiw-toggle[aria-pressed="true"] .hiw-toggle-pause{display:block}
.hiw-full svg,.hiw-toggle svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Full screen shows the whole frame, not the card's cover crop. */
.hiw-video:fullscreen{object-fit:contain}
.hiw-video:-webkit-full-screen{object-fit:contain}
.hiw-mute svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hiw-mute svg path:first-child{fill:#fff}
.hiw-mute .hiw-mute-on,.hiw-mute[aria-pressed="true"] .hiw-mute-off{display:none}
.hiw-mute[aria-pressed="true"] .hiw-mute-on{display:block}

/* ── Who it's for ───────────────────────────────────────────────────────── */
.audience-partner{color:var(--vishnu-300);}
.audience-partner:hover{color:var(--vishnu-400);}
.audience-card:hover .audience-inner,
.audience-card:focus-visible .audience-inner,
.audience-card.is-active .audience-inner{
  box-shadow:
    0 32px 64px -16px rgba(10,10,15,0.48),
    0 0 0 1px rgba(255,255,255,0.26),
    0 0 30px rgba(var(--vishnu-400-rgb),0.22),
    inset 0 1px 1px rgba(255,255,255,0.35);
}

/* ── Community · testimonials ─────────────────────────────────────────────── */

/* ── Notice dialog ──────────────────────────────────────────────────────── */
.notice button{background:var(--cta-gradient);color:#fff;}

/* ── Partner dialog ─────────────────────────────────────────────────────── */
/* Same shell as .notice. The logo and the CTA are .vf-logo and .vf-cta from
   the footer block; only the two icon buttons need the .notice button fill
   reset. */
.partner-dialog{max-width:420px;padding:28px;outline:none}
.partner-dialog .partner-top{display:flex;align-items:flex-start;justify-content:space-between;margin:0 0 22px}
.partner-dialog h2{margin:0 0 10px;color:#fff;font-size:22px;line-height:1.25}
.partner-dialog p{margin:0 0 22px;color:#b8b8b8}
.partner-dialog .partner-email{display:flex;align-items:center;gap:6px;margin:0 0 26px;color:#ededed;font-size:16px}
.partner-dialog .partner-email a{padding-bottom:1px;border-bottom:1px dotted rgba(237,237,237,.5);overflow-wrap:anywhere}
.partner-dialog .partner-email a:hover{border-bottom-style:solid}
.partner-dialog .partner-email .vf-ext{margin-left:4px}
.partner-dialog .partner-copy,
.partner-dialog .partner-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:6px;background:transparent;color:#8a8a8a;transition:color .2s ease}
.partner-dialog .partner-copy:hover,
.partner-dialog .partner-close:hover{color:#fff}
.partner-dialog .partner-copy svg,
.partner-dialog .partner-close svg{width:16px;height:16px}
.partner-dialog .partner-close{margin:-6px -6px 0 0}
.partner-dialog .partner-copy{position:relative;flex:none}
.partner-dialog .partner-copy .icon-check{display:none;color:var(--emerald-300)}
.partner-dialog .partner-copy.is-copied .icon-copy{display:none}
.partner-dialog .partner-copy.is-copied .icon-check{display:block}
.partner-dialog .partner-copy::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,4px);padding:5px 8px;border-radius:6px;background:#fff;color:#111;font-size:12px;line-height:1;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.partner-dialog .partner-copy.show-tip::after{opacity:1;transform:translate(-50%,0)}
.partner-dialog .partner-fallback{margin:14px 0 0;color:#8a8a8a;font-size:13px}
.partner-dialog .partner-fallback a{color:#60a5fa}
.partner-dialog .partner-fallback a:hover{color:#93c5fd}
/* ── Grievance / Registered Details dialogs ─────────────────────────────── */
/* Same shell as .partner-dialog. Each row is a muted label beside its value;
   an email value carries the partner dialog's dotted link and copy button. */
.reg-dialog{max-width:460px}
.reg-dl{margin:0 0 24px;display:grid;gap:12px}
.reg-dl > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:start;font-size:14.5px;line-height:1.5}
.reg-dl dt{margin:0;color:#8a8a8a}
.reg-dl dd{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px;color:#ededed;overflow-wrap:anywhere}
.reg-dl dd a{padding-bottom:1px;border-bottom:1px dotted rgba(237,237,237,.5)}
.reg-dl dd a:hover{border-bottom-style:solid}
.reg-actions{display:flex;flex-wrap:wrap;gap:10px}
.reg-pill{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  border:1px solid rgba(var(--vishnu-400-rgb),.35);background:rgba(var(--vishnu-rgb),.14);
  color:var(--vishnu-300);font-size:13px;font-weight:500;line-height:1.2;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.reg-pill:hover{border-color:rgba(var(--vishnu-400-rgb),.75);background:rgba(var(--vishnu-rgb),.28);color:#fff}
.reg-pill .vf-ext{margin-left:0}

@media(max-width:640px){
  .partner-dialog{padding:24px 20px}
  .partner-dialog .vf-cta{width:100%;justify-content:center}
  .reg-dl > div{grid-template-columns:1fr;gap:2px}
  .reg-dl dt{font-size:13px}
}

/* Keep the requested hero copy on exactly three lines at every viewport. */
.n-142-18{container-type:inline-size}
.n-142-21{font-size:min(60px,8.5cqw)!important;line-height:1.12!important;white-space:normal}
.n-142-21 > span{display:block;white-space:nowrap}

/* Trade-call card reference: neutral surfaces, clear hierarchy and green actions.
   Scoped to .signal-cards so the hero deck and the track-record log share one look;
   the hero keeps #hero-trade-deck for its script and light-mode rules. */
.signal-cards .hero-trade-card{width:414px;border:1px solid #e4e4e4;border-radius:24px;background:#fff;transition:none;box-shadow:0 12px 30px rgba(0,0,0,.12);cursor:default}
.signal-cards .card-glare{display:none}
.signal-cards .trade-card-topbar{min-height:42px;padding:12px 18px;background:linear-gradient(100deg,#f3f3f3,#fff);border:0;border-radius:24px 24px 0 0;gap:12px}
.signal-cards .trade-perf-badge{font-size:14px;font-weight:400;color:#666;white-space:nowrap}
.signal-cards .perf-down{color:#dc2626;font-weight:600}
.signal-cards .trade-time{font-size:11px;font-weight:400;color:#8c8c8c;white-space:nowrap}
.signal-cards .trade-card-body{padding:20px 18px 24px!important;gap:28px;background:#fff;border-radius:0 0 24px 24px}
.signal-cards .trade-main-row{min-height:136px;gap:12px;position:relative}
.signal-cards .trade-asset-info{display:flex;flex-direction:column;gap:10px;min-width:0}
.signal-cards .nifty-badge-icon{width:40px;height:40px;margin:0;border:0;background:#f7f7f7;box-shadow:none}
.signal-cards .hdfc-theme .nifty-badge-img{padding:6px}
.signal-cards .nifty-50-theme .nifty-badge-img{padding:3px}
.signal-cards .asset-name{font-size:14px;color:#484848;font-weight:600;line-height:20px;white-space:nowrap}
.signal-cards .asset-strike{font-size:18px!important;line-height:24px;letter-spacing:0;font-weight:600;color:#141414;margin:6px 0 14px}
.signal-cards .asset-tags{gap:8px}
.signal-cards .tag-buy{font-size:12px;font-weight:500;line-height:18px;padding:2px 8px;border:0;background:#e8faee;color:#07965e;border-radius:6px}
.signal-cards .tag-sep{font-size:12px;color:#999}
.signal-cards .tag-type{font-size:12px;font-weight:400;color:#666}
.signal-cards .potential-box{align-self:flex-start;margin-top:16px;width:132px;height:104px;min-width:132px!important;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:16px 10px!important;border:1px solid #e3e3e3;border-radius:20px;background:#f3f3f3;transition:none}
.signal-cards .potential-label{font-size:12px;font-weight:600;color:#666;margin:0}
.signal-cards .potential-value{font-size:21px!important;font-weight:600;color:#07985f;letter-spacing:0}
.signal-cards .trade-track-container{padding:0;gap:16px}
.signal-cards .trade-slider-track{height:30px;display:block}
.signal-cards .trade-slider-track::before{content:"";position:absolute;left:15px;right:15px;top:15px;border-top:1.5px dashed #ccc}
.signal-cards .track-node{position:absolute;top:0;z-index:1}
.signal-cards .node-sl,.signal-cards .node-tp,.signal-cards .node-entry{width:30px;height:30px;padding:0;border-radius:10px;font-size:14.5px;font-weight:700}
.signal-cards .node-sl{left:0;color:#db2828;background:#ffe7e7;border:1px solid #f4baba}
.signal-cards .node-entry{left:calc(50% - 15px);background:#f5fff8;border:1px solid #a7d9c5}
.signal-cards .node-tp{right:0;color:#07985f;background:#e8fbef;border:1px solid #b4e0ca}
.signal-cards .track-line.line-dashed{display:none}
/* Progress: --p (0–1) is how far the current price has travelled from the entry node's edge
   toward the TP node's edge; the script tweens it from 0 whenever a card takes the front. */
.signal-cards .trade-slider-track{--p:0;--mid:.85;--range:calc(50% - 45px)}
.signal-cards .track-line.line-solid-green{position:absolute;left:calc(50% + 15px);top:15px;width:calc(var(--range) * var(--p));height:1.5px;background:#07985f}
.signal-cards .node-current{left:calc(50% + 15px + var(--range) * var(--p) - 7px);top:8px}
.signal-cards .node-mid{left:calc(50% + 15px + var(--range) * var(--mid) - 5px);top:10px}
.signal-cards .trade-metrics-row{display:grid;grid-template-columns:1fr 1fr 1fr;margin:0}
.signal-cards .metric-label{font-size:11.5px;line-height:16px;font-weight:400;color:#777;white-space:nowrap;margin-bottom:6px}
.signal-cards .metric-val{font-size:17px!important;line-height:22px;font-weight:600;color:#111;letter-spacing:0}
.signal-cards .trade-actions-row{gap:10px;margin-top:4px}
.signal-cards .btn-trade-view,.signal-cards .btn-trade-action{display:flex;align-items:center;justify-content:center;height:39px;padding:8px 12px;border-radius:14px;font-size:14px;font-weight:600;transition:none;box-shadow:none;transform:none;filter:none}
.signal-cards .btn-trade-view{border:1px solid #dedede;background:#fff;color:#646464}
.signal-cards .btn-trade-action{border:1px solid #07985f;background:#07985f;color:#fff}
@media(max-width:640px){
  .signal-cards .hero-trade-card{width:calc(100vw - 76px);max-width:414px}
  .signal-cards .trade-time{font-size:9px}
  .signal-cards .trade-perf-badge{font-size:10px}
  .signal-cards .trade-card-body{padding:18px 14px 20px!important;gap:24px}
  .signal-cards .potential-box{width:106px;min-width:106px!important}
  .signal-cards .potential-value{font-size:18px!important}
  .signal-cards .asset-name{font-size:12px}
  .signal-cards .metric-label{font-size:9px}
  .signal-cards .metric-val{font-size:15px!important}
}

/* Hero spacing and CTA hover refinements. */
:root{--lakshmi-600:#e01926}
.n-142-21{font-size:min(58px,9.05cqw)!important}
@media(min-width:1025px){
  .n-142-16{overflow:visible;height:607px}
  .n-142-18{top:-59px;z-index:1}
  .n-142-22{top:270px}
  .n-142-23{top:317px}
  .n-142-28{top:383px}
  /* Deck top meets the badge line; the front card spans the headline through the CTAs. */
  .hero-deck-container{translate:0 -116px}
}
.n-142-26:hover{box-shadow:inset 0 0 0 1.5px var(--vishnu-400);background:rgba(var(--vishnu-rgb),.12)}
.n-142-26:hover .n-142-27{color:var(--vishnu-300)}
.n-142-24:hover{background:var(--cta-gradient);filter:brightness(1.12)}

/* Let the hero CTA glow extend beyond its layout containers. */
.n-142-18,.n-142-23{overflow:visible}
/* Primary CTAs keep the gradient fill on hover (brightened, no outline)
   and pick up the shared brand glow. */
.n-142-14:hover,.n-142-24:hover,.n-142-362:hover,
.n-142-478:hover,.vf-cta:hover{
  background:var(--cta-gradient);filter:brightness(1.12);transform:none;
  box-shadow:var(--cta-glow-hover);
}

.signal-cards .trade-card-topbar{
  position:relative;border:3px solid #fff;border-bottom:0;
  padding:9px 15px 12px;border-radius:24px 24px 0 0;
  background:linear-gradient(100deg,#f3f3f3,#fff);
}

/* Center primary CTA labels after removing their arrows. */
.n-142-25,.n-142-363{left:0;width:100%;text-align:center}

/* ── Secondary CTAs · blue gradient ring ────────────────────────────────────
   Hero "See How It Works" and how-it-works "Already an INDmoney user ?" wear
   the primary's blue sweep (--cta-gradient-ring) as a 1px ring that thickens to
   1.5px on hover; the final card's secondary does the same in its own block.
   The ring is a masked ::after so it follows the pill radius. */
.n-142-26,.n-142-364,
.n-142-26:hover,.n-142-364:hover{background:transparent;box-shadow:none;filter:none}
.n-142-26::after,.n-142-364::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--cta-gradient-ring);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  transition:padding .2s ease;
}
.n-142-26:hover::after,.n-142-364:hover::after{padding:1.5px}

/* Spacious credentials treatment inspired by the supplied statistics section. */
@media(min-width:1025px){.n-142-4{height:1010px}.n-142-31.credentials{top:690px}} /* 906 content (research-only line at the foot) + --section-pad */
/* Credential strip lives inside the hero: transparent so the ambient glow runs through it,
   and layered above the deck so the swap's dissolving card never crosses the text. */
.n-142-31.credentials{
  width:100%!important;height:232px;padding:28px 72px 56px!important;
  background:transparent;box-shadow:none;overflow:visible;text-align:center;z-index:2;
}
.credentials-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin:0 auto;max-width:1200px}
.credential-value{display:flex;align-items:center;justify-content:center;min-height:40px;margin:0 0 12px;color:#fff;font-size:34px;line-height:1.1;font-weight:500;letter-spacing:-1px;white-space:nowrap}
.credential-value--long{font-size:28px;letter-spacing:-.8px}
.credential h3{margin:0;color:#a3a3a3;font-size:14px;line-height:22px;font-weight:400}
.credential-note{margin:5px 0 0;color:#727272;font-size:12px;line-height:20px}
.credentials-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 48px;margin-top:34px}
.credentials-verify{display:inline-block;color:#7ba6f6;font-size:13px;line-height:20px}
.credentials-verify:hover{color:#a8c5ff;text-decoration:underline}
@media(max-width:1024px){
 .n-142-31.credentials{position:relative!important;top:auto!important;left:auto!important;height:auto!important;padding:12px 28px var(--section-pad)!important}
 /* Let the deck glow run on into the strip instead of being sliced at the content box. */
 .n-142-16{overflow:visible}
 .credentials-grid{gap:32px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .credential-value{font-size:30px;min-height:36px;margin-bottom:10px}
 .credential-value--long{font-size:26px}
}
@media(max-width:480px){
 .n-142-31.credentials{padding:8px 20px var(--section-pad)!important}
 .credentials-grid{gap:30px 16px}
 .credential-value{font-size:26px;letter-spacing:-.8px}
 .credential-value--long{font-size:22px}
 .credential h3{font-size:12px;line-height:18px}
 .credential-note{font-size:11px;line-height:17px}
}

/* ── Community: pinned testimonials that fold into the orb and CTA ──────────
   Scroll-driven after the Groww "Trusted by" section. The section is 300vh
   tall; the stage inside is sticky for 100vh and script.js maps scroll
   progress onto four phases (cards fly past, headline splits, room dims and
   the orb rises, CTA fades in). The same story runs at every width; under
   1025px the section shakes off the responsive block's flattening and the
   headline, logo and CTA copy size down. Under reduced motion the same
   markup lays out statically (see the media query at the end).
   A light room: white ground and ink type, white quote cards lifted by a
   hairline ring and a soft shadow, and the "dim" is a white wash, so the
   cards fade out under the orb and CTA. Depth (--dim, set per card by
   script.js) fades the ink, ring and shadow towards the white ground, so
   far cards read as haze; the card ground itself stays opaque so a near
   card covers whatever it overlaps cleanly. */
.n-142-366.community{height:300vh;background:#ffffff;color:#0b1220;overflow:visible}
.community-stage{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:inherit}
.community-dim{position:absolute;inset:0;z-index:5;background:#fff;opacity:0;transition:opacity .3s ease-out;pointer-events:none}

.community-hero{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;pointer-events:none}
.community-title{display:flex;white-space:nowrap;color:#0b1220}
.community-title-part{display:block;will-change:transform,opacity;transition:transform .2s ease-out,opacity .2s ease-out}
.community-count{font-variant-numeric:tabular-nums}

.community-orb{position:absolute;top:50%;left:50%;z-index:15;width:484px;height:410px;transform:translate(-50%,-50%) scale(0);opacity:0;will-change:transform,opacity}
.community-logo{position:absolute;top:50%;left:50%;display:block;width:320px;height:auto;overflow:visible;transform:translate(-50%,-50%);filter:drop-shadow(0 18px 36px rgba(var(--vishnu-rgb),0.22)) drop-shadow(0 0 72px rgba(var(--lakshmi-rgb),0.10))}

.community-cta{position:absolute;top:50%;left:50%;z-index:20;width:min(1040px,calc(100% - 48px));display:flex;flex-direction:column;align-items:center;gap:28px;margin-top:34px;transform:translateX(-50%) translateY(30px);opacity:0;text-align:center;will-change:opacity,transform;transition:opacity .3s ease-out,transform .3s ease-out}
.community-cta-text{max-width:1040px;margin:0;color:#0b1220;font-size:42px;line-height:1.18;font-weight:600;letter-spacing:-1.2px;text-wrap:balance}
.community-cta-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 24px 12px 20px;border-radius:999px;background:#1daa61;color:#fff;font-size:16px;line-height:24px;font-weight:600;white-space:nowrap;cursor:pointer;overflow:hidden;isolation:isolate;box-shadow:0 6px 20px -4px rgba(29,170,97,.5);transition:background .2s ease,box-shadow .25s cubic-bezier(.16,1,.3,1),transform .2s ease}
.community-cta-button:hover{background:#25d366;filter:none;transform:translateY(-1px);box-shadow:0 10px 28px -4px rgba(37,211,102,.6)}
.community-cta-button::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:34%;z-index:1;background:linear-gradient(105deg,rgb(255 255 255 / 0) 0%,rgb(255 255 255 / .35) 40%,rgb(255 255 255 / .75) 50%,rgb(255 255 255 / .35) 60%,rgb(255 255 255 / 0) 100%);transform:translate(-240%,-8%) skewX(-22deg);pointer-events:none}
.community-cta-button.is-shining::after{animation:cta-shine .95s cubic-bezier(.35,0,.15,1) .3s 1 both}
@keyframes cta-shine{from{transform:translate(-240%,-8%) skewX(-22deg)}to{transform:translate(440%,8%) skewX(-22deg)}}
@media (prefers-reduced-motion:reduce){.community-cta-button::after{display:none}}
.community-cta-icon{flex:none;width:20px;height:20px;fill:#fff}

/* The <ul> is the stage. script.js (layoutCards) scatters the cards over
   it for the stage at hand: it measures each card, sizes it by --card-fit
   (fitStage: from the stage's height on desktop, its width below 1025px),
   then places as many as fit with clear air between them and around the
   headline, and hides the rest — so a phone shows about ten, a tablet
   twenty-odd, a desktop all 26, each at a left/top % the script sets.
   --s is each card's depth: bigger is nearer. script.js turns it into
   opacity, z order, the entry parallax rate and the fly-past speed.
   The <li> is turned edge-on (rotateY 90) and the inner turns back, so the
   fly-past can push cards at the camera with a plain translateX. --s must be
   applied on the inner, after the un-rotate: a 2D scale on the rotated <li>
   would only reach world Y and squash the type. The quote hangs off the
   inner's left edge, centred on it, and the script places that anchor. */
.community-cards{position:absolute;inset:0;margin:0;padding:0;list-style:none;transform:perspective(1200px);transform-style:preserve-3d;overflow:visible}
.community-card{position:absolute;width:min-content;height:min-content;transform-style:preserve-3d;transform:rotateY(90deg)}
.community-card[hidden]{display:none}
.community-card-inner{position:relative;display:flex;align-items:center;justify-content:flex-start;width:126px;height:96px;margin:0;transform:rotateY(-90deg) scale3d(calc(var(--s,1) * var(--card-fit,1)),calc(var(--s,1) * var(--card-fit,1)),1);transform-style:preserve-3d;will-change:transform}
/* --dim (script.js, from --s) fades far cards: alpha on the ink, ring and
   ground, which over the #010101 room reads as opacity without giving the 3D
   layer a render surface. */
.community-quote{flex:none;display:flex;flex-direction:column;gap:6px;width:max-content;max-width:320px;padding:16px;border-radius:22px;background:#ffffff;box-shadow:inset 0 0 0 1px rgb(11 13 18 / calc(.03 + .07 * var(--dim,1))),0 14px 32px -18px rgb(11 13 18 / calc(.3 * var(--dim,1)));color:rgb(11 18 32 / var(--dim,1));font-size:14px;line-height:20px;text-align:left}
.community-quote blockquote{flex:1 1 auto;margin:0;color:rgb(11 18 32 / calc(.85 * var(--dim,1)))}
/* Tag row: the theme word in full ink (the quote sits at .85) with a green
   verified seal after it. --dim fades the seal with the rest of the card. */
.community-tag{display:flex;align-items:center;gap:5px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.1px}
.community-verified{flex:none;width:15px;height:15px;fill:rgba(var(--emerald-rgb,5,150,105),var(--dim,1))}

/* Under 1025px the responsive block flattens every section (height:auto,
   overflow:hidden, !important); the pinned run needs its 300vh and a visible
   overflow, or position:sticky stops at the section. The stage takes the
   small viewport height so the CTA never sits under a phone's toolbar. */
@media (max-width:1024px){
  .n-142-366.community{height:300vh!important;overflow:visible!important}
  .community-stage{height:100vh;height:100svh}
  .community-title{flex-wrap:wrap;justify-content:center;white-space:normal}
  .community-title-part{text-align:center}
  .community-cta-text{font-size:32px;letter-spacing:-1px}
}
@media (max-width:640px){
  .community-logo{width:min(260px,62vw)}
  .community-cta{gap:22px}
}
@media (max-width:480px){
  .community-cta-text{font-size:26px}
}
@media (max-width:360px){
  .community-title{font-size:31px}
}

/* Static layout (reduced motion): no pin, cards in a snap scroller, orb and
   CTA stacked. */
@media (prefers-reduced-motion:reduce){
  .n-142-366.community{height:auto!important;padding:72px 0 56px!important}
  .community-stage{position:relative;height:auto;overflow:visible;display:flex;flex-direction:column;align-items:center;gap:40px;padding:0 20px}
  .community-dim{display:none}
  .community-hero{order:1}.community-cards{order:2}.community-orb{order:3}.community-cta{order:4}
  .community-hero{position:static;pointer-events:auto;gap:18px}
  .community-title{flex-wrap:wrap;justify-content:center;white-space:normal}
  .community-title-part{transform:none!important;opacity:1!important}
  .community-cards{position:static;width:calc(100% + 40px);height:auto;margin:0 -20px;padding:4px 20px 12px;display:flex;gap:12px;overflow-x:auto;transform:none;transform-style:flat;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .community-cards::-webkit-scrollbar{display:none}
  .community-card{position:static;display:flex;flex:none;width:auto;height:auto;transform:none!important;scroll-snap-align:center}
  .community-card-inner{display:flex;width:auto;height:auto;transform:none!important;transition:none}
  .community-quote{width:264px;max-width:none}
  .community-orb{position:static;width:min(100%,360px);height:240px;transform:none!important;opacity:1!important}
  .community-logo{width:min(260px,72%)}
  .community-cta{position:static;width:100%;margin:0;transform:none!important;opacity:1!important}
  .community-cta-text{font-size:32px;letter-spacing:-1px}
}
@media (prefers-reduced-motion:reduce) and (max-width:480px){
  .community-orb{height:200px}
}

/* ==========================================================================
   Hero credential badge, CTA scale, How It Works alignment, Our Process
   cards and the Behind Vittaara stat strip.
   ========================================================================== */

/* ── Hero · SEBI badge ─────────────────────────────────────────────────────
   Flat liquid glass in the credential green: a translucent tinted slab that
   blurs and saturates what sits behind it, edged by one thin, even light
   rim. No bevel — no top specular, bottom lip, gloss pool or heavy drop. */
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  width:auto;height:36px;padding:0 18px 0 14px;border-radius:999px;
  background:rgba(34,201,143,.58);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
          backdrop-filter:blur(18px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    0 6px 20px -10px rgba(0,0,0,.35);
}
.hero-badge-icon{width:16px;height:16px;flex:0 0 auto;color:#fff}
.hero-badge-check{stroke:#0B9A6A}
.hero-badge .n-142-20,.hero-badge-label{
  position:static;width:auto;height:auto;font-family:"Inter",Arial,sans-serif;
  font-size:15px;font-weight:500;line-height:1;letter-spacing:-.1px;
  color:#fff;white-space:nowrap;
}
/* On the light hero the tint carries more weight so the white label keeps contrast.
   The Accountable card reuses the badge as is (.acct-sebi). */
.hero-badge{
  background:rgba(6,165,111,.78);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.4),
    0 6px 20px -10px rgba(6,165,111,.4);
}

/* ── Hero · CTAs ─────────────────────────────────────────────────────────
   42px pills with 13.5px labels were undersized against a 58px headline.
   The pair is now a flex row so widths follow the labels. */
.n-142-23{display:flex;align-items:center;gap:14px;width:auto;height:auto}
.n-142-24,.n-142-26{
  position:relative;left:auto;top:auto;
  width:auto;height:50px;padding:0 28px;
  display:inline-flex;align-items:center;justify-content:center;
}
.n-142-25,.n-142-27{
  position:static;left:auto;top:auto;width:auto;height:auto;
  font-size:15px;font-weight:500;line-height:1;letter-spacing:-.1px;text-align:center;
}
/* Re-space the desktop column for the taller badge and buttons. */
@media(min-width:1025px){
  .n-142-18{top:-32px}
  .n-142-21{top:48px}
  .n-142-22{top:278px}
  .n-142-23{top:325px}
  .n-142-28{top:399px}
  /* SEBI standard warning: the canvas zooms by --fit (0.71 at 1025px), so
     floor the authored size at 10px / --fit to keep the rendered text ≥10px. */
  .n-142-28{font-size:max(12px,calc(10px / var(--fit)));line-height:1.5;height:auto}
}

/* ── Secondary CTAs · hover ─────────────────────────────────────────────────
   The outline is the shared gradient ring (see the hero block); hover only
   tints the fill and the label. */
.n-142-26:hover,.n-142-364:hover{background:rgba(var(--vishnu-rgb),.12)}
.n-142-27,.n-142-365{transition:color .2s ease}
.n-142-26:hover .n-142-27,.n-142-364:hover .n-142-365{color:var(--vishnu-300)}

/* ── How It Works · layout ────────────────────────────────────────────────
   The Figma export pinned every box to absolute coordinates with the steps
   on the left and the walkthrough on the right. The section now flows:
   walkthrough on the left, a numbered guide on the right, and the CTA pair
   centred beneath both. The header is the shared .section-head.
   The section sits on black, so the card takes the same lifted surface and
   hairline as the Why Vittaara cards. */
.n-142-310{height:auto;padding:var(--section-pad) 0}
.hiw-card{background:#07080a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 24px -6px rgba(0,0,0,.4)}
.n-142-311{position:relative;left:auto;top:auto;width:100%;height:auto;padding:0 120px}
.n-142-312{position:relative;left:auto;top:auto;width:100%;margin-bottom:40px}
.hiw-card{
  position:relative;left:auto;top:auto;width:100%;height:auto;
  display:grid;grid-template-columns:576px minmax(0,1fr);
  column-gap:48px;row-gap:28px;align-items:start;padding:36px;
}
.hiw-media{position:relative;left:auto;top:auto;width:576px;height:398px}
.hiw-actions{grid-column:1/-1;position:relative;left:auto;top:auto;width:auto;margin-top:6px}
.n-142-361{display:flex;align-items:center;justify-content:center;gap:14px;height:auto;overflow:visible}
.n-142-362,.n-142-364{
  position:relative;left:auto;top:auto;
  width:auto;height:50px;padding:0 28px;
  display:inline-flex;align-items:center;justify-content:center;
}
.n-142-363,.n-142-365{
  position:static;left:auto;top:auto;width:auto;height:auto;
  font-size:15px;font-weight:500;line-height:1;letter-spacing:-.1px;text-align:center;
}

/* ── How It Works · numbered guide ────────────────────────────────────────
   Rows divided by hairlines; the selected step reads in full contrast with
   a filled number and a brand arc drawn around it, the others sit back. */
.hiw-guide{min-width:0;padding-top:2px}
.hiw-steps{list-style:none;margin:0;padding:0}
.hiw-step{
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;
  width:100%;padding:22px 0 26px;cursor:pointer;
  border-top:1px solid rgba(255,255,255,.12);
}
.hiw-steps li:last-child .hiw-step{border-bottom:1px solid rgba(255,255,255,.12)}
.hiw-step-marker{position:relative;width:44px;height:44px;display:grid;place-items:center;margin:-6px 0 0 2px}
.hiw-step-num{
  position:relative;z-index:1;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  font-size:13px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--cta-gradient);color:#fff;
  box-shadow:0 4px 14px rgba(var(--cta-rgb),.4);
  transition:background .3s ease,color .3s ease;
}
.hiw-step-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.hiw-step-head{display:flex;align-items:baseline;gap:16px}
.hiw-step-title{
  font-size:21px;font-weight:600;line-height:1.2;letter-spacing:-.3px;
  color:#fff;transition:color .3s ease;
}
.hiw-step-desc{
  font-size:14.5px;line-height:1.5;
  color:rgba(255,255,255,.72);transition:color .3s ease;
}
/* The whole sentence reads as a link but lives inside the step <button>, so
   it is a span; script.js sends it wherever the GET TRADES CTA points. The
   arrow is inline (not inline-block) so it cannot wrap onto its own line. */
.hiw-step-link{
  color:var(--vishnu-300);font-weight:500;
  transition:color .2s ease;
}
.hiw-step-link-ext{
  position:relative;top:0;left:0;margin-left:4px;font-size:12px;opacity:.7;
  transition:top .2s ease,left .2s ease,opacity .2s ease;
}
.hiw-step-link:hover{color:var(--vishnu-400)}
.hiw-step-link:hover .hiw-step-link-ext{top:-1px;left:1px;opacity:1}
.hiw-step:focus-visible{outline-offset:-2px;border-radius:6px}
.hiw-disclaimer{
  margin:20px 0 0;font-size:12px;line-height:18px;color:rgba(255,255,255,.38);
}
.hiw-disclaimer+.hiw-disclaimer{margin-top:10px}
@media (prefers-reduced-motion:reduce){
  .hiw-step-num,.hiw-step-title,.hiw-step-desc{transition:none}
}
@media (max-width:1024px){
  .n-142-311{padding:0!important}
  .hiw-media{width:100%!important;height:auto!important}
  .n-142-349{display:flex;flex-direction:column}
  .hiw-steps li:last-child .hiw-step{border-bottom:0}
  .hiw-disclaimer{padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
  .hiw-disclaimer+.hiw-disclaimer{padding-top:0;border-top:0}
}
@media (max-width:640px){
  .hiw-step{grid-template-columns:36px minmax(0,1fr);column-gap:14px;padding:18px 0 20px}
  .hiw-step-marker{width:36px;height:36px;margin:-4px 0 0 2px}
  .hiw-step-num{width:26px;height:26px;font-size:12px}
  .hiw-step-title{font-size:18px}
  .hiw-step-head{flex-direction:column;align-items:flex-start;gap:6px}
  .hiw-step-desc{font-size:14px}
}

/* ── Final CTA · card offsets ───────────────────────────────────────────────
   The heading is the shared 48px .section-heading; the card's fixed Figma
   boxes are re-centred around it inside the 420px card. */
@media(min-width:1025px){
  .n-142-475{top:133px;height:auto}
  .n-142-476{top:205px}
  .n-142-477{top:243px}
}
/* ==========================================================================
   FAQ
   --------------------------------------------------------------------------
   Semantic replacement for the Figma-exported FAQ nodes. A light section
   like Our Process: the shared .section-head on top, then question groups on
   the same 1056px column: a small uppercase category label beside hairline-
   divided rows built on native <details>. script.js tweens the open/close
   height and keeps one answer open at a time. Owns its own responsive rules.
   ========================================================================== */
.faq-section{
  position:relative;left:0!important;top:0!important;
  width:100%;max-width:1440px;margin:0 auto;
  isolation:isolate;overflow:clip;
  background:#ffffff;color:#0b1220;
  font-family:"Inter",Arial,sans-serif;
}
.faq-section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(11,18,32,.10) 25%,rgba(11,18,32,.10) 75%,transparent);
}
/* 1056px column, centred: the same content width the other sections use. */
.faq-inner{width:min(1056px,100% - 64px);margin:0 auto;padding:var(--section-pad) 0}

/* -- Header ---------------------------------------------------------------- */
.faq-head{margin:0 0 48px}
.faq-section .section-heading{color:#0b1220}

/* -- Groups ---------------------------------------------------------------- */
.faq-groups{display:flex;flex-direction:column;gap:44px}
.faq-group{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,9fr);gap:0 40px;align-items:start}
.faq-cat{
  margin:0;padding-top:21px;
  color:#6b7280;font-size:11.5px;line-height:1.4;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.faq-item{border-bottom:1px solid rgba(11,18,32,.12)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:18px 0;cursor:pointer;list-style:none;user-select:none;
  color:#0b1220;font-size:18px;line-height:1.3;font-weight:400;letter-spacing:-.2px;
  transition:color .25s ease;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:""}
.faq-q:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.faq-item:hover .faq-q{color:#000}
.faq-icon{
  flex:none;width:18px;height:18px;color:#4b5563;
  transition:transform .55s cubic-bezier(.16,1,.3,1),color .25s ease;
}
.faq-icon svg{display:block;width:18px;height:18px}
.faq-item:hover .faq-icon{color:#0b1220}
.faq-item[open]:not(.is-closing) .faq-icon{transform:rotate(45deg);color:#0b1220}
.faq-a{max-width:640px;padding:0 48px 20px 0;color:#5b6472;font-size:14.5px;line-height:1.55}
.faq-a p{margin:0}
.faq-a p+p{margin-top:10px}
/* Inline mailto links in answers: same underline treatment as the HIW step link. */
.faq-a a{
  color:var(--vishnu-300);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(var(--vishnu-400-rgb),.5);transition:color .2s ease,text-decoration-color .2s ease;
}
.faq-a a:hover{color:var(--vishnu-400);text-decoration-color:currentColor}
/* Inline CTA under the access answer: the site's primary blue pill, built
   from the same --cta tokens as the nav, hero and footer buttons. */
.faq-a .faq-cta-row{margin-top:18px}
/* Scoped under .faq-a so it outranks the inline-link rule above (which would
   otherwise tint the label blue and underline it). */
.faq-a .faq-cta{
  display:inline-flex;align-items:center;gap:10px;
  height:42px;padding:0 22px;border-radius:999px;
  background:var(--cta-gradient);color:#fff;text-decoration:none;font-size:13.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
  box-shadow:var(--cta-edge),0 6px 20px -4px rgba(var(--cta-rgb),.5);
  transition:filter .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1),transform .2s ease;
}
.faq-a .faq-cta svg{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.faq-a .faq-cta:hover{background:var(--cta-gradient);color:#fff;text-decoration:none;filter:brightness(1.12);box-shadow:var(--cta-glow-hover);transform:translateY(-1px)}
.faq-a .faq-cta:hover svg{transform:translateX(3px)}
/* Answer text drifts up as the height tween reveals it; fades while closing. */
.faq-item[open] .faq-a{animation:faq-answer .55s cubic-bezier(.16,1,.3,1) both}
.faq-item.is-closing .faq-a{animation:none;opacity:0;transition:opacity .18s ease}
@keyframes faq-answer{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* -- Entrance -------------------------------------------------------------- */
/* Hidden state applies only once JS opts in (.faq-animate), so the section is
   never invisible without script. --r staggers per block from the markup. */
.faq-section.faq-animate .faq-reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .75s cubic-bezier(.16,1,.3,1) calc(var(--r,0)*90ms),
             transform .75s cubic-bezier(.16,1,.3,1) calc(var(--r,0)*90ms);
}
.faq-section.faq-animate.is-revealed .faq-reveal{opacity:1;transform:none}

/* -- Responsive ------------------------------------------------------------ */
@media (max-width:1024px){
  .faq-head{margin-bottom:40px}
  .faq-groups{gap:36px}
  .faq-group{grid-template-columns:1fr;gap:4px}
  .faq-cat{padding-top:0}
  .faq-q{font-size:17px;padding:16px 0}
}
@media (max-width:640px){
  .faq-inner{width:calc(100% - 40px)}
  .faq-head{margin-bottom:32px}
  .faq-groups{gap:30px}
  .faq-q{gap:20px;padding:14px 0;font-size:16px}
  .faq-icon,.faq-icon svg{width:16px;height:16px}
  .faq-a{padding:0 24px 16px 0;font-size:14px;line-height:1.5}
}
@media (prefers-reduced-motion:reduce){
  .faq-q,.faq-icon,.faq-cta,.faq-cta svg{transition:none}
  .faq-item[open] .faq-a,.faq-item.is-closing .faq-a{animation:none;opacity:1}
}

/* ==========================================================================
   SITE FOOTER
   --------------------------------------------------------------------------
   Semantic, grid-based replacement for the Figma-exported footer nodes.
   One row, five columns: the brand lockup, then Disclosures across two
   (its 14 links flowing into two sub-columns), then Explore and Community.
   A fading gradient wordmark, then the legal bar.
   Owns its own responsive rules; nothing in the tablet/mobile node
   overrides touches it. Back to top is the floating .back-to-top below.
   ========================================================================== */
.site-footer{
  position:relative;left:0!important;top:0!important;
  width:100%;max-width:1440px;margin:0 auto;
  isolation:isolate;overflow:hidden;
  background:#010101;color:#f8fafc;
  font-family:"Inter",Arial,sans-serif;
}
/* Hairline that fades at both ends, and a soft brand glow pooled at the base. */
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 25%,rgba(255,255,255,.14) 75%,transparent);
}
.site-footer::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:72%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(55% 55% at 16% 100%, rgba(var(--vishnu-rgb),.36), transparent 70%),
    radial-gradient(45% 50% at 86% 96%, rgba(var(--lakshmi-rgb),.20), transparent 70%);
  filter:blur(24px);
}
.vf-inner{max-width:1264px;margin:0 auto;padding-inline:32px}

/* -- Top: brand + four link columns in one row ----------------------------- */
/* Flex, not grid: each column is sized to its own content and the row gap is
   a single fixed value, so the gap between every pair of columns is
   identical regardless of how long that column's links run (a grid of equal
   1fr tracks left wildly different-looking gaps once Disclosures' longer
   links sat next to Explore/Community's short ones - same track width,
   very different leftover space). vf-cols carries no box of its own, so
   Disclosures, Explore and Community sit as vf-brand's flex siblings. */
.vf-top{display:flex;column-gap:88px;padding:88px 0 64px}
.vf-cols{display:contents}
.vf-brand{flex:0 0 auto}
.vf-col{flex:0 0 auto}
/* Disclosures' 14 links split into two sub-columns of 7 (two separate lists,
   vf-links--d1/--d2), each sized to its own longest link and separated by
   the same 44px gap as the row above. Named grid areas (rather than a single
   flowed list) so the mobile layout below can pull d2 out to sit beside
   Community instead of stacking under d1/d2 as one block. */
.vf-col--wide{
  display:grid;grid-template-columns:max-content max-content;column-gap:56px;align-content:start;
  grid-template-areas:"dh dh" "d1 d2";
}
.vf-col--wide .vf-eyebrow{grid-area:dh;white-space:nowrap}
.vf-col--wide .vf-links--d1{grid-area:d1}
.vf-col--wide .vf-links--d2{grid-area:d2}

.vf-lockup{display:inline-flex;align-items:center;gap:11px;text-decoration:none;transition:opacity .2s ease}
.vf-lockup:hover{opacity:.85}
.vf-logo{height:32px;width:auto;aspect-ratio:3447/2210;object-fit:contain;flex-shrink:0;display:block;filter:drop-shadow(0 2px 10px rgba(var(--vishnu-rgb),.45))}
.vf-lockup-text{display:flex;flex-direction:column;gap:2px}
.vf-lockup-name{color:#fff;font-size:16.5px;font-weight:700;line-height:1.15;letter-spacing:.03em;white-space:nowrap}
.vf-lockup-tagline{color:#94a3b8;font-size:10.5px;line-height:1.2;letter-spacing:-.005em;white-space:nowrap}

.vf-desc{max-width:230px;margin:18px 0 22px;color:#9aa3b2;font-size:12.5px;line-height:1.55}

.vf-cta{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  height:44px;padding:0 22px;border-radius:999px;
  color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.04em;
  text-decoration:none;white-space:nowrap;overflow:hidden;
}
.vf-cta-arrow{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.vf-cta:hover .vf-cta-arrow{transform:translateX(3px)}

.vf-eyebrow{margin:0 0 18px;color:#6b7280;font-size:10.5px;font-weight:600;line-height:1.4;letter-spacing:.13em;text-transform:uppercase}
.vf-eyebrow--stacked{margin-top:34px}

.vf-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.vf-links a,.vf-links button{
  display:inline-flex;align-items:flex-start;gap:8px;
  color:#a3adbd;font-size:13px;line-height:1.4;text-align:left;cursor:pointer;
  transition:color .2s ease,transform .25s cubic-bezier(.16,1,.3,1);
}
.vf-links a:hover,.vf-links button:hover{color:#fff;transform:translateX(2px)}
.vf-icon{width:15px;height:15px;margin-top:2px;fill:currentColor;opacity:.7;flex-shrink:0;transition:opacity .2s ease}
.vf-links a:hover .vf-icon,.vf-links button:hover .vf-icon{opacity:1}
/* Inline, not inline-block: a line may break before an inline-block, which
   dropped the arrow alone onto a second line on phones. The hover nudge is a
   relative offset since transforms do not apply to inline boxes. */
.vf-ext{position:relative;top:0;left:0;font-size:12px;opacity:.5;margin-left:5px;transition:top .2s ease,left .2s ease,opacity .2s ease}
.vf-links a:hover .vf-ext,.vf-links button:hover .vf-ext{top:-1px;left:1px;opacity:1}
/* Partner link reads in the same blue as the audience-section partner CTA */
.vf-links .vf-link--accent{color:#60a5fa}
.vf-links .vf-link--accent .vf-ext{opacity:.85}
.vf-links .vf-link--accent:hover{color:#93c5fd}

/* Social icons carry their brand colour; the label still lifts to white on hover. */
.vf-icon--whatsapp{color:#25d366}
.vf-icon--youtube{color:#ff0033}
.vf-icon--telegram{color:#27a7e7}
.vf-icon[class*="vf-icon--"]{opacity:1}

/* -- Giant wordmark, brand gradient, dissolving into the legal bar --------- */
.vf-wordmark{
  position:relative;margin:76px auto -.14em;padding:0 8px;
  text-align:center;white-space:nowrap;user-select:none;pointer-events:none;
  font-size:clamp(64px,19.4vw,282px);font-weight:600;line-height:.86;letter-spacing:-.045em;
  /* Gradient line runs corner to corner, bottom of the V up to the top of the
     last A: atan(width/height) of the ~6:1 box = 80.5deg. Explicit angle, not
     "to top right" -- the corner keyword aims the 50% line through the other
     two corners, which on a box this wide turns almost vertical. Red is held
     to "VIT", the handoff to blue happens across "TA", blue carries the rest. */
  background:linear-gradient(80.5deg,var(--lakshmi-700) 0%,var(--lakshmi-700) 28%,var(--vishnu-700) 62%,var(--vishnu-700) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 18%,rgba(0,0,0,.35) 72%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 18%,rgba(0,0,0,.35) 72%,transparent 100%);
}

/* -- Legal bar ----------------------------------------------------------- */
.vf-legal{position:relative;z-index:1;padding:72px 0 30px;text-align:center}
.vf-copy{margin:0;color:#6b7280;font-size:12px;line-height:1.6}

/* -- Entrance ------------------------------------------------------------- */
/* Hidden state applies only once JS opts in (.vf-animate), so the footer is
   never invisible without script. --r staggers per block from the markup. */
.site-footer.vf-animate .vf-reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) calc(var(--r,0)*90ms),
             transform .7s cubic-bezier(.16,1,.3,1) calc(var(--r,0)*90ms);
}
.site-footer.vf-animate.is-revealed .vf-reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .vf-links a,.vf-links button,.vf-cta-arrow{transition:none}
  .vf-links a:hover,.vf-links button:hover,.vf-cta:hover .vf-cta-arrow{transform:none}
}

/* -- Responsive ----------------------------------------------------------- */
@media (max-width:1024px){
  .vf-top{flex-direction:column;column-gap:0;row-gap:48px;padding:64px 0 48px}
  /* Brand goes above; the link grid gets its own row. Disclosures' header
     spans both columns, but its two sub-columns (d1/d2) split across them so
     d2 sits directly above Community rather than the whole Disclosures block
     sitting above Explore+Community as one row. vf-col--wide dissolves
     (display:contents) so its header/lists become direct items of this grid. */
  .vf-cols{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px;
    grid-template-areas:"dh dh" "d1 d2" "explore community";
  }
  .vf-cols > .vf-col--wide{display:contents}
  /* display:contents leaves .vf-col--wide with no box, so its own
     .vf-reveal entrance (below) can no longer animate it - reapply the same
     fade/slide to its now-direct children so Disclosures still enters like
     the other columns (still using the inherited --r for the stagger delay). */
  .site-footer.vf-animate .vf-col--wide .vf-eyebrow,
  .site-footer.vf-animate .vf-col--wide .vf-links--d1,
  .site-footer.vf-animate .vf-col--wide .vf-links--d2{
    opacity:0;transform:translateY(16px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1) calc(var(--r,0)*90ms),
               transform .7s cubic-bezier(.16,1,.3,1) calc(var(--r,0)*90ms);
  }
  .site-footer.vf-animate.is-revealed .vf-col--wide .vf-eyebrow,
  .site-footer.vf-animate.is-revealed .vf-col--wide .vf-links--d1,
  .site-footer.vf-animate.is-revealed .vf-col--wide .vf-links--d2{
    opacity:1;transform:none;
  }
  /* The header's own margin-bottom would stack on top of the grid row-gap
     between it and d1/d2 - drop it here so spacing stays consistent with
     the d1/d2-to-explore/community gap. */
  .vf-col--wide .vf-eyebrow{margin-bottom:0}
  .vf-col--explore{grid-area:explore;margin-top:30px}
  .vf-col--community{grid-area:community;margin-top:30px}
  .vf-desc{max-width:420px}
  .vf-wordmark{margin-top:56px}
}
@media (max-width:640px){
  .vf-inner{padding-inline:20px}
  .vf-top{padding:56px 0 40px;row-gap:40px}
  /* Community takes its own width so "WhatsApp Community ↗" stays on one
     line; Explore's short links live with the rest. */
  .vf-cols{grid-template-columns:minmax(0,1fr) auto;gap:14px 20px}
  .vf-wordmark{margin-top:44px;font-size:clamp(48px,18.6vw,120px)}
  .vf-legal{padding:56px 0 28px}
}

/* -- Floating back to top --------------------------------------------------
   Lives outside the footer as a fixed control; script.js toggles .is-visible
   while the footer is on screen. Collapsed it is a 44px circle showing only
   the arrow; hover / keyboard focus grows the 0fr label column so "Back to
   top" slides out to the left of the arrow. Same anchor handler as the nav
   links, so Lenis drives the scroll when it is running. */
.back-to-top{
  position:fixed;right:24px;bottom:24px;z-index:30;
  display:grid;grid-template-columns:0fr auto;column-gap:0;align-items:center;
  height:44px;padding:0 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(14,16,24,.82);color:#e2e8f0;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1),visibility 0s linear .35s,
             color .2s ease,border-color .2s ease,background .2s ease,
             grid-template-columns .35s cubic-bezier(.16,1,.3,1),column-gap .35s cubic-bezier(.16,1,.3,1);
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.back-to-top__label{
  min-width:0;overflow:hidden;white-space:nowrap;
  font-size:13px;font-weight:500;line-height:1;letter-spacing:.01em;
  opacity:0;transition:opacity .2s ease;
}
.back-to-top svg{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.back-to-top:hover,.back-to-top:focus-visible{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(24,26,36,.92)}
.back-to-top:focus-visible{grid-template-columns:1fr auto;column-gap:8px}
.back-to-top:focus-visible .back-to-top__label{opacity:1;transition-delay:.1s}
@media (hover:hover){
  .back-to-top:hover{grid-template-columns:1fr auto;column-gap:8px}
  .back-to-top:hover .back-to-top__label{opacity:1;transition-delay:.1s}
  .back-to-top:hover svg{transform:translateY(-2px)}
}
@media (max-width:640px){
  .back-to-top{right:16px;bottom:16px;height:40px;padding:0 11px}
}
@media (prefers-reduced-motion:reduce){
  .back-to-top,.back-to-top__label,.back-to-top svg{transition:none}
  .back-to-top:hover svg{transform:none}
}

/* ==========================================================================
   FINAL CTA · Spotlight card
   --------------------------------------------------------------------------
   Photo background (assets/cta-desk.webp) under a centre-weighted scrim that
   keeps the headline legible where the monitor is brightest. A 1px ring
   follows the pointer via --mx/--my (px, set from script.js). Layers are
   absolute + pointer-events:none, so the Figma-positioned copy and buttons
   above them are untouched at every breakpoint. Buttons invert (white
   primary, frosted secondary) so they read as the focal point over the busy
   chart.
   ========================================================================== */
.cta-card{
  --mx:50%;
  --my:38%;
  isolation:isolate;
  background:#0b0e16 url("assets/cta-desk.webp") center 42% / cover no-repeat;
  border:0;
  box-shadow:0 30px 70px -24px rgba(11,18,32,0.45);
  transition:box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.cta-card:hover{
  box-shadow:0 36px 80px -24px rgba(11,18,32,0.5);
}

/* Legibility scrim: darkest behind the copy, lifting toward the edges so the
   desk still reads as a photo. */
.cta-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(64% 80% at 50% 46%, rgba(5,7,12,0.86) 0%, rgba(5,7,12,0.66) 55%, rgba(5,7,12,0.42) 100%),
    linear-gradient(180deg, rgba(5,7,12,0.30) 0%, rgba(5,7,12,0.08) 30%, rgba(5,7,12,0.08) 70%, rgba(5,7,12,0.40) 100%);
  pointer-events:none;
}

/* z-index:-1 keeps every layer under the copy at all breakpoints: below
   1024px the children go position:static, and positioned layers would
   otherwise paint over them. isolation:isolate on the card keeps -1 above
   the card's own photo. */
.cta-card::before,
.cta-border{
  z-index:-1;
}

/* Pointer ring: a 1px line revealed through a masked padding box. */
.cta-border{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  padding:1px;
  background:radial-gradient(
    420px circle at var(--mx) var(--my),
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.45) 35%,
    transparent 74%
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:opacity .45s cubic-bezier(.16,1,.3,1);
}
.cta-card:hover .cta-border,
.cta-card:focus-within .cta-border{
  opacity:1;
}

/* Copy over the photo: white heading with a soft drop; subline in
   translucent white instead of slate grey. */
.cta-card .n-142-475{
  color:#fff;
  text-shadow:0 2px 28px rgba(0,0,0,0.55);
}
.cta-card .n-142-476{
  color:rgba(255,255,255,0.86);
  text-shadow:0 1px 12px rgba(0,0,0,0.5);
}

/* Primary: the blue gradient with a white label, same as the other
   primaries. Over the photo it only needs a dark drop at rest; hover
   brightens, lifts and adds the shared blue glow on top of that drop. */
.cta-card .n-142-478{
  background:var(--cta-gradient);
  box-shadow:var(--cta-edge),0 10px 30px -8px rgba(0,0,0,0.65);
  transition:filter .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1), transform .2s ease;
}
.cta-card .n-142-478:hover{
  background:var(--cta-gradient);
  filter:brightness(1.12);
  box-shadow:0 18px 40px -10px rgba(0,0,0,0.7), var(--cta-glow-hover);
  transform:translateY(-2px);
}
.cta-card .n-142-479{
  color:#fff;
  font-weight:600;
  letter-spacing:0.2px;
}
/* The button row is a 42px Figma frame with overflow:hidden; the hover lift
   and the pill's drop shadow need room outside it. */
.cta-card .n-142-477{overflow:visible}
@media(max-width:1024px){.cta-card .n-142-480{position:relative!important;left:auto!important;top:auto!important}}
/* Secondary: frosted white outline. */
.cta-card .n-142-480{
  background:rgba(255,255,255,0.08);
  box-shadow:none;
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  transition:background .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1);
}
/* Blue-gradient ring: the primary's sweep fills a pseudo-element, and a
   mask keeps only the 1px padding band. */
.cta-card .n-142-480::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius:inherit;
  background:var(--cta-gradient-ring);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  transition:padding .2s ease;
}
.cta-card .n-142-480:hover{
  background:rgba(255,255,255,0.16);
  box-shadow:0 8px 24px -8px rgba(var(--cta-rgb),0.45);
}
.cta-card .n-142-480:hover::before{padding:1.5px}
.cta-card .n-142-481{
  color:#fff;
}

@media (prefers-reduced-motion: reduce){
  .cta-card,.cta-border,
  .cta-card .n-142-478,.cta-card .n-142-480{transition:none}
}

/* ==========================================================================
   BEHIND VITTAARA
   --------------------------------------------------------------------------
   Portfolio-style "Meet" block. Left: the studio portrait on a 480x600
   rounded card. Right: two-tone display head, lead, body, the brand line
   and a 2x2 stat grid. Flow layout throughout; the Figma absolute boxes
   for this section are gone.
   ========================================================================== */
.about{
  padding:var(--section-pad) max(24px, calc((100% - 1200px) / 2));
  background:#010101;
  overflow:hidden;
}
.about-inner{
  display:grid;
  grid-template-columns:minmax(0, 480px) minmax(0, 1fr);
  gap:88px;
  align-items:center;
}

/* ── Portrait card ──────────────────────────────────────────────────────────
   480x600 rounded card (4:5). Tall enough to frame the copy column now that
   the head breaks "Meet / Harsh Bhagat." over two lines. The shot is supplied
   at 8:9 with its blue backdrop full-bleed, so object-fit:cover trims a
   sliver off each side and it still fills the card. */
.about-portrait{
  position:relative;
  width:480px;
  max-width:100%;
  aspect-ratio:4 / 5;
  margin:0;
  border-radius:28px;
  overflow:hidden;
  background:#0a0c11;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
.about-portrait picture,
.about-portrait img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
.about-portrait img{object-fit:cover}

/* ── Copy column ──────────────────────────────────────────────────────────── */
.about-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
/* The section pill opens the copy column, sitting directly over "Meet" so
   the eyebrow → head → lead stack reads as one left-aligned block. Under
   768px it is pulled ahead of the portrait and centred (see breakpoints). */
.about-eyebrow{display:flex;width:fit-content;margin:0 0 26px}
/* Head + social row. The icons sit on the name line visually but live
   outside the <h2>, so the heading (and the section it labels) still reads
   "Meet Harsh Bhagat" and not the icon labels too. --about-line is one
   heading line box (font-size x line-height from .section-heading); the row
   is that tall and centres its icons, so they centre on the name. */
.about-headline-block{
  --about-line:calc(48px * 1.1);
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:6px 18px;
  margin:0 0 20px;
}
/* "Meet" drops back so the name carries the line: two weights in one
   headline give the block its anchor without a second heading. The copy
   column is left-aligned, so the shared heading drops its centring here. */
.about-headline{
  margin:0;
  text-align:left;
}
.about-headline-soft{
  display:block;
  color:#6b7789;
  font-weight:500;
}
/* The name takes the CTA blue so the head reads "Meet / Harsh Bhagat" as
   a soft cue over a branded line. */
.about-headline-name{color:var(--cta)}
.about-lead{
  margin:0 0 16px;
  max-width:560px;
  color:#c8d2e0;
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:-0.1px;
}
.about-body{
  margin:0 0 22px;
  max-width:560px;
  color:#8b97a8;
  font-size:15px;
  font-weight:400;
  line-height:1.66;
}
/* Closing line: the brand statement, set a step up from the body in white
   so the column ends on it rather than trailing off. */
.about-tagline{
  margin:0;
  color:#fff;
  font-size:20px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:-0.4px;
}

/* ── Stat grid ──────────────────────────────────────────────────────────────
   2x2 under the brand line. Medium-weight values over quiet sentence-case
   labels; the values reveal glyph by glyph (script.js splits them into
   .stat-char spans and counts the leading number up). */
.about-stats{
  display:grid;
  /* Content-sized first column ("505K+" / "SEBI"); the second takes the
     rest of the block, so "NISM Series XV" never clips and the social
     column inside the "8+ Years" stat can sit flush with the right edge,
     in line with the paragraphs above. */
  grid-template-columns:auto 1fr;
  gap:24px 56px;
  width:100%;
  max-width:560px;
  margin:36px 0 0;
  padding:0;
  /* Revealed by its own observer (script.js) once the grid is on screen,
     independent of the section's entrance. */
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),
             transform .6s cubic-bezier(.16,1,.3,1);
}
.about-stats.is-revealed{
  opacity:1;
  transform:none;
}
.about-stat dt{
  display:flex;
  margin:0 0 6px;
  overflow:hidden;
  color:#fff;
  font-size:38px;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-1px;
  white-space:nowrap;
}
.about-stat dd{
  margin:0;
  color:#9a9a9a;
  font-size:14px;
  font-weight:400;
  line-height:20px;
}
.stat-chars{display:inline-block;white-space:nowrap}
.stat-char{
  display:inline-block;white-space:pre;
  opacity:0;transform:translateY(105%);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--s,0) * 110ms + var(--i,0) * 38ms);
  will-change:transform,opacity;
}
/* Counting number: right-aligned in a box the width of its final value so
   the suffix holds still while "0" grows into "505". */
.stat-num{
  min-width:calc(var(--digits,1) * 1ch);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
/* Brand-filled circles, white glyph, in the footer's brand colours. */
.about-socials{
  display:flex;
  align-items:center;
  gap:10px;
  height:var(--about-line);
  margin:0;
  padding:0;
  list-style:none;
}
.about-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgb(var(--brand-rgb));
  color:#fff;
  cursor:pointer;
  box-shadow:0 6px 16px -6px rgba(var(--brand-rgb),.55);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.about-social svg{display:block;width:20px;height:20px}
.about-social:hover,
.about-social:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 20px -6px rgba(var(--brand-rgb),.6);
  filter:brightness(1.06);
}
.about-social:focus-visible{outline:2px solid rgb(var(--brand-rgb));outline-offset:3px}
.about-social--whatsapp{--brand-rgb:37,211,102}
.about-social--youtube{--brand-rgb:255,0,51}
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Entrance ───────────────────────────────────────────────────────────────
   Same IntersectionObserver + .is-revealed contract as the other sections;
   per-element delay comes from the inline --r index in the markup. */
.about-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--r, 0) * 80ms);
  will-change:transform,opacity;
}
.about-portrait.about-reveal{
  transform:translateY(26px) scale(.97);
  transition-duration:.9s;
}
#about-harsh.is-revealed .about-reveal{
  opacity:1;
  transform:none;
}
.about-stats.is-revealed .stat-char{opacity:1;transform:translateY(0)}

/* ── Breakpoints ────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .about{padding:var(--section-pad) 32px}
  .about-inner{grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);gap:40px}
  .about-portrait{width:min(100%, 400px);margin:0 auto;border-radius:22px}
  .about-headline-block{--about-line:calc(40px * 1.12);margin-bottom:18px}
  .about-social{width:37px;height:37px}
  .about-social svg{width:18px;height:18px}
  .about-lead{font-size:16px}
  .about-body{font-size:14.5px;margin-bottom:20px}
  .about-tagline{font-size:18px}
  .about-stats{gap:20px 40px;margin-top:30px}
  .about-stat dt{font-size:32px;letter-spacing:-0.8px}
  .about-stat dd{font-size:13px;line-height:18px}
}
@media (max-width:767px){
  /* Stacked portrait and copy below the centred section pill. .about-copy
     dissolves into the grid, so the pill becomes a grid item: order:-1
     lifts it ahead of the portrait and the auto margins centre it. */
  .about-inner{grid-template-columns:1fr;gap:0;justify-items:start}
  .about-copy{display:contents}
  .about-eyebrow{order:-1;margin:0 auto 20px}
  .about-portrait{width:min(84%, 340px);margin:0 auto 36px}
}
@media (max-width:640px){
  .about{padding:var(--section-pad) 20px}
  .about-lead{font-size:15.5px}
  .about-body{font-size:14px}
  .about-portrait{width:min(88%, 280px)}
  .about-headline-block{--about-line:calc(36px * 1.15)}
  .about-social{width:35px;height:35px}
  .about-stats{gap:18px 24px}
  .about-stat dt{font-size:30px}
}
@media (max-width:400px){
  .about-stat dt{font-size:27px;letter-spacing:-0.6px}
}

@media (prefers-reduced-motion:reduce){
  .about-reveal,.about-portrait.about-reveal,.about-stats{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .stat-char{opacity:1 !important;transform:none !important;transition:none !important}
  .about-social{transition:none}
  .about-social:hover,.about-social:focus-visible{transform:none}
}

/* ── Floating nav · compact frosted pill ───────────────────────────────────
   The pill hugs its contents and is centred, instead of stretching across
   the 1200px column. See-through glass in two tints: charcoal over the dark
   sections, with heavy blur + saturation so the hero smears through it, and
   translucent white over light sections (script.js adds .is-over-light).
   Both share the glass edge: a 1px border, a 1px top highlight and a soft
   drop shadow. */
.n-142-6{
  left:50%;top:18px;width:auto;height:58px;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:36px;
  padding:0 8px;
  background:rgba(16,18,26,0.52);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  /* A real border, not stacked shadow rings: it follows the radius exactly
     and stays aligned with the backdrop clip, which shadow rings do not. */
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22), 0 12px 40px -10px rgba(0,0,0,0.6);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.n-172-48.brand-lockup{position:static;left:auto;top:auto;height:auto}
.n-142-8{position:static;left:auto;top:auto;width:auto;height:auto;overflow:visible;display:flex;align-items:center;gap:20px}
.n-142-8 a{position:static;left:auto;top:auto;width:auto;height:auto}
.n-142-14{position:static!important;left:auto!important;right:auto!important;top:auto!important}

/* Text on charcoal glass */
.n-142-8 a,.brand-text-col .n-142-7,.brand-text-col .n-172-49{transition:color .3s ease}
.n-142-8 a{color:#c9ced8;font-weight:600}
.brand-text-col .n-142-7{color:#ffffff}
.brand-text-col .n-172-49{color:#98a1b3}
/* Hover on nav links is the pointer only: no underline (overrides the global
   a.text:hover), no brightness filter, and no colour rules anywhere. */
.n-142-8 a.action:hover{filter:none;text-decoration:none}

/* Over a light section: white glass, ink text */
.n-142-5.is-over-light .n-142-6{
  background:rgba(255,255,255,0.55);
  border-color:rgba(11,18,32,0.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.85), 0 12px 40px -10px rgba(15,23,42,0.28);
}
.n-142-5.is-over-light .n-142-8 a{color:#2b303b}
.n-142-5.is-over-light .brand-text-col .n-142-7{color:#0b0d12}
.n-142-5.is-over-light .brand-text-col .n-172-49{color:#5c6371}

/* Logo disc: a fixed 42px circle (the CTA's height) holding a 30px mark, so
   it sits in the pill's left end cap with the same 8px gap all round that
   the CTA has in the right one. White on the charcoal glass so the coloured
   mark keeps its contrast; transparent on the white glass. */
.brand-logo-ring{
  width:42px;height:42px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#ffffff;
  transition:background .3s ease;
}
.brand-logo-ring .brand-logo-img{width:30px;height:auto}
.n-142-5.is-over-light .brand-logo-ring{background:transparent}
@media (max-width:1024px){
  .n-142-6{padding:7px 8px !important}
}

/* Hide on scroll down, reveal on scroll up (script.js toggles .is-hidden).
   The wrapper moves, not the pill, so the pill's centring transform is
   untouched. Sticky positioning is unaffected by transform. */
.n-142-5{transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease}
.n-142-5.is-hidden{transform:translateY(-110px);opacity:0;pointer-events:none}
.n-142-5.is-hidden .n-142-6{pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .n-142-5{transition:none}
}

/* Tablet/mobile keep the full-width layout from the breakpoint rules; only
   the centring transform must be dropped there. */
@media (max-width:1024px){
  .n-142-6{transform:none;gap:16px}
}

/* ── Hero · light surface ───────────────────────────────────────────────────
   The hero (and its credential strip) sits on a pale ground with ink type;
   the trade deck stays dark on it, inverted surfaces with the same hierarchy. */
.n-142-4{background:#f4f5f9}

/* Depth without the neon: a top sheen and bottom shade on the hero, and a soft white spotlight
   behind the deck. Both hosts isolate so the -1 layers sit above their own background but under
   every child. */
.n-142-4,.hero-visual-container{isolation:isolate}
.n-142-4::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 42%),
    linear-gradient(0deg,rgba(11,13,18,.05) 0%,rgba(11,13,18,0) 32%);
}
.hero-visual-container::after{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;width:760px;height:760px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle closest-side,#fff 0%,rgba(255,255,255,.9) 28%,rgba(255,255,255,0) 66%);
}
@media(min-width:1025px){
  /* The deck rides 116px above its container on desktop; keep the stage centred under it. */
  .hero-visual-container::after{top:calc(50% - 116px)}
}

.n-142-21{color:#0b0d12}
.n-142-22{color:#4b5563}
.n-142-27{color:#0b0d12}
.n-142-26:hover .n-142-27{color:var(--vishnu-600)}
.n-142-28{color:#6b7280}

/* The deck: dark cards on the pale ground. (The Our Process "trade plan"
   board shows the same card in the light .signal-cards look.) */
.hero-deck-container{filter:drop-shadow(0 22px 40px rgba(15,23,42,.22))}
#hero-trade-deck .hero-trade-card{background:#14161c;border-color:rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(15,23,42,.28);cursor:pointer}
/* Phones show a three-card fan (script.js); the two cards it has no room for sit out. */
#hero-trade-deck .hero-trade-card.is-benched{display:none}
#hero-trade-deck .trade-card-topbar{background:linear-gradient(100deg,#1c1f27,#14161c);border-color:#14161c}
#hero-trade-deck .trade-perf-badge{color:#a3a8b4}
#hero-trade-deck .perf-down{color:#f87171}
#hero-trade-deck .perf-up{color:#34d399}
#hero-trade-deck .trade-time{color:#6f7480}
#hero-trade-deck .trade-card-body{background:#14161c}
#hero-trade-deck .nifty-badge-icon{background:#f4f5f8}
#hero-trade-deck .asset-name{color:#b6bac5}
#hero-trade-deck .asset-strike{color:#f5f6f8}
#hero-trade-deck .tag-buy{background:rgba(16,185,129,.16);color:#34d399}
#hero-trade-deck .tag-sep{color:#5c6170}
#hero-trade-deck .tag-type{color:#a3a8b4}
#hero-trade-deck .potential-box{background:#1c1f27;border-color:rgba(255,255,255,.08)}
#hero-trade-deck .potential-label{color:#a3a8b4}
#hero-trade-deck .potential-value{color:#34d399}
#hero-trade-deck .trade-slider-track::before{border-top-color:rgba(255,255,255,.18)}
#hero-trade-deck .node-sl{color:#f87171;background:#4a2028;border-color:rgba(239,68,68,.5)}
#hero-trade-deck .node-entry{background:#123a31;border-color:rgba(16,185,129,.55)}
#hero-trade-deck .node-tp{color:#34d399;background:#123a31;border-color:rgba(16,185,129,.55)}
#hero-trade-deck .track-line.line-solid-green{background:#10b981}
#hero-trade-deck .node-mid{background:#123a31;border-color:#10b981}
#hero-trade-deck .current-dot{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.25)}
#hero-trade-deck .current-pulse{background:rgba(16,185,129,.4)}
#hero-trade-deck .metric-label{color:#8a8f9c}
#hero-trade-deck .info-icon{color:#6f7480}
#hero-trade-deck .metric-val{color:#f5f6f8}
#hero-trade-deck .btn-trade-view{background:#1c1f27;border-color:rgba(255,255,255,.14);color:#d3d6de}
#hero-trade-deck .btn-trade-action{background:#10b981;border-color:#10b981}
.deck-dot{background:rgba(11,13,18,.14)}

/* Hairline structure for the credentials row: a rule above and dividers between items. */
.credentials-grid{position:relative}
.credentials-grid::before{
  content:"";position:absolute;left:0;right:0;top:-28px;height:1px;
  background:linear-gradient(90deg,rgba(11,13,18,0),rgba(11,13,18,.14) 18%,rgba(11,13,18,.14) 82%,rgba(11,13,18,0));
}
.credential{position:relative}
.credential + .credential::before{
  content:"";position:absolute;left:-20px;top:8px;bottom:8px;width:1px;
  background:rgba(11,13,18,.1);
}
@media(max-width:1024px){
  .credentials-grid::before{top:-12px}
  .credential + .credential::before{left:-12px}
  .credential:nth-child(odd)::before{display:none}
}
@media(max-width:480px){
  .credentials-grid::before{top:-8px}
  .credential + .credential::before{left:-8px}
}
.credential-value{color:#0b0d12}
.credential h3{color:#4b5563}
.credential-note{color:#6b7280}
.credentials-verify{color:var(--vishnu-600)}
.credentials-verify:hover{color:var(--vishnu-700)}

/* ==========================================================================
   FINAL CTA · Trade chips + scroll entrance
   --------------------------------------------------------------------------
   Three glass chips float over the desk photo showing the shape of a trade
   (levels, an update, the risk line). Content is illustrative and tagged
   "Sample". Desktop: absolutely placed in the side thirds, clear of the
   600px copy column. <=1024px they are hidden: the card ends at the buttons.

   Entrance: script.js adds .cta-animate (so the hidden state only exists
   when JS runs) and .is-revealed when the card scrolls into view. Card
   settles from 96%, copy staggers, chips last, then the float loop starts.
   ========================================================================== */
.cta-chips{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.cta-chip{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:150px;
  padding:11px 13px;
  border-radius:12px;
  background:rgba(10,13,20,0.62);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14), 0 16px 40px -14px rgba(0,0,0,0.8);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  color:#fff;
  font-family:"Inter",Arial,sans-serif;
  font-size:12px;
  line-height:1.5;
  text-align:left;
  animation:cta-chip-float var(--dur,6s) ease-in-out infinite;
}
.cta-chip-levels{left:5.5%;top:17%}
.cta-chip-update{right:6%;top:15%}
.cta-chip-risk{right:9%;bottom:14%}

.cta-chip-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:600;
  font-size:12px;
}
.cta-chip-tag{
  font-size:9px;
  font-weight:500;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8c97ab;
  padding:4px 6px;
  border-radius:4px;
  background:rgba(255,255,255,0.07);
}
.cta-chip-rows{
  display:grid;
  grid-template-columns:auto auto;
  gap:3px 14px;
  margin:0;
}
.cta-chip-rows dt{color:#8c97ab;margin:0}
.cta-chip-rows dd{
  margin:0;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.cta-chip-line{color:rgba(255,255,255,0.85)}
.cta-chip-line strong{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.cta-chip-up{color:#5ee0a0}
.cta-chip-foot{
  display:flex;
  justify-content:space-between;
  font-size:10.5px;
  color:#8c97ab;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
@keyframes cta-chip-float{
  0%,100%{translate:0 0}
  50%{translate:0 -5px}
}

/* Entrance. The .node base sets transform-origin:0 0; the settle needs the
   card to scale about its centre. */
.cta-card{transform-origin:50% 50%}
.cta-card.cta-animate{
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1),
             box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.cta-card.cta-animate:not(.is-revealed){
  opacity:0;
  transform:scale(.96) translateY(14px);
}
.cta-card.cta-animate .n-142-475,
.cta-card.cta-animate .n-142-476,
.cta-card.cta-animate .n-142-477{
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.cta-card.cta-animate .n-142-475{transition-delay:.18s}
.cta-card.cta-animate .n-142-476{transition-delay:.3s}
.cta-card.cta-animate .n-142-477{transition-delay:.42s}
.cta-card.cta-animate:not(.is-revealed) .n-142-475,
.cta-card.cta-animate:not(.is-revealed) .n-142-476,
.cta-card.cta-animate:not(.is-revealed) .n-142-477{
  opacity:0;
  transform:translateY(14px);
}
/* Chips wait for the copy, stagger in via --d, then the float loop starts. */
.cta-card.cta-animate .cta-chip{
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(.55s + var(--d,0s));
  animation-delay:calc(1.25s + var(--d,0s));
}
.cta-card.cta-animate:not(.is-revealed) .cta-chip{
  opacity:0;
  transform:translateY(10px) scale(.96);
  animation:none;
}

/* Tablets and phones: no chips, the card ends at the buttons. */
@media (max-width:1024px){
  .cta-chips{display:none}
}

@media (prefers-reduced-motion: reduce){
  .cta-chip{animation:none}
  .cta-card.cta-animate,
  .cta-card.cta-animate .n-142-475,
  .cta-card.cta-animate .n-142-476,
  .cta-card.cta-animate .n-142-477,
  .cta-card.cta-animate .cta-chip{transition:none}
}


/* ── Behind Vittaara · light surface ───────────────────────────────────────
   White ground, ink heading, grey copy column; the portrait card keeps its
   blue-lit ground. */
#about-harsh{background:#ffffff}
#about-harsh .section-heading{color:#0b1220}
/* The frosted eyebrow on white: ink-tinted glass with an ink label and a
   faint ink shadow, since white glass on a white ground has no edge. */
#about-harsh .section-pill{
  background:rgba(11,18,32,.06);
  border-color:rgba(11,18,32,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 6px 14px -6px rgba(15,23,42,.18);
  color:#0b1220;
}
.about-headline-soft{color:#6b7280}
.about-lead{color:#1f2937}
.about-body{color:#4b5563}
.about-tagline,
.about-stat dt{color:#0b1220}
.about-stat dd{color:#6b7280}

/* ==========================================================================
   VIEWPORT FIT
   --------------------------------------------------------------------------
   Appended last so it wins over the breakpoint blocks above. Three ranges the
   Figma export did not cover, plus the tablet band between the two designed
   layouts (390 mobile / 834 tablet):

   ≥1025   the fixed 1440 desktop canvas zooms to the viewport (--fit, set
           pre-paint by the head script and kept fresh by script.js): down
           on laptops instead of clipping on the right, up on large displays
           to a 1.5× cap. Lengths that must stay viewport-sized (the 100vh
           pinned stages) divide by --fit to undo the zoom.
   ≥1441   past the cap the canvas stays centred and each section's ground
           bleeds to the viewport edge instead of showing the body colour in
           the gutters.
   641–1024  the tablet nav, hero, audience cards and process hub, which the
           1024 block sized for 834px only.
   ≤767    the pill's links move into a hamburger menu; ≤640 the CTA too.
   ========================================================================== */
:root{--fit:1}

/* -- ≥1025 · desktop fit -------------------------------------------------- */
.page[data-fit]{zoom:var(--fit)}
@media (min-width:1025px){
  .n-142-80{height:calc(100vh / var(--fit) + var(--trades-travel,0px))}
  .n-142-81{height:calc(100vh / var(--fit))}
  .n-142-366.community{height:calc(300vh / var(--fit))}
  .community-stage{height:calc(100vh / var(--fit))}
}

/* -- ≥1441 · full-bleed section grounds ----------------------------------- */
/* Every section clips its own content, so the only thing that can spill past
   the canvas is this shadow: two unblurred copies of the section box, one on
   each side, in the section's own ground colour. The root hides the
   horizontal overflow (on html, not body, so body never becomes the scroll
   container and the sticky nav / pinned stages keep working). */
@media (min-width:1441px){
  html{overflow-x:hidden}
  .page{overflow-x:visible}
  /* Fallback is #010101: every section we haven't named below (the legal
     pages' .doc-head/.doc-body, and any future section) is that same near-
     black, so an unlisted section still bleeds the right colour instead of
     showing the body's --dark (#07080a - close, but a visible seam) through
     the gutters. */
  .page > .section,.page > .site-footer{
    box-shadow:1440px 0 0 var(--bleed,#010101),-1440px 0 0 var(--bleed,#010101);
  }
  #who-its-for,#trades,#why-vittaara,#our-process,#footer,#get-trades,#how-it-works,#faq,.tr-head,.tr-log{--bleed:#010101}
  #community-scroll{--bleed:#ffffff}
  #home{--bleed:#f4f5f9}
  #about-harsh{--bleed:#ffffff}
  /* The hero's ambient glow and the pinned trades row may run into the
     gutters instead of stopping dead at the 1440 line. clip-path keeps the
     stage's vertical clip (a short viewport must not spill into neighbours)
     while opening the sides; script.js measures the row's travel against the
     visible run, so the last card still parks at the viewport edge. */
  #home{overflow:visible}
  .n-142-81{overflow:visible;clip-path:inset(0 -100vw)}
  /* The light hero's texture layer (dot grid, top light, bottom shade,
     vignette) is sized to the canvas, so at the cap it stopped where the
     flat bleed colour began - a visible seam down each side. It widens by
     the gutters instead. Inside the zoomed page 100vw is the viewport in
     unzoomed px, hence the division by --fit. */
  #home::after{left:calc((1440px - 100vw / var(--fit)) / 2);right:calc((1440px - 100vw / var(--fit)) / 2)}
  /* Same problem, the footer's base glow: overflow:hidden on .site-footer
     hard-clips the blurred ::after exactly at the 1440 canvas edge, so past
     the cap that clip line sits mid-screen instead of off-viewport - a
     visible rectangle around the glow instead of it fading into the flat
     bleed colour. Open the footer up and widen the glow the same way. */
  .site-footer{overflow:visible}
  .site-footer::after{left:calc((1440px - 100vw / var(--fit)) / 2);right:calc((1440px - 100vw / var(--fit)) / 2)}
  /* Same problem again: the community cloud's cards already scatter past the
     1440 canvas edge on purpose (the cloud reads as continuing off-frame),
     but overflow:hidden on the stage hard-clips them right at that edge, so
     past the cap they're cut off well short of the gutter instead of fading
     into it. Vertical clip (the pinned stage) stays; only the sides open. */
  .community-stage{overflow:visible;clip-path:inset(0 -100vw)}
}

/* -- 641–1024 · tablet band ------------------------------------------------ */
/* Nav: brand + six links + CTA need ~810px inside the pill, so under 900px
   the tagline drops, the links tighten and the CTA slims until it fits. */
@media (min-width:641px) and (max-width:900px){
  .n-142-6{padding:6px 8px 6px 14px!important}
  .brand-text-col .n-172-49{display:none!important}
  .brand-logo-ring{width:36px;height:36px}
  .brand-logo-ring .brand-logo-img{width:26px}
  .n-142-8{gap:11px!important}
  .n-142-8 a{font-size:11.5px!important}
  .n-142-14{flex:0 0 auto!important;min-width:0!important;height:36px!important;padding:0 14px!important}
  .n-142-15{font-size:12px!important}
}
/* Under 768px even that needs ~670px, so the links move into the phone
   menu (below) and the pill keeps the brand, the CTA and the hamburger. */
@media (min-width:641px) and (max-width:767px){
  .n-142-8{display:none!important}
  .n-142-14{margin-left:auto!important;margin-right:6px!important} /* CTA sits by the hamburger, not mid-pill */
}

/* -- ≤1024 · nav over the first section ----------------------------------- */
/* On desktop the wrapper is height:0 and the pill floats over the hero. The
   tablet/phone blocks give it padding and a pill in flow, so it took 88-94px
   of real height above #home with nothing behind it but the body colour - a
   black strip over the light hero. The first section now starts under the
   nav (negative margin = the wrapper's height) and grows the same amount of
   top padding, so its own ground reaches the viewport edge. --nav-h tracks
   the wrapper: vertical padding + the pill (58px at 901-1024, 56px below). */
@media (max-width:1024px){
  :root{--nav-h:94px}
  .n-142-5{margin-bottom:calc(-1 * var(--nav-h))}
  #home .n-142-16{padding-top:calc(32px + var(--nav-h))!important}
}
@media (max-width:900px){
  :root{--nav-h:92px}
  #home .n-142-16{padding-top:calc(24px + var(--nav-h))!important}
}
@media (max-width:640px){
  :root{--nav-h:88px}
}

/* -- ≤767 · phone menu ---------------------------------------------------- */
/* Hamburger: a 40px disc at the pill's right end, three 18px bars that fold
   into a cross while the menu is open. Same ink as the pill's links in each
   glass tint. */
.nav-toggle{
  display:none;flex:0 0 auto;
  width:40px;height:40px;margin-left:2px;border-radius:50%;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  color:#e6e9ef;cursor:pointer;
  transition:background .2s ease,color .3s ease;
}
.nav-toggle:hover{background:rgba(255,255,255,.08)}
.nav-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.nav-toggle-bar{
  display:block;width:18px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease;
}
.n-142-5.is-menu-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.n-142-5.is-menu-open .nav-toggle-bar:nth-child(2){opacity:0;transform:scaleX(.4)}
.n-142-5.is-menu-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.n-142-5.is-over-light .nav-toggle{color:#1c2130}
.n-142-5.is-over-light .nav-toggle:hover{background:rgba(11,18,32,.06)}

/* Menu: a second glass card under the pill, the six links as 48px rows and
   the CTA as a full-width pill. Invisible (not display:none) so it can fade
   and slide in; visibility keeps it out of the tab order while closed. */
.nav-menu{
  display:none;position:absolute;left:20px;right:20px;top:calc(100% - 6px);
  flex-direction:column;gap:2px;padding:8px;border-radius:24px;
  background:rgba(16,18,26,.82);
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 48px -12px rgba(0,0,0,.65);
  pointer-events:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s,
             background .3s ease,border-color .3s ease;
}
.n-142-5.is-menu-open .nav-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav-menu-link{
  display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:16px;
  color:#e6e9ef;font-family:"Inter",Arial,sans-serif;font-size:16px;font-weight:600;line-height:1.2;
  transition:background .2s ease,color .2s ease;
}
.nav-menu-link:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.nav-menu-link:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.nav-menu-cta{
  display:flex;align-items:center;justify-content:center;
  height:46px;margin-top:6px;border-radius:999px;
  background:var(--cta-gradient);color:#fff;
  font-family:"Inter",Arial,sans-serif;font-size:13.5px;font-weight:700;letter-spacing:.5px;line-height:1;
  box-shadow:var(--cta-edge),0 6px 20px -4px rgba(var(--cta-rgb),.5);
  transition:filter .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1);
}
.nav-menu-cta:hover{background:var(--cta-gradient);filter:brightness(1.1);box-shadow:var(--cta-glow-hover)}
/* Over a light section: white glass, ink text (script.js adds .is-over-light). */
.n-142-5.is-over-light .nav-menu{
  background:rgba(255,255,255,.88);border-color:rgba(11,18,32,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 18px 48px -12px rgba(15,23,42,.3);
}
.n-142-5.is-over-light .nav-menu-link{color:#2b303b}
.n-142-5.is-over-light .nav-menu-link:hover{background:rgba(11,18,32,.05);color:var(--vishnu-700)}
@media (max-width:767px){
  .nav-toggle{display:inline-flex}
  .nav-menu{display:flex;left:32px;right:32px;top:calc(100% - 8px)}
}
@media (max-width:640px){
  /* Phones: the hamburger stands in for the CTA, which moves into the menu. */
  .n-142-14{display:none!important}
  .n-142-6{padding:6px 6px 6px 18px!important}
  .nav-menu{left:20px;right:20px;top:calc(100% - 6px)}
}
@media (prefers-reduced-motion:reduce){
  .nav-toggle-bar,.nav-menu{transition:none}
}

/* Hero, 901–1024: two columns, but the deck column is the card's own width
   (414 + the stack spread) and the copy takes what is left, sized by its own
   container so the three headline lines never run under the card. */
@media (min-width:901px) and (max-width:1024px){
  .n-142-17{align-items:center!important;gap:24px!important}
  /* z-index lifts the copy over the deck's drop shadow, as the desktop rule does. */
  .n-142-18{flex:1 1 0!important;width:auto!important;min-width:0!important;z-index:1}
  .n-142-29,.hero-visual-container{flex:0 0 470px!important;width:470px!important}
  /* The front card sits 45px left of the deck centre (the stack fans to the
     right), so the deck shifts right to keep it clear of the copy. */
  .hero-deck-container{translate:20px 0}
  .n-142-21{font-size:min(58px,8.6cqw)!important}
}
/* Hero, 481–900: stacked and centred - copy block on top, deck beneath.
   From 481px the phone block's full-width stacked buttons would be 440px+
   wide, so the pair sits inline and centred instead. */
@media (min-width:481px) and (max-width:900px){
  .n-142-16{padding:24px 32px 48px!important}
  .n-142-17{flex-direction:column!important;align-items:center!important;gap:36px!important}
  .n-142-18{width:100%!important;max-width:620px!important;align-items:center!important;text-align:center!important}
  .n-142-21{font-size:min(52px,8.2cqw)!important;line-height:1.12!important;letter-spacing:-1px!important;text-align:center!important}
  .n-142-22,.n-142-28{text-align:center!important}
  .n-142-23{flex-direction:row!important;width:auto!important;justify-content:center!important;gap:12px!important}
  .n-142-24,.n-142-26{width:auto!important;padding:0 26px!important}
  .n-142-29,.hero-visual-container{width:100%!important;max-width:440px!important;margin:0 auto!important}
}
/* Tablets: the front card sits left of the deck centre (the stack fans to
   the right), so the deck reads left of the copy above it; nudge it right. */
@media (min-width:641px) and (max-width:900px){
  .hero-deck-container{translate:5vw 0}
}
@media (min-width:481px) and (max-width:640px){
  .n-142-16{padding:24px 20px 40px!important}
  /* The fan's back card reaches ~90px past the front card's left edge and the
     front card's tilt adds ~14px on the right (script.js), so leave room for both. */
  .signal-cards .hero-trade-card{width:calc(100vw - 130px);max-width:414px}
}

/* Audience cards: fluid three-up (two-up plus one centred when narrow) with
   the desktop 3:4 proportion, and the copy pinned to the bottom edge rather
   than at the desktop card's fixed 331px offset, which the shorter cards
   were clipping. */
@media (max-width:1024px){
  .audience-grid,.n-142-59{
    display:flex!important;flex-wrap:wrap!important;justify-content:center!important;
    align-items:stretch!important;gap:20px!important;
  }
  .audience-card,.n-142-60,.n-142-72,.n-142-66{
    flex:1 1 calc((100% - 40px) / 3)!important;min-width:210px!important;max-width:340px!important;
    width:auto!important;height:auto!important;aspect-ratio:3 / 4!important;
  }
  .audience-copy{top:auto!important;bottom:22px!important;left:20px!important;right:20px!important;gap:8px}
  .audience-copy p{font-size:13px;line-height:19px}
}
@media (min-width:481px) and (max-width:640px){
  /* Two-up plus one centred, like the tablet band, instead of one 320px column. */
  .audience-grid,.n-142-59{flex-direction:row!important;gap:20px!important}
}
@media (max-width:480px){
  .audience-grid,.n-142-59{align-items:center!important}
  .audience-card,.n-142-60,.n-142-72,.n-142-66{
    flex:0 0 auto!important;width:100%!important;max-width:320px!important;aspect-ratio:320 / 380!important;
  }
}

/* About stats, 768–900: the copy column is ~360px and "505K+" + "NISM
   Series XV" + a 40px gap is 370, so the gap tightens. */
@media (min-width:768px) and (max-width:900px){
  .about-stats{gap:20px 28px}
}

/* -- ≤640 · phones ------------------------------------------------------- */
/* Trade-call card labels: 10px, and allowed to wrap, so "Closing SL (Daily)"
   never runs into the next column on a 314px card. */
@media (max-width:640px){
  .signal-cards .metric-label{display:block;font-size:10px;line-height:14px;white-space:normal}
  .signal-cards .info-icon{font-size:10px;vertical-align:0}
  .signal-cards .trade-time{font-size:10px}
  /* Legal line clears the floating back-to-top pill (40px + 16px inset). */
  .vf-legal{padding-bottom:76px}
}
@media (max-width:360px){
  .signal-cards .trade-card-topbar{flex-wrap:wrap;row-gap:2px}
  .signal-cards .btn-trade-view,.signal-cards .btn-trade-action{padding:8px 6px;font-size:13px}
  /* "NISM Series XV" + "505K+" + the column gap must fit 280px. */
  .about-stats{gap:18px 20px}
  .about-stat dt{font-size:24px;letter-spacing:-0.5px}
}

/* ==========================================================================
   OUR PROCESS · stacked steps
   --------------------------------------------------------------------------
   #our-process is the section wrapper (nav and footer anchors land on it and
   it carries the ground the floating nav reads); .process-stack is the block.

   Static layout first, every width, no JS needed: each step is a row, photo
   left and card right, one column on phones. script.js adds .ps-pinned from
   641px (tablets and desktop; a stage under 760px tall, a phone on its side,
   stays static) without reduced motion, which turns the block into a 450vh
   scroll run with a sticky 100vh stage:

     cards    a pile on the right. Passed steps stack at the top, each
              reduced to its --ps-tab strip (number + name), with the
              current card open beneath them at --ps-h. The next card
              waits below the stage (out of view) and scrolls up over the
              open one as the user scrolls, landing at j·tab; nothing is
              shown for steps that have not arrived yet.
     photos   one stack in the left column on the same footprint as the
              pile: script.js sets --ps-fill to the pile's current height,
              and the dark base (.ps-steps::before, which also carries the
              shadow) and every frame's clip follow it, so the two columns
              share their top and bottom edges at every scroll position.
              A frame is transparent and clips its img, so an arriving
              photo wipes up inside the footprint over the one before it
              (script.js slides the img from 100% to 0); the covered photo
              dims and eases back a touch underneath (--dim, img scale).

   --ps-h follows the viewport so heading + pile + open card fit in 100vh.
   ========================================================================== */
#our-process{background:#010101;overflow:visible}

.process-stack{
  position:relative;
  width:100%;
  padding:var(--section-pad) 40px;
  color:#0b1220;
  font-family:Inter,Arial,sans-serif;
}
.ps-stage{width:min(1120px,100%);margin:0 auto}
.ps-head{margin-bottom:48px}
.ps-steps{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:24px 32px;
  align-items:stretch;
}
.ps-step{display:contents}

/* Photo frame. The img is pinned to the box (the box's height is set by
   aspect-ratio here and by the stack in pinned mode). ::before is a 1px
   inner ring so the dark photo has an edge on white; ::after is the
   depth dim the deck uses, off until script.js sets --dim. */
/* The frame takes each board's own proportion (--ah on the step is the
   board's height at 592 wide), top-aligned in its row, so the image fills
   it exactly. It must not stretch: stretched with an aspect-ratio, Chrome
   derives the width from the height and the frame overflows under the
   card. */
.ps-media{
  grid-column:1;grid-row:var(--i);
  align-self:start;
  position:relative;margin:0;
  aspect-ratio:592 / var(--ah,400);
  border-radius:18px;overflow:hidden;
  background:#0b0e15;
  box-shadow:0 24px 48px -24px rgba(11,18,32,.45),0 1px 2px rgba(11,18,32,.12);
}
/* The visual is live markup drawn at 592px, the column's width on the 1440
   canvas, and scaled to the frame's width (tan(atan2()) is the unitless
   ratio of two lengths). .ps-slide is what script.js moves. */
.ps-slide{position:absolute;inset:0;container-type:inline-size}
.ps-art{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(tan(atan2(100cqw,592px)))}
.ps-media::before,.ps-media::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
}
.ps-media::before{z-index:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ps-media::after{z-index:2;background:#0a0c12;opacity:var(--dim,0)}

/* Card: header strip (number + name) then the body. */
.ps-card{
  grid-column:2;grid-row:var(--i);
  position:relative;
  display:flex;flex-direction:column;
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(11,18,32,.08),0 18px 40px -24px rgba(11,18,32,.35);
}
.ps-card-head{
  display:flex;align-items:center;gap:14px;
  padding:14px 22px;
}
.ps-num{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--cta-gradient);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 rgba(1,35,95,.4),0 4px 10px -4px rgba(11,18,32,.5);
  color:#ffffff;
  font-size:11.5px;font-weight:700;line-height:1;letter-spacing:.3px;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  transition:background-color .3s ease,box-shadow .3s ease,color .3s ease;
}
.ps-title{
  margin:0;
  color:#0b1220;
  font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-.3px;
  transition:color .3s ease;
}
.ps-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ps-card-body{
  flex:1 1 auto;
  display:flex;flex-direction:column;gap:16px;
  padding:2px 22px 22px;
}
.ps-lede{margin:0;color:#374151;font-size:16px;line-height:1.55}
.ps-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ps-checks li{
  position:relative;padding-left:27px;
  color:#0b1220;font-size:14.5px;line-height:1.45;
}
.ps-checks li::before{
  content:"";position:absolute;left:0;top:1px;
  width:18px;height:18px;border-radius:50%;
  background:rgba(var(--vishnu-rgb),.10)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.4l2.3 2.3 4.6-5' fill='none' stroke='%231F5EFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 10px no-repeat;
}
.ps-progress{
  margin:auto 0 0;
  display:flex;align-items:center;gap:12px;
  color:#6b7280;
  font-size:11.5px;font-weight:500;line-height:1;letter-spacing:.04em;text-transform:uppercase;
}
.ps-progress span{flex:0 0 auto}
.ps-progress i{
  position:relative;flex:1 1 auto;height:3px;border-radius:2px;overflow:hidden;
  background:rgba(11,18,32,.08);
}
/* The fill is the step's share of the track, and carries the primary CTA's
   blue sweep however short it is. */
.ps-progress i::after{
  content:"";position:absolute;inset:0 auto 0 0;border-radius:inherit;
  width:calc(100% * var(--w,1) / 6);
  background:var(--cta-gradient);
}

@media (max-width:1024px){
  .process-stack{padding:var(--section-pad) 32px}
  .ps-head{margin-bottom:36px}
  .ps-steps{gap:20px 24px}
  .ps-title{font-size:17px}
  .ps-lede{font-size:15px}
}
/* Phones: photo and card fuse into one block per step. The step is a real
   box here (a flex column, not display:contents) so it can carry the ring:
   a hairline by default and, on the step nearest the middle of the screen
   (.is-current, set by script.js), the blue glow the Why Vittaara cards
   show on hover. The ring's colours are set with the other dark surfaces
   further down. */
@media (max-width:640px){
  .process-stack{padding:var(--section-pad) 20px}
  .ps-head{margin-bottom:32px}
  .ps-steps{grid-template-columns:minmax(0,1fr);gap:0}
  .ps-step{
    display:flex;flex-direction:column;
    margin-bottom:20px;
    border-radius:18px;
    transition:box-shadow .35s cubic-bezier(.16,1,.3,1);
  }
  .ps-media{
    width:100%;
    border-bottom-left-radius:0;border-bottom-right-radius:0;
    box-shadow:none;
  }
  .ps-media::before{box-shadow:none}
  .ps-card{
    border-top-left-radius:0;border-top-right-radius:0;
  }
  .ps-card-head{padding:14px 18px}
  .ps-card-body{padding:0 18px 18px}
}

/* -- Pinned stage (script.js adds .ps-pinned from 641px) ------------------ */
@media (min-width:641px){
  .process-stack.ps-pinned{
    --ps-tab:52px;
    /* Fixed: the six boards (.ps-art, below) are drawn to exactly this
       frame (296px + 52px a passed step), so the visual column never crops
       or pads them. The copy fits the card at 296. */
    --ps-h:296px;
    --ps-stack:calc(5 * var(--ps-tab) + var(--ps-h));
    height:calc(450vh / var(--fit));
    /* The stage centres its content in the viewport: 24px pad plus half of
       whatever the photo clamp leaves over (492 = 2 × 24 pad + 184 head +
       five 52px tabs; the head is pill 36 + 16 + h2 53 + 16 + lede 23 +
       40 margin). That inset is a viewport framing, not the section
       rhythm, so the stack pads the difference to --section-pad outside
       the stage: at pin-in and hand-off the sections either side sit
       2 × --section-pad away, like everywhere else. */
    padding:max(0px,calc(var(--section-pad) - 24px - (100vh / var(--fit) - 492px - var(--ps-h)) / 2)) 0;
  }
  .ps-pinned .ps-stage{
    position:sticky;top:0;
    width:100%;max-width:none;margin:0;
    height:calc(100vh / var(--fit));
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:24px 40px;
    overflow:hidden;
  }
  .ps-pinned .ps-head{margin-bottom:40px}
  .ps-pinned .ps-steps{
    position:relative;
    width:min(1120px,100%);
    grid-template-columns:minmax(0,1fr) 480px;
    grid-template-rows:var(--ps-stack);
    gap:0 48px;
  }
  /* The photo footprint: dark base + shadow, once, under every frame, as
     tall as the pile (--ps-fill). Both grid lines explicit here and below:
     for an absolutely positioned grid item an auto end line means the
     container's padding edge, not the next line. */
  .ps-pinned .ps-steps::before{
    content:"";
    grid-column:1 / 2;grid-row:1 / 2;
    position:absolute;left:0;right:0;top:0;
    height:var(--ps-fill,var(--ps-stack));
    border-radius:18px;
    background:#0b0e15;
    box-shadow:0 30px 60px -30px rgba(11,18,32,.55),0 1px 2px rgba(11,18,32,.12);
  }
  /* Every visual fills the left cell and is clipped to the pile's height,
     so the board itself never moves: the frame just reveals more of it as
     the pile grows. */
  .ps-pinned .ps-media{
    grid-column:1 / 2;grid-row:1 / 2;
    position:absolute;inset:0;
    /* Stretch between the insets: the static rule's start alignment would
       size an abspos item to its (empty) content instead. */
    align-self:auto;
    aspect-ratio:auto;
    z-index:var(--i);
    background:transparent;
    box-shadow:none;
    clip-path:inset(0 0 calc(var(--ps-stack) - var(--ps-fill,var(--ps-stack))) 0 round 18px);
    will-change:opacity;
  }
  /* The ring and the dim end where the clip does, so the frame keeps its
     bottom edge instead of the ring running on into the clipped part. */
  .ps-pinned .ps-media::before,.ps-pinned .ps-media::after{
    bottom:calc(var(--ps-stack) - var(--ps-fill,var(--ps-stack)));
  }
  .ps-pinned .ps-slide{will-change:transform}
  /* Before script.js's first frame only the first visual is in its frame. */
  .ps-pinned .ps-step:not(:first-child) .ps-slide{transform:translate3d(0,100%,0)}
  /* Every card fills the right cell's width at the open height and is moved
     by transform alone. Before script.js's first frame the first card rests
     and the others wait below the stage, which is the p = 0 state. */
  .ps-pinned .ps-card{
    grid-column:2 / 3;grid-row:1 / 2;
    position:absolute;left:0;right:0;top:0;
    height:var(--ps-h);
    z-index:var(--i);
    will-change:transform;
    transform:translate3d(0,calc(100vh / var(--fit)),0);
    /* Ring inset and no upward shadow: a card's rounded top corners leave
       a notch on the card beneath, and anything drawn outside the box
       curves through it as a dark arc. */
    box-shadow:inset 0 0 0 1px rgba(11,18,32,.08),
               0 18px 40px -24px rgba(11,18,32,.35);
  }
  .ps-pinned .ps-step:first-child .ps-card{transform:none}
  /* The header is exactly the tab strip: it must not shrink when the body
     is taller than the card allows (a column flexbox would let it), or the
     next card, which lands tab px lower, leaves the body showing. */
  .ps-pinned .ps-card-head{
    flex:0 0 var(--ps-tab);
    height:var(--ps-tab);
    padding:0 22px;
  }
  /* A piled header jumps to its step (script.js); the open one is inert. */
  .ps-pinned .ps-card:not([data-state="open"]) .ps-card-head{cursor:pointer}
  /* Sized to fit under the strip at the 296px minimum card. */
  .ps-pinned .ps-card-body{padding-top:0;padding-bottom:18px;gap:12px;overflow:hidden}
  .ps-pinned .ps-lede{font-size:15px;line-height:1.5}
  .ps-pinned .ps-checks{gap:7px}
  .ps-pinned .ps-checks li{font-size:14px}
  /* Once the next card sits on it nothing below the strip can show anyway;
     switching the body off makes that true to the pixel. */
  .ps-pinned .ps-card.is-covered .ps-card-body{visibility:hidden}
  /* Passed cards: a tick in place of the number, name muted. */
  .ps-pinned .ps-card[data-state="done"] .ps-num{
    color:transparent;text-shadow:none;
    background:#ffffff
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.4l2.3 2.3 4.6-5' fill='none' stroke='%231F5EFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 12px no-repeat;
    box-shadow:inset 0 0 0 1.5px rgba(31,94,255,.45);
  }
  .ps-pinned .ps-card[data-state="done"] .ps-title{color:#6b7280}
  .ps-pinned .ps-card[data-state="done"] .ps-card-head:hover .ps-title{color:#0b1220}
}
/* Tablets: the same stage in less width. The card column narrows to what
   the copy needs at 296px and the boards scale to the column that is left
   (their navy ground is the pile's base, so the frame below a scaled board
   reads as panel). The responsive block clips every section; the stage
   must not be, or it sticks to the section instead of the page. */
@media (min-width:641px) and (max-width:1024px){
  #our-process{overflow:visible!important}
  .ps-pinned .ps-stage{padding:16px 32px}
  .ps-pinned .ps-head{margin-bottom:28px}
  .ps-pinned .ps-steps{grid-template-columns:minmax(0,1fr) minmax(300px,44%);gap:0 28px}
}

/* ── Our Process · the visuals ─────────────────────────────────────────────
   Six live boards in the same dashboard language as the Why Vittaara
   renders: navy ground, hairline panels, blue entry / green target / red
   stop, Reliance as the running example. Each is drawn at 592px, the
   column's width on the 1440 canvas, and exactly as tall as its step's
   frame at the smallest open card (296px + 52px a passed step); .ps-art
   scales it to the frame (see .ps-slide above). The section's research-only
   line is at the stack's foot (.section-disclaimer). Board 05 is
   the hero's own trade card (.signal-cards look), as it reads once the
   trade is running. */
.ps-art{--bg:#0b0e15;--panel:rgba(255,255,255,.035);--line:rgba(255,255,255,.08);
  --ink:#e8ebf1;--soft:#98a2b6;--mute:#6b7590;
  --blue:#4A82EF;--blue-deep:#1F5EFF;--green:#34D399;--green-deep:#10B981;--red:#F06B6B;--red-deep:#E5484D;--amber:#F5B546;
  position:relative;width:592px;height:var(--h,400px);overflow:hidden;
  background:var(--bg);color:var(--ink);
  font-size:13px;line-height:1.3;
  -webkit-font-smoothing:antialiased;}
.ps-art::before{ display:none; }
.ps-art::after{content:"";position:absolute;width:380px;height:380px;right:-60px;top:-110px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(31,94,255,.24),transparent 72%);}
.ps-art .in{position:relative;z-index:1;padding:16px 20px;height:100%;display:flex;flex-direction:column;gap:8px}
.ps-art .eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ps-art .head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ps-art .head .ttl{margin:2px 0 0;font-size:19px;font-weight:600;letter-spacing:-.4px;line-height:1.15}
.ps-art .head .sub{margin-top:3px;font-size:12px;color:var(--soft)}
.ps-art .chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--soft)}
.ps-art .chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.ps-art .chip.up{color:var(--green);border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.08)}
.ps-art .chip.dn{color:var(--red);border-color:rgba(240,107,107,.35);background:rgba(240,107,107,.08)}
.ps-art .chip.blue{color:#9dbcff;border-color:rgba(74,130,239,.4);background:rgba(74,130,239,.12)}
.ps-art .chip.amber{color:var(--amber);border-color:rgba(245,181,70,.35);background:rgba(245,181,70,.08)}
.ps-art .panel{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 14px}
.ps-art .row{display:flex;gap:10px}
.ps-art .row > *{flex:1 1 0;min-width:0}
.ps-art .lbl{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.ps-art .big{font-size:22px;font-weight:600;letter-spacing:-.5px;margin-top:4px;font-variant-numeric:tabular-nums}
.ps-art .delta{font-size:12px;font-weight:600;margin-left:6px}
.ps-art .up .delta,.ps-art .delta.up{color:var(--green)}
.ps-art .delta.dn{color:var(--red)}
.ps-art .note{font-size:11.5px;color:var(--soft);margin-top:3px}
.ps-art .list{display:flex;flex-direction:column;gap:6px}
.ps-art .item{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025)}
.ps-art .item .t{font-size:13px;font-weight:600;color:var(--ink)}
.ps-art .item .d{font-size:11.5px;color:var(--soft);margin-top:2px}
.ps-art .num{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;background:rgba(74,130,239,.18);color:#9dbcff;border:1px solid rgba(74,130,239,.35)}
.ps-art .num.on{background:var(--blue-deep);color:#fff;border-color:transparent}
.ps-art .bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.ps-art .bar i{display:block;height:100%;border-radius:3px;background:var(--blue)}
.ps-art .tabular{font-variant-numeric:tabular-nums}
.ps-art .idx{display:flex;justify-content:space-between;align-items:flex-start}
.ps-art .idx .big{font-size:28px;margin-top:2px}
.ps-art .spark{display:block;width:100%;height:52px;margin-top:2px}
/* A title alone in the head: centred on the chip, a little air below. */
.ps-art-01 .head{align-items:center;padding-bottom:4px}
.ps-art-01 .ttl{margin:0;font-size:22px}
/* Font metrics differ a little between browsers: one block on each board
   takes up the slack, so the 20px bottom padding holds everywhere. */
.ps-art-01 .in > .panel{flex:1 1 auto;display:flex;flex-direction:column}
.ps-art-01 .spark{flex:1 1 0;height:0;min-height:36px}
.ps-art-02 .in > :last-child{margin-top:auto}
.ps-art-02 .results{gap:2px 10px}
.ps-art-02 .in > .panel:nth-child(3){padding:8px 14px}
.ps-art-02 .item{padding:7px 12px}
.ps-art-03 .in > .panel{flex:1 1 auto;display:flex;flex-direction:column}
.ps-art-03 .chart{flex:1 1 0;height:0;min-height:200px}
.ps-art-03 .in > .panel{padding:10px 10px 6px}
.ps-art .logo{width:40px;height:40px;border-radius:50%;background:#f7f7f7;display:grid;place-items:center;flex:0 0 auto}
.ps-art .logo img{width:32px;height:32px;display:block}
.ps-art .mix{display:flex;height:10px;border-radius:5px;overflow:hidden;margin-top:10px}
.ps-art .mix i{display:block;height:100%}
.ps-art .legend{display:flex;justify-content:space-between;margin-top:10px;font-size:11.5px;color:var(--soft)}
.ps-art .legend b{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:1px}
.ps-art .results{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:3px 10px;align-items:center;font-size:12.5px}
.ps-art .results .h{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding-bottom:4px;border-bottom:1px solid var(--line)}
.ps-art .results .v{font-weight:600;font-variant-numeric:tabular-nums}
.ps-art .results .k{color:var(--soft)}
.ps-art .news .item{align-items:flex-start}
.ps-art .news time{flex:0 0 58px;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums;padding-top:2px}
.ps-art .tag{margin-left:auto;flex:0 0 auto;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:6px;border:1px solid var(--line);color:var(--soft)}
.ps-art .tag.g{color:var(--green);border-color:rgba(52,211,153,.35)}
.ps-art .tag.b{color:#9dbcff;border-color:rgba(74,130,239,.4)}
.ps-art .tag.a{color:var(--amber);border-color:rgba(245,181,70,.35)}
.ps-art .chart{display:block;width:100%;height:232px}
/* The list takes the board's spare height and its three rows share it. */
.ps-art .risk{gap:8px;flex:1 1 auto}
.ps-art .risk .item{flex:1 1 auto;align-items:center;gap:12px;padding:12px 14px}
.ps-art .risk .dot{margin-top:0}
.ps-art .dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;margin-top:5px;box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.ps-art .dot.r{background:var(--red-deep);box-shadow:0 0 0 4px rgba(229,72,77,.18)}
.ps-art .dot.a{background:var(--amber);box-shadow:0 0 0 4px rgba(245,181,70,.18)}
.ps-art .dot.b{background:var(--blue);box-shadow:0 0 0 4px rgba(74,130,239,.18)}
.ps-art .risk .item.hot{border-color:rgba(229,72,77,.45);background:rgba(229,72,77,.08)}
.ps-art .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ps-art .stats .panel{padding:16px 16px}
.ps-art .stats .big{font-size:24px}
.ps-art .stats .big small{font-size:12px;font-weight:600;color:var(--soft);letter-spacing:0;margin-left:4px}
.ps-art-05 .in{padding:13px 20px}
.ps-art .plan{flex:1;display:grid;place-items:center}
.ps-art .plan .hero-trade-card{position:static;transform:none;max-width:none;box-shadow:0 30px 50px -22px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}
.ps-art-06 .in > .panel{flex:1 1 auto;display:flex;flex-direction:column}
.ps-art .tl{position:relative;display:flex;flex-direction:column;flex:1 1 auto;gap:0;padding-left:30px}
/* Time, title and note stack on the left; the status chip sits on the right, centred on them. */
/* Each entry but the last grows to share the panel, so its rail segment still reaches the next dot. */
.ps-art .ev{position:relative;flex:1 1 auto;padding:0 0 24px;display:grid;align-content:start;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
.ps-art .ev:not(:last-child)::after{content:"";position:absolute;left:-21px;top:10px;bottom:-10px;width:2px;background:var(--blue);opacity:.9}
.ps-art .ev:last-child{flex:0 0 auto;padding-bottom:12px}
.ps-art .ev.a:not(:last-child)::after{background:var(--amber)}
.ps-art .ev::before{content:"";position:absolute;left:-26px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(74,130,239,.2);z-index:1}
.ps-art .ev.a::before{background:var(--amber);box-shadow:0 0 0 4px rgba(245,181,70,.2)}
.ps-art .ev.g::before{background:var(--green-deep);box-shadow:0 0 0 4px rgba(52,211,153,.22)}
.ps-art .ev time{display:block;font-size:12px;line-height:20px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums}
.ps-art .ev .t{font-size:17px;font-weight:600;letter-spacing:-.2px;margin-top:4px}
.ps-art .ev .d{font-size:13.5px;color:var(--soft);margin-top:4px}
.ps-art .ev > time,.ps-art .ev > .t,.ps-art .ev > .d{grid-column:1}
.ps-art .ev .chips{display:flex;gap:6px;margin-top:0;grid-column:2;grid-row:1 / span 3;align-self:center}
.ps-art .ev .chips .chip{height:24px;padding:0 10px;font-size:11px}
.ps-art{font-family:Inter,Arial,sans-serif;pointer-events:none;user-select:none}
.ps-art .ttl{margin:2px 0 0}
/* The card is the hero deck's card, markup and all (the Reliance one with
   this section's numbers) in the light .signal-cards look, and keeps its
   1440 look at every viewport: the
   board is scaled as a whole, so the phone-width rules for .signal-cards
   must not reach it. These pin each to its desktop value, except the
   metrics row which preserves the compact type from image 3. */
.ps-art .plan .hero-trade-card{width:331px;cursor:default;will-change:auto;transition:none}
.ps-art .plan .trade-card-topbar{flex-wrap:nowrap;row-gap:0}
.ps-art .plan .trade-time{font-size:11px}
.ps-art .plan .trade-perf-badge{font-size:14px}
.ps-art .plan .trade-card-topbar{min-height:36px;padding:8px 18px}
.ps-art .plan .trade-main-row{min-height:120px}
.ps-art .plan .trade-card-body{padding:16px 18px 18px!important;gap:20px}
.ps-art .plan .trade-asset-info{gap:8px}
.ps-art .plan .asset-name{font-size:14px}
.ps-art .plan .asset-strike{margin:4px 0 8px}
.ps-art .plan .asset-tags{gap:6px;white-space:nowrap}
.ps-art .plan .tag-buy{font-size:12px;line-height:18px;padding:2px 8px;border-radius:6px}
.ps-art .plan .tag-sep,.ps-art .plan .tag-type{font-size:12px}
.ps-art .plan .node-sl,.ps-art .plan .node-tp{font-size:14.5px;font-weight:700}
.ps-art .plan .potential-box{width:132px;min-width:132px!important}
.ps-art .plan .potential-value{font-size:21px!important}
.ps-art .plan .metric-label{display:block;font-size:9px;line-height:13px;white-space:nowrap;margin-bottom:5px}
.ps-art .plan .metric-val{font-size:13.5px!important;line-height:18px}
.ps-art .plan .info-icon{font-size:inherit;vertical-align:baseline}
.ps-art .plan .btn-trade-view,.ps-art .plan .btn-trade-action{display:flex;align-items:center;justify-content:center;height:39px;padding:8px 12px;font-size:14px;border-radius:14px}
/* The marker is three-quarters of the way from entry to target (the hero
   tweens this from the script; here the CSS animation below does). */
.ps-art .plan .trade-slider-track{--p:.75}

/* ── Our Process · motion ──────────────────────────────────────────────────
   A board plays once its step is open: .is-live, set by script.js when the
   visual has wiped in on the pinned stage (and the stage is on screen), or
   when it is half in view in the static layout; it is taken off again once
   the visual has wiped out, so a step replays on the way back. .ps-anim says
   script.js is in charge; without it (no JS, reduced motion) every board
   simply shows its finished state. */
@property --p{syntax:"<number>";inherits:true;initial-value:0}
@keyframes ps-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ps-fade{from{opacity:0}to{opacity:1}}
@keyframes ps-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ps-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ps-draw{to{stroke-dashoffset:0}}
@keyframes ps-pop{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
@keyframes ps-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ps-slide-l{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes ps-ping{0%{box-shadow:0 0 0 4px rgba(229,72,77,.22)}80%,100%{box-shadow:0 0 0 11px rgba(229,72,77,0)}}
@keyframes ps-marker{from{--p:0}to{--p:.75}}
.ps-art{--ease:cubic-bezier(.2,.8,.2,1)}
.ps-art-01 .bar i,.ps-art-02 .mix i{transform-origin:0 50%}
.ps-art-03 .mark{transform-box:fill-box;transform-origin:center}
.ps-art-06 .ev::after{transform-origin:50% 0}
/* Resting state before a board plays. */
.ps-anim .ps-step:not(.is-live) :is(
  .ps-art .head,
  .ps-art-01 .in > .panel,.ps-art-01 .row > .panel,.ps-art-01 .spark path,.ps-art-01 .spark circle,.ps-art-01 .spark text,
  .ps-art-02 .in > :not(.head),
  .ps-art-03 .in > .panel,.ps-art-03 .lvl,.ps-art-03 .mark,.ps-art-03 .cmp,
  .ps-art-04 .item,.ps-art-04 .stats .panel,
  .ps-art-05 .hero-trade-card,
  .ps-art-06 .ev){opacity:0}
.ps-anim .ps-step:not(.is-live) :is(.ps-art-01 .bar i,.ps-art-02 .mix i){transform:scaleX(0)}
.ps-anim .ps-step:not(.is-live) :is(.ps-art-03 .candles,.ps-art-03 .vol){clip-path:inset(0 100% 0 0)}
.ps-anim .ps-step:not(.is-live) .ps-art-06 .ev::after{transform:scaleY(0)}
.ps-anim .ps-step:not(.is-live) .ps-art-05 .trade-slider-track{--p:0}
/* Playing. Every part fills both ways, so it holds its start during the delay. */
.is-live .ps-art .head{animation:ps-rise .6s var(--ease) both}
/* 01: the index line draws, the area and trend fill in behind it, then the
   breadth bar fills and the three cue panels follow. */
.is-live .ps-art-01 .in > .panel{animation:ps-rise .6s .08s var(--ease) both}
.is-live .ps-art-01 .spark path:nth-of-type(2){stroke-dasharray:560;stroke-dashoffset:560;animation:ps-draw 1.3s .35s cubic-bezier(.4,0,.2,1) both} /* the line is 554 long */
.is-live .ps-art-01 .spark path:nth-of-type(1){animation:ps-fade .8s 1.15s ease both}
.is-live .ps-art-01 .spark path:nth-of-type(3){animation:ps-fade .6s .85s ease both}
.is-live .ps-art-01 .spark text{animation:ps-fade .5s .5s ease both}
.is-live .ps-art-01 .spark circle{animation:ps-pop .5s 1.55s var(--ease) both}
.is-live .ps-art-01 .row > .panel:nth-child(1){animation:ps-rise .6s .5s var(--ease) both}
.is-live .ps-art-01 .row > .panel:nth-child(2){animation:ps-rise .6s .6s var(--ease) both}
.is-live .ps-art-01 .row > .panel:nth-child(3){animation:ps-rise .6s .7s var(--ease) both}
.is-live .ps-art-01 .bar i{animation:ps-grow-x .9s .95s var(--ease) both}
/* 02: panels in turn, the revenue mix filling segment by segment. */
.is-live .ps-art-02 .in > :nth-child(2){animation:ps-rise .6s .1s var(--ease) both}
.is-live .ps-art-02 .in > :nth-child(3){animation:ps-rise .6s .25s var(--ease) both}
.is-live .ps-art-02 .in > :nth-child(4){animation:ps-rise .6s .4s var(--ease) both}
.is-live .ps-art-02 .mix i:nth-child(1){animation:ps-grow-x .7s .5s var(--ease) both}
.is-live .ps-art-02 .mix i:nth-child(2){animation:ps-grow-x .7s .62s var(--ease) both}
.is-live .ps-art-02 .mix i:nth-child(3){animation:ps-grow-x .7s .74s var(--ease) both}
.is-live .ps-art-02 .mix i:nth-child(4){animation:ps-grow-x .7s .86s var(--ease) both}
/* 03: levels first, then the candles and volume wipe in day by day, the
   breakout is marked and the price tag arrives. */
.is-live .ps-art-03 .in > .panel{animation:ps-rise .6s .08s var(--ease) both}
.is-live .ps-art-03 .lvl{animation:ps-fade .6s .3s ease both}
.is-live .ps-art-03 .candles{animation:ps-wipe 1.2s .4s linear both}
.is-live .ps-art-03 .vol{animation:ps-wipe 1.2s .5s linear both}
.is-live .ps-art-03 .mark{animation:ps-pop .5s 1.55s var(--ease) both}
.is-live .ps-art-03 .cmp{animation:ps-slide-l .5s 1.65s var(--ease) both}
/* 04: the three risks land in order; the stop-loss dot keeps a pulse. */
.is-live .ps-art-04 .item:nth-child(1){animation:ps-rise .6s .15s var(--ease) both}
.is-live .ps-art-04 .item:nth-child(2){animation:ps-rise .6s .3s var(--ease) both}
.is-live .ps-art-04 .item:nth-child(3){animation:ps-rise .6s .45s var(--ease) both}
.is-live .ps-art-04 .stats .panel:nth-child(1){animation:ps-rise .6s .65s var(--ease) both}
.is-live .ps-art-04 .stats .panel:nth-child(2){animation:ps-rise .6s .75s var(--ease) both}
.is-live .ps-art-04 .dot.r{animation:ps-ping 2.2s 1.1s ease-out infinite}
/* 05: the card lands and the marker travels out from the entry node; the
   hero's own pulse and shimmer keep running on it. */
.is-live .ps-art-05 .hero-trade-card{animation:ps-rise .7s .15s var(--ease) both}
.is-live .ps-art-05 .trade-slider-track{animation:ps-marker 1.2s .9s cubic-bezier(.16,1,.3,1) both}
/* 06: each update appears, its dot pops and the rail runs on to the next. */
.is-live .ps-art-06 .ev:nth-child(1){animation:ps-rise .55s .15s var(--ease) both}
.is-live .ps-art-06 .ev:nth-child(2){animation:ps-rise .55s .35s var(--ease) both}
.is-live .ps-art-06 .ev:nth-child(3){animation:ps-rise .55s .55s var(--ease) both}
.is-live .ps-art-06 .ev:nth-child(4){animation:ps-rise .55s .75s var(--ease) both}
.is-live .ps-art-06 .ev:nth-child(1)::after{animation:ps-grow-y .45s .35s ease-out both}
.is-live .ps-art-06 .ev:nth-child(2)::after{animation:ps-grow-y .45s .55s ease-out both}
.is-live .ps-art-06 .ev:nth-child(3)::after{animation:ps-grow-y .45s .75s ease-out both}
.is-live .ps-art-06 .ev:nth-child(4)::after{animation:ps-grow-y .45s .95s ease-out both}
@media (prefers-reduced-motion:reduce){
  .ps-art *,.ps-art *::before,.ps-art *::after{animation:none!important}
}

/* ── Our Process · FAQ · Final CTA · dark surfaces ─────────────────────────
   These three were built on white; they now sit on the site's #010101
   ground like the other dark sections, with the shared #ededed heading and
   each section's own surfaces re-tinted for it. Overrides the light values in
   their own blocks above. */
/* Our Process · charcoal cards with a hairline ring, piled tabs a step darker. */
.process-stack{color:#ededed}
#our-process .process-heading{color:#ededed}
.ps-card{
  background:#12141a;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px -24px rgba(0,0,0,.7);
}
.ps-pinned .ps-card{
  box-shadow:0 0 0 1px rgba(255,255,255,.08),
             0 -10px 30px -22px rgba(0,0,0,.7),
             0 18px 40px -24px rgba(0,0,0,.7);
}
.ps-title{color:#f1f5f9}
.ps-lede{color:#b8c0cc}
.ps-checks li{color:#e2e8f0}
.ps-checks li::before{background-color:rgba(var(--vishnu-400-rgb),.16)}
.ps-progress{color:#8b93a5}
.ps-progress i{background:rgba(255,255,255,.1)}
.ps-pinned .ps-card[data-state="wait"]{background:#0e1016}
.ps-pinned .ps-card[data-state="wait"] .ps-num,
.ps-pinned .ps-card[data-state="done"] .ps-num{
  background-color:#1a1d26;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16);color:#aab1c0;
}
.ps-pinned .ps-card[data-state="done"] .ps-num{
  color:transparent;box-shadow:inset 0 0 0 1.5px rgba(74,130,239,.55);
}
.ps-pinned .ps-card[data-state="wait"] .ps-title,
.ps-pinned .ps-card[data-state="done"] .ps-title{color:#8b93a5}
.ps-pinned .ps-card[data-state="wait"] .ps-card-head:hover .ps-title,
.ps-pinned .ps-card[data-state="done"] .ps-card-head:hover .ps-title{color:#ffffff}
/* Phones: the step block owns the ring and the drop shadow; the card keeps
   only a hairline seam under the photo. */
@media (max-width:640px){
  .ps-step{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px -24px rgba(0,0,0,.7)}
  .ps-step.is-current{
    box-shadow:0 0 0 1px rgba(var(--vishnu-400-rgb),.40),
               0 16px 36px -12px rgba(0,0,0,.6),
               0 0 34px -10px rgba(var(--vishnu-rgb),.55);
  }
  .ps-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
}

/* FAQ · the pre-light values: hairline dividers, light questions, grey answers. */
.faq-section{background:#010101;color:#f8fafc}
.faq-section::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 25%,rgba(255,255,255,.12) 75%,transparent);
}
.faq-section .section-heading{color:#ededed}
.faq-cat{color:#7c8594}
.faq-item{border-bottom-color:rgba(255,255,255,.1)}
.faq-q{color:#e5e7eb}
.faq-item:hover .faq-q{color:#ffffff}
.faq-icon{color:#8b93a5}
.faq-item:hover .faq-icon,
.faq-item[open]:not(.is-closing) .faq-icon{color:#ffffff}
.faq-a{color:#94a3b8}

/* Final CTA · only the ground and its hairline; the desk card is the content. */
#get-trades{background:#010101}
.n-142-470::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 25%,rgba(255,255,255,.10) 75%,transparent);
}

/* ── CTA emphasis · hero + How It Works pairs ──────────────────────────────
   "GET TRADES" and "See How It Works" sat side by side at the same height
   with the same 500 label, and the secondary's red→blue ring pulled the eye
   harder than the flat blue fill, so the pair read as equals. The primary
   now steps up (54px, 16px/600 tracked caps, a deeper blue glow) and the
   secondary drops to a quiet hairline at rest, keeping the brand ring for
   hover only. */
.n-142-24,.n-142-362{
  height:54px;padding:0 34px;
  box-shadow:var(--cta-edge);
}
.n-142-24:hover,.n-142-362:hover{
  box-shadow:var(--cta-glow-hover);
}
.n-142-25,.n-142-363{font-size:16px;font-weight:600;letter-spacing:.04em}

/* Secondary: the blue gradient ring (--cta-gradient-ring, drawn by the
   ::after in the hero block) is the outline at rest, not just on hover, on
   dark and light sections alike. No flat ring underneath it. */
.n-142-26,.n-142-364{
  height:54px;padding:0 30px;
  box-shadow:none;
  transition:background .25s ease;
}
.n-142-27,.n-142-365{font-size:16px;color:rgba(237,237,237,.86)}
.n-142-27{color:#1f2430}   /* ink on the light hero */
@media(max-width:1024px){
  .n-142-24,.n-142-26,.n-142-362,.n-142-364{height:52px!important;padding:0 30px!important}
}

/* ── Research-only line ────────────────────────────────────────────────────
   "Illustrative record. Research only. Vittaara does not execute trades."
   One line per section that shows a named security, centred at the
   section's foot, in place of a strip on every card: the hero (under the
   credential strip's verify links), Trades (third line of the stage's
   footer note), Why Vittaara, Our Process and the final CTA. The lock is a
   masked ::before. .card-disclaimer is the older in-card strip, still used
   by the track-record log (track-record.css fits it). */
.card-disclaimer{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:8px;
  margin:0;padding:6px 18px;min-height:28px;
  box-sizing:border-box;width:auto;height:auto;left:auto;top:auto;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#8f98a8;
  font-family:"Inter",Arial,sans-serif;font-size:11.5px;font-weight:400;line-height:16px;letter-spacing:0;
  text-align:left;white-space:normal;text-wrap:pretty;
}
.section-disclaimer{
  position:relative;z-index:2;
  display:block;
  width:100%;max-width:1200px;margin:36px auto 0;padding:0 20px;
  box-sizing:border-box;
  color:#6f798c;
  font-family:"Inter",Arial,sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;
  text-align:center;white-space:normal;text-wrap:pretty;
}
/* The lock rides inline with the first word, so when the line wraps on a
   phone it stays next to the text instead of parking at the row's left. */
.section-disclaimer::before{display:inline-block;vertical-align:-2px;margin-right:7px}
.card-disclaimer::before,.section-disclaimer::before{
  content:"";flex:0 0 auto;width:13px;height:13px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='7.2' width='10.4' height='6.8' rx='1.9'/%3E%3Cpath d='M5.3 7.2V5.2a2.7 2.7 0 0 1 5.4 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='7.2' width='10.4' height='6.8' rx='1.9'/%3E%3Cpath d='M5.3 7.2V5.2a2.7 2.7 0 0 1 5.4 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hero: ink on the pale ground, under the verify links, inside the strip's
   bottom padding (the canvas height grows by the line, see .n-142-4). */
#home .section-disclaimer{margin-top:28px;color:#6b7280}

/* Trades: the stage's footer note is a centred column already. */
.trades-footer > .section-disclaimer{margin-top:6px;padding:0}

/* Why Vittaara: on the canvas the Accountable card runs 28px past its
   row's box (392 + 368 in 732), so the line takes that back. */
@media (min-width:1025px){
  #why-vittaara .section-disclaimer{margin-top:64px}
}

/* Our Process: in flow under the steps in list mode; pinned, the stack is
   450vh tall with the stage stuck inside it, so the line sits at the
   stack's foot and rides in as the stage hands off. */
.process-stack > .section-disclaimer{margin-top:32px}
@media (min-width:641px){
  .process-stack.ps-pinned > .section-disclaimer{position:absolute;left:0;right:0;bottom:24px;margin:0 auto}
}

/* Final CTA: the levels chip is wide enough for its rows on one line each,
   values on the right edge. */
.cta-chip-levels{width:236px}
.cta-chip-levels .cta-chip-rows{grid-template-columns:auto 1fr}

/* ── Hero · phones (≤480) ──────────────────────────────────────────────────
   The copy block ran to the fold with the deck below it, so a phone's first
   screen showed only the top edge of the back cards. The copy is tightened
   (smaller badge, headline, lede, warning and buttons, the button pair on
   one row as it is everywhere else, and less air between them), and the
   deck is scaled down and centred as a whole; script.js lays it out as a
   three-card fan here, front card right, the others tilted out to the left. */
@media (max-width:480px){
  /* #home keeps the ID specificity of the nav-overlay rule (see --nav-h). */
  #home .n-142-16{padding:calc(12px + var(--nav-h)) 20px 32px!important}
  .n-142-17{gap:8px!important}
  .n-142-19{height:32px;padding:0 14px 0 11px;gap:7px;margin-bottom:10px!important}
  .hero-badge-icon{width:14px;height:14px}
  .hero-badge .n-142-20{font-size:13px}
  .n-142-21{font-size:min(58px,8cqw)!important;line-height:1.1!important;letter-spacing:-.6px!important;margin-bottom:10px!important}
  .n-142-22{font-size:14px;line-height:20px;margin-bottom:14px!important}
  .n-142-28{font-size:11px;line-height:16px}
  .n-142-23{flex-direction:row!important;gap:8px!important;margin-bottom:12px!important}
  .n-142-24,.n-142-26{flex:1 1 0;min-width:0;width:auto!important;height:44px!important;padding:0 12px!important}
  .n-142-25,.n-142-27{font-size:14px}
  .n-142-29,.hero-visual-container{margin:0 auto!important}
  .hero-deck-container{
    --deck-scale:.85;
    scale:var(--deck-scale);
    /* The fan is centred by its own x offset in script.js. */
    transform-origin:top center;
    /* The stack keeps its 490px layout box; hand back the height the scale frees
       so the credentials strip follows the drawn deck, not the empty box. */
    margin-bottom:calc(490px * (var(--deck-scale) - 1));
  }
}

/* ==========================================================================
   PRIMARY CTA · resting sheen + press
   --------------------------------------------------------------------------
   Two affordances layered onto the blue "GET TRADES" primaries so the pill
   reads as pressable before the pointer reaches it:

   · Sheen — a soft diagonal highlight glides across the fill once every
     4.8s (the community button's one-shot cta-shine, made periodic). It is
     a ::after at z-index:-1 inside the pill's own stacking context, so it
     paints over the gradient but under the label, and overflow:hidden
     clips it to the pill. The partner dialog's pill (.vf-cta) runs half a
     period out of phase so it never fires in step with the page's CTAs.
   · Press — :active scales to .97 and pulls the glow in tight, so the
     click has a physical give; release eases back on the existing
     transition. Hover is unchanged (brighten + glow).

   The nav pill shares the hero's viewport, so it runs a third of a period
   behind the hero and the dialog pill a third behind that; no two visible
   pills glint together. Reduced-motion drops both the sheen and the press
   scale, keeping the colour shift.
   ========================================================================== */
.n-142-14,.n-142-24,.n-142-362,.n-142-478,.vf-cta,.faq-a .faq-cta{
  isolation:isolate;
}
.faq-a .faq-cta{position:relative;overflow:hidden}
/* Nav pill: the header layout parks it static with overflow open (both
   !important); the sheen needs it to be the ::after's containing block and
   to clip to the pill. Box-shadow and the focus ring are unaffected. */
.n-142-14{position:relative!important;overflow:hidden!important}
/* Final card: the ≤1024 layout parks the pill at position:static, which
   would hand the sheen to the card as its containing block. */
@media (max-width:1024px){.n-142-478{position:relative!important}}

.n-142-14::after,.n-142-24::after,.n-142-362::after,.n-142-478::after,.vf-cta::after,.faq-a .faq-cta::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:34%;z-index:-1;
  background:linear-gradient(105deg,rgb(255 255 255 / 0) 0%,rgb(255 255 255 / .18) 40%,rgb(255 255 255 / .42) 50%,rgb(255 255 255 / .18) 60%,rgb(255 255 255 / 0) 100%);
  transform:translate(-240%,-8%) skewX(-22deg);
  pointer-events:none;
  animation:cta-sheen 4.8s cubic-bezier(.35,0,.15,1) 1.2s infinite;
}
.n-142-14::after{animation-delay:2.8s}
.vf-cta::after{animation-delay:4.4s}
/* The sweep lasts ~1s (0→22%), then the highlight parks off the right edge
   for the rest of the period; both ends sit outside the pill, so the loop
   restart is invisible. */
@keyframes cta-sheen{
  0%{transform:translate(-240%,-8%) skewX(-22deg)}
  22%,100%{transform:translate(440%,8%) skewX(-22deg)}
}

/* Press: scale from the centre (the Figma nodes default to a 0 0 origin). */
.n-142-14,.n-142-24,.n-142-362,.n-142-478,.vf-cta,.faq-a .faq-cta{transform-origin:50% 50%}
.n-142-14:active,.n-142-24:active,.n-142-362:active,.n-142-478:active,
.cta-card .n-142-478:active,.vf-cta:active,.faq-a .faq-cta:active{
  transform:scale(.97);
  filter:brightness(1.04);
  box-shadow:var(--cta-edge),0 3px 10px -3px rgba(var(--cta-rgb),.55);
  transition-duration:.08s;
}
.faq-a .faq-cta:active svg{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  .n-142-14::after,.n-142-24::after,.n-142-362::after,.n-142-478::after,.vf-cta::after,.faq-a .faq-cta::after{animation:none}
  .n-142-14:active,.n-142-24:active,.n-142-362:active,.n-142-478:active,
  .cta-card .n-142-478:active,.vf-cta:active,.faq-a .faq-cta:active{transform:none}
}