:root{
  --bg:#05050B;
  --bg-2:#08081A;
  --panel:#0E0F1A;
  --panel-2:#14151F;
  --line:rgba(255,255,255,.06);
  --line-strong:rgba(255,255,255,.10);
  --ink:#F2F2F5;
  --ink-2:#A6A7B3;
  --ink-3:#76778A;
  --ink-4:#3D3E48;
  --violet:#5B47F0;
  --violet-2:#7E6CFF;
  --violet-3:#9F90FF;
  --violet-glow:rgba(110,91,255,.45);
  --green:#3DD68C;
  --amber:#F0A641;
  --cyan:#4FA8FF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Inter',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
body{overflow-x:hidden;position:relative;background:
    radial-gradient(ellipse 900px 700px at 78% 8%, rgba(82,60,210,.28), transparent 60%),
    radial-gradient(ellipse 700px 600px at 18% 42%, rgba(50,40,140,.18), transparent 65%),
    radial-gradient(ellipse 900px 700px at 84% 58%, rgba(70,55,180,.18), transparent 60%),
    radial-gradient(ellipse 700px 700px at 50% 92%, rgba(90,72,220,.22), transparent 65%),
    #05050B}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(110,91,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 60%, rgba(0,0,0,.5) 100%);
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:rgba(110,91,255,.4);color:#fff}

/* ===== Type ===== */
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.01em}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
  font-family:'Inter','JetBrains Mono',sans-serif;font-size:12px;color:#B5B6C2;letter-spacing:.005em;font-weight:500;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  position:relative}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;
  background:#B7ADFF;
  box-shadow:0 0 8px rgba(183,173,255,.7), 0 0 14px rgba(110,91,255,.4);
  margin-left:2px}
.eyebrow .chev{display:none}
.eyebrow .chev{opacity:.55;display:inline-flex}
.eyebrow .chev svg{width:10px;height:10px}

h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.025em;color:var(--ink)}
h1{
  font-size:clamp(48px,5.8vw,86px);
  line-height:1.02;
  letter-spacing:-0.035em;
  font-weight:600;
  background:linear-gradient(180deg,#FFFFFF 0%,#E7E7EE 35%,#A6A7B4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.04);
}
h2{font-size:clamp(34px,3.6vw,52px);line-height:1.08;letter-spacing:-0.025em;font-weight:500;
  background:linear-gradient(180deg,#FFFFFF 0%,#E7E7EE 45%,#BABBC6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h3{font-size:21px;line-height:1.3;letter-spacing:-0.012em;font-weight:500;color:#EDEEF5}
p{margin:0;color:var(--ink-2);line-height:1.55;font-weight:400}

/* ===== Layout ===== */
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.hair{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 18%,rgba(255,255,255,.08) 82%,transparent);width:100%}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:18px 28px;border-radius:999px;font-weight:500;font-size:15.5px;transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease;line-height:1}
.btn .arr{width:13px;height:13px;opacity:.95}
.btn-primary{background:
    radial-gradient(ellipse 80% 110% at 50% 0%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(180deg,#8B78FF 0%,#6A55F0 55%,#4A37D6 100%);
  color:#fff;
  box-shadow:
    0 14px 36px -10px rgba(91,71,240,.65),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 2px 0 rgba(255,255,255,.35) inset,
    0 -1px 0 rgba(0,0,0,.25) inset,
    0 0 0 6px rgba(110,91,255,.06)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:
    0 18px 44px -10px rgba(91,71,240,.8),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 2px 0 rgba(255,255,255,.4) inset,
    0 -1px 0 rgba(0,0,0,.25) inset,
    0 0 0 8px rgba(110,91,255,.10)}
.btn-ghost{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.025);color:var(--ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px -10px rgba(0,0,0,.5)}
.btn-ghost:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.04)}

/* ===== Nav ===== */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);background:rgba(5,5,12,.45);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:20px 0;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-0.015em;font-size:18px;color:#fff}
.brand-mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#9F90FF,#5B47F0);display:grid;place-items:center;box-shadow:0 6px 14px -6px var(--violet-glow), inset 0 1px 0 rgba(255,255,255,.3)}
.brand-mark svg{width:14px;height:14px}
.nav-links{display:flex;align-items:center;gap:36px;color:#B5B6C2;font-size:14.5px;font-weight:400}
.nav-links a{display:inline-flex;align-items:center;gap:5px;transition:color .15s}
.nav-links a:hover{color:#fff}
.nav-links svg{width:10px;height:10px;opacity:.55}
.nav-right{display:flex;align-items:center;gap:18px}
.lang{font-size:13.5px;color:#B5B6C2;display:inline-flex;align-items:center;gap:5px}
.nav-get{display:inline-flex;align-items:center;padding:11px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.025);font-size:13.5px;color:#fff;transition:border-color .15s, background .15s;backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.nav-get:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05)}

/* ===== Stars + beams ===== */
.stars{position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 78% 22%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(1.4px 1.4px at 64% 38%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 88% 8%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(1px 1px at 20% 64%,rgba(255,255,255,.3),transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 48%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(1px 1px at 36% 30%,rgba(255,255,255,.35),transparent 60%),
    radial-gradient(1px 1px at 8% 84%,rgba(255,255,255,.35),transparent 60%),
    radial-gradient(1px 1px at 54% 76%,rgba(255,255,255,.3),transparent 60%);
}

/* ===== Hero (Crypton-style: centered headline + big dashboard below) ===== */
.hero{position:relative;padding:88px 0 60px;overflow:hidden;z-index:1;text-align:center}
.hero-copy{position:relative;z-index:2;max-width:880px;margin:0 auto}
.hero-copy .eyebrow{margin-bottom:30px}
.hero h1{margin:0 auto;max-width:880px}
.hero p.lede{margin:24px auto 0;max-width:560px;font-size:17px;color:#A6A7B3;line-height:1.55}
.hero-cta{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* Logo marquee */
.trust{position:relative;z-index:2;margin:64px auto 0;max-width:1100px}
.trust-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;color:#76778A;text-transform:uppercase;text-align:center;margin-bottom:22px}
.marquee{position:relative;overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);}
.marquee-track{display:flex;gap:64px;width:max-content;animation:scroll 32s linear infinite;align-items:center}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-item{display:inline-flex;align-items:center;gap:10px;color:#9FA0AC;font-size:18px;font-weight:500;letter-spacing:-0.01em;white-space:nowrap;opacity:.7;transition:opacity .2s}
.logo-item:hover{opacity:1}
.logo-item svg{width:22px;height:22px;opacity:.85}

/* Dashboard mockup */
.dashboard{position:relative;z-index:2;margin:80px auto 0;max-width:1180px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(22,24,40,.55), rgba(8,9,20,.4));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 60px 100px -40px rgba(91,71,240,.35),
    0 30px 60px -30px rgba(0,0,0,.7);
  overflow:hidden;
  isolation:isolate;
  transform-origin:50% 100%;
  transform:perspective(1800px) rotateX(calc((1 - var(--p, 0)) * 26deg)) scale(calc(0.94 + var(--p, 0) * 0.06)) translateY(calc((1 - var(--p, 0)) * 60px));
  opacity:calc(0.55 + var(--p, 0) * 0.45);
  will-change:transform, opacity;
}
.dashboard-glow{position:absolute;left:50%;transform:translateX(-50%);bottom:-80px;width:80%;height:120px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 50% 100% at 50% 50%, rgba(110,91,255,calc(var(--p, 0) * 0.45)), transparent 65%);
  filter:blur(20px);
  transition:none;
}

/* Scroll-driven via view-timeline (modern browsers) — JS still runs as fallback */
@supports (animation-timeline: view()) {
  .dashboard{
    animation:dashUnfold linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 35%;
  }
}
@keyframes dashUnfold{
  from{ transform:perspective(1800px) rotateX(26deg) scale(0.94) translateY(60px); opacity:.55; }
  to  { transform:perspective(1800px) rotateX(0deg) scale(1) translateY(0); opacity:1; }
}
.dashboard::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 700px 400px at 50% -10%, rgba(140,120,255,.22), transparent 65%),
    radial-gradient(ellipse 400px 300px at 80% 100%, rgba(91,71,240,.18), transparent 70%),
    radial-gradient(ellipse 380px 280px at 15% 90%, rgba(60,40,170,.12), transparent 70%);
}
.dash-chrome{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.05);position:relative;z-index:2;background:rgba(0,0,0,.15)}
.dash-chrome .dots{display:inline-flex;gap:6px}
.dash-chrome .dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.10);display:inline-block}
.dash-chrome .url{flex:1;display:flex;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#76778A;letter-spacing:.04em}
.dash-chrome .url-pill{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);padding:5px 14px;border-radius:999px}
.dash-body{position:relative;display:grid;grid-template-columns:220px 1fr;min-height:560px;z-index:2}
.dash-side{padding:26px 18px;border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:24px;background:rgba(0,0,0,.12)}
.dash-side .brand-row{display:flex;align-items:center;gap:10px;font-weight:600;color:#fff;font-size:15px}
.dash-side .brand-row .brand-mark{width:22px;height:22px;border-radius:6px}
.dash-side .group{display:flex;flex-direction:column;gap:4px}
.dash-side .group-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;color:#52535e;text-transform:uppercase;padding:0 10px;margin-bottom:8px}
.dash-side .nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:#9FA0AC;font-size:13.5px;cursor:default;transition:background .15s, color .15s}
.dash-side .nav-item svg{width:15px;height:15px;opacity:.7}
.dash-side .nav-item.active{background:linear-gradient(180deg, rgba(110,91,255,.18), rgba(91,71,240,.10));color:#EDEEF5;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.dash-side .nav-item.active svg{opacity:1;color:#B7ADFF}
.dash-side .nav-item:hover{color:#EDEEF5;background:rgba(255,255,255,.03)}

.dash-main{position:relative;padding:30px 32px 40px;overflow:hidden}
.dash-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.dash-toolbar h4{margin:0;font-size:18px;font-weight:500;color:#EDEEF5;letter-spacing:-0.01em}
.dash-toolbar .sub{font-size:12.5px;color:#76778A;margin-top:3px}
.dash-toolbar .btn-mini{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#EDEEF5;font-family:'JetBrains Mono',monospace}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.dash-stat{padding:14px 16px;border:1px solid rgba(255,255,255,.06);border-radius:14px;
  background:linear-gradient(180deg, rgba(22,23,38,.4), rgba(10,11,22,.3));
  backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.dash-stat .l{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;color:#76778A;text-transform:uppercase}
.dash-stat .v{font-size:22px;font-weight:600;letter-spacing:-0.025em;color:#fff;margin-top:4px}
.dash-stat .d{font-size:11.5px;color:#3DD68C;margin-top:2px;font-family:'JetBrains Mono',monospace}
.dash-stat .d.down{color:#F0A641}

.dash-canvas{position:relative;height:360px;border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(ellipse 600px 300px at 70% 20%, rgba(110,91,255,.18), transparent 65%),
    radial-gradient(ellipse 400px 240px at 20% 80%, rgba(60,40,170,.14), transparent 70%),
    linear-gradient(180deg, rgba(14,15,28,.7), rgba(6,7,14,.7));
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}

/* big cube center-right */
.dash-cube{position:absolute;top:38px;right:120px;width:200px;height:200px;animation:floatCube 7s ease-in-out infinite}
.dash-cube > div{
  width:100%;height:100%;border-radius:40px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,.45), transparent 55%),
    linear-gradient(165deg,#A294FF 0%,#7B68FF 35%,#5B47F0 65%,#3C2BC8 100%);
  box-shadow:
    0 45px 90px -25px rgba(91,71,240,.65),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 2px 0 rgba(255,255,255,.45) inset,
    0 -40px 80px -40px rgba(255,255,255,.20) inset;
  transform:rotate(-10deg);
  display:grid;place-items:center;position:relative}
.dash-cube > div::before{content:"";position:absolute;top:8%;left:8%;right:46%;height:34%;border-radius:30px 18px 50% 30%;background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,0));filter:blur(2px);pointer-events:none}
.dash-cube svg{width:92px;height:92px;filter:drop-shadow(0 8px 16px rgba(20,10,80,.5))}
@keyframes floatCube{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* sparkline area */
.dash-chart{position:absolute;left:30px;right:30px;bottom:30px;height:140px}
.dash-chart svg{width:100%;height:100%}
.dash-callout{position:absolute;left:40%;bottom:130px;
  background:rgba(16,17,28,.86);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:9px 14px;
  display:flex;flex-direction:column;gap:2px;backdrop-filter:blur(14px)}
.dash-callout .t{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:#76778A}
.dash-callout .v{font-size:18px;font-weight:600;letter-spacing:-0.02em;color:#fff;display:flex;align-items:center;gap:8px}
.dash-callout .badge{font-size:10.5px;font-weight:500;color:#B7ADFF;background:rgba(110,91,255,.16);border:1px solid rgba(110,91,255,.32);padding:2px 7px;border-radius:999px;font-family:'JetBrains Mono',monospace}

.dash-months{position:absolute;left:30px;right:30px;bottom:14px;display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10px;color:#3D3E48;letter-spacing:.18em;text-transform:uppercase}

/* bars card top-right */
.dash-bars{position:absolute;top:24px;right:24px;width:90px;padding:14px;border-radius:14px;
  background:linear-gradient(180deg, rgba(22,23,38,.6), rgba(10,11,22,.5));
  border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.dash-bars .h{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;color:#76778A;text-transform:uppercase;text-align:center;margin-bottom:10px}
.dash-bars .bs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-items:end;height:80px}
.dash-bars .bs div{border-radius:3px}
.dash-bars .bs div:nth-child(1){height:50%;background:#22243d}
.dash-bars .bs div:nth-child(2){height:70%;background:#3a3b58}
.dash-bars .bs div:nth-child(3){height:100%;background:linear-gradient(180deg,#9F90FF,#5B47F0)}
.dash-bars .lab{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:#3D3E48;text-align:center}

/* ring bottom-right */
.dash-ring{position:absolute;bottom:30px;right:24px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(28,30,52,.92), rgba(8,9,18,.88));
  border:1px solid rgba(255,255,255,.06);display:grid;place-items:center}
.dash-ring .r{width:96px;height:96px;border-radius:50%;
  background:conic-gradient(from -90deg, rgba(255,255,255,.55) 0 97%, rgba(255,255,255,.08) 97% 100%);
  -webkit-mask:radial-gradient(circle 36px at 50% 50%, transparent 99%, #000 100%);
          mask:radial-gradient(circle 36px at 50% 50%, transparent 99%, #000 100%);
  position:absolute;opacity:.85}
.dash-ring .p{position:relative;font-size:22px;font-weight:600;color:#fff;letter-spacing:-0.02em}
.dash-ring .lab{position:absolute;bottom:16px;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:#76778A;letter-spacing:.16em;text-transform:uppercase}

/* Big diagonal light beam */
.beam{position:absolute;top:-220px;right:6%;width:680px;height:1100px;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 130px 700px at 50% 0%, rgba(140,120,255,.50), transparent 65%),
    radial-gradient(ellipse 260px 900px at 50% 0%, rgba(90,72,220,.18), transparent 70%);
  filter:blur(2px);transform:rotate(10deg);mix-blend-mode:screen}
.beam-soft{position:absolute;top:-100px;right:18%;width:520px;height:520px;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 50%, rgba(120,100,255,.18), transparent 65%);filter:blur(8px)}

/* Hero stage */
.stage{position:relative;height:560px}

/* 3D cube */
.cube-wrap{position:absolute;top:30px;left:14%;width:260px;height:260px;animation:float 7s ease-in-out infinite;transform-origin:center}
.cube{
  width:100%;height:100%;border-radius:50px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,.45), transparent 55%),
    linear-gradient(165deg,#A294FF 0%,#7B68FF 35%,#5B47F0 65%,#3C2BC8 100%);
  box-shadow:
    0 45px 90px -25px rgba(91,71,240,.65),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 2px 0 rgba(255,255,255,.45) inset,
    0 -40px 80px -40px rgba(255,255,255,.20) inset,
    inset 0 -2px 30px rgba(0,0,0,.3);
  transform:rotate(-10deg);
  display:grid;place-items:center;position:relative;
}
.cube::before{content:"";position:absolute;top:8%;left:8%;right:46%;height:34%;border-radius:36px 22px 50% 30%;background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,0));filter:blur(2px);pointer-events:none}
.cube svg{width:110px;height:110px;filter:drop-shadow(0 8px 16px rgba(20,10,80,.5))}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(0.5deg)}}

.float-card{position:absolute;border-radius:20px;background:linear-gradient(180deg,rgba(22,23,36,.42),rgba(10,11,22,.32));
  border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(22px) saturate(120%);-webkit-backdrop-filter:blur(22px) saturate(120%);padding:16px 18px;
  box-shadow:
    0 30px 70px -22px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.02) inset}
.fc-1{top:260px;left:6%;width:260px;padding:18px 20px}
.fc-1 .label{font-size:11.5px;color:#7A7B89;letter-spacing:.005em}
.fc-1 .price{margin-top:6px;font-size:24px;font-weight:600;letter-spacing:-0.025em;display:flex;align-items:center;gap:10px;color:#fff}
.fc-1 .pill{background:rgba(110,91,255,.16);border:1px solid rgba(110,91,255,.35);color:#B7ADFF;font-size:11px;padding:3px 9px;border-radius:999px;font-family:'JetBrains Mono',monospace}

.fc-2{top:30px;right:-20px;width:230px;height:300px;padding:18px}
.fc-2 .h{display:flex;align-items:center;gap:8px;color:#9FA0AC;font-size:12.5px}
.fc-2 .h svg{width:14px;height:14px;opacity:.7}
.bars{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end;height:140px}
.bars div{border-radius:5px;background:repeating-linear-gradient(45deg,#1c1d2a 0 3px,#15172b 3px 6px)}
.bars div.b{background:linear-gradient(180deg,#9F90FF,#5B47F0);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.months{margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;color:#52535e;letter-spacing:.15em}

.fc-3{bottom:0;right:30px;width:170px;height:170px;border-radius:50%;padding:0;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%, rgba(28,30,52,.92), rgba(8,9,18,.88));
  border:1px solid rgba(255,255,255,.06);}
.ring{width:132px;height:132px;border-radius:50%;
  background:conic-gradient(from -90deg, rgba(255,255,255,.55) 0 97%, rgba(255,255,255,.06) 97% 100%);
  -webkit-mask:radial-gradient(circle 50px at 50% 50%, transparent 99%, #000 100%);
  mask:radial-gradient(circle 50px at 50% 50%, transparent 99%, #000 100%);
  position:absolute;opacity:.85}
.fc-3 .pct{position:relative;font-size:32px;font-weight:600;letter-spacing:-0.025em;color:#fff}
.fc-3 .lbl{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:#7A7B89;text-transform:uppercase}

/* Sparkline graph below cube */
.spark{position:absolute;left:0;bottom:40px;right:0;height:90px;pointer-events:none}
.spark svg{width:100%;height:100%}
.spark-label{position:absolute;left:30%;bottom:90px;background:rgba(16,17,28,.86);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:7px 11px;display:flex;align-items:center;gap:10px;font-size:12px;color:#fff;backdrop-filter:blur(12px)}
.spark-label small{color:#7A7B89;font-size:11px}

/* ===== Features ===== */
.features{position:relative;padding:60px 0 140px;border-top:1px solid var(--line);z-index:1}
.feat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:64px 0 56px}
.feat-head h2{max-width:560px}
.feat-head p{max-width:380px;color:#7A7B89;font-size:14.5px}
.feat-head .eyebrow{margin-bottom:22px}

.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat{position:relative;padding:50px 36px 48px;}
.feat:nth-child(odd){border-right:1px solid var(--line)}
.feat:nth-child(1),.feat:nth-child(2){border-bottom:1px solid var(--line)}
.feat-stage{position:relative;height:400px;margin-bottom:36px;isolation:isolate}
.feat-stage::before{content:"";position:absolute;inset:-40px;z-index:-1;pointer-events:none;border-radius:50%;}

/* Distinct ambient glow per feature — subtle, matching reference */
.f1 .feat-stage::before{
  background:
    radial-gradient(ellipse 320px 240px at 50% 78%, rgba(110,91,255,.14), transparent 70%),
    radial-gradient(ellipse 260px 180px at 50% 30%, rgba(70,55,180,.06), transparent 75%);
  filter:blur(10px);
}
.f2 .feat-stage::before{
  background:
    radial-gradient(ellipse 280px 240px at 50% 50%, rgba(110,91,255,.18), transparent 65%),
    radial-gradient(ellipse 520px 360px at 50% 50%, rgba(70,55,180,.06), transparent 75%);
  filter:blur(10px);
}
.f3 .feat-stage::before{
  background:
    radial-gradient(ellipse 320px 240px at 55% 50%, rgba(110,91,255,.14), transparent 70%),
    radial-gradient(ellipse 200px 140px at 25% 28%, rgba(79,168,255,.05), transparent 75%);
  filter:blur(10px);
}
.f4 .feat-stage::before{
  background:
    radial-gradient(ellipse 280px 220px at 50% 18%, rgba(110,91,255,.18), transparent 70%),
    radial-gradient(ellipse 380px 260px at 50% 82%, rgba(70,55,180,.06), transparent 75%);
  filter:blur(10px);
}

/* extra inner aura behind hero-of-feature elements */
.feat-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,255,255,.025), transparent 70%);}
.feat h3{font-size:22px;letter-spacing:-0.018em;font-weight:500;color:#EDEEF5}
.feat .desc{margin-top:10px;max-width:520px;font-size:15px;color:#7A7B89;line-height:1.55}

/* card primitives */
.card{background:linear-gradient(180deg,rgba(22,23,36,.40),rgba(10,11,22,.30));
  border:1px solid rgba(255,255,255,.07);border-radius:18px;
  backdrop-filter:blur(22px) saturate(120%);-webkit-backdrop-filter:blur(22px) saturate(120%);
  box-shadow:
    0 24px 50px -22px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.22)}
.l{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;color:#6A6B79;text-transform:uppercase;font-weight:500}
.v{font-size:22px;font-weight:600;letter-spacing:-0.025em;color:#fff;margin-top:5px}
.s{font-size:12px;color:#7A7B89;margin-top:4px}

.chip{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;
  background:
    radial-gradient(ellipse 80% 110% at 50% 0%, rgba(255,255,255,.32), transparent 60%),
    linear-gradient(180deg,#8B78FF 0%,#6A55F0 55%,#4A37D6 100%);
  color:#fff;font-weight:500;font-size:14px;
  box-shadow:
    0 14px 32px -10px rgba(91,71,240,.7),
    0 0 0 8px rgba(110,91,255,.08),
    inset 0 2px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.22)}
.chip svg{width:14px;height:14px}

.ico-tile{width:36px;height:36px;border-radius:10px;background:linear-gradient(180deg,rgba(36,38,60,.55),rgba(16,17,28,.55));
  border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 4px 10px -4px rgba(0,0,0,.5);
  backdrop-filter:blur(8px)}
.ico-tile svg{width:16px;height:16px;color:#B7ADFF;opacity:.95}

/* Connectors */
.conn{position:absolute;inset:0;pointer-events:none}
.conn path{stroke:rgba(255,255,255,.085);stroke-width:1;fill:none;stroke-dasharray:2 3}
.conn .dot{fill:rgba(255,255,255,.22)}
.conn .node{stroke:rgba(255,255,255,.18);fill:rgba(255,255,255,.02);stroke-dasharray:none}

/* === F1 layout (Compose access) === */
.f1 .top-card{position:absolute;top:0;left:50%;transform:translateX(-50%);width:280px;padding:14px 16px}
.f1 .top-card .row{display:flex;align-items:center;gap:12px;padding:8px 0}
.f1 .top-card .row + .row{border-top:1px solid rgba(255,255,255,.05)}
.f1 .top-card .row .ico-tile{flex-shrink:0}
.f1 .chip-bottom{position:absolute;bottom:30px;left:50%;transform:translateX(-50%)}
.f1 .deco-side-left{position:absolute;left:0;top:46%;width:38px;height:38px;border-radius:50%;border:1px dashed rgba(255,255,255,.08)}
.f1 .deco-side-right{position:absolute;right:0;top:46%;width:38px;height:38px;border-radius:50%;border:1px dashed rgba(255,255,255,.08)}

/* === F2 layout (Phases / audiences) === */
.f2 .card-tl{position:absolute;top:0;left:0;width:230px;padding:14px 16px}
.f2 .card-tr{position:absolute;top:0;right:0;width:230px;padding:14px 16px}
.f2 .card-bl{position:absolute;bottom:50px;left:0;width:240px;padding:14px 16px}
.f2 .card-br{position:absolute;bottom:50px;right:0;width:230px;padding:14px 16px}
.f2 .user{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;margin-top:8px}
.f2 .user + .user{margin-top:6px}
.f2 .user .name{display:flex;align-items:center;gap:8px;color:#EDEEF5}
.f2 .user .name i{width:8px;height:8px;border-radius:50%}
.f2 .user .tag{color:#7A7B89;font-size:11.5px}
.f2 .pending i{background:var(--amber);box-shadow:0 0 8px rgba(240,166,65,.6)}
.f2 .approved i{background:var(--green);box-shadow:0 0 8px rgba(61,214,140,.5)}
.f2 .center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#B0A3FF 0%,#7B68FF 45%,#3D2BC8 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 30px var(--violet-glow), inset 0 4px 14px rgba(255,255,255,.28), inset 0 -8px 20px rgba(0,0,0,.35);
  display:grid;place-items:center}
.f2 .center::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(110,91,255,.15)}
.f2 .center::after{content:"";position:absolute;inset:-28px;border-radius:50%;border:1px dashed rgba(110,91,255,.10)}
.f2 .center svg{width:42px;height:42px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.f2 .pill-top{position:absolute;top:22%;left:50%;transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse 80% 110% at 50% 0%, rgba(255,255,255,.30), transparent 60%),
    linear-gradient(180deg,#8B78FF,#5B47F0);
  color:#fff;font-size:11.5px;padding:8px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  box-shadow:0 12px 28px -8px rgba(91,71,240,.65), 0 0 0 6px rgba(110,91,255,.08), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.22)}
.pill-top .spin, .processing .spin{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.f2 .live{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#7A7B89;font-family:'JetBrains Mono',monospace;margin-top:10px}
.f2 .live .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}

/* === F3 layout (Live ops) === */
.f3 .card-tl{position:absolute;top:0;left:0;width:240px;padding:14px 16px}
.f3 .card-bl{position:absolute;bottom:30px;left:0;width:240px;padding:14px 16px}
.f3 .card-mid{position:absolute;top:50%;right:0;transform:translateY(-50%);width:300px;padding:14px 16px}
.f3 .row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.f3 .donut{width:62px;height:62px;border-radius:50%;
  background:conic-gradient(from -90deg, #4FA8FF 0 97%, rgba(255,255,255,.08) 97% 100%);
  -webkit-mask:radial-gradient(circle 22px at 50% 50%, transparent 99%, #000 100%);
  mask:radial-gradient(circle 22px at 50% 50%, transparent 99%, #000 100%);
  flex-shrink:0;opacity:.95}
.f3 .micro-line{margin-top:8px;height:34px;width:100%}
.f3 .processing{position:absolute;top:48%;left:48%;transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse 80% 110% at 50% 0%, rgba(255,255,255,.30), transparent 60%),
    linear-gradient(180deg,#8B78FF,#5B47F0);
  color:#fff;font-size:11.5px;padding:8px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  box-shadow:0 12px 28px -8px rgba(91,71,240,.65), 0 0 0 6px rgba(110,91,255,.08), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.22)}
.f3 .task-list{margin-top:12px;display:flex;flex-direction:column;gap:7px;font-size:12.5px}
.f3 .task-list .li{display:flex;justify-content:space-between;align-items:center;color:#EDEEF5}
.f3 .task-list .li .lhs{display:inline-flex;align-items:center;gap:8px}
.f3 .task-list .li i{width:9px;height:9px;border-radius:50%;border:1.4px solid rgba(255,255,255,.18);display:inline-block;background:transparent}
.f3 .task-list .li .r{color:#7A7B89;font-size:11.5px}
.f3 .live{display:flex;align-items:center;gap:6px;color:#7A7B89;font-family:'JetBrains Mono',monospace;font-size:10.5px}
.f3 .live .dot{width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 8px var(--green)}

/* === F4 layout (Rewards) === */
.f4 .card-top{position:absolute;top:0;left:50%;transform:translateX(-50%);width:300px;padding:14px 16px;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:center}
.f4 .card-top .iconBig{width:38px;height:38px;border-radius:11px;
  background:
    radial-gradient(ellipse 80% 110% at 50% 0%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(180deg,#8B78FF 0%,#5B47F0 100%);
  display:grid;place-items:center;
  box-shadow:0 10px 22px -6px rgba(91,71,240,.6), inset 0 2px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.22)}
.f4 .card-top .iconBig svg{width:18px;height:18px;color:#fff}
.f4 .gift{position:absolute;top:120px;left:50%;transform:translateX(calc(-50% - 110px));width:42px;height:42px;border-radius:11px;
  background:linear-gradient(180deg,rgba(36,38,60,.55),rgba(16,17,28,.55));
  border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 14px -4px rgba(0,0,0,.5);
  backdrop-filter:blur(8px)}
.f4 .gift svg{width:18px;height:18px;color:#B7ADFF}
.f4 .card-bot{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);width:280px;padding:14px 16px}
.f4 .meta{margin-top:10px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#9FA0AC}
.f4 .meta span{display:inline-flex;align-items:center;gap:8px}
.f4 .meta i{width:9px;height:9px;border-radius:50%;border:1.4px solid rgba(255,255,255,.18);display:inline-block}
.f4 .meta b{color:#EDEEF5;font-weight:500}
.f4 .placeholder-grid{position:absolute;inset:auto 0 50px 0;height:140px;display:grid;grid-template-columns:42px 42px 42px;gap:10px;justify-content:space-between;align-items:end;pointer-events:none;padding:0 26px}
.f4 .placeholder-grid .col{display:grid;grid-template-rows:42px 42px;gap:10px}
.f4 .placeholder-grid .col div{border:1px solid rgba(255,255,255,.05);border-radius:9px;background:rgba(255,255,255,.012)}
.f4 .placeholder-right{position:absolute;right:0;top:38%;display:grid;grid-template-columns:42px 42px;grid-template-rows:42px 42px;gap:10px}
.f4 .placeholder-right div{border:1px solid rgba(255,255,255,.05);border-radius:9px;background:rgba(255,255,255,.012)}
.f4 .placeholder-left{position:absolute;left:0;top:38%;display:grid;grid-template-columns:42px 42px;grid-template-rows:42px 42px;gap:10px}
.f4 .placeholder-left div{border:1px solid rgba(255,255,255,.05);border-radius:9px;background:rgba(255,255,255,.012)}

/* ===== Stories ===== */
.stories{position:relative;padding:120px 0;border-top:1px solid var(--line);text-align:center;z-index:1}
.stories-head .eyebrow{margin-bottom:24px}
.stories-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:14px;margin-top:60px;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:28px;
  background:linear-gradient(180deg,rgba(20,22,40,.35),rgba(8,9,20,.25));
  backdrop-filter:blur(18px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -30px rgba(0,0,0,.7)}
.story{position:relative;border-radius:20px;padding:44px 42px 36px;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;overflow:hidden}
.story-primary{
  background:
    radial-gradient(ellipse 80% 70% at 100% 100%, rgba(186,170,255,.55), transparent 60%),
    radial-gradient(ellipse 90% 80% at 0% 0%, rgba(20,8,90,.85), transparent 60%),
    linear-gradient(135deg, #1F1480 0%, #3F2BB8 35%, #6347E8 70%, #8C75FF 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.40),
    inset 0 0 70px rgba(20,8,80,.30),
    0 30px 60px -30px rgba(91,71,240,.55)}
.story-primary::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 100% 100%, rgba(255,255,255,.28), transparent 55%),
    radial-gradient(ellipse 55% 50% at 0% 0%, rgba(10,4,50,.55), transparent 60%);
  mix-blend-mode:soft-light}
.story-dark{
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(60,55,110,.32), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(40,30,90,.22), transparent 65%),
    linear-gradient(170deg,rgba(34,36,56,.65),rgba(14,15,28,.55));
  border:1px solid rgba(255,255,255,.08);color:var(--ink);
  backdrop-filter:blur(20px) saturate(125%);-webkit-backdrop-filter:blur(20px) saturate(125%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.3),
    inset 0 0 50px rgba(80,70,160,.10),
    0 30px 50px -30px rgba(0,0,0,.6)}
.story-dark::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(ellipse 50% 40% at 30% 10%, rgba(160,150,220,.10), transparent 65%);}
.story q{display:block;font-size:22px;line-height:1.42;letter-spacing:-0.012em;font-weight:400;quotes:"\201C" "\201D";max-width:520px;position:relative;z-index:2}
.story-dark q{max-width:340px;font-size:21px}
.story q::before{content:open-quote}
.story q::after{content:close-quote}
.story-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:32px;gap:20px;position:relative;z-index:2}
.story-foot .who{font-size:14.5px;font-weight:500}
.story-foot .role{font-size:13px;opacity:.7;font-weight:400;margin-top:3px}
.story-foot .logo{display:flex;align-items:center;gap:8px;font-weight:600;letter-spacing:-0.01em;font-size:14.5px}
.story-foot .logo .mk{width:18px;height:18px;border-radius:5px;display:grid;place-items:center}
.story-primary .glyph{position:absolute;right:-60px;bottom:-80px;width:480px;height:480px;opacity:.42;pointer-events:none;z-index:1;
  -webkit-mask:radial-gradient(ellipse 65% 65% at 60% 55%, #000 25%, rgba(0,0,0,.55) 55%, transparent 85%);
  mask:radial-gradient(ellipse 65% 65% at 60% 55%, #000 25%, rgba(0,0,0,.55) 55%, transparent 85%);
  filter:blur(.3px)}
.story-primary .glyph-faint{position:absolute;right:-160px;top:-100px;width:420px;height:420px;opacity:.12;pointer-events:none;z-index:0;filter:blur(2px)}
.stories-foot{display:flex;justify-content:space-between;align-items:center;margin-top:28px;text-align:left;gap:24px}
.stories-foot p{color:#7A7B89;font-size:14px;max-width:720px}

/* ===== CTA ===== */
.cta{position:relative;padding:140px 0 160px;border-top:1px solid var(--line);text-align:center;overflow:hidden;
  background:radial-gradient(ellipse 800px 500px at 50% 0%, rgba(110,91,255,.18), transparent 60%)}
.cta .beam2{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:600px;
  background:radial-gradient(ellipse 200px 460px at 50% 0%, rgba(140,120,255,.45), transparent 65%);pointer-events:none;filter:blur(4px);mix-blend-mode:screen}
.cta h2{max-width:780px;margin:18px auto 0;position:relative;z-index:2}
.cta p{margin:20px auto 0;max-width:520px;position:relative;z-index:2;color:#9FA0AC}
.cta-row{margin-top:40px;display:flex;justify-content:center;gap:12px;position:relative;z-index:2}

/* ===== Footer ===== */
footer{border-top:1px solid var(--line);padding:64px 0 40px;color:#7A7B89;font-size:13.5px}
footer .row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:36px}
footer h4{margin:0 0 16px;font-size:11px;color:#9FA0AC;letter-spacing:.14em;font-weight:500;text-transform:uppercase;font-family:'JetBrains Mono',monospace}
footer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
footer ul a{color:#7A7B89;transition:color .15s}
footer ul a:hover{color:#fff}
footer .legal{margin-top:56px;display:flex;justify-content:space-between;color:#52535e;font-size:12px;padding-top:32px;border-top:1px solid var(--line)}
footer .brand-wrap p{margin-top:14px;max-width:300px;color:#7A7B89}

@media (max-width:980px){
  .dash-body{grid-template-columns:1fr}
  .dash-side{display:none}
  .dash-stats{grid-template-columns:1fr 1fr}
  .feat-grid{grid-template-columns:1fr}
  .feat:nth-child(odd){border-right:0}
  .feat{border-bottom:1px solid var(--line)}
  .stories-grid{grid-template-columns:1fr}
  .stories-foot{flex-direction:column;align-items:flex-start;gap:18px}
  footer .row{grid-template-columns:1fr 1fr;gap:24px}
  .nav-links{display:none}
  .feat-head{flex-direction:column;align-items:flex-start;gap:20px}
}