:root{
    --black:#050607;
    --panel: rgba(255,255,255,0.04);
    --panel-strong: rgba(255,255,255,0.07);
    --line: rgba(255,255,255,0.09);
    --line-bright: rgba(255,255,255,0.2);
    --green:#00FFA6;
    --green-dim:#00c383;
    --green-soft: rgba(0,255,166,0.13);
    --violet:#8B7CFF;
    --violet-soft: rgba(139,124,255,0.12);
    --paper:#EFE6D2;
    --paper-ink:#211D17;
    --stamp:#C1443B;
    --white:#F5F7F4;
    --ink-70: rgba(245,247,244,.68);
    --ink-50: rgba(245,247,244,.48);
    --ink-35: rgba(245,247,244,.32);
    --header-bg: rgba(5,6,7,0.55);
    --flag-old-bg: #101418;
    --radius: 26px;
    --maxw: 1220px;
    --ease: cubic-bezier(.16,.9,.24,1);
  }
  html[data-theme="light"]{
    --black:#FFFFFF;
    --panel: rgba(10,12,16,0.035);
    --panel-strong: rgba(10,12,16,0.065);
    --line: rgba(10,12,16,0.1);
    --line-bright: rgba(10,12,16,0.24);
    --green:#008F67;
    --green-dim:#007A58;
    --green-soft: rgba(0,195,137,0.11);
    --violet:#6252C7;
    --violet-soft: rgba(124,106,232,0.11);
    --white:#0D0F12;
    --ink-70: rgba(13,15,18,.68);
    --ink-50: rgba(13,15,18,.50);
    --ink-35: rgba(13,15,18,.36);
    --header-bg: rgba(255,255,255,0.72);
    --flag-old-bg: #FFFFFF;
  }
  html{ transition: background .25s var(--ease); overflow-x:clip; }
  body{ transition: background .25s var(--ease), color .25s var(--ease); }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; scroll-padding-top:100px;}
  body{
    background:var(--black); color:var(--white);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
  }
  h1,h2,h3{ font-family:'Inter',sans-serif; font-weight:600; letter-spacing:-0.02em; }
  .brand{ font-family:'Inter',sans-serif; font-weight:600; letter-spacing:-0.01em; }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  ul{list-style:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:6px; }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- Ambient background: animated mesh ---------- */
  .grain{ position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.03; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .mesh{
    position:fixed; inset:-10%; z-index:0; pointer-events:none; filter:blur(60px); opacity:.55;
    background:
      radial-gradient(38% 30% at 14% 8%, rgba(0,255,166,0.35), transparent 60%),
      radial-gradient(30% 26% at 88% 4%, rgba(139,124,255,0.28), transparent 60%),
      radial-gradient(34% 30% at 70% 90%, rgba(0,255,166,0.16), transparent 60%);
    animation: mesh-drift 15s ease-in-out infinite alternate;
  }
  @keyframes mesh-drift{
    0%{ transform: translate3d(0,0,0) scale(1); }
    100%{ transform: translate3d(-4%,5%,0) scale(1.14); }
  }
  .scroll-progress{ position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg, var(--green), var(--violet)); z-index:80; width:0%; }

  /* ---------- Nav ---------- */
  header{ position:sticky; top:0; z-index:50; backdrop-filter: blur(18px) saturate(1.4); background:var(--header-bg); border-bottom:1px solid var(--line); transition:background .25s var(--ease); }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:var(--maxw); margin:0 auto; }
  .logo-mark{display:flex; align-items:center; gap:10px;}
  .logo-mark .logo-img{height:34px; width:auto; display:block;}
  .logo-mark .logo-light{ display:none; }
  html[data-theme="light"] .logo-mark .logo-dark{ display:none; }
  html[data-theme="light"] .logo-mark .logo-light{ display:block; }
  .nav-links{display:flex; gap:32px; font-size:0.92rem; color:var(--ink-70); font-weight:500;}
  .nav-links a{transition:color .2s; position:relative;}
  .nav-links a::after{content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--green); transition:width .25s var(--ease);}
  .nav-links a:hover{color:var(--white);}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{display:flex; align-items:center; gap:20px;}
  .nav-cta .ghost{font-size:0.9rem; color:var(--ink-70); white-space:nowrap; font-weight:500;}
  .nav-cta .ghost:hover{color:var(--white);}
  .theme-toggle{ width:44px; height:44px; flex-shrink:0; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .25s, background .25s, transform .3s var(--ease); }
  .theme-toggle:hover{ border-color:var(--line-bright); transform:rotate(-12deg); }
  .theme-toggle .icon-moon{ display:none; }
  html[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
  html[data-theme="light"] .theme-toggle .icon-moon{ display:block; }
  @media (max-width:900px){ .nav-links{display:none;} }
  @media (max-width:640px){ .nav-cta .ghost{display:none;} }

  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:15px 28px; border-radius:100px;
    font-weight:600; font-size:0.96rem; font-family:'Inter',sans-serif; border:none; cursor:pointer; white-space:nowrap;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease); position:relative; overflow:hidden; }
  .btn-primary{ background:var(--green); color:#012418; }
  .btn-primary::before{ content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform:skewX(-20deg); transition:left .7s var(--ease); }
  .btn-primary:hover::before{ left:130%; }
  .btn-primary:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 20px 50px -8px rgba(0,255,166,0.65);}
  .btn-primary:active{transform:translateY(0) scale(.98);}
  .btn-breathe{ animation:none; }
  .btn-breathe:hover{ animation-play-state:paused; }
  @keyframes btn-breathe{
    0%,100%{ box-shadow:0 0 0 0 rgba(0,255,166,0.45); }
    50%{ box-shadow:0 0 0 12px rgba(0,255,166,0); }
  }
  .btn-ghost-outline{ background:var(--panel); color:var(--white); border:1px solid var(--line); backdrop-filter:blur(8px); }
  .btn-ghost-outline:hover{border-color:var(--line-bright); background:var(--panel-strong);}

  /* ---------- HERO ---------- */
  .hero{ position:relative; z-index:1; padding:88px 28px 30px; max-width:var(--maxw); margin:0 auto;
    display:grid; grid-template-columns: 1.05fr 0.95fr; gap:30px; align-items:center; }
  .hero > *{ min-width:0; }
  @media (max-width:980px){ .hero{grid-template-columns:1fr; padding-top:48px; text-align:left;} }

  .kicker{ display:inline-flex; align-items:center; gap:9px; font-size:0.86rem; font-weight:500;
    color:var(--ink-70); background:var(--panel); border:1px solid var(--line); padding:7px 16px 7px 12px; border-radius:100px; margin-bottom:26px; }
  .kicker .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(0,255,166,.6); animation:pulse-dot 2s ease-out infinite;}
  @keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(0,255,166,.5);} 70%{box-shadow:0 0 0 7px rgba(0,255,166,0);} 100%{box-shadow:0 0 0 0 rgba(0,255,166,0);}}

  .hero h1{ font-size:clamp(2.5rem, 4.3vw, 3.9rem); line-height:1.06; color:var(--white); margin-bottom:24px; }
  .hero h1 .fill-word{ background:linear-gradient(100deg, var(--green), var(--violet) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p.sub{ font-size:1.16rem; line-height:1.55; color:var(--ink-70); max-width:520px; margin-bottom:34px; font-weight:400; }
  .hero-ctas{display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:38px;}
  .hero-ctas .link-cta{font-size:0.94rem; color:var(--ink-70); border-bottom:1px solid var(--line); padding-bottom:2px; transition:.2s; font-weight:500;}
  .hero-ctas .link-cta:hover{color:var(--green); border-color:var(--green);}
  .trust-row{display:flex; gap:22px; flex-wrap:wrap; font-size:0.84rem; color:var(--ink-50); font-weight:500;}
  .trust-row span{display:flex; align-items:center; gap:7px;}
  .trust-row svg{flex-shrink:0;}

  /* Marquee */
  .partner-strip{ margin-top:44px; padding-top:24px; border-top:1px solid var(--line); }
  .partner-strip .label{ font-size:0.8rem; color:var(--ink-35); margin-bottom:16px; font-weight:500;}
  .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, black 12%, black 88%, transparent); mask-image:linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
  .marquee-track{ display:flex; gap:52px; width:max-content; animation: marquee 18s linear infinite; }
  .marquee-track span{ font-weight:600; font-size:1.05rem; color:var(--ink-35); white-space:nowrap; font-family:'Inter',sans-serif; }
  @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ---------- Hero visual: real 3D scene ---------- */
  .hero-visual{ position:relative; height:560px; display:flex; align-items:center; justify-content:center; perspective:1400px; }
  @media (max-width:980px){ .hero-visual{height:460px; margin-top:10px;} }

  .hero-floor{
    position:absolute; width:150%; height:280px; left:-25%; bottom:-40px; z-index:0;
    background-image:
      linear-gradient(rgba(0,255,166,.35) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,255,166,.35) 1px, transparent 1px);
    background-size:44px 44px;
    transform: rotateX(78deg);
    transform-style:preserve-3d;
    -webkit-mask-image: radial-gradient(ellipse 60% 90% at 50% 30%, black 0%, transparent 72%);
    mask-image: radial-gradient(ellipse 60% 90% at 50% 30%, black 0%, transparent 72%);
    opacity:.55;
  }
  .scene{ position:relative; width:100%; height:100%; transform-style:preserve-3d; display:flex; align-items:center; justify-content:center; }
  .scene-tilt{ transform-style:preserve-3d; transform: rotateX(var(--rx,4deg)) rotateY(var(--ry,-7deg)); transition:transform .5s var(--ease); }

  .device-stack{ position:relative; width:256px; height:522px; transform-style:preserve-3d; }
  @media (max-width:980px){ .device-stack{ transform:scale(0.86); } }

  .visual-glow{ position:absolute; top:50%; left:50%; width:420px; height:420px; margin:-210px 0 0 -210px; border-radius:50%;
    background:radial-gradient(circle, rgba(0,255,166,0.22), transparent 68%); filter:blur(24px); animation:breathe 6s ease-in-out infinite; transform:translateZ(-100px); }
  @keyframes breathe{0%,100%{transform:translateZ(-100px) scale(1);} 50%{transform:translateZ(-100px) scale(1.1);}}

  /* Phone mockup */
  .phone{
    position:absolute; top:0; left:0; width:256px; height:522px; border-radius:42px; background:#0a0f14;
    border:5px solid #1a222b;
    box-shadow: 0 50px 90px -25px rgba(0,0,0,0.75), 0 0 60px -10px rgba(0,255,166,0.18), inset 0 0 0 1px rgba(255,255,255,0.04);
    z-index:3; transform: translateZ(30px);
    animation: float-y 6s ease-in-out infinite;
  }
  @keyframes float-y{0%,100%{transform:translateZ(30px) translateY(0px);} 50%{transform:translateZ(30px) translateY(-16px);}}
  .phone::before{ content:''; position:absolute; top:13px; left:50%; transform:translateX(-50%); width:64px; height:16px; background:#0a0f14; border-radius:10px; z-index:5; }
  .phone-screen{ position:absolute; inset:0; border-radius:37px; overflow:hidden; background:linear-gradient(180deg,#10151a, #05070a); }
  .ph-status{ display:flex; justify-content:space-between; padding:20px 22px 4px; font-size:0.66rem; color:rgba(245,247,244,.68); font-weight:600; }
  .ph-header{ padding:16px 20px 4px; display:flex; align-items:center; justify-content:space-between;}
  .ph-header .who{ display:flex; align-items:center; gap:8px; font-size:0.84rem; font-weight:600; font-family:'Inter',sans-serif; color:#F5F7F4; }
  .ph-header .who .brand-dot{ width:19px; height:19px; border-radius:6px; background:linear-gradient(135deg, var(--green), var(--violet)); flex-shrink:0; }
  .ph-bell{ width:25px; height:25px; border-radius:50%; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; }
  .ph-balance{ margin:14px 18px 0; padding:19px; border-radius:18px; background:linear-gradient(135deg, rgba(0,255,166,0.16), rgba(139,124,255,0.06)); border:1px solid rgba(0,255,166,0.25); }
  .ph-balance .lbl{font-size:0.66rem; color:rgba(245,247,244,.48); margin-bottom:6px; font-weight:600;}
  .ph-balance .val{font-size:1.42rem; font-weight:600; color:#F5F7F4; font-variant-numeric:tabular-nums; font-family:'Inter',sans-serif;}
  .ph-balance .sub2{font-size:0.7rem; color:var(--green); margin-top:6px; font-weight:600;}
  .ph-actions{ display:flex; gap:9px; margin:13px 18px 0; }
  .ph-actions div{ flex:1; text-align:center; padding:10px 4px; border-radius:12px; background:rgba(255,255,255,0.05); font-size:0.6rem; font-weight:600; color:#F5F7F4; }
  .ph-actions div .ic-wrap{ display:flex; justify-content:center; margin-bottom:4px; }
  .ph-list-lbl{ margin:17px 18px 8px; font-size:0.66rem; color:rgba(245,247,244,.48); font-weight:600; }
  .ph-row{ display:flex; align-items:center; gap:10px; margin:0 18px 9px; padding:9px; border-radius:14px; background:rgba(255,255,255,0.03); }
  .ph-row .ic{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; flex-shrink:0; font-family:'Inter',sans-serif;}
  .ph-row .info{ flex:1; min-width:0; }
  .ph-row .info .t1{ font-size:0.7rem; font-weight:600; color:#F5F7F4; }
  .ph-row .info .t2{ font-size:0.6rem; color:rgba(245,247,244,.48); }
  .ph-row .amt{ font-size:0.7rem; font-weight:600; color:#F5F7F4; text-align:right; white-space:nowrap; font-family:'Inter',sans-serif;}
  .ph-row .amt small{ display:block; font-size:0.56rem; color:var(--green); font-weight:600; }

  /* Card mockup, floating in front, tucked into bottom-left corner of the stack */
  .card-mock{
    position:absolute; width:196px; height:122px; border-radius:17px; z-index:4;
    background: linear-gradient(150deg, #151a1f 0%, #07090b 60%);
    border:1px solid rgba(255,255,255,0.09);
    box-shadow:0 30px 55px -12px rgba(0,0,0,0.7), 0 0 34px -6px rgba(139,124,255,0.25);
    padding:15px; color:#F5F7F4;
    left:-58px; bottom:-22px;
    transform: translateZ(80px) rotateZ(-8deg);
    animation:float-y2 6s ease-in-out infinite;
  }
  @keyframes float-y2{0%,100%{transform:translateZ(80px) rotateZ(-8deg) translateY(0);} 50%{transform:translateZ(80px) rotateZ(-8deg) translateY(-17px);}}
  .card-mock .top-row{ display:flex; justify-content:space-between; align-items:flex-start; }
  .card-mock .top-row svg{ width:18px; height:18px; }
  .card-mock .brand-dot-lg{ width:18px; height:18px; border-radius:5px; background:linear-gradient(135deg, var(--green), var(--violet)); }
  .card-mock .contactless{ opacity:.7; }
  .card-mock .chip{ width:24px; height:18px; border-radius:4px; margin-top:14px;
    background:linear-gradient(135deg,#d9c98a,#a98f4a); }
  .card-mock .num{ margin-top:10px; font-size:0.68rem; letter-spacing:2px; font-weight:500; color:rgba(255,255,255,0.85); font-family:'Inter',sans-serif; }
  .card-mock .bottom-row{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:6px; }
  .card-mock .brand-wordmark{ font-weight:600; font-size:0.76rem; letter-spacing:-0.01em; font-family:'Inter',sans-serif;}
  .card-mock .poolvo-mark{ height:15px; width:auto; display:block; opacity:.92; }

  .float-badge{
    position:absolute; z-index:5; background:rgba(15,17,19,0.85); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.12); border-radius:14px;
    padding:9px 13px; font-size:0.74rem; font-weight:600; display:flex; align-items:center; gap:8px; white-space:nowrap; color:#F5F7F4;
    box-shadow:0 16px 34px rgba(0,0,0,0.35); transform:translateZ(100px);
  }
  .float-badge.b1{ top:14%; right:-38px; animation: float-y 5s ease-in-out infinite .3s; }
  .float-badge.b2{ bottom:16%; right:-54px; animation: float-y 5s ease-in-out infinite .9s; }
  .float-badge .sq{ width:7px; height:7px; border-radius:2px; background:var(--green); box-shadow:0 0 8px var(--green); flex-shrink:0; }

  /* ---------- Trust bento ---------- */
  .trustbar{ position:relative; z-index:1; padding:70px 0; }
  .trust-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:16px; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
  @media (max-width:800px){ .trust-grid{grid-template-columns:1fr 1fr;} }
  .trust-grid .trust-card:nth-child(1){ transition-delay:0s; }
  .trust-grid .trust-card:nth-child(2){ transition-delay:.08s; }
  .trust-grid .trust-card:nth-child(3){ transition-delay:.16s; }
  .trust-grid .trust-card:nth-child(4){ transition-delay:.24s; }
  .trust-card{ padding:30px 26px; border:1px solid var(--line); border-radius:20px; background:var(--panel); backdrop-filter:blur(10px); position:relative; overflow:hidden; }
  .trust-card.lead{ background:linear-gradient(150deg, var(--green-soft), transparent 70%); border-color:rgba(0,255,166,0.25); display:flex; flex-direction:column; justify-content:center; }
  .trust-card.lead h2{ font-size:1.5rem; line-height:1.25; font-weight:500; }
  .trust-card .num{ font-size:2.3rem; color:var(--white); font-weight:600; margin-bottom:6px; font-variant-numeric:tabular-nums; font-family:'Inter',sans-serif; }
  .trust-card .label{ font-size:0.86rem; color:var(--ink-50); }

  /* ---------- Section generic ---------- */
  section.block{ position:relative; z-index:1; padding:96px 0; }
  .block-head{ max-width:640px; margin-bottom:56px; }
  .block-head .tag{ display:inline-block; font-size:0.84rem; font-weight:500; color:var(--green); margin-bottom:14px; }
  .block-head h2{ font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.2; color:var(--white); font-weight:500; }
  .block-head p{ color:var(--ink-70); margin-top:16px; font-size:1.06rem; line-height:1.6;}
  .center{ text-align:center; margin-left:auto; margin-right:auto; }
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  .reveal{ opacity:0; transform:translateY(22px); filter:none; transition:opacity .65s var(--ease), transform .65s var(--ease);}
  .reveal.in{ opacity:1; transform:translateY(0); filter:none;}

  /* ---------- Problem block ---------- */
  .problem-body{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:60px; align-items:start; }
  @media (max-width:900px){.problem-body{grid-template-columns:1fr; gap:48px;}}
  .problem-body>div:first-child{ position:sticky; top:120px; }
  @media (max-width:900px){ .problem-body>div:first-child{ position:static; } }
  .problem-body p{ color:var(--ink-70); font-size:1.1rem; line-height:1.7; }
  .problem-close{ margin-top:22px; font-size:1.08rem; font-weight:500; color:var(--white); line-height:1.55; }

  /* Notification feed: the friction building up in chronological order */
  .notif-stack{ position:relative; padding-left:26px; display:flex; flex-direction:column; gap:14px; }
  .notif-stack::before{ content:''; position:absolute; left:4px; top:8px; bottom:8px; width:1.5px; background:var(--line); }
  .notif-card{ position:relative; padding:16px 18px; border-radius:14px; background:var(--panel); border:1px solid var(--line);
    opacity:0; transform:translateX(-24px); transition:opacity .55s var(--ease), transform .6s cubic-bezier(.22,1.2,.44,1); }
  .notif-wrap.in .notif-card{ opacity:1; transform:translateX(0); }
  .notif-wrap.in .notif-card:nth-child(2){ transition-delay:.18s; }
  .notif-wrap.in .notif-card:nth-child(3){ transition-delay:.36s; }
  .notif-card::before{ content:''; position:absolute; left:-25px; top:20px; width:9px; height:9px; border-radius:50%; }
  .notif-card.mail::before{ background:#ffb454; box-shadow:0 0 8px rgba(255,180,84,.55); }
  .notif-card.chat::before{ background:var(--violet); box-shadow:0 0 8px rgba(139,124,255,.5); }
  .notif-card.bank::before{ background:#ff8f8f; box-shadow:0 0 8px rgba(255,143,143,.55); }
  .notif-card.bank{ border-color:rgba(255,143,143,0.3); }
  .notif-top{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
  .notif-from{ font-size:0.86rem; font-weight:600; color:var(--white); font-family:'Inter',sans-serif; }
  .notif-time{ font-size:0.74rem; color:var(--ink-35); }
  .notif-text{ font-size:0.9rem; color:var(--ink-70); line-height:1.5; }
  .notif-stat{ display:flex; align-items:center; gap:16px; margin-top:18px; margin-left:26px; padding:20px 22px; border-radius:16px; background:rgba(255,143,143,0.07); border:1px solid rgba(255,143,143,0.2);
    opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease) .56s, transform .6s var(--ease) .56s; }
  .notif-wrap.in .notif-stat{ opacity:1; transform:translateY(0); }
  .notif-stat-num{ font-size:2.3rem; font-weight:700; color:#ff8f8f; font-family:'Inter',sans-serif; line-height:1; flex-shrink:0; }
  .notif-stat-label{ font-size:0.86rem; color:var(--ink-70); line-height:1.4; }
  @media (max-width:480px){ .notif-stat{ margin-left:0; } }

  /* ---------- How it works: connected flow ---------- */
  .flow-diagram{ position:relative; display:flex; align-items:flex-start; }
  .flow-track{ position:absolute; top:34px; left:16.6667%; right:16.6667%; height:2px; background:linear-gradient(90deg, var(--green), var(--violet)); z-index:0; transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease) .15s; overflow:visible; }
  .flow-track.in{ transform:scaleX(1); }
  .flow-track::before, .flow-track::after{ content:''; position:absolute; top:50%; width:6px; height:6px; border-radius:50%; transform:translateY(-50%); }
  .flow-track::before{ left:-3px; background:var(--green); }
  .flow-track::after{ right:-3px; background:var(--violet); }
  .flow-track .pulse{ position:absolute; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:#fff; box-shadow:0 0 12px 3px rgba(255,255,255,0.85); opacity:0; animation:flow-pulse 3.4s ease-in-out 1.4s infinite; }
  @keyframes flow-pulse{
    0%{ left:0%; opacity:0; }
    6%{ opacity:1; }
    94%{ opacity:1; }
    100%{ left:100%; opacity:0; }
  }
  .flow-stage{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 22px; opacity:0; transform:translateY(16px) scale(.9); transition:opacity .55s var(--ease), transform .6s cubic-bezier(.34,1.4,.64,1); }
  .flow-stage.in{ opacity:1; transform:translateY(0) scale(1); }
  .flow-diagram > .flow-stage:nth-of-type(1){ transition-delay:.25s; }
  .flow-diagram > .flow-stage:nth-of-type(2){ transition-delay:.45s; }
  .flow-diagram > .flow-stage:nth-of-type(3){ transition-delay:.65s; }
  .flow-node{ width:68px; height:68px; border-radius:50%; background:#0a0f14; border:1px solid var(--line-bright); display:flex; align-items:center; justify-content:center; margin-bottom:22px; transition:border-color .3s, transform .3s var(--ease); }
  .flow-node svg{ transition:transform .4s var(--ease); }
  .flow-stage:hover .flow-node{ border-color:var(--green); transform:scale(1.16) rotate(-10deg); box-shadow:0 0 24px rgba(0,255,166,0.4); }
  .flow-stage:hover .flow-node svg{ transform:scale(1.2); }
  .flow-index{ font-family:'Inter',sans-serif; font-size:0.76rem; font-weight:600; color:var(--green); letter-spacing:0.02em; margin-bottom:10px; }
  .flow-stage h3{ font-size:1.12rem; margin-bottom:8px; color:var(--white); font-weight:500; }
  .flow-stage p{ color:var(--ink-70); font-size:0.92rem; line-height:1.55; max-width:270px; }
  @media (max-width:900px){
    .flow-diagram{ flex-direction:column; gap:36px; }
    .flow-track{ display:none; }
    .flow-stage{ padding:0; }
    .flow-diagram > .flow-stage:nth-of-type(1){ transition-delay:0s; }
    .flow-diagram > .flow-stage:nth-of-type(2){ transition-delay:.1s; }
    .flow-diagram > .flow-stage:nth-of-type(3){ transition-delay:.2s; }
  }
  .steps-cta{ text-align:center; margin-top:40px; }

  /* ---------- Comparison: roadmap ---------- */
  .roadmap-compare{ display:flex; flex-direction:column; gap:64px; }
  .roadmap-label{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:34px; flex-wrap:wrap; }
  .roadmap-label .rl-name{ font-family:'Inter',sans-serif; font-weight:600; font-size:1.02rem; }
  .roadmap-row.old .rl-name{ color:var(--ink-50); }
  .roadmap-row.new .rl-name{ color:var(--green); }
  .roadmap-label .rl-time{ font-size:0.86rem; color:var(--ink-35); }
  .roadmap-row.new .rl-time{ color:var(--white); font-weight:500; }

  .roadmap-track{ display:flex; align-items:flex-start; }
  .track-used{ position:relative; display:flex; justify-content:space-between; gap:14px; }
  .track-used::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease) .2s; }
  .roadmap-compare.in .track-used::before{ transform:scaleX(1); }
  .roadmap-row.old .track-used::before{ background-image:linear-gradient(90deg, var(--line-bright) 0 7px, transparent 7px 14px); background-size:14px 2px; }
  .roadmap-row.new .track-used::before{ background:var(--green); box-shadow:0 0 8px rgba(0,255,166,0.5); }
  .track-remaining{ flex:1; position:relative; margin-left:14px; }
  .track-remaining::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background-image:linear-gradient(90deg, var(--line) 0 5px, transparent 5px 11px); background-size:11px 2px; }
  .track-used .pulse{ position:absolute; top:0; left:0; width:8px; height:8px; margin-top:-3px; border-radius:50%; background:#fff; box-shadow:0 0 12px 3px rgba(255,255,255,0.85); opacity:0; animation:flow-pulse 3s ease-in-out 1.6s infinite; }

  .stop, .flag{ opacity:0; transform:translateY(14px) scale(.85); transition:opacity .5s var(--ease), transform .55s cubic-bezier(.34,1.56,.64,1); }
  .roadmap-compare.in .stop, .roadmap-compare.in .flag{ opacity:1; transform:translateY(0) scale(1); }
  .track-used > :nth-child(1){ transition-delay:.35s; }
  .track-used > :nth-child(2){ transition-delay:.45s; }
  .track-used > :nth-child(3){ transition-delay:.55s; }
  .track-used > :nth-child(4){ transition-delay:.65s; }
  .track-used > :nth-child(5){ transition-delay:.75s; }
  .track-used > :nth-child(6){ transition-delay:.85s; }
  .stop{ position:relative; padding-top:20px; max-width:150px; flex-shrink:0; }
  .stop::before{ content:''; position:absolute; top:-4px; left:0; width:9px; height:9px; border-radius:50%; transition:transform .3s var(--ease); }
  .roadmap-row.old .stop::before{ background:var(--black); border:2px solid var(--ink-35); }
  .roadmap-row.new .stop::before{ background:var(--green); box-shadow:0 0 10px rgba(0,255,166,0.65); }
  .stop-text{ font-size:0.84rem; line-height:1.42; display:block; }
  .roadmap-row.old .stop-text{ color:var(--ink-50); }
  .roadmap-row.new .stop-text{ color:var(--white); font-weight:500; }

  .flag{ position:relative; padding-top:20px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
  .flag::before{ content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:19px; height:19px; border-radius:50%; }
  .roadmap-row.old .flag::before{ background:var(--flag-old-bg); border:1px solid var(--line-bright); }
  .roadmap-row.new .flag::before{ background:var(--green); box-shadow:0 0 16px rgba(0,255,166,0.55); }
  .flag-text{ font-size:0.78rem; font-weight:600; white-space:nowrap; }
  .roadmap-row.old .flag-text{ color:var(--ink-35); }
  .roadmap-row.new .flag-text{ color:var(--green); }

  @media (max-width:760px){
    .roadmap-compare{ gap:50px; }
    .roadmap-track{ flex-direction:column; }
    .track-used{ flex-direction:column; gap:20px; }
    .track-used::before{ top:0; bottom:0; left:0; right:auto; width:2px; height:auto; transform:scaleY(0); transform-origin:top; }
    .roadmap-compare.in .track-used::before{ transform:scaleY(1); }
    .roadmap-row.old .track-used::before{ background-image:linear-gradient(180deg, var(--line-bright) 0 7px, transparent 7px 14px); background-size:2px 14px; }
    .track-remaining{ display:none; }
    .track-used .pulse{ left:0; top:0; margin-top:0; margin-left:-3px; animation-name:flow-pulse-vertical; }
    .stop{ padding-top:0; padding-left:22px; max-width:none; }
    .stop::before{ top:5px; left:-4px; }
    .flag{ padding-top:0; padding-left:22px; margin-top:6px; flex-direction:row; gap:10px; align-items:center; }
    .flag::before{ top:50%; left:1px; transform:translate(-50%,-50%); }
  }
  @keyframes flow-pulse-vertical{
    0%{ top:0%; opacity:0; }
    6%{ opacity:1; }
    94%{ opacity:1; }
    100%{ top:100%; opacity:0; }
  }
  .compare-note{ margin-top:8px; font-size:0.9rem; color:var(--ink-35); }

  /* ---------- Personas: bento with generated icon tiles ---------- */
  .persona-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  @media (max-width:980px){ .persona-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:580px){ .persona-grid{grid-template-columns:1fr;} }
  .persona-grid .persona-card:nth-child(1){ transition-delay:0s; }
  .persona-grid .persona-card:nth-child(2){ transition-delay:.08s; }
  .persona-grid .persona-card:nth-child(3){ transition-delay:.16s; }
  .persona-grid .persona-card:nth-child(4){ transition-delay:.24s; }
  .persona-card{ border-radius:20px; border:1px solid var(--line); background:var(--panel); overflow:hidden; transition:transform .4s var(--ease), border-color .4s; padding:26px 22px; }
  .persona-card:hover{ transform:translateY(-10px) scale(1.015); border-color:rgba(0,255,166,0.4); }
  .persona-icon{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; transition:transform .4s var(--ease); }
  .persona-card:hover .persona-icon{ transform:scale(1.22) rotate(10deg); }
  .persona-card h3{ font-size:1.06rem; margin-bottom:9px; color:var(--white); font-weight:500; }
  .persona-card p{ font-size:0.9rem; color:var(--ink-70); line-height:1.5; }

  /* ---------- Social proof: editorial quote grid ---------- */
  .social-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:900px){ .social-grid{ grid-template-columns:1fr; } }
  .social-grid .quote-card:nth-child(1){ transition-delay:0s; }
  .social-grid .quote-card:nth-child(2){ transition-delay:.1s; }
  .social-grid .quote-card:nth-child(3){ transition-delay:.2s; }
  .quote-card{ padding:34px 32px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; transition:border-color .35s, transform .35s var(--ease); }
  .quote-card:hover{ border-color:rgba(0,255,166,0.4); transform:translateY(-8px) scale(1.01); }
  .quote-card.featured{ grid-column:span 2; flex-direction:row; align-items:center; gap:44px; padding:40px 44px; background:linear-gradient(120deg, var(--green-soft), transparent 65%); }
  @media (max-width:900px){ .quote-card.featured{ grid-column:span 1; flex-direction:column; align-items:stretch; gap:0; } }
  .quote-card.featured .quote-main{ flex:1; }
  .quote-tag{ display:inline-flex; align-self:flex-start; font-size:0.76rem; font-weight:600; color:var(--green); background:rgba(0,255,166,0.1); border:1px solid rgba(0,255,166,0.25); padding:6px 13px; border-radius:100px; margin-bottom:22px; }
  .quote-card:not(.featured) .quote-tag{ color:var(--violet); background:rgba(139,124,255,0.1); border-color:rgba(139,124,255,0.25); }
  .quote-text{ color:var(--white); font-weight:400; line-height:1.55; }
  .quote-card.featured .quote-text{ font-size:1.3rem; line-height:1.48; font-weight:500; }
  .quote-card:not(.featured) .quote-text{ font-size:0.96rem; }
  .quote-byline{ margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }
  .quote-card.featured .quote-byline{ flex-shrink:0; width:210px; margin-top:0; padding-top:0; padding-left:36px; border-top:none; border-left:1px solid var(--line); }
  @media (max-width:900px){ .quote-card.featured .quote-byline{ width:auto; padding-left:0; border-left:none; margin-top:28px; padding-top:18px; border-top:1px solid var(--line); } }
  .quote-byline .name{ font-weight:600; font-size:0.9rem; color:var(--white); }
  .quote-byline .loc{ font-size:0.78rem; color:var(--ink-35); margin-top:2px; }
  .social-more{ text-align:center; margin-top:40px; }

  /* ---------- Security: compliance checklist panel ---------- */
  .security-layout{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center; }
  @media (max-width:900px){ .security-layout{ grid-template-columns:1fr; gap:36px; } }
  .security-layout > div:first-child p{ margin-top:16px; margin-bottom:26px; color:var(--ink-70); font-size:1.05rem; line-height:1.65; }

  .compliance-card{ border-radius:var(--radius); background:var(--panel); border:1px solid var(--line); overflow:hidden; }
  .compliance-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 26px; border-bottom:1px solid var(--line); background:linear-gradient(160deg, var(--green-soft), transparent 70%); }
  .compliance-head .t{ font-family:'Inter',sans-serif; font-weight:600; font-size:0.92rem; color:var(--white); }
  .live-badge{ display:inline-flex; align-items:center; gap:7px; font-size:0.72rem; font-weight:600; color:var(--green); background:var(--green-soft); border:1px solid rgba(0,255,166,0.25); padding:5px 11px; border-radius:100px; }
  .live-dot{ width:6px; height:6px; border-radius:50%; background:var(--green); animation:live-pulse 1.8s ease-in-out infinite; }
  @keyframes live-pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

  .compliance-row{ display:flex; align-items:flex-start; gap:14px; padding:16px 26px; border-bottom:1px solid var(--line);
    opacity:0; transform:translateX(-20px); transition:opacity .5s var(--ease), transform .55s cubic-bezier(.22,1.2,.44,1); }
  .compliance-row:last-child{ border-bottom:none; }
  .compliance-card.in .compliance-row{ opacity:1; transform:translateX(0); }
  .compliance-card.in .compliance-row:nth-child(2){ transition-delay:.06s; }
  .compliance-card.in .compliance-row:nth-child(3){ transition-delay:.12s; }
  .compliance-card.in .compliance-row:nth-child(4){ transition-delay:.18s; }
  .compliance-card.in .compliance-row:nth-child(5){ transition-delay:.24s; }
  .compliance-card.in .compliance-row:nth-child(6){ transition-delay:.3s; }
  .c-check{ flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:0.66rem; font-weight:700; margin-top:2px; }
  .c-title{ font-size:0.92rem; font-weight:600; color:var(--white); }
  .c-sub{ font-size:0.82rem; color:var(--ink-50); margin-top:2px; line-height:1.4; }
  @media (max-width:480px){ .compliance-head, .compliance-row{ padding-left:20px; padding-right:20px; } }

  /* ---------- Plataforma ---------- */
  .plataforma-body{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:54px; align-items:center; }
  .plataforma-body > *{ min-width:0; }
  @media (max-width:900px){ .plataforma-body{grid-template-columns:1fr;} }
  .plataforma-body p{ color:var(--ink-70); font-size:1.05rem; line-height:1.7; margin-bottom:28px; }
  .bullet-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:32px; }
  .bullet-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-70); font-size:0.98rem; }
  .bullet-list li::before{ content:'✓'; color:var(--green); font-weight:700; flex-shrink:0; }
  .stat-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
  .stat-chip{ padding:12px 18px 12px 16px; border-radius:12px; border:1px solid var(--line); border-left:2px solid var(--green); background:var(--panel); }
  .stat-chip .v{ display:block; font-size:1rem; font-weight:600; color:var(--white); font-family:'Inter',sans-serif; line-height:1.3; }
  .stat-chip .k{ display:block; font-size:0.74rem; color:var(--ink-50); margin-top:2px; }

  .stack-visual{ position:relative; height:400px; opacity:1 !important; transform:none !important; }
  @media (max-width:900px){ .stack-visual{ height:360px; margin-top:8px; } }
  .layer-back{
    position:absolute; top:38px; right:0; width:82%; height:280px; border-radius:22px;
    background:linear-gradient(160deg, rgba(124,106,232,0.4), rgba(0,195,137,0.22)), #10141a;
    border:1px solid rgba(255,255,255,0.08); padding:26px;
    opacity:0; transform:translate(26px,-16px) scale(.96); transition:opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s;
  }
  .stack-visual.in .layer-back{ opacity:1; transform:translate(0,0) scale(1); }
  .layer-label{ font-family:'Inter',sans-serif; font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.5); margin-bottom:16px; }
  .layer-chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .layer-chips span{ font-size:0.76rem; font-weight:600; color:#fff; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); padding:6px 12px; border-radius:100px; }
  .layer-front{
    position:absolute; left:0; bottom:0; width:84%; border-radius:22px; overflow:hidden;
    background:#0a0f14; border:1px solid rgba(255,255,255,0.09);
    box-shadow:0 40px 70px -20px rgba(0,0,0,0.7), 0 0 44px -10px rgba(0,255,166,0.16);
    opacity:0; transform:translate(-22px,22px) scale(.96); transition:opacity .7s var(--ease) .38s, transform .7s var(--ease) .38s;
  }
  .stack-visual.in .layer-front{ opacity:1; transform:translate(0,0) scale(1); }
  .layer-browser-bar{ display:flex; align-items:center; gap:6px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .layer-browser-bar .bd{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.16); }
  .layer-browser-bar .url{ margin-left:10px; font-size:0.74rem; color:rgba(245,247,244,.55); font-family:'Inter',sans-serif; }
  .layer-front-body{ padding:22px 20px 26px; }
  .lf-row{ display:flex; justify-content:space-between; font-size:0.86rem; color:rgba(245,247,244,.68); padding:9px 0; border-bottom:1px dashed rgba(255,255,255,0.1); }
  .lf-row span:last-child{ color:#F5F7F4; font-weight:600; }
  .lf-btn{ display:block; margin-top:18px; width:100%; padding:13px; border-radius:12px; border:none; background:var(--green); color:#012418; font-weight:600; font-size:0.9rem; font-family:'Inter',sans-serif; text-align:center; }

  /* ---------- FAQ ---------- */
  .faq-list{ max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
  .faq-item{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); }
  .faq-item summary{ list-style:none; cursor:pointer; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:500; font-size:1.02rem; color:var(--white); font-family:'Inter',sans-serif;}
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item .plus{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); flex-shrink:0; position:relative; transition:transform .3s, border-color .3s; }
  .faq-item .plus::before, .faq-item .plus::after{ content:''; position:absolute; background:var(--green); top:50%; left:50%; }
  .faq-item .plus::before{ width:10px; height:1.4px; transform:translate(-50%,-50%); }
  .faq-item .plus::after{ width:1.4px; height:10px; transform:translate(-50%,-50%); transition:opacity .25s;}
  .faq-item[open] .plus{ transform:rotate(180deg); border-color:var(--green); }
  .faq-item[open] .plus::after{ opacity:0; }
  .faq-answer{ padding:0 24px 22px; color:var(--ink-70); font-size:0.96rem; line-height:1.65; }

  /* ---------- Final CTA with rotating conic border ---------- */
  .final-cta{ position:relative; text-align:center; padding:2px; border-radius:32px; margin:0 28px; overflow:hidden; }
  .final-cta::before{
    content:''; position:absolute; inset:-2px; z-index:0;
    background:conic-gradient(from var(--ang,0deg), var(--green), var(--violet), var(--green));
    animation: spin 6s linear infinite;
  }
  @keyframes spin{ to{ --ang:360deg; } }
  @property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
  .final-cta-inner{ position:relative; z-index:1; background:#08090a; border-radius:30px; padding:110px 28px; }
  .final-cta h2{ font-size:clamp(2rem,4vw,2.6rem); max-width:700px; margin:0 auto 20px; font-weight:500; color:#F5F7F4; }
  .final-cta p{ color:rgba(245,247,244,.68); font-size:1.1rem; margin-bottom:36px; }
  .final-cta .micro{ margin-top:22px; font-size:0.86rem; color:rgba(245,247,244,.32); }

  /* ---------- Blog bento ---------- */
  .blog-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  @media (max-width:980px){ .blog-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:580px){ .blog-grid{grid-template-columns:1fr;} }
  .blog-grid .blog-card:nth-child(1){ transition-delay:0s; }
  .blog-grid .blog-card:nth-child(2){ transition-delay:.07s; }
  .blog-grid .blog-card:nth-child(3){ transition-delay:.14s; }
  .blog-grid .blog-card:nth-child(4){ transition-delay:.21s; }
  .blog-card{ border-radius:18px; border:1px solid var(--line); background:var(--panel); overflow:hidden; transition:border-color .3s, transform .3s var(--ease); display:flex; flex-direction:column; }
  .blog-card:hover{ border-color:rgba(0,255,166,0.4); transform:translateY(-9px) scale(1.015); }
  .blog-photo{ height:104px; position:relative; overflow:hidden; }
  .blog-inner{ padding:22px; flex:1; display:flex; flex-direction:column; justify-content:space-between; }
  .blog-card .tag{ font-size:0.76rem; color:var(--green); font-weight:600; margin-bottom:12px; }
  .blog-card .title{ font-size:0.94rem; font-weight:500; line-height:1.4; color:var(--white); }
  .blog-card .go{ margin-top:16px; font-size:0.84rem; color:var(--ink-35); }
  .blog-more{ text-align:center; margin-top:44px; }

  /* ---------- Footer ---------- */
  footer{ background:var(--black); border-top:1px solid var(--line); padding:70px 0 30px; position:relative; z-index:1; }
  .footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(4,1fr); gap:32px; padding-bottom:48px; border-bottom:1px solid var(--line); }
  @media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
  .footer-brand .logo-mark{ margin-bottom:16px; }
  .footer-brand .logo-mark .logo-img{ height:28px; }
  .footer-brand p{ color:var(--ink-35); font-size:0.9rem; max-width:220px; }
  .footer-col h4{ font-size:0.84rem; color:var(--white); margin-bottom:18px; font-weight:600; font-family:'Inter',sans-serif;}
  .footer-col ul{ display:flex; flex-direction:column; gap:12px; }
  .footer-col a{ color:var(--ink-35); font-size:0.9rem; transition:color .2s; }
  .footer-col a:hover{ color:var(--green); }
  .footer-bottom{ padding-top:26px; text-align:center; font-size:0.8rem; color:var(--ink-35); }

  ::selection{ background:var(--green); color:#012418; }

  html.js-ready .reveal, html.js-ready .notif-card, html.js-ready .notif-stat, html.js-ready .flow-stage, html.js-ready .flow-track, html.js-ready .compliance-card{opacity:0;}
  html.js-ready .reveal.in{opacity:1;}
  html.js-ready #como-funciona .flow-stage.in, html.js-ready #como-funciona .flow-track.in{opacity:1;}
  .mobile-menu-toggle{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--white); cursor:pointer; align-items:center; justify-content:center;}
  .mobile-menu{display:none;}
  .demo-dialog{width:min(560px, calc(100% - 32px)); border:1px solid var(--line-bright); border-radius:24px; padding:0; background:var(--black); color:var(--white); box-shadow:0 24px 100px rgba(0,0,0,.55);}
  .demo-dialog::backdrop{background:rgba(0,0,0,.72); backdrop-filter:blur(6px);}
  .demo-dialog-inner{padding:30px;}
  .demo-dialog h2{font-size:1.7rem; margin-bottom:8px;}
  .demo-dialog p{color:var(--ink-70); line-height:1.55; margin-bottom:22px;}
  .demo-form{display:grid; gap:14px;}
  .demo-form label{display:grid; gap:7px; color:var(--ink-70); font-size:.86rem;}
  .demo-form input,.demo-form textarea{width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--panel); color:var(--white); font:inherit;}
  .demo-form textarea{min-height:88px; resize:vertical;}
  .dialog-actions{display:flex; justify-content:flex-end; gap:12px; margin-top:8px;}
  .dialog-close{border:1px solid var(--line); background:transparent; color:var(--white); border-radius:100px; min-height:44px; padding:10px 18px; cursor:pointer;}
  .form-success{display:none; padding:14px; border-radius:12px; background:var(--green-soft); color:var(--white); line-height:1.5;}
  @media (max-width:900px){.mobile-menu-toggle{display:flex;} .nav-links{display:none;} .nav{padding:12px 20px;} .mobile-menu{position:absolute; top:100%; left:0; right:0; padding:12px 20px 20px; background:var(--header-bg); backdrop-filter:blur(18px); border-bottom:1px solid var(--line);} .mobile-menu.is-open{display:grid; gap:4px;} .mobile-menu a{padding:13px 10px; border-radius:10px; color:var(--ink-70);} .mobile-menu a:hover{background:var(--panel); color:var(--white);}}
  @media (max-width:640px){.nav-cta{gap:8px;} .nav-cta .btn{padding:10px 14px; font-size:.82rem;} .demo-dialog-inner{padding:24px;}}
  @media (prefers-reduced-motion: reduce){.marquee-track,.mesh,.float-badge,.kicker .dot,.scroll-progress,.btn-breathe{animation:none !important;} .reveal, .reveal.in{opacity:1 !important; transform:none !important;} html.js-ready #como-funciona .flow-stage, html.js-ready #como-funciona .flow-track{opacity:1;transform:none;}}