:root{
  --bg:#080a0e;
  --bg-soft:#0d1016;
  --panel:#12161d;
  --panel-2:#171c25;
  --panel-3:#0f1319;
  --text:#f4f7fb;
  --muted:#97a5b5;
  --muted-2:#718094;
  --line:#242b35;
  --line-strong:#36414f;
  --orange:#ff8b39;
  --cyan:#42d8ff;
  --green:#67e4a7;
  --violet:#b18cff;
  --gold:#ffd15a;
  --red:#ff6f7c;
  --pink:#ff6ec7;
  --indigo:#6f8cff;
  --max:1240px;
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 82% -3%,rgba(69,215,255,.12),transparent 29rem),
    radial-gradient(circle at 8% 8%,rgba(255,135,56,.10),transparent 28rem),
    radial-gradient(circle at 50% 18%,rgba(177,140,255,.07),transparent 26rem),
    linear-gradient(180deg,#090b10 0%, #080a0e 52%, #090b10 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:100;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(calc(100% - 42px),var(--max));margin-inline:auto}
::selection{background:rgba(69,215,255,.25)}

.site-nav{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(9,11,15,.72);
  backdrop-filter:blur(18px) saturate(150%);
}
.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:.045em}
.brand img{width:30px;height:30px}
.brand-dot{color:var(--orange)}
.nav-links{display:flex;align-items:center;gap:24px;color:var(--muted);font-size:14px}
.nav-links a{transition:.15s}
.nav-links a:hover{color:var(--text)}
.nav-cta{padding:9px 13px;border:1px solid var(--line);border-radius:10px;color:var(--text)!important;background:rgba(255,255,255,.025)}

.hero{padding:96px 0 54px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.75fr);gap:64px;align-items:center}
.eyebrow,.kicker{font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.02)
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(102,227,164,.08)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(48px,7vw,88px);line-height:.97;letter-spacing:-.055em;margin:20px 0 23px}
h2{font-size:clamp(31px,4.8vw,49px);line-height:1.05;letter-spacing:-.035em;margin:0 0 14px}
h3{font-size:20px;line-height:1.2;margin-bottom:8px}
.hero-copy{font-size:19px;max-width:690px;color:var(--muted)}
.hero-copy strong{color:#dce3ec;font-weight:600}

.platform-shell{margin-top:30px}
.platform-label{font-size:12px;color:var(--muted-2);margin-bottom:9px}
.segmented{
  display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);
  border-radius:13px;background:#0d1117;box-shadow:0 12px 45px rgba(0,0,0,.2)
}
.segmented button{
  border:0;background:transparent;cursor:pointer;padding:9px 14px;border-radius:9px;
  color:var(--muted);font-weight:750;font-size:13px;transition:.18s
}
.segmented button:hover{color:var(--text)}
.segmented button.active{color:var(--text);background:#202631;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.segmented button[data-platform="unreal"].active{box-shadow:inset 0 0 0 1px rgba(255,135,56,.22)}
.segmented button[data-platform="unity"].active{box-shadow:inset 0 0 0 1px rgba(69,215,255,.25)}

.actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:27px}
.btn{
  min-height:44px;padding:0 17px;border-radius:10px;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--panel);font-size:13px;font-weight:800;transition:.18s;cursor:pointer
}
.btn:hover{transform:translateY(-1px);border-color:var(--line-strong);background:#171d26}
.btn.primary{background:var(--text);color:#090b0f;border-color:var(--text)}
.btn.orange{background:var(--orange);color:#190c04;border-color:var(--orange)}
.btn.ghost{background:transparent}

.hero-console{
  position:relative;border:1px solid var(--line);border-radius:22px;padding:16px;
  background:
    linear-gradient(145deg,rgba(22,27,36,.95),rgba(12,15,20,.95)),
    radial-gradient(circle at 85% 18%,rgba(69,215,255,.12),transparent 30%),
    radial-gradient(circle at 14% 10%,rgba(255,135,56,.10),transparent 26%);
  box-shadow:0 35px 100px rgba(0,0,0,.34)
}
.console-bar{display:flex;justify-content:space-between;align-items:center;color:var(--muted-2);font-size:11px;padding:2px 3px 12px}
.console-dots{display:flex;gap:5px}.console-dots i{width:7px;height:7px;border-radius:50%;background:#323a46}
.console-screen{
  min-height:330px;border:1px solid #1f2630;border-radius:14px;position:relative;overflow:hidden;
  background:
   radial-gradient(circle at 68% 25%,rgba(69,215,255,.18),transparent 34%),
   radial-gradient(circle at 33% 67%,rgba(255,135,56,.16),transparent 36%),
   radial-gradient(circle at 78% 80%,rgba(177,140,255,.11),transparent 24%),
   linear-gradient(180deg,#090d13,#0d1017);
}
.console-screen:before{
 content:"";position:absolute;inset:0;
 background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
 background-size:36px 36px;
}
.scope-line{position:absolute;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);left:10%;right:10%;top:38%;transform:rotate(-8deg);box-shadow:0 0 18px rgba(69,215,255,.5)}
.scope-curve{position:absolute;width:58%;height:45%;border:2px solid var(--orange);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;left:18%;top:32%;transform:rotate(-18deg)}
.console-card{
 position:absolute;left:24px;right:24px;bottom:22px;padding:15px;border-radius:12px;
 background:rgba(12,16,22,.84);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px)
}
.console-card strong{display:block;font-size:14px}.console-card span{color:var(--muted);font-size:12px}

section{padding:68px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:34px;margin-bottom:28px}
.section-head p{color:var(--muted);max-width:620px;margin:0}
.section-tools{border-top:1px solid rgba(255,255,255,.045)}
.featured-grid{display:grid;grid-template-columns:1.35fr .65fr .65fr;grid-auto-rows:minmax(250px,auto);gap:16px}
.featured-card{
  position:relative;overflow:hidden;min-height:300px;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(145deg,#151a22,#0e1218);padding:25px;display:flex;flex-direction:column;justify-content:space-between;transition:.2s
}
.featured-card:first-child{grid-row:span 2;min-height:570px}
.featured-card:hover{transform:translateY(-3px);border-color:#384351}
.featured-card:before{
  content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-90px;top:-100px;
  background:var(--card-accent,rgba(69,215,255,.14));filter:blur(2px)
}
.featured-card:after{
  content:"";position:absolute;inset:0;opacity:.38;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(to bottom,#000,transparent 68%)
}
.card-top,.card-bottom{position:relative;z-index:2}
.tool-index{color:var(--muted-2);font-size:11px;font-weight:800;letter-spacing:.1em}
.tool-glyph{font-size:clamp(54px,8vw,112px);font-weight:950;letter-spacing:-.09em;line-height:.8;color:rgba(255,255,255,.08);margin:30px 0}
.featured-card:first-child .tool-glyph{font-size:150px;margin:86px 0 30px}
.featured-card p{color:var(--muted);margin-bottom:0}
.card-arrow{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;margin-top:18px}

.catalog-toolbar{
 display:flex;justify-content:space-between;gap:16px;align-items:center;margin:0 0 20px
}
.search-wrap{position:relative;flex:1;max-width:430px}
.search-input{
 width:100%;height:45px;border:1px solid var(--line);border-radius:11px;background:#0c1016;color:var(--text);
 padding:0 15px 0 39px;outline:none
}
.search-input:focus{border-color:#425061}
.search-icon{position:absolute;left:14px;top:12px;color:var(--muted-2);font-size:14px}
.result-count{font-size:12px;color:var(--muted-2)}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.tool-card{
 border:1px solid var(--line);border-radius:15px;background:linear-gradient(180deg,var(--panel-2),var(--panel));
 padding:20px;min-height:205px;display:flex;flex-direction:column;transition:.18s;position:relative;overflow:hidden
}
.tool-card:hover{transform:translateY(-2px);border-color:#374251}
.tool-card:before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-50px;top:-50px;background:var(--card-accent);opacity:.65}
.tool-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;position:relative}
.tool-card h3{font-size:18px}
.tool-card p{color:var(--muted);font-size:13px;position:relative}
.tool-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;position:relative}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{
 font-size:10px;line-height:1;padding:6px 7px;border:1px solid var(--line);border-radius:999px;color:var(--muted);
 text-transform:uppercase;letter-spacing:.055em;font-weight:800
}
.tag.unreal{color:#ffc29d;border-color:rgba(255,135,56,.25);background:rgba(255,135,56,.055)}
.tag.unity{color:#9ceaff;border-color:rgba(69,215,255,.25);background:rgba(69,215,255,.055)}
.status-new{color:var(--green);font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:850}

.knowledge-strip{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.knowledge-card{
 padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);position:relative;overflow:hidden
}
.knowledge-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-70px;bottom:-80px;background:rgba(69,215,255,.05)}
.knowledge-card p{color:var(--muted);max-width:560px}

.footer{margin-top:35px;border-top:1px solid var(--line);padding:37px 0 60px;color:var(--muted);font-size:13px}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:9px;color:#cdd5de}.footer-brand img{width:24px;height:24px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}.footer-links a:hover{color:var(--text)}

.page-hero{padding:72px 0 34px}
.page-hero h1{font-size:clamp(45px,6.3vw,72px);max-width:900px}
.page-hero p{color:var(--muted);font-size:18px;max-width:760px}
.breadcrumb{font-size:12px;color:var(--muted-2);margin-bottom:18px}
.product-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:35px;align-items:start;padding:15px 0 65px}
.product-visual{
 min-height:480px;border:1px solid var(--line);border-radius:20px;position:relative;overflow:hidden;
 background:radial-gradient(circle at 65% 30%,rgba(69,215,255,.15),transparent 30%),linear-gradient(145deg,#171d26,#0c1016)
}
.product-visual .tool-glyph{position:absolute;left:28px;bottom:34px;font-size:150px}
.product-visual:after{
 content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
 background-size:38px 38px;mask-image:linear-gradient(#000,transparent)
}
.product-side{position:sticky;top:100px}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:24px 0}
.feature{
 padding:13px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.018);font-size:12px;color:#ccd4dd
}
.product-section{padding:58px 0;border-top:1px solid rgba(255,255,255,.05)}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.info-card{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--panel)}
.info-card p{color:var(--muted);font-size:13px;margin-bottom:0}

.kb-layout{display:grid;grid-template-columns:260px 1fr;gap:34px;padding:25px 0 70px}
.kb-sidebar{position:sticky;top:98px;align-self:start}
.kb-sidebar h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);margin:0 0 10px}
.kb-nav{display:grid;gap:4px;margin-bottom:24px}
.kb-nav button,.kb-nav a{
 border:0;background:transparent;color:var(--muted);text-align:left;padding:8px 9px;border-radius:8px;cursor:pointer;font-size:13px
}
.kb-nav button:hover,.kb-nav a:hover,.kb-nav button.active{background:#151a22;color:var(--text)}
.kb-main h2{font-size:32px}
.kb-search{margin-bottom:24px}
.issue-list{display:grid;gap:10px}
.issue{
 border:1px solid var(--line);border-radius:13px;background:var(--panel);overflow:hidden
}
.issue summary{
 cursor:pointer;list-style:none;padding:17px 19px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-weight:750
}
.issue summary::-webkit-details-marker{display:none}
.issue summary:after{content:"+";font-size:20px;color:var(--muted)}
.issue[open] summary:after{content:"−"}
.issue-body{padding:0 19px 18px;border-top:1px solid rgba(255,255,255,.045)}
.issue-body p{color:var(--muted);margin:15px 0}
.issue-body ol{color:#c5ced8;padding-left:20px}
.issue-body li{margin:8px 0}
.empty{padding:30px;border:1px dashed var(--line);border-radius:13px;color:var(--muted);text-align:center}

.support-grid{display:grid;grid-template-columns:1fr .75fr;gap:20px;padding:20px 0 70px}
.support-card{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:25px}
.email-box{
 display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:15px;padding:12px 14px;
 border:1px solid var(--line);border-radius:11px;background:#0b0f14;font-family:ui-monospace,SFMono-Regular,Menlo,monospace
}
.copy-btn{border:0;background:#202630;color:var(--text);border-radius:7px;padding:7px 9px;font-size:11px;cursor:pointer}
.checklist{padding-left:18px;color:var(--muted)}.checklist li{margin:8px 0}

@media(max-width:1000px){
 .hero-grid{grid-template-columns:1fr;gap:38px}.hero-console{max-width:680px}
 .featured-grid{grid-template-columns:1fr 1fr}.featured-card:first-child{grid-column:1/-1;grid-row:auto;min-height:440px}
 .tool-grid{grid-template-columns:1fr 1fr}
 .product-layout{grid-template-columns:1fr}.product-side{position:static}.product-visual{min-height:400px}
 .kb-layout{grid-template-columns:1fr}.kb-sidebar{position:static}.kb-nav{display:flex;flex-wrap:wrap}
 .support-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
 .wrap{width:min(calc(100% - 26px),var(--max))}
 .nav-links a:not(.nav-cta){display:none}
 .hero{padding-top:68px}.hero-grid{gap:30px}.console-screen{min-height:280px}
 .section-head{display:block}.section-head p{margin-top:12px}
 .featured-grid,.tool-grid,.knowledge-strip,.info-grid{grid-template-columns:1fr}
 .featured-card:first-child{min-height:360px}.featured-card:first-child .tool-glyph{font-size:105px;margin:55px 0 20px}
 .catalog-toolbar{align-items:stretch;flex-direction:column}.search-wrap{max-width:none}
 .feature-list{grid-template-columns:1fr}.product-visual{min-height:320px}
 .product-visual .tool-glyph{font-size:105px}
 .segmented{width:100%}.segmented button{flex:1;padding-inline:9px}
 .email-box{align-items:flex-start;flex-direction:column}
}



/* ---------- Fab social proof ---------- */
.social-proof-section{
  padding:10px 0 46px;
}
.social-proof-wrap{
  position:relative;
  padding:1px;
  border-radius:22px;
  background:
    linear-gradient(90deg,rgba(255,139,57,.55),rgba(177,140,255,.42),rgba(66,216,255,.55));
  box-shadow:0 26px 65px rgba(0,0,0,.18);
}
.social-proof{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-radius:21px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(255,139,57,.12),rgba(177,140,255,.08),rgba(66,216,255,.12)),
    linear-gradient(180deg,rgba(17,21,28,.96),rgba(11,14,20,.96));
  backdrop-filter:blur(12px);
}
.proof-stat{
  min-height:110px;
  padding:24px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}
.proof-stat:after{
  content:"";
  position:absolute;
  right:0;
  top:20%;
  width:1px;
  height:60%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent);
}
.proof-stat:last-child:after{display:none}
.proof-value{
  font-size:clamp(25px,3vw,36px);
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
  margin-bottom:8px;
}
.proof-label{
  color:#c6d1dc;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.proof-note{
  color:var(--muted-2);
  font-size:10px;
  margin-top:5px;
}
.proof-star{color:var(--gold)}
.product-proof{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0 2px;
}
.proof-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:27px;
  padding:0 9px;
  border:0;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  color:#d1d9e2;
  font-size:11px;
  font-weight:780;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.proof-chip.rating{
  color:#ffd66a;
  background:linear-gradient(180deg,rgba(255,209,90,.17),rgba(255,209,90,.05));
}
.proof-chip.downloads{
  color:#aaeaff;
  background:linear-gradient(180deg,rgba(66,216,255,.18),rgba(66,216,255,.05));
}
.card-proof{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  margin:9px 0 0;
}
.card-proof .rating{
  color:#ffd36d;
}
.card-proof .downloads{
  color:#a9dce9;
}
.featured-card .card-proof{margin-bottom:2px}
.fab-source-note{
  text-align:right;
  color:var(--muted-2);
  font-size:10px;
  margin-top:8px;
}
@media(max-width:800px){
  .social-proof{grid-template-columns:1fr 1fr}
  .proof-stat:nth-child(2n):after{display:none}
  .proof-stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.05)}
}
@media(max-width:500px){
  .proof-stat{min-height:96px;padding:17px}
  .proof-value{font-size:27px}
}


/* refined segmented controls */
.segmented{
  display:inline-flex;
  gap:6px;
  padding:6px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(19,24,31,.92),rgba(13,17,23,.92));
  box-shadow:0 12px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
}
.segmented button{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:10px 15px;
  border-radius:10px;
  color:var(--muted);
  font-weight:800;
  font-size:13px;
  transition:.18s;
}
.segmented button.active{
  color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}
.segmented button[data-platform="all"].active{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 1px rgba(255,255,255,.02);
}
.segmented button[data-platform="unreal"].active{
  background:linear-gradient(180deg,rgba(255,139,57,.21),rgba(255,139,57,.08));
  box-shadow:inset 0 0 0 1px rgba(255,139,57,.20);
}
.segmented button[data-platform="unity"].active{
  background:linear-gradient(180deg,rgba(66,216,255,.22),rgba(66,216,255,.08));
  box-shadow:inset 0 0 0 1px rgba(66,216,255,.20);
}


.featured-card{
  background:
    linear-gradient(165deg,rgba(23,28,37,.98),rgba(12,16,22,.98)),
    radial-gradient(circle at 82% 18%,rgba(69,215,255,.10),transparent 26%),
    radial-gradient(circle at 12% 12%,rgba(255,139,57,.10),transparent 24%);
  box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.featured-card:before{
  filter:blur(0px);
  opacity:.95;
}
.featured-card .tool-glyph{
  color:rgba(255,255,255,.09);
  text-shadow:0 0 30px rgba(255,255,255,.03);
}
.tool-card{
  border:1px solid rgba(255,255,255,.05);
  background:
    linear-gradient(180deg,rgba(21,26,34,.98),rgba(14,18,24,.98)),
    radial-gradient(circle at 84% 16%,rgba(69,215,255,.08),transparent 28%);
  box-shadow:0 14px 38px rgba(0,0,0,.12);
}
.tool-card:before{
  width:170px;
  height:170px;
  right:-80px;
  top:-85px;
  filter:blur(8px);
}
.tool-card h3{
  letter-spacing:-.02em;
}
.knowledge-card{
  background:
    linear-gradient(180deg,rgba(21,26,34,.98),rgba(14,18,24,.98)),
    radial-gradient(circle at 85% 14%,rgba(69,215,255,.08),transparent 24%);
  box-shadow:0 16px 42px rgba(0,0,0,.12);
}
.info-card,.support-card,.issue,.hero-console,.product-visual{
  box-shadow:0 16px 42px rgba(0,0,0,.12);
}


/* =========================================================
   V5 — full-bleed gradients, less outline, more motion
   ========================================================= */

:root{
  --pink:#ff6ec7;
  --indigo:#7185ff;
  --deep-blue:#18224d;
}

/* Global page has more depth and less "boxed UI" */
body{
  background:
    radial-gradient(circle at 82% -4%,rgba(66,216,255,.13),transparent 31rem),
    radial-gradient(circle at 4% 9%,rgba(255,139,57,.11),transparent 29rem),
    radial-gradient(circle at 48% 30%,rgba(177,140,255,.07),transparent 33rem),
    linear-gradient(180deg,#090b10 0%,#07090d 48%,#090b10 100%);
}

/* Hero */
.hero-clean{
  position:relative;
  min-height:650px;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:112px 0 86px;
  isolation:isolate;
}
.hero-clean:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,139,57,.66) 22%,
    rgba(177,140,255,.62) 52%,
    rgba(66,216,255,.68) 80%,
    transparent 100%
  );
  opacity:.85;
}
.hero-clean-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:60px;
  align-items:end;
}
.hero-copy-block{
  max-width:880px;
}
.hero-clean h1{
  max-width:950px;
  margin-bottom:24px;
}
.gradient-text{
  background:linear-gradient(90deg,#ff9b54 0%,#ffc46e 26%,#c790ff 56%,#55dfff 100%);
  background-size:180% 180%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradientDrift 8s ease-in-out infinite alternate;
}
.hero-rail{
  display:grid;
  gap:18px;
  align-content:end;
  color:rgba(255,255,255,.20);
  font-size:11px;
  font-weight:900;
  letter-spacing:.20em;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  padding-bottom:7px;
}
.hero-light{
  position:absolute;
  border-radius:50%;
  filter:blur(48px);
  opacity:.35;
  pointer-events:none;
  z-index:-1;
}
.hero-light-a{
  width:520px;height:520px;
  left:-160px;top:80px;
  background:radial-gradient(circle,rgba(255,139,57,.32),transparent 68%);
  animation:floatA 13s ease-in-out infinite alternate;
}
.hero-light-b{
  width:570px;height:570px;
  right:-180px;top:-120px;
  background:radial-gradient(circle,rgba(66,216,255,.28),transparent 68%);
  animation:floatB 15s ease-in-out infinite alternate;
}
.hero-light-c{
  width:440px;height:440px;
  left:48%;bottom:-230px;
  background:radial-gradient(circle,rgba(177,140,255,.22),transparent 68%);
  animation:floatC 16s ease-in-out infinite alternate;
}

/* Full-width social proof divider */
.social-proof-section{
  position:relative;
  width:100%;
  padding:0;
  margin:0;
  overflow:hidden;
}
.social-proof-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 14% 50%,rgba(255,139,57,.23),transparent 24%),
    radial-gradient(circle at 48% 45%,rgba(177,140,255,.16),transparent 29%),
    radial-gradient(circle at 84% 48%,rgba(66,216,255,.23),transparent 25%),
    linear-gradient(90deg,#171019 0%,#10131e 48%,#0e1920 100%);
}
.social-proof-section:before,
.social-proof-section:after{
  content:"";
  position:absolute;
  left:0;right:0;height:1px;
  z-index:2;
}
.social-proof-section:before{
  top:0;
  background:linear-gradient(90deg,transparent,rgba(255,139,57,.55),rgba(177,140,255,.48),rgba(66,216,255,.58),transparent);
}
.social-proof-section:after{
  bottom:0;
  background:linear-gradient(90deg,transparent,rgba(66,216,255,.32),rgba(177,140,255,.30),rgba(255,139,57,.30),transparent);
}
.social-proof{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
}
.proof-stat{
  min-height:132px;
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}
.proof-stat + .proof-stat{
  border-left:0;
}
.proof-stat:after{
  content:"";
  position:absolute;
  right:0;
  top:24%;
  height:52%;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent);
}
.proof-stat:last-child:after{display:none}
.fab-source-note{
  position:relative;
  z-index:2;
  padding:0 0 10px;
  text-align:right;
  color:rgba(255,255,255,.34);
}

/* Sections become surfaces made of gradients rather than outlined boxes */
.section-tools,
.catalog-section,
.knowledge-section,
.page-hero,
.product-section{
  position:relative;
}
.section-tools{
  background:
    linear-gradient(180deg,rgba(16,20,27,.30),rgba(9,12,17,.18)),
    radial-gradient(circle at 15% 20%,rgba(255,139,57,.035),transparent 26%);
}
.catalog-section{
  background:
    radial-gradient(circle at 83% 12%,rgba(66,216,255,.045),transparent 26%),
    linear-gradient(180deg,rgba(8,10,14,.12),rgba(17,20,28,.26));
}
.knowledge-section{
  background:
    linear-gradient(90deg,rgba(255,139,57,.05),rgba(177,140,255,.035),rgba(66,216,255,.05));
}

/* Non-product containers lose the generic outline */
.knowledge-card,
.info-card,
.support-card,
.issue,
.hero-console{
  border:0 !important;
}
.knowledge-card{
  background:
    radial-gradient(circle at 90% 0%,rgba(66,216,255,.10),transparent 31%),
    linear-gradient(145deg,rgba(23,28,37,.86),rgba(12,16,22,.72));
  border-radius:18px;
}
.knowledge-card:first-child{
  background:
    radial-gradient(circle at 0% 100%,rgba(255,139,57,.10),transparent 34%),
    linear-gradient(145deg,rgba(25,22,26,.84),rgba(13,16,22,.72));
}
.info-card{
  background:
    radial-gradient(circle at 92% 0%,rgba(177,140,255,.08),transparent 32%),
    linear-gradient(145deg,rgba(23,28,37,.85),rgba(12,16,22,.74));
}
.support-card{
  background:
    radial-gradient(circle at 96% 3%,rgba(66,216,255,.10),transparent 33%),
    linear-gradient(145deg,rgba(23,28,37,.88),rgba(12,16,22,.75));
}
.issue{
  background:
    linear-gradient(90deg,rgba(23,28,37,.92),rgba(14,18,24,.88));
}
.issue-body{
  border-top:0;
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);
}
.email-box{
  border:0;
  background:
    linear-gradient(90deg,rgba(255,139,57,.06),rgba(177,140,255,.05),rgba(66,216,255,.06)),
    #0b0f14;
}

/* Keep product cards as the only deliberately outlined card family */
.tool-card,
.featured-card{
  border:1px solid rgba(255,255,255,.075) !important;
}
.featured-card{
  background:
    radial-gradient(circle at 82% 16%,var(--card-accent),transparent 34%),
    linear-gradient(155deg,rgba(23,28,37,.98),rgba(11,15,21,.98));
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    box-shadow .28s ease,
    border-color .28s ease;
}
.featured-card:hover{
  transform:translateY(-6px) scale(1.006);
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 28px 78px rgba(0,0,0,.27);
}
.tool-card{
  transition:
    transform .25s cubic-bezier(.2,.7,.2,1),
    box-shadow .25s ease,
    border-color .25s ease;
}
.tool-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 22px 56px rgba(0,0,0,.23);
}
.tool-card:hover:before{
  transform:scale(1.18);
  opacity:.85;
}
.tool-card:before{
  transition:transform .55s ease,opacity .35s ease;
}

/* Platform switch looks like a control rather than four outlined pills */
.segmented{
  border:0 !important;
  background:
    linear-gradient(90deg,rgba(255,139,57,.055),rgba(177,140,255,.045),rgba(66,216,255,.055)),
    rgba(15,19,26,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 38px rgba(0,0,0,.18);
}
.segmented button{
  border-radius:9px;
}
.segmented button.active{
  box-shadow:none !important;
}

/* Buttons with a small light movement */
.motion-btn{
  position:relative;
  overflow:hidden;
}
.motion-btn:after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.18) 45%,transparent 70%);
  transform:translateX(-130%);
  transition:transform .58s ease;
}
.motion-btn:hover:after{
  transform:translateX(130%);
}

/* Section reveal */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{
  opacity:1;
  transform:none;
}

/* Micro motion */
@keyframes gradientDrift{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}
@keyframes floatA{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(42px,-20px,0) scale(1.08)}
}
@keyframes floatB{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-46px,28px,0) scale(1.06)}
}
@keyframes floatC{
  0%{transform:translate3d(-14px,0,0)}
  100%{transform:translate3d(34px,-24px,0)}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
  .reveal{
    opacity:1;
    transform:none;
  }
}

@media(max-width:900px){
  .hero-clean{
    min-height:auto;
    padding:86px 0 70px;
  }
  .hero-clean-inner{
    grid-template-columns:1fr;
  }
  .hero-rail{
    display:none;
  }
}
@media(max-width:800px){
  .social-proof{
    grid-template-columns:1fr 1fr;
  }
  .proof-stat:nth-child(2n):after{
    display:none;
  }
  .proof-stat:nth-child(n+3){
    border-top:1px solid rgba(255,255,255,.055);
  }
}
@media(max-width:520px){
  .hero-clean{
    padding-top:68px;
  }
  .proof-stat{
    min-height:105px;
    padding:19px 15px;
  }
  .proof-value{
    font-size:27px;
  }
  .proof-label{
    font-size:9px;
  }
}


/* =========================================================
   V6 — clean background + corrected platform UI
   ========================================================= */

/* Remove procedural noise texture left from early versions */
body:before{
  display:none !important;
  content:none !important;
  background:none !important;
}

/* Hero no longer reserves space for decorative vertical text */
.hero-clean-inner{
  grid-template-columns:minmax(0,1fr) !important;
}
.hero-copy-block{
  max-width:920px;
}
.hero-rail{
  display:none !important;
}

/* Social proof becomes a continuous animated gradient band.
   No box, no outer outline, no vertical separator lines. */
.social-proof-section{
  isolation:isolate;
  background:
    linear-gradient(
      110deg,
      rgba(255,139,57,.18) 0%,
      rgba(255,188,88,.11) 20%,
      rgba(177,140,255,.15) 48%,
      rgba(73,148,255,.13) 70%,
      rgba(66,216,255,.19) 100%
    ),
    #10131a;
  background-size:180% 180%;
  animation:socialGradientMove 18s ease-in-out infinite alternate;
}
.social-proof-bg{
  inset:-35% -10%;
  background:
    radial-gradient(circle at 15% 48%,rgba(255,139,57,.22),transparent 27%),
    radial-gradient(circle at 49% 46%,rgba(177,140,255,.16),transparent 31%),
    radial-gradient(circle at 85% 50%,rgba(66,216,255,.21),transparent 27%);
  background-size:120% 120%;
  animation:socialGlowMove 22s ease-in-out infinite alternate;
}
.social-proof-section:before,
.social-proof-section:after{
  display:none !important;
  content:none !important;
}
.proof-stat:after{
  display:none !important;
  content:none !important;
}
.proof-stat + .proof-stat{
  border:0 !important;
}
.proof-stat{
  border:0 !important;
}
.social-proof{
  border:0 !important;
  box-shadow:none !important;
}
@media(max-width:800px){
  .proof-stat:nth-child(n+3){
    border-top:0 !important;
  }
}

/* Cleaner page backgrounds */
.section-tools{
  border-top:0 !important;
}
.page-hero,
.product-section{
  border-top:0 !important;
}

/* Avoid visible outline treatment for non-product surfaces */
.knowledge-card,
.info-card,
.support-card,
.issue,
.email-box,
.segmented{
  outline:none !important;
}

/* Slightly livelier but still calm background fields */
.section-tools{
  background:
    radial-gradient(circle at 8% 18%,rgba(255,139,57,.055),transparent 28%),
    linear-gradient(180deg,rgba(16,20,27,.35),rgba(9,12,17,.14));
}
.catalog-section{
  background:
    radial-gradient(circle at 94% 18%,rgba(66,216,255,.055),transparent 30%),
    radial-gradient(circle at 45% 100%,rgba(177,140,255,.035),transparent 28%),
    linear-gradient(180deg,rgba(8,10,14,.10),rgba(17,20,28,.28));
}
.knowledge-section{
  background:
    linear-gradient(
      100deg,
      rgba(255,139,57,.055),
      rgba(177,140,255,.042),
      rgba(66,216,255,.055)
    );
  background-size:160% 160%;
  animation:knowledgeGradientMove 24s ease-in-out infinite alternate;
}

@keyframes socialGradientMove{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}
@keyframes socialGlowMove{
  0%{transform:translate3d(-2%,0,0) scale(1)}
  100%{transform:translate3d(3%,1%,0) scale(1.05)}
}
@keyframes knowledgeGradientMove{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

@media(prefers-reduced-motion:reduce){
  .social-proof-section,
  .social-proof-bg,
  .knowledge-section{
    animation:none !important;
  }
}


/* =========================================================
   V7 — softer section bleed + clearly animated metrics band
   ========================================================= */

/* Remove the hard 1px hero divider completely */
.hero-clean:after{
  content:"" !important;
  position:absolute;
  left:0;
  right:0;
  bottom:-18px;
  height:38px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,139,57,.22) 20%,
      rgba(177,140,255,.20) 52%,
      rgba(66,216,255,.22) 82%,
      transparent 100%
    );
  filter:blur(15px);
  opacity:.72;
  pointer-events:none;
}

/* The stats band is a full-width animated color field, not a bordered box */
.social-proof-section{
  position:relative;
  overflow:hidden;
  background:#10131a !important;
  animation:none !important;
}

/* Main animated layer */
.social-proof-bg{
  position:absolute;
  inset:-55% -22%;
  opacity:.95;
  background:
    radial-gradient(circle at 12% 50%, rgba(255,139,57,.34) 0%, rgba(255,139,57,.10) 28%, transparent 48%),
    radial-gradient(circle at 48% 44%, rgba(177,140,255,.25) 0%, rgba(177,140,255,.07) 30%, transparent 50%),
    radial-gradient(circle at 86% 52%, rgba(66,216,255,.34) 0%, rgba(66,216,255,.10) 28%, transparent 48%);
  background-size:72% 100%, 76% 100%, 72% 100%;
  background-repeat:no-repeat;
  filter:blur(4px);
  transform:translate3d(-4%,0,0) scale(1.04);
  animation:metricsFlow 20s ease-in-out infinite alternate !important;
  will-change:transform,background-position;
}

/* Slow secondary wash so the color itself also shifts */
.social-proof-section:before{
  display:block !important;
  content:"" !important;
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      105deg,
      rgba(255,139,57,.10) 0%,
      rgba(255,139,57,.02) 24%,
      rgba(177,140,255,.10) 50%,
      rgba(66,216,255,.02) 72%,
      rgba(66,216,255,.11) 100%
    );
  background-size:220% 100%;
  animation:metricsWash 26s linear infinite !important;
  opacity:.95;
}

/* No lines anywhere in the divider */
.social-proof-section:after,
.proof-stat:after{
  display:none !important;
  content:none !important;
}
.proof-stat,
.proof-stat + .proof-stat,
.social-proof{
  border:0 !important;
  box-shadow:none !important;
}

/* Soft color bleed above and below instead of a hard edge */
.social-proof-section{
  box-shadow:
    0 -18px 34px rgba(177,140,255,.035),
    0 18px 34px rgba(66,216,255,.035);
}

/* Make sure content stays above the animation */
.social-proof-section .wrap{
  position:relative;
  z-index:3;
}

@keyframes metricsFlow{
  0%{
    transform:translate3d(-6%,0,0) scale(1.03);
    background-position:0% 50%, 50% 50%, 100% 50%;
  }
  50%{
    transform:translate3d(1%,-1%,0) scale(1.07);
    background-position:12% 50%, 55% 46%, 90% 52%;
  }
  100%{
    transform:translate3d(6%,1%,0) scale(1.04);
    background-position:20% 48%, 46% 54%, 80% 48%;
  }
}

@keyframes metricsWash{
  0%{background-position:0% 50%}
  100%{background-position:220% 50%}
}

@media(prefers-reduced-motion:reduce){
  .social-proof-bg,
  .social-proof-section:before{
    animation:none !important;
  }
}


/* =========================================================
   V8 — hard line removed + visible slow animated divider
   ========================================================= */

/* Kill every older hero pseudo-divider, regardless of cascade */
.hero-clean::after,
.hero-clean:after{
  display:none !important;
  content:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
  filter:none !important;
  opacity:0 !important;
}

/* Real diffused light at the hero edge.
   Because it is made from blurred radial fields, there is no straight line. */
.hero-edge-glow{
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-34px;
  height:76px;
  pointer-events:none;
  z-index:0;
  opacity:.72;
  filter:blur(17px);
  background:
    radial-gradient(ellipse at 18% 48%,rgba(255,139,57,.24) 0%,rgba(255,139,57,.08) 28%,transparent 57%),
    radial-gradient(ellipse at 51% 50%,rgba(177,140,255,.21) 0%,rgba(177,140,255,.07) 30%,transparent 60%),
    radial-gradient(ellipse at 84% 48%,rgba(66,216,255,.24) 0%,rgba(66,216,255,.08) 28%,transparent 57%);
}

/* Metrics divider: continuous color surface with obvious but calm motion */
.social-proof-section{
  position:relative;
  overflow:hidden;
  background:#0f131a !important;
  isolation:isolate;
}

/* Large moving wash */
.social-proof-bg{
  position:absolute !important;
  inset:-70% -35% !important;
  opacity:.90 !important;
  filter:blur(13px) !important;
  background:
    radial-gradient(circle at 14% 52%,rgba(255,133,49,.46) 0%,rgba(255,133,49,.12) 24%,transparent 48%),
    radial-gradient(circle at 50% 45%,rgba(174,119,255,.34) 0%,rgba(174,119,255,.10) 27%,transparent 51%),
    radial-gradient(circle at 86% 52%,rgba(45,210,255,.44) 0%,rgba(45,210,255,.12) 24%,transparent 48%) !important;
  background-size:72% 100%,76% 100%,72% 100% !important;
  background-repeat:no-repeat !important;
  animation:expMetricsClouds 15s ease-in-out infinite alternate !important;
  will-change:transform,background-position;
}

/* Secondary moving color sheet. This is intentionally visible enough
   that the animation is noticeable when watching the band for a few seconds. */
.social-proof-section::before,
.social-proof-section:before{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  opacity:.72 !important;
  background:
    linear-gradient(
      105deg,
      rgba(255,139,57,.20) 0%,
      rgba(255,197,91,.08) 18%,
      rgba(174,119,255,.18) 43%,
      rgba(78,111,255,.10) 65%,
      rgba(45,210,255,.20) 84%,
      rgba(255,139,57,.14) 100%
    ) !important;
  background-size:300% 100% !important;
  animation:expMetricsSweep 18s ease-in-out infinite !important;
}

/* Absolutely no hard lines in or around this band */
.social-proof-section::after,
.social-proof-section:after,
.proof-stat::after,
.proof-stat:after{
  display:none !important;
  content:none !important;
}
.social-proof,
.proof-stat,
.proof-stat + .proof-stat{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
.social-proof-section{
  box-shadow:
    0 -22px 42px -32px rgba(177,140,255,.28),
    0 22px 42px -32px rgba(66,216,255,.24) !important;
}
.social-proof-section .wrap{
  position:relative;
  z-index:3;
}

@keyframes expMetricsClouds{
  0%{
    transform:translate3d(-8%,0,0) scale(1.02);
    background-position:0% 50%,50% 48%,100% 50%;
  }
  50%{
    transform:translate3d(1%,-2%,0) scale(1.08);
    background-position:15% 48%,56% 54%,88% 48%;
  }
  100%{
    transform:translate3d(8%,1%,0) scale(1.04);
    background-position:24% 52%,43% 47%,76% 53%;
  }
}
@keyframes expMetricsSweep{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:200% 50%}
}

@media(prefers-reduced-motion:reduce){
  .social-proof-bg,
  .social-proof-section::before,
  .social-proof-section:before{
    animation:none !important;
  }
}


/* =========================================================
   V9 — seamless animated metrics gradient + top/bottom bleed
   ========================================================= */

/* Replace every older moving cloud layer with one continuous surface.
   This prevents black gaps from ever appearing during animation. */
.social-proof-section{
  position:relative !important;
  overflow:visible !important;
  isolation:isolate;
  background:
    linear-gradient(
      100deg,
      #2a1715 0%,
      #5b2a19 12%,
      #6a3b36 25%,
      #49314f 39%,
      #30375e 54%,
      #244c61 69%,
      #15566a 83%,
      #2a1715 100%
    ) !important;
  background-size:260% 100% !important;
  animation:expSeamlessMetrics 28s linear infinite !important;
  box-shadow:none !important;
}

/* Disable old animated cloud that could expose the dark base */
.social-proof-bg{
  display:none !important;
  content:none !important;
  animation:none !important;
}

/* Soft glow / fade ABOVE the divider */
.social-proof-section::before,
.social-proof-section:before{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  pointer-events:none !important;
  left:0 !important;
  right:0 !important;
  top:-38px !important;
  height:42px !important;
  opacity:.72 !important;
  filter:blur(14px) !important;
  background:
    linear-gradient(
      90deg,
      rgba(255,139,57,.14),
      rgba(177,140,255,.12),
      rgba(66,216,255,.15)
    ) !important;
  animation:expBleedShift 28s linear infinite !important;
  background-size:220% 100% !important;
}

/* Soft glow / fade BELOW the divider */
.social-proof-section::after,
.social-proof-section:after{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  pointer-events:none !important;
  left:0 !important;
  right:0 !important;
  bottom:-38px !important;
  height:42px !important;
  opacity:.66 !important;
  filter:blur(14px) !important;
  background:
    linear-gradient(
      90deg,
      rgba(255,139,57,.12),
      rgba(177,140,255,.11),
      rgba(66,216,255,.14)
    ) !important;
  animation:expBleedShift 28s linear infinite reverse !important;
  background-size:220% 100% !important;
}

/* Absolutely no internal separator bars */
.proof-stat::after,
.proof-stat:after{
  display:none !important;
  content:none !important;
}
.social-proof,
.proof-stat,
.proof-stat + .proof-stat{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Keep the stats readable over the color field */
.social-proof-section .wrap{
  position:relative;
  z-index:2;
}

@keyframes expSeamlessMetrics{
  0%{
    background-position:0% 50%;
  }
  100%{
    background-position:260% 50%;
  }
}

@keyframes expBleedShift{
  0%{
    background-position:0% 50%;
  }
  100%{
    background-position:220% 50%;
  }
}

@media(prefers-reduced-motion:reduce){
  .social-proof-section,
  .social-proof-section::before,
  .social-proof-section::after{
    animation:none !important;
  }
}


/* =========================================================
   V10 — real documentation + solid More control
   ========================================================= */

.gradient-text{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:#42638f !important;
  animation:none !important;
  text-shadow:0 10px 38px rgba(38,72,116,.16);
}

/* Documentation index */
.docs-library{
  padding:24px 0 80px;
}
.docs-library-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.docs-library-card{
  min-height:245px;
  padding:24px;
  border:0;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    radial-gradient(circle at 92% 0%,rgba(66,216,255,.10),transparent 31%),
    linear-gradient(145deg,rgba(23,28,37,.94),rgba(12,16,22,.86));
  box-shadow:0 18px 52px rgba(0,0,0,.13);
  transition:transform .24s ease,box-shadow .24s ease;
}
.docs-library-card:nth-child(2){
  background:
    radial-gradient(circle at 0% 100%,rgba(255,139,57,.09),transparent 33%),
    linear-gradient(145deg,rgba(25,24,28,.94),rgba(12,16,22,.86));
}
.docs-library-card:nth-child(3){
  background:
    radial-gradient(circle at 90% 5%,rgba(177,140,255,.10),transparent 33%),
    linear-gradient(145deg,rgba(22,25,35,.94),rgba(12,16,22,.86));
}
.docs-library-card:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 70px rgba(0,0,0,.20);
}
.docs-library-card p{
  color:var(--muted);
  margin-bottom:0;
}
.docs-status{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:850;
  color:var(--green);
}
.docs-status.pending{
  color:var(--muted-2);
}
.docs-library-footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:end;
  margin-top:25px;
}

/* Dedicated docs pages */
.doc-page-hero{
  padding:76px 0 36px;
  background:
    radial-gradient(circle at 82% 0%,rgba(66,216,255,.055),transparent 30%),
    linear-gradient(180deg,rgba(14,18,25,.50),rgba(9,12,17,.12));
}
.doc-page-hero h1{
  font-size:clamp(46px,6vw,76px);
  max-width:970px;
  margin-bottom:20px;
}
.doc-page-hero p{
  max-width:820px;
  color:var(--muted);
  font-size:17px;
}
.doc-layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:48px;
  padding:35px 0 100px;
}
.doc-toc{
  position:sticky;
  top:100px;
  align-self:start;
  display:grid;
  gap:4px;
}
.doc-toc-title{
  color:var(--muted-2);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
  font-weight:850;
  margin-bottom:10px;
}
.doc-toc a{
  padding:7px 0;
  color:var(--muted);
  font-size:13px;
  transition:color .16s,transform .16s;
}
.doc-toc a:hover{
  color:var(--text);
  transform:translateX(4px);
}
.doc-article{
  max-width:900px;
}
.doc-article > section{
  padding:12px 0 58px;
  scroll-margin-top:95px;
}
.doc-article > section + section{
  background:
    linear-gradient(90deg,rgba(255,139,57,.028),rgba(177,140,255,.018),rgba(66,216,255,.028));
  margin-inline:-24px;
  padding-inline:24px;
}
.doc-article h2{
  font-size:clamp(28px,3.5vw,40px);
  margin-bottom:18px;
}
.doc-article h3{
  margin-top:30px;
  font-size:20px;
}
.doc-article p,
.doc-article li{
  color:#c6ced8;
}
.doc-article li{
  margin:7px 0;
}
.doc-article ul,
.doc-article ol{
  padding-left:22px;
}
.doc-lead{
  font-size:18px;
  color:#d6dde6 !important;
  max-width:850px;
}
.doc-hero-image,
.doc-image{
  width:100%;
  height:auto;
  margin:24px 0 10px;
  border-radius:13px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.doc-image.compact{
  max-width:620px;
}
.doc-image.narrow{
  max-width:420px;
}
.doc-caption{
  color:var(--muted-2);
  font-size:11px;
  margin-top:8px;
}
.doc-feature-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:22px 0;
}
.doc-feature{
  padding:17px 18px;
  border-radius:13px;
  background:
    linear-gradient(145deg,rgba(23,28,37,.86),rgba(13,17,23,.72));
}
.doc-feature strong{
  display:block;
  margin-bottom:4px;
}
.doc-feature span{
  color:var(--muted);
  font-size:13px;
}
.doc-callout{
  margin:24px 0;
  padding:18px 20px;
  border-radius:14px;
  background:
    linear-gradient(90deg,rgba(255,139,57,.09),rgba(177,140,255,.055),rgba(66,216,255,.075));
}
.doc-callout strong{
  display:block;
  margin-bottom:5px;
}
.doc-callout p{
  margin-bottom:0;
}
.doc-step{
  margin:30px 0;
}
.doc-step-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  margin-right:8px;
  background:rgba(66,216,255,.13);
  color:#a8eaff;
  font-size:12px;
  font-weight:900;
}
.doc-kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:2px 6px;
  border-radius:5px;
  background:rgba(255,255,255,.07);
  color:#e4eaf0;
  white-space:nowrap;
}
.doc-table-wrap{
  overflow-x:auto;
  margin:20px 0;
}
.doc-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.doc-table th,
.doc-table td{
  text-align:left;
  vertical-align:top;
  padding:12px 13px;
}
.doc-table th{
  color:#e7edf4;
  background:rgba(255,255,255,.045);
}
.doc-table td{
  color:#c3ccd6;
  background:rgba(255,255,255,.018);
}
.doc-table tr + tr td{
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.doc-limitations{
  background:
    radial-gradient(circle at 95% 0%,rgba(255,107,124,.09),transparent 32%),
    linear-gradient(145deg,rgba(26,20,24,.76),rgba(13,16,22,.70));
  padding:22px 24px !important;
  border-radius:16px;
}
.doc-breadcrumb{
  color:var(--muted-2);
  font-size:12px;
  margin-bottom:18px;
}
.doc-breadcrumb a:hover{
  color:var(--text);
}
.doc-meta-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}
.doc-meta{
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
}
@media(max-width:950px){
  .docs-library-grid{grid-template-columns:1fr 1fr}
  .doc-layout{grid-template-columns:1fr}
  .doc-toc{
    position:static;
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    padding-bottom:20px;
  }
  .doc-toc-title{width:100%}
}
@media(max-width:650px){
  .docs-library-grid,
  .doc-feature-grid{grid-template-columns:1fr}
  .doc-page-hero{padding-top:60px}
  .doc-article > section + section{
    margin-inline:-13px;
    padding-inline:13px;
  }
}


/* =========================================================
   V13 — additional real documentation pages
   ========================================================= */
.doc-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:24px 0;
}
.doc-gallery img{
  width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 20px 48px rgba(0,0,0,.22);
}
.doc-source-label{
  display:inline-block;
  margin-top:8px;
  font-size:10px;
  color:var(--muted-2);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:800;
}
@media(max-width:700px){
  .doc-gallery{grid-template-columns:1fr}
}


/* =========================================================
   V15 — show every extracted documentation screenshot
   ========================================================= */
.doc-gallery{
  align-items:start;
}
.doc-gallery img{
  background:rgba(255,255,255,.02);
}
.doc-article #doc-screenshots{
  margin-top:8px;
}


/* =========================================================
   V16 — documentation visibility fail-safe
   ========================================================= */

/* Content is visible by default, even if JavaScript or a local
   preview path fails. Motion is progressively enhanced only when
   site.js successfully loads and adds .motion-ready to <html>. */
.reveal{
  opacity:1 !important;
  transform:none !important;
}

html.motion-ready .reveal{
  opacity:0 !important;
  transform:translateY(22px) !important;
}

html.motion-ready .reveal.in-view{
  opacity:1 !important;
  transform:none !important;
}

@media(prefers-reduced-motion:reduce){
  html.motion-ready .reveal{
    opacity:1 !important;
    transform:none !important;
  }
}


/* =========================================================
   V17 — real product covers on catalog cards
   ========================================================= */

.tool-card{
  padding:0 !important;
  overflow:hidden;
}
.tool-card-body{
  padding:19px 20px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.tool-cover,
.featured-cover{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:rgba(255,255,255,.025);
}
.tool-cover{
  border-bottom:1px solid rgba(255,255,255,.055);
}
.tool-cover img,
.featured-cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .35s ease;
}
.tool-card:hover .tool-cover img,
.featured-card:hover .featured-cover img{
  transform:scale(1.025);
}
.tool-card:not(:has(.tool-cover)){
  padding:20px !important;
}
.tool-card:not(:has(.tool-cover)) .tool-card-body{
  padding:0;
}
.featured-card{
  padding:0 !important;
}
.featured-card-content{
  padding:22px 24px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.featured-card:first-child{
  min-height:0 !important;
}
.featured-card:first-child .tool-glyph{
  font-size:clamp(72px,8vw,125px);
  margin:36px 0 18px;
}
.featured-card .tool-glyph{
  margin:22px 0 10px;
}
.featured-card:not(:has(.featured-cover)){
  padding:25px !important;
}
.featured-card:not(:has(.featured-cover)) .featured-card-content{
  padding:0;
}
@media(max-width:700px){
  .tool-cover,
  .featured-cover{
    aspect-ratio:16 / 9;
  }
}