/* =========================================================
   SerliLearn public site — "bold & playful"
   Loaded after app.css on public and sign-in pages only.
   Fonts: Bricolage Grotesque (display) + Plus Jakarta Sans (text), bundled, SIL OFL.
   ========================================================= */
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Jakarta";src:url(../fonts/plus-jakarta-sans.woff2) format("woff2");font-weight:200 800;font-display:swap}

body.site{
  --paper:#FFF8F0; --paper-2:#FFEFDD; --card:#FFFFFF; --ink:#15122B; --ink-2:#433E5E; --mute:#76708F; --line:#F0E2D2; --line-2:#E6D3BE;
  --brand:#FF5A36; --brand-2:#7C5CFF; --sun:#FFC53D; --mint:#22C08A; --sky:#2EA8FF; --pink:#FF7AB6;
  --acc:var(--brand); --acc-ink:#fff;
  --r:18px; --r-sm:12px; --r-lg:28px;
  --shadow:0 2px 0 rgba(21,18,43,.04),0 18px 40px -22px rgba(21,18,43,.35);
  --shadow-pop:0 4px 0 rgba(21,18,43,.9); --edge:#15122B; --edge-sh:#15122B;
  --display:"Bricolage","Jakarta",system-ui,sans-serif; --sans:"Jakarta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:var(--display);
  font-family:var(--sans); background:var(--paper); color:var(--ink); overflow-x:hidden;
}
:root[data-theme="dark"] body.site{--paper:#100E1F;--paper-2:#18152D;--card:#1D1A35;--ink:#F5F2FF;--ink-2:#CFC9EA;--mute:#9C96B8;--line:#2B2748;--line-2:#3A3560;--shadow:0 2px 0 rgba(0,0,0,.2),0 20px 44px -22px rgba(0,0,0,.8);--shadow-pop:0 4px 0 rgba(0,0,0,.6);--edge:#4A4475;--edge-sh:#05040C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.site{--paper:#100E1F;--paper-2:#18152D;--card:#1D1A35;--ink:#F5F2FF;--ink-2:#CFC9EA;--mute:#9C96B8;--line:#2B2748;--line-2:#3A3560;--shadow:0 2px 0 rgba(0,0,0,.2),0 20px 44px -22px rgba(0,0,0,.8);--shadow-pop:0 4px 0 rgba(0,0,0,.6);--edge:#4A4475;--edge-sh:#05040C}}

.site h1,.site h2,.site h3,.site .display{font-family:var(--display);letter-spacing:-.02em;font-weight:750}
.site h1{font-size:clamp(38px,6.4vw,76px);line-height:1.02}
.site h2{font-size:clamp(30px,4.2vw,50px);line-height:1.06}
.site h3{font-size:21px;font-weight:700}
.site .lede{font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);max-width:36em}
.site .eyebrow{font:700 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.site em.hl{font-style:normal;color:inherit;background-image:linear-gradient(transparent 60%,var(--sun) 60%,var(--sun) 92%,transparent 92%);background-repeat:no-repeat;background-size:0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;transition:background-size 1s cubic-bezier(.2,.8,.2,1) .35s}
.site .in em.hl,.site em.hl.in,.no-motion .site em.hl,html:not(.motion) .site em.hl{background-size:100% 100%}
.site .bg-brand em.hl{background-image:linear-gradient(transparent 60%,rgba(255,197,61,.85) 60%,rgba(255,197,61,.85) 92%,transparent 92%)}
.site .bg-brand em.hl{color:#15122B!important;background-image:linear-gradient(transparent 60%,rgba(255,197,61,.85) 60%,rgba(255,197,61,.85) 92%,transparent 92%)!important}
:root[data-theme="dark"] .site em.hl,.site .bg-dark em.hl{color:var(--sun);background-image:linear-gradient(transparent 84%,var(--sun) 84%,var(--sun) 96%,transparent 96%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .site em.hl{color:var(--sun);background-image:linear-gradient(transparent 84%,var(--sun) 84%,var(--sun) 96%,transparent 96%)}:root:not([data-theme="light"]) .sec.bg-dark,:root:not([data-theme="light"]) .site footer.site{background:#07060F}}
:root[data-theme="dark"] .site footer.site{background:#07060F}
.site .center-x{text-align:center;display:flex;justify-content:center;gap:6px;flex-wrap:wrap}

/* buttons */
.site .btn{border-radius:999px;font-weight:700;border:2px solid var(--edge);background:var(--card);color:var(--ink);box-shadow:var(--shadow-pop);transition:transform .15s ease,box-shadow .15s ease,background .2s}
.site .btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(21,18,43,.9)}
.site .btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(21,18,43,.9)}
.site .btn.primary{background:var(--brand);color:#fff;border-color:var(--ink)}
.site .btn.ghost{box-shadow:none;border-color:transparent;background:transparent}
.site .btn.ghost:hover{background:var(--paper-2);transform:none;box-shadow:none}
.site .btn.lg{padding:14px 26px;font-size:17px}
.site .btn svg{transition:transform .2s}.site .btn:hover svg{transform:translateX(3px)}


/* header */
.site header.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site header.top.scrolled{border-bottom-color:var(--line);box-shadow:0 10px 30px -24px rgba(21,18,43,.5)}
.site header.top .wrap{min-height:72px}
.site .brand .mark{background:var(--brand);color:#fff;border-radius:12px;transform:rotate(-6deg);transition:transform .3s}
.site .brand:hover .mark{transform:rotate(6deg) scale(1.06)}
.site .brand{font-family:var(--display);font-weight:800;font-size:21px}
.site .nav a{font-weight:600;border-radius:999px;padding:8px 14px;position:relative}
.site .nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.site .nav a:not([aria-current]):hover{background:var(--paper-2)}

/* header menu: desktop shows links, phones get a drawer */
.site .menu-btn{display:none}
@media (max-width:860px){.site .menu-btn{display:inline-flex}.site .nav{top:72px;background:var(--paper);border-bottom:2px solid var(--edge);gap:4px;padding:12px 16px 18px;box-shadow:0 20px 40px -20px rgba(21,18,43,.4)}.site .nav.open{animation:fadeup .25s both}.site .nav a{padding:12px 16px;font-size:17px}}
/* page editor preview */
[data-pb-preview] [data-sec]{cursor:pointer}
[data-pb-preview] [data-sec]:hover{outline:3px solid var(--sky);outline-offset:-3px}
[data-pb-preview] .pb-flash{outline:4px solid var(--brand)!important;outline-offset:-4px}

/* footer */
.site footer.site{background:#15122B;color:#E9E5FF;border:0;margin-top:0;padding:72px 0 36px;position:relative;overflow:hidden}
.site footer.site h4{color:#fff;font-family:var(--display)}
.site footer.site a{color:#CFC9EA}.site footer.site a:hover{color:#fff}
.site footer.site .mute{color:#9C96B8}
.site footer.site .brand{color:#fff}
.site footer .big{font:800 clamp(48px,11vw,150px)/.9 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px #3A3560;margin:40px 0 0;user-select:none;white-space:nowrap}

/* sections */
.sec{position:relative;padding:96px 0;overflow:hidden}
.sec.pad-tight{padding:44px 0}.sec.pad-roomy{padding:128px 0 120px}
.sec.bg-tint{background:var(--paper-2)}
.sec.bg-sun{background:radial-gradient(1200px 600px at 85% -10%,#FFD7C2 0%,transparent 60%),radial-gradient(900px 500px at -10% 30%,#E6DEFF 0%,transparent 55%),var(--paper)}
:root[data-theme="dark"] .sec.bg-sun{background:radial-gradient(1200px 600px at 85% -10%,#3B1F2E 0%,transparent 60%),radial-gradient(900px 500px at -10% 30%,#231C4D 0%,transparent 55%),var(--paper)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sec.bg-sun{background:radial-gradient(1200px 600px at 85% -10%,#3B1F2E 0%,transparent 60%),radial-gradient(900px 500px at -10% 30%,#231C4D 0%,transparent 55%),var(--paper)}:root:not([data-theme="light"]) .site .hero{background:var(--paper)}}
.sec.bg-brand{background:var(--brand);color:#fff}.sec.bg-brand .eyebrow{color:#FFE8A3}.sec.bg-brand .lede{color:#FFF1EC}
.sec.bg-dark{background:#15122B;color:#F5F2FF}.sec.bg-dark .lede{color:#CFC9EA}.sec.bg-dark .eyebrow{color:var(--sun)}
:root[data-theme="dark"] .sec.bg-dark{background:#07060F}
.sec.bg-grid{background-color:var(--paper);background-image:radial-gradient(var(--line-2) 1.2px,transparent 1.2px);background-size:22px 22px}
.sec.is-hidden{opacity:.35;outline:2px dashed var(--mute);outline-offset:-8px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.sec-head h2{margin:0 0 10px;max-width:18em}.sec-head .lede{margin:0}
.sec-head.center{justify-content:center;text-align:center}.sec-head.center h2,.sec-head.center .lede{margin-left:auto;margin-right:auto}
.ph{display:grid;place-items:center;gap:8px;min-height:220px;border:2px dashed var(--line-2);border-radius:var(--r);color:var(--mute);text-align:center;padding:20px}

/* hero */
.hero2{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero2.solo{grid-template-columns:1fr;text-align:center}.hero2.solo .lede{margin-inline:auto}.hero2.solo .cta-row{justify-content:center}
.hero2 h1{margin:0 0 22px}
.chip{display:inline-flex;align-items:center;gap:10px;background:var(--card);border:2px solid var(--edge);border-radius:999px;padding:9px 16px;box-shadow:var(--shadow-pop);color:var(--ink)!important}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(34,192,138,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(34,192,138,0)}100%{box-shadow:0 0 0 0 rgba(34,192,138,0)}}
.cta-row{gap:14px;margin-top:30px;flex-wrap:wrap}
.hero2 .note{margin-top:18px;font-size:14px;color:var(--mute)}
.hero-art{position:relative;min-height:470px}
.hero-art.img img{width:100%;border-radius:var(--r-lg);border:2px solid var(--edge);box-shadow:10px 10px 0 var(--edge-sh)}
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;z-index:0;animation:drift 18s ease-in-out infinite alternate}
.blob.b1{width:120px;height:120px;background:var(--sun);top:14%;left:46%}
.blob.b2{width:70px;height:70px;background:var(--pink);bottom:4%;left:-1%;animation-duration:14s}
.blob.b3{width:44px;height:44px;background:var(--sky);top:10%;right:6%;animation-duration:11s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-24px) scale(1.12)}100%{transform:translate(-20px,18px) scale(.95)}}

/* hero artwork: floating studio windows */
.art-studios{position:relative;height:100%;min-height:470px}
.art-studios .win{position:absolute;background:var(--card);border:2px solid var(--edge);border-radius:16px;box-shadow:8px 8px 0 var(--edge-sh);overflow:hidden}
.art-studios .bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:var(--c);color:#fff;font:700 11px var(--sans)}
.art-studios .bar i,.screen .sbar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55)}.art-studios .bar span{margin-left:6px}
.w-design{width:62%;left:0;top:4%;z-index:2}.w-motion{width:50%;right:0;top:0;z-index:1}.w-code{width:56%;right:2%;bottom:6%;z-index:3}.w-kids{width:42%;left:4%;bottom:0;z-index:4}
.float-a{animation:bob 6s ease-in-out infinite}.float-b{animation:bob 7s ease-in-out -2s infinite}.float-c{animation:bob 6.5s ease-in-out -4s infinite}.float-d{animation:bob 5.5s ease-in-out -1s infinite}
@keyframes bob{50%{transform:translateY(-12px) rotate(-.6deg)}}
.w-design .body{display:grid;grid-template-columns:1fr 56px;gap:8px;padding:10px}
.poster{position:relative;aspect-ratio:1;border-radius:8px;background:#FFE9DC;overflow:hidden}
.poster .shape{position:absolute;border-radius:50%;animation:popin 9s infinite}
.sh1{width:46%;height:46%;background:var(--c);right:-8%;top:-6%;animation-delay:.2s!important}
.sh2{width:30%;height:30%;background:var(--sun);left:8%;bottom:10%;border-radius:8px!important;animation-delay:.6s!important}
.sh3{width:16%;height:16%;background:var(--brand-2);right:18%;bottom:22%;animation-delay:1s!important}
.ptitle{position:absolute;left:9%;top:24%;font:800 clamp(16px,2.4vw,30px)/.92 var(--display);color:#15122B;animation:slidein 9s infinite 1.3s both}
.psub{position:absolute;left:9%;top:58%;font:700 11px var(--sans);background:#15122B;color:#fff;padding:3px 7px;border-radius:5px;animation:slidein 9s infinite 1.8s both}
.cursor{position:absolute;color:#15122B;animation:cur 9s infinite;transform:rotate(-120deg)}
@keyframes popin{0%,6%{transform:scale(0)}12%,88%{transform:scale(1)}96%,100%{transform:scale(0)}}
@keyframes slidein{0%,6%{opacity:0;transform:translateX(-14px)}12%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes cur{0%{left:80%;top:80%}20%{left:30%;top:40%}40%{left:60%;top:65%}60%{left:20%;top:70%}80%{left:70%;top:30%}100%{left:80%;top:80%}}
.layers{display:grid;gap:6px;align-content:start}.layers b{height:12px;border-radius:4px;background:var(--line)}.layers b:nth-child(2){background:var(--c);animation:blink 3s infinite}
@keyframes blink{50%{opacity:.35}}
.w-motion .body{padding:10px}.stage{height:72px;position:relative;border-bottom:1px solid var(--line)}
.ball{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--c);left:6%;animation:ballx 2.4s cubic-bezier(.45,0,.55,1) infinite alternate,bally .6s cubic-bezier(.3,0,.7,1) infinite alternate}
@keyframes ballx{to{left:86%}}@keyframes bally{from{top:4px}to{top:46px}}
.tl{position:relative;display:grid;gap:8px;padding-top:10px}.tl span{position:relative;height:10px;border-radius:4px;background:var(--line)}
.tl em{position:absolute;top:50%;width:10px;height:10px;background:var(--c);transform:translate(-50%,-50%) rotate(45deg);border-radius:2px}
.tl .head{position:absolute;top:4px;bottom:-4px;width:2px;background:var(--brand);height:auto;border-radius:0;animation:head 4.8s linear infinite}
@keyframes head{from{left:0}to{left:100%}}
.body.code{padding:12px 14px;display:grid;gap:5px;font:12.5px/1.4 ui-monospace,Menlo,Consolas,monospace;background:#15122B;color:#E9E5FF;position:relative;min-height:96px}
.body.code b{color:#FF9B85;font-weight:400}.body.code u{color:#8EF0C4;text-decoration:none}
.body.code .ln{white-space:nowrap;overflow:hidden;width:0;animation:type 8s steps(28) infinite}
.l2{animation-delay:1.6s!important}.l3{animation-delay:3.2s!important}
@keyframes type{0%{width:0}15%,90%{width:100%}100%{width:0}}
.badge-ok{position:absolute;right:10px;bottom:10px;background:var(--mint);color:#06301F;font:800 11px var(--sans);padding:5px 9px;border-radius:999px;display:flex;gap:4px;align-items:center;animation:okpop 8s infinite}
@keyframes okpop{0%,55%{transform:scale(0)}62%,92%{transform:scale(1)}100%{transform:scale(0)}}
.body.blocks{padding:12px;display:grid;gap:4px;justify-items:start}
.blk{display:inline-block;font:800 11.5px var(--sans);color:#fff;padding:7px 12px;border-radius:8px 8px 8px 2px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.blk i{font-style:normal;background:#fff;color:#15122B;border-radius:999px;padding:0 6px;margin-left:3px}
.blk.ev{background:#FFB800;color:#3A2600;border-radius:16px 16px 8px 2px}.blk.lp{background:#FF8A00}.blk.mv{background:#4C97FF}.blk.tn{background:#4C97FF}.blk.sy{background:#9966FF}
.blk.in{margin-left:14px}
.body.blocks .blk{animation:snap 7s infinite both}.body.blocks .blk:nth-child(2){animation-delay:.4s}.body.blocks .blk:nth-child(3){animation-delay:.8s;margin-left:14px}.body.blocks .blk:nth-child(4){animation-delay:1.2s}
@keyframes snap{0%,4%{opacity:0;transform:translate(24px,-10px) rotate(6deg)}12%,90%{opacity:1;transform:none}100%{opacity:0}}
.pop-badge{position:absolute;left:44%;top:46%;z-index:5;background:var(--sun);color:#3A2600;border:2px solid var(--edge);box-shadow:4px 4px 0 var(--edge-sh);font:800 13px var(--sans);padding:8px 14px;border-radius:999px;display:flex;gap:6px;align-items:center;animation:badge 9s infinite}
@keyframes badge{0%,62%{transform:scale(0) rotate(-10deg)}68%{transform:scale(1.12) rotate(3deg)}72%,94%{transform:scale(1) rotate(-3deg)}100%{transform:scale(0)}}

/* marquee */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;width:max-content;animation:marq 32s linear infinite}
.marquee.speed-slow .track{animation-duration:50s}.marquee.speed-fast .track{animation-duration:18s}
.marquee:hover .track{animation-play-state:paused}
.marquee .run{display:flex;align-items:center;gap:28px;padding-right:28px;font:800 clamp(22px,3vw,38px)/1.1 var(--display);white-space:nowrap}
.marquee .star{color:var(--sun);font-size:.7em}
.bg-paper .marquee .w,.bg-tint .marquee .w{color:var(--ink)}
.bg-dark .marquee .w{color:#F5F2FF}
@keyframes marq{to{transform:translateX(-50%)}}

/* academies */
.ac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.ac2{position:relative;display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:var(--r-lg);background:var(--card);border:2px solid var(--edge);box-shadow:6px 6px 0 var(--c);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .25s,box-shadow .25s;min-height:250px}
.ac2:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--c)}
.ac2 .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--c);color:#fff;margin-bottom:10px;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.ac2:hover .ic{transform:rotate(-10deg) scale(1.12)}
.ac2 h3{margin:0}.ac2 p{color:var(--ink-2);margin:0;font-size:15px;flex:1}
.ac2 .more{font-weight:700;display:flex;align-items:center;gap:6px;color:var(--c)}
.ac2 .arr{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;transition:transform .25s}.ac2:hover .arr{transform:translateX(4px)}
.shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s;pointer-events:none}
.ac2:hover .shine{transform:translateX(120%)}

/* course cards inside the new site */
.site .card.course{border:2px solid var(--edge);border-radius:var(--r);box-shadow:5px 5px 0 var(--edge-sh);transition:transform .2s,box-shadow .2s;overflow:hidden}
.site .card.course:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--c)}
.site .card.course .cover{background:radial-gradient(circle at 86% 18%,rgba(255,255,255,.28) 0 16%,transparent 17%),radial-gradient(circle at 8% 92%,rgba(0,0,0,.14) 0 24%,transparent 25%),radial-gradient(rgba(255,255,255,.18) 1.2px,transparent 1.4px) 0 0/14px 14px,var(--c);color:#fff;position:relative;overflow:hidden}
.site .card.course .cover svg{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}.site .card.course:hover .cover svg{transform:scale(1.25) rotate(-8deg)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px;text-align:center}
.stat .snum{display:block;font:800 clamp(44px,6vw,72px)/1 var(--display);letter-spacing:-.03em}
.stat .lbl{display:block;margin-top:8px;font-weight:600;opacity:.9}

/* features */
.feat-grid{display:grid;gap:22px}.feat-grid.cols-2{grid-template-columns:repeat(2,1fr)}.feat-grid.cols-3{grid-template-columns:repeat(3,1fr)}.feat-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.feat{background:var(--card);border:2px solid var(--edge);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow);transition:transform .25s}
.feat:hover{transform:translateY(-6px)}
.feat .ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c);margin-bottom:16px;border:2px solid var(--c)}
.feat p{color:var(--ink-2);margin:0}

/* steps */
.steps-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:28px;position:relative;counter-reset:s}
.steps-line::before{content:"";position:absolute;left:28px;right:28px;top:28px;height:4px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--ink) 0 12px,transparent 12px 22px);transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.8,.2,1) .2s}
.in .steps-line::before,.steps-line.in::before,.no-motion .steps-line::before{transform:scaleX(1)}
.steps-line li{position:relative}
.steps-line .n{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--brand);color:#fff;font:800 24px var(--display);border:3px solid var(--edge);box-shadow:4px 4px 0 var(--edge-sh);margin-bottom:18px;position:relative}
.steps-line li:nth-child(2) .n{background:var(--brand-2)}.steps-line li:nth-child(3) .n{background:var(--mint)}.steps-line li:nth-child(4) .n{background:var(--sky)}
.steps-line p{color:var(--ink-2)}

/* studio showcase */
.showcase{background:var(--card);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:10px 10px 0 var(--edge-sh);overflow:hidden}
.tabbar{display:flex;gap:6px;padding:10px;border-bottom:2px solid var(--edge);background:var(--paper-2);overflow-x:auto}
.tabbar button{display:flex;align-items:center;gap:8px;font:700 15px var(--sans);border:2px solid transparent;background:transparent;color:var(--ink);padding:10px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.tabbar button[aria-selected="true"]{background:var(--c);color:#fff;border-color:var(--ink)}
.panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;padding:34px;align-items:center}
.panel:not([hidden]){animation:fadeup .5s both}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pcopy h3{font-size:30px;color:var(--c)}.pcopy p{color:var(--ink-2);font-size:17px}
.screen{border:2px solid var(--edge);border-radius:14px;overflow:hidden;background:var(--paper);aspect-ratio:16/10;display:flex;flex-direction:column}
.screen .sbar{display:flex;gap:5px;padding:8px 10px;background:var(--c)}
.sd{display:grid;grid-template-columns:38px 1fr 70px;gap:8px;padding:10px;flex:1}
.sd .tools,.sd .side{display:grid;gap:6px;align-content:start}.sd .tools b{height:26px;border-radius:7px;background:var(--line)}.sd .tools b:nth-child(2){background:var(--c)}
.sd .side b{height:16px;border-radius:5px;background:var(--line)}.sd .side b.on{background:var(--c);animation:blink 2.4s infinite}
.sd .canvas{position:relative;background:#fff;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.sd .photo{position:absolute;inset:0;background:linear-gradient(160deg,#FFB38A,#FF5A36 60%,#7C5CFF)}
.sd .sh{position:absolute;border-radius:50%;animation:popin 8s infinite}.sd .sh.a{width:34%;aspect-ratio:1;background:var(--sun);right:6%;top:8%}.sd .sh.b{width:18%;aspect-ratio:1;background:#fff;left:8%;bottom:10%;animation-delay:.5s}
.sd .t1{position:absolute;left:8%;top:30%;font:800 clamp(18px,2.6vw,34px) var(--display);color:#fff;animation:slidein 8s infinite .8s both}
.sd .t2{position:absolute;left:8%;top:56%;font:800 14px var(--sans);background:#15122B;color:#fff;border-radius:6px;padding:4px 9px;animation:slidein 8s infinite 1.3s both}
.sd .sel{position:absolute;left:6%;top:27%;width:56%;height:22%;border:2px dashed #fff;border-radius:4px;animation:blink 1.6s infinite}
.sm{display:flex;flex-direction:column;flex:1}.sm .view{flex:1;position:relative;background:#15122B;overflow:hidden}
.sm .o1{position:absolute;width:16%;aspect-ratio:1;border-radius:22%;background:var(--c);top:30%;animation:ballx 3s cubic-bezier(.6,0,.3,1.4) infinite alternate;left:8%}
.sm .o2{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);font:800 clamp(16px,2.4vw,30px) var(--display);color:#fff;letter-spacing:.3em;animation:track 3s ease-in-out infinite alternate}
@keyframes track{from{letter-spacing:.6em;opacity:.2}to{letter-spacing:.05em;opacity:1}}
.sm .tracks{position:relative;display:grid;gap:7px;padding:10px;background:var(--paper-2)}.sm .tracks span{position:relative;height:12px;background:var(--line);border-radius:4px}
.sm .tracks em{position:absolute;top:50%;width:11px;height:11px;background:var(--c);transform:translate(-50%,-50%) rotate(45deg);border-radius:2px}
.sm .tracks .ph{position:absolute;top:4px;bottom:4px;width:2px;background:var(--brand);animation:head 3s linear infinite;min-height:0;border:0;padding:0;border-radius:0}
.sc{display:grid;grid-template-columns:1.2fr .8fr;flex:1}
.sc .ed{background:#15122B;color:#E9E5FF;padding:14px;font:12.5px/1.7 ui-monospace,Menlo,Consolas,monospace;display:grid;align-content:start}.sc .ed b{color:#FF9B85;font-weight:400}.sc .ed u{color:#8EF0C4;text-decoration:none}
.sc .ed span{white-space:nowrap;overflow:hidden;width:0;animation:type 9s steps(36) infinite}.sc .ed span:nth-child(2){animation-delay:.8s}.sc .ed span:nth-child(3){animation-delay:1.6s}.sc .ed span:nth-child(4){animation-delay:2.4s}.sc .ed span:nth-child(5){animation-delay:3.2s}
.sc .pv{display:grid;place-content:center;gap:12px;justify-items:center;background:#fff;color:#15122B;padding:12px}
.btnx{background:var(--c);color:#fff;font:800 13px var(--sans);padding:9px 14px;border-radius:999px;animation:press 9s infinite}
@keyframes press{0%,48%{transform:scale(1)}52%{transform:scale(.88)}56%,100%{transform:scale(1)}}
.tot{font:800 20px var(--display)}.tot em{font-style:normal;display:inline-block;animation:cnt 9s infinite}
@keyframes cnt{0%,52%{opacity:.25}56%,100%{opacity:1}}
.ok{font:800 11px var(--sans);background:var(--mint);color:#06301F;padding:5px 10px;border-radius:999px;animation:okpop 9s infinite}
.sk{display:grid;grid-template-columns:40px 1.1fr .9fr;gap:8px;padding:10px;flex:1}.sk .pal{display:grid;gap:6px;align-content:start}.sk .pal b{height:24px;border-radius:50%}
.sk .pal .e{background:#FFB800}.sk .pal .m{background:#4C97FF}.sk .pal .l{background:#FF8A00}.sk .pal .s{background:#9966FF}
.sk .ws{display:grid;gap:4px;align-content:start;justify-items:start}.sk .ws .blk{animation:snap 8s infinite both}.sk .ws .blk:nth-child(2){animation-delay:.4s}.sk .ws .blk:nth-child(3){animation-delay:.8s}.sk .ws .blk:nth-child(4){animation-delay:1.2s}
.sk .kst{position:relative;background:#7A7A7A;border-radius:8px;overflow:hidden;background:repeating-linear-gradient(0deg,#6B6B78 0 18px,#73737F 18px 36px)}
.sk .car{position:absolute;bottom:12%;font-size:28px;animation:steer 3s ease-in-out infinite alternate;left:20%}
.sk .cone{position:absolute;font-size:22px;left:55%;animation:fall 2.4s linear infinite}
@keyframes steer{to{left:62%}}@keyframes fall{from{top:-20%}to{top:110%}}

/* image + text */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.split.side-left .split-img{order:-1}
.split-img img{width:100%;border-radius:var(--r-lg);border:2px solid var(--edge);box-shadow:10px 10px 0 var(--brand-2)}

/* kids band */
.kids2{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;background:linear-gradient(135deg,#DFFBEF,#E8F4FF);border:2px solid var(--edge);border-radius:36px;padding:48px;box-shadow:10px 10px 0 var(--mint);color:#15122B}
.kids2 .eyebrow{color:#14845B}.kids2 .lede{color:#2B3A4A}
.ticks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}.ticks li{display:flex;gap:10px;align-items:center;font-weight:600}.ticks svg{color:#fff;background:var(--mint);border-radius:50%;padding:3px;flex:none}
.art-kids{display:grid;gap:16px}
.kstage{position:relative;height:190px;border-radius:22px;background:linear-gradient(#BDE7FF,#E4F7FF 60%,#9BE3A8 60%);border:2px solid #15122B;overflow:hidden}
.kstage .fox{position:absolute;font-size:44px;left:8%;bottom:14%;animation:walk 6s ease-in-out infinite}
.kstage .flag{position:absolute;font-size:38px;right:10%;bottom:16%}
.kstage .speech{position:absolute;left:48%;top:12%;background:#fff;border:2px solid #15122B;border-radius:14px;padding:6px 12px;font:800 15px var(--sans);animation:say 6s infinite}
.kstage .star{position:absolute;font-size:22px;animation:twinkle 6s infinite}.st1{right:24%;top:18%}.st2{right:8%;top:40%;animation-delay:.3s!important}
@keyframes walk{0%,10%{left:8%;transform:none}55%,100%{left:64%;transform:translateY(0)}30%{transform:translateY(-14px)}45%{transform:translateY(-8px)}}
@keyframes say{0%,58%{opacity:0;transform:scale(.6)}64%,94%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes twinkle{0%,60%{opacity:0;transform:scale(0) rotate(0)}70%{opacity:1;transform:scale(1.3) rotate(40deg)}100%{opacity:0;transform:scale(.6) rotate(90deg)}}
.kblocks{display:grid;gap:4px;justify-items:start;padding:16px;background:#fff;border:2px solid #15122B;border-radius:22px}
.kblocks .blk{font-size:14px;padding:9px 14px;animation:snap 6s infinite both}.kblocks .blk:nth-child(2){animation-delay:.3s}.kblocks .blk:nth-child(3){animation-delay:.6s}.kblocks .blk:nth-child(4){animation-delay:.9s}.kblocks .blk:nth-child(5){animation-delay:1.2s}
.hero-art .art-kids{max-width:460px;margin-left:auto}

/* pricing in sections */
.sec .plans{margin-top:10px}
.site .plan{border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:6px 6px 0 var(--edge-sh);transition:transform .2s}
.site .plan:hover{transform:translateY(-6px)}
.seg-wrap{display:flex;justify-content:center;margin:-16px 0 28px}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.q{position:relative;margin:0;background:var(--card);border:2px solid var(--edge);border-radius:var(--r-lg);padding:30px 26px 24px;box-shadow:var(--shadow)}
.q .mark{position:absolute;top:-22px;left:22px;font:800 80px/1 var(--display);color:var(--brand)}
.q blockquote{margin:0 0 18px;font-size:17px}.q figcaption{display:flex;gap:12px;align-items:center}
.q .ava{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--brand-2);color:#fff;font-weight:800}

/* faq */
.faqs details.faq{background:var(--card);border:2px solid var(--edge);border-radius:var(--r);padding:16px 22px;margin-bottom:12px;transition:box-shadow .2s}
.faqs details.faq[open]{box-shadow:5px 5px 0 var(--sun)}
.faqs details.faq summary::after{width:30px;height:30px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;flex:none}

/* blog */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.post{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--edge);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.post:hover{transform:translateY(-4px);box-shadow:6px 6px 0 var(--brand)}
.post .pimg{aspect-ratio:16/9;display:grid;place-items:center;background:var(--paper-2);color:var(--mute);overflow:hidden}.post .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.post:hover .pimg img{transform:scale(1.06)}
.post .eyebrow{margin:18px 22px 6px}.post h3{margin:0 22px 8px}.post p{margin:0 22px 22px;color:var(--ink-2);font-size:15px}

/* video, gallery, logos */
.wide-ish{max-width:980px}
.vid{aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;border:2px solid var(--edge);box-shadow:10px 10px 0 var(--brand)}.vid iframe{width:100%;height:100%;border:0}
.gallery{columns:3 260px;column-gap:18px}.gallery figure{margin:0 0 18px;break-inside:avoid;border-radius:var(--r);overflow:hidden;border:2px solid var(--edge);background:var(--card)}
.gallery img{width:100%;display:block;transition:transform .5s}.gallery figure:hover img{transform:scale(1.05)}.gallery figcaption{padding:10px 14px;font-size:14px;color:var(--ink-2)}
.logos-title{text-align:center;font-weight:700;color:var(--mute);margin-bottom:22px}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:40px}.logos img{height:42px;width:auto;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}.logos img:hover{filter:none;opacity:1}

/* call to action */
.cta2{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;position:relative;z-index:1}
.cta2 h2{margin:0 0 8px;max-width:16em}.cta2 .lede{margin:0}
.bg-brand .btn.primary{background:#15122B;color:#fff}.bg-dark .btn.primary{background:var(--brand)}
.bg-brand .btn:not(.primary),.bg-dark .btn:not(.primary){background:transparent;color:inherit;border-color:currentColor;box-shadow:none}
.spark{position:absolute;color:var(--sun);font-size:30px;animation:spin 10s linear infinite;opacity:.8}.spark.s1{left:2%;top:-34px}.spark.s2{right:30%;bottom:-24px;font-size:20px;animation-duration:7s}.spark.s3{right:3%;top:-30px;font-size:14px;color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}

/* sign-in pages */
.site .auth .pane.art{background:#15122B;color:#fff;position:relative;overflow:hidden;justify-content:flex-end}
.site .auth .pane.art .eyebrow{color:var(--sun)}
.site .auth .pane.art h2{color:#fff}
.site .auth .pane.art em.hl{color:#15122B}
.auth-art{position:relative;height:400px;margin-bottom:28px}
.auth-art .art-studios{min-height:400px}
.site .auth .field input,.site .auth .field select{border-radius:12px;border-width:2px}
.site .auth .field input:focus{border-color:var(--brand)}
@media (max-width:900px){.auth-art{display:none}}

/* public pages built before the page builder: give them the same rhythm */
.site .section{padding:72px 0}
.site .card{border-radius:var(--r)}
.site .hero{background:radial-gradient(900px 400px at 90% -20%,#FFD7C2 0%,transparent 60%),var(--paper)}
.site .tabs a[aria-current],.site .seg .btn.primary{background:var(--ink);color:var(--paper)}

/* scroll reveal */
.motion [data-r],.motion [data-stagger]>*{opacity:0;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.motion [data-anim="rise"] [data-r],.motion [data-anim="rise"] [data-stagger]>*{transform:translateY(34px)}
.motion [data-anim="zoom"] [data-r],.motion [data-anim="zoom"] [data-stagger]>*{transform:scale(.9)}
.motion [data-anim="slide"] [data-r],.motion [data-anim="slide"] [data-stagger]>*{transform:translateX(-46px)}
.motion [data-anim="pop"] [data-r],.motion [data-anim="pop"] [data-stagger]>*{transform:scale(.6) rotate(-3deg);transition-timing-function:ease,cubic-bezier(.3,1.6,.5,1)}
.motion [data-anim="none"] [data-r],.motion [data-anim="none"] [data-stagger]>*{opacity:1;transform:none;transition:none}
.motion .in[data-r],.motion .in[data-stagger]>*{opacity:1;transform:none}
.motion [data-stagger]>*:nth-child(2){transition-delay:.08s}.motion [data-stagger]>*:nth-child(3){transition-delay:.16s}.motion [data-stagger]>*:nth-child(4){transition-delay:.24s}
.motion [data-stagger]>*:nth-child(5){transition-delay:.32s}.motion [data-stagger]>*:nth-child(6){transition-delay:.4s}.motion [data-stagger]>*:nth-child(n+7){transition-delay:.48s}
.tilt{transform-style:preserve-3d;will-change:transform}

/* scroll progress bar */
.progress{position:fixed;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--brand),var(--sun),var(--brand-2));transform-origin:left;transform:scaleX(0);z-index:60}

/* reduced motion: switch every animation off */
@media (prefers-reduced-motion:reduce){.site *,.site *::before,.site *::after{animation:none!important;transition:none!important}.motion [data-r],.motion [data-stagger]>*{opacity:1!important;transform:none!important}.steps-line::before{transform:scaleX(1)!important}.site em.hl{background-size:100% 100%!important}.progress{display:none}}
.no-motion .site *,.no-motion .site *::before,.no-motion .site *::after{animation:none!important;transition:none!important}

/* responsive */
@media (max-width:1060px){.feat-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .hero2,.split,.kids2,.panel{grid-template-columns:1fr}.hero-art{min-height:380px}.art-studios{min-height:380px}
  .feat-grid.cols-3{grid-template-columns:1fr 1fr}.steps-line{grid-template-columns:1fr}.steps-line::before{left:27px;right:auto;top:28px;bottom:28px;width:4px;height:auto;background:repeating-linear-gradient(180deg,var(--ink) 0 12px,transparent 12px 22px);transform:scaleY(0);transform-origin:top}
  .in .steps-line::before,.steps-line.in::before{transform:scaleY(1)}.steps-line li{padding-left:80px}.steps-line .n{position:absolute;left:0;top:0}
  .kids2{padding:30px}.sec{padding:72px 0}.sec.pad-roomy{padding:88px 0}.panel{padding:22px}
}
@media (max-width:620px){
  .feat-grid.cols-2,.feat-grid.cols-3,.feat-grid.cols-4{grid-template-columns:1fr}
  .hero-art{min-height:330px}.art-studios{min-height:330px}.w-design{width:70%}.w-motion{width:58%}.w-code{width:66%}.w-kids{width:52%}
  .site .btn.lg{padding:12px 20px;font-size:16px}.cta-row .btn{flex:1 1 auto;justify-content:center}
  .kids2{padding:22px;border-radius:26px}.sec-head{margin-bottom:28px}.ac2{min-height:0}
  .site .toggle-theme{display:none}.site header.top .wrap{gap:8px}.site .brand{font-size:18px}.site .top .btn.primary{padding:8px 14px}
}