/* v5.2.0 "cinematic" layer: near-black theme, serif display type, floating glass pill nav, glass cards, the home hero
   (CSS/SVG portal scene), stat cards and glowing category tiles. Linked after v513.css on every page. Motion is
   transform/opacity only and stops entirely under prefers-reduced-motion. */
:root,:root[data-theme=dark]{color-scheme:dark;
 --background:#07080b;--foreground:#eef0f4;--card:#11131a;--card-2:#161923;--popover:#161923;--secondary:#1a1d27;--muted:#1a1d27;
 --muted-foreground:#b0b6c3;--border:#262a36;--input:#3b4150;--primary:#ffa26b;--primary-foreground:#120a05;--accent:#ffa26b;
 --accent-foreground:#120a05;--ring:#ffc38f;--paper:#07080b;--plate:#11131a;--ink:#eef0f4;--ink-2:#c1c6d0;--ink-3:#9aa1ae;
 --rule:#262a36;--line:#6b7282;--hatch:#141722;--hover:#171a24;--acc51:#ffb07e;--acc51-fill:#e8733a;--on-acc51:#120a05;
 --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
 --sun:linear-gradient(100deg,#ffd29a 0%,#ff9a62 38%,#f25f7a 72%,#b374ff 100%);
 --glass:rgba(22,24,33,.55);--glass-b:rgba(255,255,255,.1);--glow-w:rgba(255,150,95,.35)}
.theme-btn{display:none!important}
html{background:var(--paper)}
body{background:radial-gradient(1200px 600px at 70% -10%,rgba(255,140,90,.06),transparent 70%),var(--paper);color:var(--ink)}
::selection{background:#ffb07e;color:#120a05}
h1,h2,h3,.sec-head h1{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
a{color:var(--acc51)}
:focus-visible{outline:2px solid #ffc38f!important;outline-offset:3px}

/* floating glass pill header */
.site-head{position:sticky;top:10px;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;
 margin:10px auto 0;width:calc(100% - 20px);max-width:1320px;padding:4px 8px;border:1px solid var(--glass-b)!important;
 border-radius:28px;background:rgba(14,15,21,.62)!important;-webkit-backdrop-filter:blur(16px) saturate(150%);
 backdrop-filter:blur(16px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 40px -20px #000}
.site-head .head-row{width:auto;max-width:none;flex:1 1 auto;padding-inline:8px;min-height:48px}
.site-head .site-nav{flex:0 1 auto;border:0;background:transparent}
.site-head .nav-row{width:auto;max-width:none;padding-inline:0}
.site-nav .nav-row ul{gap:2px}
.site-nav a{border-radius:999px!important;min-height:40px;box-shadow:none!important;color:var(--ink-2)}
.site-nav a:hover{background:rgba(255,255,255,.07)}
.site-nav a[aria-current=page]{color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,190,140,.35)!important}
.brand{font-family:var(--serif);font-size:1.12rem;letter-spacing:.01em}
.brand-mark{color:#ffb07e}
@media (max-width:760px){.site-head .head-row{flex-basis:100%}.js body.menu-open .site-head .site-nav{flex-basis:100%}
 .js body.menu-open .site-nav a{border-radius:14px!important}}

/* footer, cards, buttons, tiles, tables */
.site-foot{margin-top:56px;border-top:1px solid var(--rule);background:linear-gradient(180deg,transparent,rgba(255,140,90,.04))}
.foot-brand b{font-family:var(--serif);font-weight:500}
.foot-support-wrap{margin:var(--s3) 0 0;text-align:center;font-size:var(--t13)}
.foot-support{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-3)}
.xcard,.mcard,.plate{border-radius:16px;border-color:var(--glass-b)}
.btn,.h52-btn,.demo-btn{border-radius:999px}
.h52-btn-p,.btn-primary{background:var(--sun);color:#140a06;border:0}
.dtile .demo-open{border-radius:12px;border:1px solid var(--glass-b);background:var(--card)}
.dtile .dt-k{border-radius:999px;background:rgba(8,9,12,.72);-webkit-backdrop-filter:none;backdrop-filter:none}
.cat-sec{padding-top:10px}
.cat-sec h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.tbl,table{background:transparent;color:var(--ink)}
.tbl th,table th{color:var(--ink)}
.unfinished-toggle{border-color:var(--glass-b);background:rgba(255,255,255,.04)}
.unfinished-toggle[aria-pressed="true"]{background:#ffb07e;color:#120a05}
#demo-viewer{border-radius:16px;border-color:var(--glass-b);background:#0b0c11;box-shadow:0 30px 90px -20px #000}
#demo-viewer::backdrop{background:rgba(3,3,6,.86)}

/* ---------- home hero ---------- */
body[data-page=home] .site-head{margin-bottom:-68px}
.h520-hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(100svh,900px);display:flex;align-items:center;
 padding:100px 0 48px;background:#050509}
.h520-scene{position:absolute;inset:0;z-index:-1;pointer-events:none}
.h520-sky{position:absolute;inset:0;background:
 radial-gradient(70% 55% at 66% 62%,rgba(255,120,70,.22),transparent 70%),
 radial-gradient(40% 40% at 20% 10%,rgba(120,90,255,.12),transparent 70%),
 linear-gradient(180deg,#05050a 0%,#0b0a12 55%,#07060a 100%)}
.h520-bloom{position:absolute;left:66%;top:56%;width:70vmin;height:70vmin;margin:-35vmin 0 0 -35vmin;border-radius:50%;
 background:radial-gradient(circle,rgba(255,170,110,.45),rgba(255,95,90,.15) 45%,transparent 70%);filter:blur(24px);opacity:.8}
.h520-portal{position:absolute;left:66%;bottom:24%;width:min(34vmin,340px);height:min(52vmin,520px);transform:translateX(-50%);
 border-radius:999px 999px 6px 6px;overflow:hidden;
 background:linear-gradient(180deg,#2a1d4a 0%,#7a3b78 26%,#e2616a 50%,#ff9a5c 70%,#ffd49a 88%,#fff1d6 100%);
 box-shadow:0 0 40px rgba(255,150,100,.55),0 0 120px rgba(255,120,80,.35),inset 0 0 50px rgba(40,10,40,.5)}
.h520-portal::before{content:"";position:absolute;left:-30%;right:-30%;top:52%;height:22%;
 background:radial-gradient(50% 50% at 50% 50%,rgba(255,240,210,.8),transparent 70%);filter:blur(6px)}
.h520-rim{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(255,225,190,.55),inset 0 0 22px rgba(255,210,160,.5)}
.h520-floor{position:absolute;left:0;right:0;bottom:0;height:24%;background:
 radial-gradient(22% 60% at 66% 0%,rgba(255,160,100,.35),transparent 70%),linear-gradient(180deg,#0d0a10,#050509)}
.h520-floor::before{content:"";position:absolute;left:66%;top:0;width:min(30vmin,300px);height:70%;transform:translateX(-50%);
 background:linear-gradient(180deg,rgba(255,170,110,.35),transparent);filter:blur(8px)}
.h520-flare{position:absolute;left:66%;top:calc(76% - 2px);width:min(70vw,900px);height:2px;transform:translateX(-50%);
 background:linear-gradient(90deg,transparent,rgba(255,215,170,.75),transparent);filter:blur(.5px);opacity:.7}
.h520-flare::after{content:"";position:absolute;left:62%;top:-60px;width:26px;height:26px;border-radius:50%;
 background:radial-gradient(circle,rgba(170,150,255,.45),transparent 70%)}
.h520-fig{position:absolute;left:66%;bottom:calc(24% - 2px);width:14px;height:36px;transform:translateX(-50%);fill:#07060a;
 filter:drop-shadow(0 0 1px rgba(255,190,140,.6))}
.h520-copy{position:relative}
.h520-eye{margin:0 0 14px;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:#ffc9a3}
.h520-hero h1{margin:0;max-width:11ch;font-size:clamp(2.7rem,8.6vw,6.4rem);line-height:.98;color:#f7f3ee;
 text-shadow:0 2px 30px rgba(0,0,0,.6)}
.h520-grad{font-style:italic;background:var(--sun);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.h520-sub{max-width:40ch;margin:20px 0 0;font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.55;color:#d6d9e0}
.h520-cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.h520-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;font-weight:600;text-decoration:none}
.h520-btn-p{background:var(--sun);color:#140a06;box-shadow:0 10px 30px -10px rgba(255,130,90,.7)}
.h520-btn-q{color:#f3f3f6;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.h520-btn:hover{filter:brightness(1.08)}
@media (max-width:760px){.h520-hero{min-height:760px;align-items:flex-start;padding-top:120px}
 .h520-portal,.h520-bloom,.h520-floor::before,.h520-flare,.h520-fig{left:72%}
 .h520-portal{width:150px;height:240px;bottom:20%}.h520-fig{bottom:calc(20% - 2px)}.h520-floor{height:20%}.h520-flare{top:80%}
 .h520-copy{padding-bottom:0}}

/* stat cards + category tiles */
.h520-band{position:relative;margin-top:-28px}
.h520-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
@media (min-width:760px){.h520-stats{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}}
.h520-stat{display:flex;flex-direction:column-reverse;padding:16px 18px;border-radius:18px;border:1px solid var(--glass-b);
 background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.h520-stat:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:760px){.h520-stat:last-child:nth-child(odd){grid-column:auto}}
.h520-stat dd{margin:0;font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.h520-stat dt{margin-top:4px;font-size:.86rem;color:var(--ink-2)}
.h520-tiles ul{list-style:none;margin:18px 0 8px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:760px){.h520-tiles ul{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
.h520-tile span:last-child{white-space:nowrap;min-width:0}
@media (max-width:760px){.h520-tile span:last-child{white-space:normal;overflow-wrap:anywhere}}
.h520-tile{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border-radius:16px;border:1px solid var(--glass-b);
 background:rgba(255,255,255,.035);color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:550;line-height:1.2}
.h520-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
 background:radial-gradient(circle at 50% 30%,rgba(255,170,120,.3),rgba(255,120,90,.08));box-shadow:0 0 18px rgba(255,140,90,.25),inset 0 0 0 1px rgba(255,200,160,.3)}
.h520-ico svg{width:20px;height:20px;fill:none;stroke:#ffd2ad;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.h520-tile:hover{border-color:rgba(255,190,140,.45);background:rgba(255,160,110,.07)}

/* ---------- motion (only when allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
 .h520-bloom{animation:h520-pulse 9s ease-in-out infinite alternate}
 .h520-flare{animation:h520-flare 11s ease-in-out infinite alternate}
 .h520-sky{animation:h520-drift 24s ease-in-out infinite alternate}
 .h520-portal,.h520-bloom{will-change:transform}
 .h520-tile,.h520-stat,.dtile .demo-open{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
 .h520-tile:hover,.dtile .demo-open:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(255,130,90,.55)}
 .js .h520-in{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
 .js .h520-in.is-in{opacity:1;transform:none}
}
@keyframes h520-pulse{from{opacity:.62;transform:scale(.96)}to{opacity:.9;transform:scale(1.05)}}
@keyframes h520-flare{from{opacity:.4;transform:translateX(-52%)}to{opacity:.8;transform:translateX(-48%)}}
@keyframes h520-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1.5%,1%,0) scale(1.03)}}
@media (prefers-reduced-motion:reduce){.h520-hero *,.h520-band *{animation:none!important;transition:none!important}}
.h520-paused *{animation-play-state:paused!important}
@media (max-width:760px){.h520-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,9,.9) 0%,rgba(5,5,9,.55) 60%,rgba(5,5,9,.1) 100%)}}
@media (min-width:761px){.site-nav a{padding:0 10px}.site-head .head-row{flex:0 1 auto}.site-head .site-nav{margin-left:auto}}

/* v5.4.22 hero alignment: the arch scene now shares the copy's box.
   The scene sits in the same grid cell as the copy, so the arch top meets the eyebrow,
   its base and the horizon meet the bottom of the buttons. Sky and floor bleed past the cell. */
.h520-hero{--h520-pt:112px;--h520-hz:clamp(96px,15svh,150px);display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto;align-content:end;align-items:stretch;padding:var(--h520-pt) 0 var(--h520-hz)}
.h520-hero>.h520-scene,.h520-hero>.h520-copy{grid-area:1/1}
.h520-hero>.h520-scene{position:relative;inset:auto}
.h520-sky,.h520-scene::after{top:calc(-1 * var(--h520-pt));bottom:calc(-1 * var(--h520-hz))}
.h520-bloom{top:50%}
.h520-portal{top:0;bottom:0;height:auto;width:min(40vmin,380px)}
.h520-fig{bottom:-2px}
.h520-floor{top:100%;bottom:auto;height:var(--h520-hz)}
.h520-flare{top:-1px}
.h520-flare{top:calc(100% - 1px)}
@media (max-width:760px){
  .h520-hero{--h520-pt:104px;--h520-hz:72px;--h520-art:190px;min-height:0}
  .h520-copy{padding-bottom:calc(var(--h520-art) + 28px)}
  .h520-portal,.h520-bloom,.h520-floor::before,.h520-flare,.h520-fig{left:50%}
  .h520-portal{top:auto;bottom:0;width:128px;height:var(--h520-art)}
  .h520-bloom{top:auto;bottom:calc(var(--h520-art) / 2 - 35vmin)}
  .h520-flare{top:calc(100% - 1px)}
  .h520-scene::after{background:linear-gradient(180deg,rgba(5,5,9,.6) 0%,rgba(5,5,9,.35) 55%,rgba(5,5,9,0) 75%)}
}

/* "Live demo" chips: anchor each to its own thumbnail (they had no positioned parent and piled up at the bottom-left of the first screen) */
.dtile .dt-run{position:relative;display:block}

/* narrow desktops: keep the arch clear of the headline */
@media (min-width:761px) and (max-width:1100px){
  .h520-portal,.h520-bloom,.h520-floor::before,.h520-flare,.h520-fig{left:72%}
  .h520-portal{width:min(26vw,300px)}
}