:root{
  --canvas:#AFD8F0;        /* sky (fallback) */
  --frame:#FFFFFF;
  --ink:#14202B;
  --ink-soft:#4A6173;
  --ink-faint:#8AA6B8;
  --brand:#F0531C;
  --brand-deep:#D2410E;
  --tool:#0D99FF;
  --blue:var(--tool);
  --faint:var(--ink-faint);
  --grid:#EFEEE9;
  --line:#14202b12;
  --line-2:#14202b22;
  --soft:#F1F6FA;          /* faint cool panel tint */
  --sh:0 20px 50px -32px rgba(20,19,16,.32);
  --mono:'Space Mono',ui-monospace,monospace;
  --display:'Bricolage Grotesque',sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --hand:'Shantell Sans',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:radial-gradient(130% 95% at 82% -18%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 40%),radial-gradient(120% 80% at 10% 118%,rgba(196,230,255,.75) 0%,rgba(196,230,255,0) 52%),linear-gradient(180deg,#3E97E2 0%,#5EAEEA 40%,#86C4EF 76%,#AcD8F4 100%);background-attachment:fixed;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.45;position:relative}
/* clean sky + a few soft clouds drifting across */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cloud{position:absolute;left:0;background-repeat:no-repeat;background-size:100% 100%;will-change:transform;filter:drop-shadow(0 12px 18px rgba(90,140,190,.18))}
.cloud.a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20340%20170%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27ga%27%20cx%3D%2750%%27%20cy%3D%2734%%27%20r%3D%2772%%27%3E%3Cstop%20offset%3D%270%%27%20stop-color%3D%27%23ffffff%27%2F%3E%3Cstop%20offset%3D%2762%%27%20stop-color%3D%27%23fbfdff%27%2F%3E%3Cstop%20offset%3D%27100%%27%20stop-color%3D%27%23e6f0fb%27%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%27ba%27%20x%3D%27-35%%27%20y%3D%27-35%%27%20width%3D%27170%%27%20height%3D%27170%%27%3E%3CfeGaussianBlur%20stdDeviation%3D%279%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%27url%28%23ba%29%27%20fill%3D%27url%28%23ga%29%27%3E%3Cellipse%20cx%3D%27170%27%20cy%3D%27118%27%20rx%3D%27128%27%20ry%3D%2730%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2794%27%20r%3D%2734%27%2F%3E%3Ccircle%20cx%3D%27156%27%20cy%3D%2770%27%20r%3D%2750%27%2F%3E%3Ccircle%20cx%3D%27214%27%20cy%3D%2786%27%20r%3D%2740%27%2F%3E%3Ccircle%20cx%3D%27262%27%20cy%3D%27104%27%20r%3D%2728%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.cloud.b{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20380%20140%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27gb%27%20cx%3D%2750%%27%20cy%3D%2734%%27%20r%3D%2772%%27%3E%3Cstop%20offset%3D%270%%27%20stop-color%3D%27%23ffffff%27%2F%3E%3Cstop%20offset%3D%2762%%27%20stop-color%3D%27%23fbfdff%27%2F%3E%3Cstop%20offset%3D%27100%%27%20stop-color%3D%27%23e6f0fb%27%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%27bb%27%20x%3D%27-35%%27%20y%3D%27-35%%27%20width%3D%27170%%27%20height%3D%27170%%27%3E%3CfeGaussianBlur%20stdDeviation%3D%2710%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%27url%28%23bb%29%27%20fill%3D%27url%28%23gb%29%27%3E%3Cellipse%20cx%3D%27190%27%20cy%3D%2798%27%20rx%3D%27160%27%20ry%3D%2726%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%2780%27%20r%3D%2730%27%2F%3E%3Ccircle%20cx%3D%27186%27%20cy%3D%2762%27%20r%3D%2744%27%2F%3E%3Ccircle%20cx%3D%27246%27%20cy%3D%2778%27%20r%3D%2734%27%2F%3E%3Ccircle%20cx%3D%27292%27%20cy%3D%2790%27%20r%3D%2724%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
@keyframes drift{from{transform:translateX(-42vw)}to{transform:translateX(132vw)}}
.cloud.c1{top:9%;width:440px;height:210px;opacity:.95;animation:drift 70s linear infinite;animation-delay:-8s}
.cloud.c2{top:28%;width:300px;height:110px;opacity:.6;animation:drift 96s linear infinite;animation-delay:-52s}
.cloud.c3{top:44%;width:400px;height:190px;opacity:.82;animation:drift 60s linear infinite;animation-delay:-30s}
.cloud.c4{top:64%;width:240px;height:118px;opacity:.5;animation:drift 110s linear infinite;animation-delay:-74s}
.cloud.c5{top:5%;width:320px;height:150px;opacity:.72;animation:drift 80s linear infinite;animation-delay:-46s}
.cloud.c6{top:52%;width:200px;height:96px;opacity:.46;animation:drift 124s linear infinite;animation-delay:-18s}
.cloud.c7{top:14%;width:340px;height:150px;opacity:.5;animation:drift 88s linear infinite;animation-delay:-22s}
.cloud.c8{top:78%;width:300px;height:130px;opacity:.4;animation:drift 116s linear infinite;animation-delay:-60s}
.cloud.c9{top:3%;width:240px;height:108px;opacity:.46;animation:drift 100s linear infinite;animation-delay:-12s}
@media(max-width:760px){}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.mono{font-family:var(--mono);letter-spacing:.04em}
.hand{font-family:var(--hand);font-weight:500}
.wrap{max-width:1280px;margin:0 auto;padding:0 34px;position:relative;z-index:2}
section{position:relative;z-index:2}

.tab{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--frame);background:var(--ink);padding:7px 14px 7px 12px;border-radius:9px 9px 0 0}
.tab svg{width:12px;height:12px}

.sel{position:relative}
.sel::after{content:"";position:absolute;inset:-7px;border:1.5px solid var(--tool);border-radius:3px;pointer-events:none;opacity:0;transition:opacity .18s}
.sel .h{position:absolute;width:10px;height:10px;background:var(--frame);border:1.5px solid var(--tool);border-radius:2px;opacity:0;transition:opacity .18s;pointer-events:none;z-index:5}
.sel .h.tl{top:-12px;left:-12px}.sel .h.tr{top:-12px;right:-12px}.sel .h.bl{bottom:-12px;left:-12px}.sel .h.br{bottom:-12px;right:-12px}
.sel.on::after,.sel.on .h,.sel:hover::after,.sel:hover .h{opacity:1}
.sel .dim{position:absolute;bottom:-32px;top:auto;right:-2px;left:auto;transform:none;font-family:var(--mono);font-size:11px;font-weight:700;background:var(--tool);color:#fff;padding:3px 9px;border-radius:5px;white-space:nowrap;opacity:0;transition:opacity .18s;z-index:12;box-shadow:0 6px 16px -6px rgba(13,153,255,.7)}
.sel.on .dim,.sel:hover .dim{opacity:1}
/* hero wordmark auto-select signature */
@keyframes selDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hpop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes dimIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.wordmark.demo::after{opacity:1;animation:selDraw .6s cubic-bezier(.6,.1,.2,1) forwards}
.wordmark.demo .h{animation:hpop .26s cubic-bezier(.3,1.5,.5,1) forwards}
.wordmark.demo .h.tl{animation-delay:.58s}.wordmark.demo .h.tr{animation-delay:.66s}.wordmark.demo .h.bl{animation-delay:.74s}.wordmark.demo .h.br{animation-delay:.82s}
.wordmark.demo .dim{animation:dimIn .3s ease .92s both}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:15px;padding:14px 22px;border-radius:999px;background:var(--brand);color:#fff;border:none;position:relative;overflow:hidden;isolation:isolate;cursor:pointer;transition:transform .35s cubic-bezier(.2,.85,.25,1),box-shadow .3s,background .2s;box-shadow:0 12px 26px -12px var(--brand)}
.btn:hover{transform:translateY(-2px);background:var(--brand-deep)}
.btn svg{width:16px;height:16px;transition:transform .25s}.btn:hover svg{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none}
.btn.ghost:hover{background:var(--ink);color:var(--frame)}