/* ==========================================================================
   Túlkódolva — design tokens
   Brand pigments are fixed; semantic tokens are designed per theme.
   ========================================================================== */
:root{
  color-scheme:light;
  --font-display:'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --lime:#D6FF53;--pix:#FF6245;--violet:#A99BFF;--night:#17171D;--snow:#F5F5F5;

  --bg:#F4F0E8;--bg-elev:#FBF9F4;--surface:#EBE5D9;
  --text:#17171D;--text-2:#45454F;--text-3:#5F5F69;
  --line:#D3CBBB;--edge:#17171D;--card-border:#17171D;--card-shadow:#17171D;
  --accent:#D3F94B;--on-accent:#17171D;--accent-text:#4C6600;--pix-text:#B93A1D;
  --em-color:var(--text);--em-bg:linear-gradient(transparent 60%,var(--accent) 60%,var(--accent) 92%,transparent 92%);
  --btn-shadow:#17171D;--cursor-outline:0 0 0 1.5px #17171D;
  --focus:#5B45D6;
  --stage-a:#D3F94B80;--stage-b:#A99BFF66;--orbit:#17171D2e;--glass:#FBF9F4e0;
  --food-bg:#802b23;--food-text:#ffe8b5;--studio-bg:#cbced4;--studio-text:#292e38;
  --overlay:#17171Db3;--error:#A3260F;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:.18s;--dur:.32s;--dur-slow:.7s;
  --radius:18px;--radius-lg:30px;
  --header-h:76px;
  --max:1360px;
  --pad:max(clamp(20px,5vw,72px),calc((100% - var(--max)) / 2));
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#17171D;--bg-elev:#1F1F27;--surface:#1B1B22;
  --text:#F5F5F5;--text-2:#BFC0C8;--text-3:#A0A1AC;
  --line:#33333E;--edge:#F5F5F5;--card-border:#3E3E4C;--card-shadow:#D6FF53;
  --accent:#D6FF53;--on-accent:#17171D;--accent-text:#D6FF53;--pix-text:#FF8A70;
  --em-color:var(--accent);--em-bg:none;
  --btn-shadow:#F5F5F5;--cursor-outline:none;
  --focus:#D6FF53;
  --stage-a:#D6FF5324;--stage-b:#A99BFF30;--orbit:#F5F5F524;--glass:#1F1F27e0;
  --food-bg:#5a2420;--food-text:#ffe6ba;--studio-bg:#2f3340;--studio-text:#F5F5F5;
  --overlay:#08080Bcc;--error:#FFB4A2;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font-body);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--font-display);font-weight:800;font-stretch:88%;letter-spacing:-.035em;line-height:1;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:var(--on-accent)}
.theme-switching *,.theme-switching *::before,.theme-switching *::after{transition:background-color .36s ease,color .36s ease,border-color .36s ease,fill .36s ease,box-shadow .36s ease!important}
.scroll-sentinel{position:absolute;top:0;left:0;width:1px;height:24px;pointer-events:none}
.skip-link{position:fixed;top:10px;left:10px;z-index:100;background:var(--text);color:var(--bg);padding:12px 18px;border-radius:10px;font-weight:600;transform:translateY(-200%)}
.skip-link:focus{transform:none}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.eyebrow i{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1.5px var(--edge)}
.micro{font:500 11px/1.5 var(--font-mono);letter-spacing:.1em;color:var(--text-3);text-align:right}

/* Brand wordmark: the underscore is a terminal cursor, drawn as a bar so it reads in both themes. */
.wordmark{font-family:var(--font-display);font-weight:800;font-stretch:86%;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.cursor{position:relative;display:inline-block;color:transparent}
.cursor::after{content:'';position:absolute;left:.04em;right:0;bottom:.06em;height:.15em;background:var(--accent);box-shadow:var(--cursor-outline);border-radius:1px}
@keyframes blink{50%{opacity:0}}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:14px 24px;border:2px solid var(--edge);border-radius:999px;font:700 15px/1.2 var(--font-body);letter-spacing:-.005em;white-space:nowrap;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur-fast),color var(--dur-fast)}
.button .arrow{font-size:19px;line-height:1;transition:transform var(--dur) var(--ease-out)}
.button .mail-icon{flex:none;width:20px;height:20px}
.button-primary{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent);box-shadow:4px 4px 0 var(--btn-shadow)}
.button-primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--btn-shadow)}
.button-primary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--btn-shadow)}
.button-ghost{background:transparent;color:var(--text)}
.button-ghost:hover{background:var(--text);color:var(--bg)}
.button:hover .arrow{transform:translate(2px,-2px)}
.button-ghost:hover .arrow{transform:translateY(3px)}

/* ==========================================================================
   Header + navigation
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:50;transition:background-color var(--dur),box-shadow var(--dur),backdrop-filter var(--dur)}
.site-header.is-scrolled,.site-header.menu-open{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.header-inner{display:flex;align-items:center;gap:24px;min-height:var(--header-h);padding-inline:var(--pad)}
.brand{display:flex;align-items:baseline;gap:12px;flex-shrink:0;border-radius:8px}
.brand .wordmark{font-size:27px}
.brand-descriptor{font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding-left:12px;border-left:1.5px solid var(--line)}
.motion .site-header .cursor::after{animation:blink 1.05s steps(1) 4 .6s}
.brand:hover .cursor::after{animation:blink 1.05s steps(1) infinite}
.site-menu{display:flex;align-items:center;gap:22px;flex:1}
.site-menu nav{display:flex;gap:4px;margin-inline:auto}
.site-menu nav a{position:relative;padding:10px 12px;font-weight:600;font-size:15px;border-radius:999px;transition:background-color var(--dur-fast)}
.site-menu nav a:hover{background:var(--surface)}
.site-controls{display:flex;align-items:center;gap:8px}
.language-switch{display:flex;padding:3px;border:1.5px solid var(--line);border-radius:999px}
.language-switch button{min-width:40px;min-height:38px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:700 12px/1 var(--font-mono);letter-spacing:.06em}
.language-switch button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
#theme-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;border:1.5px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:700 12px/1 var(--font-mono);letter-spacing:.04em}
#theme-toggle:hover{border-color:var(--edge)}
.theme-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-icon .moon{fill:currentColor;stroke:none}
:root[data-theme="light"] .theme-icon .sun,:root[data-theme="light"] .theme-icon .rays{display:none}
:root[data-theme="dark"] .theme-icon .moon{display:none}
:root[data-theme="dark"] .theme-icon .sun{fill:currentColor}
.nav-cta{min-height:46px;padding:10px 18px;font-size:14px}
.menu-toggle{display:none;align-items:center;gap:10px;margin-left:auto;min-height:46px;padding:0 16px;border:2px solid var(--edge);border-radius:999px;background:var(--bg-elev);font:700 13px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.menu-toggle-icon{position:relative;width:18px;height:12px}
.menu-toggle-icon i{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform var(--dur) var(--ease-out),top var(--dur) var(--ease-out)}
.menu-toggle-icon i:first-child{top:1px}.menu-toggle-icon i:last-child{top:9px}
.menu-open .menu-toggle-icon i:first-child{top:5px;transform:rotate(45deg)}
.menu-open .menu-toggle-icon i:last-child{top:5px;transform:rotate(-45deg)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(16px,3vw,48px);min-height:min(calc(100svh - var(--header-h)),880px);padding:clamp(28px,5vw,64px) var(--pad) clamp(36px,4vw,56px)}
.hero-copy{position:relative;z-index:2;min-width:0}
.hero h1{margin:26px 0 28px;font-size:clamp(40px,5.6vw,92px);line-height:.98;letter-spacing:-.045em}
.hero-line{display:block}
.marker{display:inline-block;margin-top:.12em}
.marker>span{background:var(--accent);color:var(--on-accent);padding:0 .14em .02em;border-radius:.06em;box-shadow:.07em .07em 0 var(--pix);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-lead{max-width:34em;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--text-2)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:34px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:40px;font:500 12px/1.4 var(--font-mono);letter-spacing:.04em;color:var(--text-3)}
.hero-meta li{display:flex;align-items:center;gap:8px}
.hero-meta li::before{content:'';width:7px;height:7px;background:var(--text-3);transform:rotate(45deg)}

.mascot-stage{position:relative;min-width:0;height:clamp(420px,46vw,640px)}
.stage-glow{position:absolute;inset:6% 2% 4%;background:radial-gradient(circle at 46% 56%,var(--stage-a) 0,transparent 46%),radial-gradient(circle at 70% 30%,var(--stage-b) 0,transparent 38%);filter:blur(6px)}
.orbit{position:absolute;border:1.5px solid var(--orbit);border-radius:50%;pointer-events:none}
.orbit-one{width:88%;height:66%;left:6%;top:18%;transform:rotate(-24deg)}
.orbit-two{width:104%;height:36%;left:-2%;top:36%;transform:rotate(30deg);border-style:dashed}
#mascot{position:absolute;inset:0;z-index:2;cursor:pointer;border-radius:30%;outline-offset:-14px}
#mascot canvas{display:block;width:100%;height:100%;touch-action:pan-y;opacity:0;transition:opacity .6s var(--ease-out)}
.pix-ready #mascot canvas{opacity:1}
#mascot:focus-visible{outline:3px dashed var(--focus)}
.stage-label{position:absolute;right:6%;top:3%;font:700 11px/1 var(--font-mono);letter-spacing:.18em;color:var(--text-3);transform:rotate(6deg);pointer-events:none}
.sticker{position:absolute;right:2%;top:18%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;width:112px;height:112px;border:2px solid #17171D;border-radius:50%;background:var(--lime);color:#17171D;box-shadow:4px 4px 0 #17171D;transform:rotate(12deg);pointer-events:none}
.sticker span{font:500 12px/1 var(--font-mono);letter-spacing:.06em}
.sticker b{font:800 22px/1 var(--font-display);font-stretch:85%;letter-spacing:-.03em;margin-top:4px}
.code-chip{position:absolute;z-index:3;padding:7px 11px;border:1.5px solid var(--edge);border-radius:9px;background:var(--bg-elev);font:500 12px/1 var(--font-mono);color:var(--text);box-shadow:3px 3px 0 var(--edge);pointer-events:none;white-space:nowrap}
.chip-a{left:2%;top:30%;transform:rotate(-7deg)}
.chip-b{right:8%;bottom:22%;transform:rotate(5deg)}
.motion .chip-a{animation:float-a 7s ease-in-out infinite alternate}
.motion .chip-b{animation:float-b 8s ease-in-out infinite alternate}
@keyframes float-a{to{transform:rotate(-4deg) translateY(-10px)}}
@keyframes float-b{to{transform:rotate(8deg) translateY(8px)}}
.play{position:absolute;z-index:4;left:6%;bottom:7%;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border:1.5px solid var(--edge);border-radius:999px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:700;font-size:14px;transform:rotate(-5deg);transition:transform var(--dur) var(--ease-out),background-color var(--dur-fast)}
.play>span:first-child{font-size:19px;display:inline-block;transition:transform .5s var(--ease-out)}
.play:hover{transform:rotate(-2deg) scale(1.04);background:var(--accent);color:var(--on-accent)}
.play:hover>span:first-child{transform:rotate(-200deg)}
.stage-note{position:absolute;right:6%;bottom:1%;max-width:60%;text-align:right;font:500 12px/1.4 var(--font-mono);color:var(--text-3);pointer-events:none}
.spark{position:absolute;left:8%;top:9%;width:44px;fill:var(--pix);transform:rotate(15deg);pointer-events:none}
.motion .spark{animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(375deg)}}
.fallback{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.fallback[hidden]{display:none}
.fallback-pix{position:relative;display:flex;gap:16%;align-items:center;justify-content:center;width:min(48%,260px);aspect-ratio:.86;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 35% 30%,#ff8a6f,var(--pix) 55%,#d94a2f);box-shadow:0 30px 40px -20px #0006}
.fallback-pix i{width:18%;aspect-ratio:.8;border-radius:50%;background:radial-gradient(circle at 50% 58%,#1d1d24 0 38%,#fff7e4 40%)}

/* ==========================================================================
   Ticker
   ========================================================================== */
.ticker{position:relative;z-index:3;width:104%;margin:8px -2% 0;overflow:hidden;background:var(--lime);color:#17171D;border-block:2px solid #17171D;transform:rotate(-1.4deg)}
.ticker-track{display:flex;width:max-content}
.motion .ticker-track{animation:marquee 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;align-items:center;gap:30px;padding:18px 30px 18px 0;font:800 clamp(17px,1.6vw,22px)/1 var(--font-display);font-stretch:88%;letter-spacing:-.01em;white-space:nowrap}
.ticker b{font-size:1.3em;color:#17171D}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding:clamp(80px,10vw,150px) var(--pad)}
.section-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:16px;margin-bottom:clamp(28px,4vw,48px);border-bottom:1.5px solid var(--line)}
.section-heading{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:end;gap:24px clamp(24px,5vw,80px);margin-bottom:clamp(36px,5vw,64px)}
.section h2{font-size:clamp(38px,5.2vw,80px)}
h2>span:first-child:has(+ em){display:block}
h2 em{font-style:normal;color:var(--em-color);background:var(--em-bg);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.section-heading>p{max-width:30em;font-size:clamp(16px,1.2vw,18px);color:var(--text-2)}

/* Services */
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.service-card{position:relative;display:flex;flex-direction:column;min-height:310px;padding:28px;border:2px solid var(--card-border);border-radius:var(--radius);background:var(--bg-elev);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.service-card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--card-shadow)}
.service-card.tone-accent,.service-card.tone-violet{--text:#17171D;--text-2:#2A2A31;--text-3:#33333B;--line:#17171D59;--card-shadow:#17171D;color:#17171D;border-color:#17171D}
.service-card.tone-accent{background:var(--lime)}
.service-card.tone-violet{background:var(--violet)}
:root[data-theme="dark"] .service-card.tone-accent:hover,:root[data-theme="dark"] .service-card.tone-violet:hover{box-shadow:8px 8px 0 var(--snow)}
.service-index{position:absolute;top:28px;right:28px;font:700 12px/1 var(--font-mono);color:var(--text-3)}
.service-icon{display:block;margin-bottom:34px;font:800 46px/1 var(--font-display);color:var(--pix-text);transition:transform .5s var(--ease-out)}
.service-icon.code{font-size:36px;line-height:46px}
.tone-accent .service-icon,.tone-violet .service-icon{color:#17171D}
.service-card:hover .service-icon{transform:rotate(-12deg) scale(1.08)}
.service-card h3{margin-bottom:14px;font-size:clamp(23px,1.9vw,28px)}
.service-card p{color:var(--text-2)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:24px}
.tags li{padding:6px 11px;border:1.5px solid var(--line);border-radius:999px;font:500 11px/1.2 var(--font-mono);color:var(--text-2)}

/* Work */
.works{background:var(--surface);border-block:1.5px solid var(--line)}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.5vw,36px)}
.work-card{position:relative;min-width:0}
.work-card:has(.work-open:focus-visible){outline:3px solid var(--focus);outline-offset:8px;border-radius:var(--radius)}
.mock{position:relative;height:clamp(300px,30vw,420px);overflow:hidden;border:2px solid var(--card-border);border-radius:var(--radius);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.work-card:hover .mock{transform:translate(-4px,-6px) rotate(-.6deg);box-shadow:8px 10px 0 var(--card-shadow)}
.concept-badge{position:absolute;top:16px;right:16px;z-index:3;padding:6px 11px;border:1.5px solid #17171D;border-radius:999px;background:var(--lime);color:#17171D;font:700 11px/1 var(--font-mono);letter-spacing:.1em}
.mock-nav{position:relative;z-index:2;display:flex;justify-content:space-between;gap:12px;padding:58px 26px 14px;font-size:14px;font-weight:700;letter-spacing:1px}
.mock-nav span{font-size:8px;align-self:center;text-align:right}
.food{background:var(--food-bg);color:var(--food-text)}
.food-copy{position:relative;z-index:1;padding:20px 26px;font:400 clamp(38px,4vw,58px)/.98 Georgia,serif}
.pizza{position:absolute;right:-35px;bottom:-32px;width:clamp(200px,20vw,270px);aspect-ratio:1;border-radius:50%;padding-top:30px;font-size:110px;text-align:center;transform:rotate(-15deg);transition:transform .9s var(--ease-out);background:radial-gradient(circle at 32% 35%,#ad3421 0 8%,transparent 9%),radial-gradient(circle at 65% 65%,#ad3421 0 9%,transparent 10%),radial-gradient(circle at 70% 25%,#ad3421 0 7%,transparent 8%),radial-gradient(circle at 35% 70%,#ad3421 0 9%,transparent 10%),radial-gradient(circle at 50% 45%,#fbda87 50%,#c78d44 62%,#edbf73 68%,#7e3c19 70%);box-shadow:-12px 20px 30px #37120d55}
.work-card:hover .pizza{transform:rotate(25deg)}
.mock-pill{position:absolute;bottom:24px;left:26px;z-index:2;padding:9px 12px;border:1px solid currentColor;font-size:8px;letter-spacing:1px}
.food .mock-pill{background:color-mix(in srgb,var(--food-bg) 90%,transparent)}
.studio{background:var(--studio-bg);color:var(--studio-text)}
.studio .mock-pill{background:var(--studio-bg)}
.studio-copy{position:relative;z-index:2;padding:20px 26px;font:700 clamp(36px,3.6vw,52px)/1.03 var(--font-display);letter-spacing:-.04em}
.sculpture{position:absolute;right:10px;bottom:-40px;transform:rotate(-24deg);transition:transform .9s var(--ease-out)}
.work-card:hover .sculpture{transform:rotate(-14deg) translateY(-8px)}
.sculpture span{display:block;width:150px;height:130px;margin-top:-36px;border-radius:80px 80px 5px 5px;background:linear-gradient(110deg,#a7a9aa,#f3f3eb 30%,#d3d3cd 65%,#898c92);box-shadow:15px 15px 18px #252b3944}
:root[data-theme="dark"] .sculpture span{background:linear-gradient(110deg,#5b5f70,#c9cbd6 30%,#8f93a6 65%,#3c3f4c);box-shadow:15px 15px 18px #08060b66}
.work-caption{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 2px 0}
.work-caption>div{min-width:0}
.work-caption h3{font-size:clamp(24px,2vw,30px);margin-bottom:6px}
.work-open{padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-align:left}
.work-open::after{content:'';position:absolute;inset:0;z-index:4;border-radius:var(--radius)}
.work-open:focus-visible{outline:none}
.work-caption p{font-size:14px;color:var(--text-2)}
.work-arrow{display:grid;place-items:center;flex-shrink:0;width:52px;height:52px;border:2px solid var(--edge);border-radius:50%;font-size:22px;transition:transform var(--dur) var(--ease-out),background-color var(--dur-fast),color var(--dur-fast)}
.work-card:hover .work-arrow{transform:rotate(45deg);background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
.work-next{grid-column:1/-1;display:flex;align-items:center;gap:clamp(18px,3vw,36px);padding:clamp(22px,3vw,34px) clamp(22px,3vw,40px);border:2px dashed var(--card-border);border-radius:var(--radius);transition:background-color var(--dur),border-color var(--dur)}
.work-next:hover{background:var(--bg-elev);border-style:solid}
.work-next-cursor{font:800 clamp(56px,6vw,88px)/.6 var(--font-display);color:var(--pix-text)}
.motion .work-next:hover .work-next-cursor{animation:blink 1.05s steps(1) infinite}
.work-next-copy{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.work-next-copy strong{font:800 clamp(22px,2.2vw,32px)/1.1 var(--font-display);font-stretch:88%;letter-spacing:-.03em}
.work-next-copy span{color:var(--text-2)}

/* About */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.about-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(380px,38vw,520px);overflow:hidden;border:2px solid #17171D;border-radius:48% 48% var(--radius) var(--radius)/34% 34% var(--radius) var(--radius);background:var(--violet);color:#17171D}
:root[data-theme="dark"] .about-art{background:linear-gradient(150deg,#A99BFF,#7563d9)}
.brace{font:800 clamp(190px,21vw,300px)/1 var(--font-display);font-stretch:80%;text-shadow:7px 7px 0 #17171D;margin-top:-.08em}
.brace-l{color:var(--pix);transform:rotate(-10deg)}
.brace-r{color:var(--lime);transform:rotate(10deg)}
.about-cursor{align-self:center;width:.9em;margin:0 .1em;padding-top:.5em;font:800 clamp(80px,9vw,130px)/1 var(--font-display);color:#17171D}
.motion .about-art.is-in .about-cursor{animation:blink 1.05s steps(1) 6 .8s}
.dev-tag{position:absolute;padding:7px 12px;border:1.5px solid #17171D;border-radius:9px;background:#FBF9F4;font:700 12px/1 var(--font-mono);box-shadow:3px 3px 0 #17171D}
.dev-a{left:9%;top:20%;transform:rotate(-8deg)}
.dev-b{right:9%;top:30%;transform:rotate(7deg)}
.about-art-label{position:absolute;left:26px;bottom:24px;font:700 11px/1.7 var(--font-mono);letter-spacing:.12em}
.about-copy h2{margin:24px 0 28px}
.about-copy>p{max-width:34em;margin-bottom:18px;font-size:17px;color:var(--text-2)}
.why{max-width:34em;margin-top:30px;padding:20px 22px;border:2px dashed var(--card-border);border-radius:14px;background:var(--bg-elev)}
.why strong{display:block;margin-bottom:6px;font:800 21px/1.2 var(--font-display);font-stretch:88%;letter-spacing:-.02em}
.why p{color:var(--text-2)}
.values{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--edge)}
.values li{padding:26px 22px 8px 0}
.values li+li{padding-left:22px;border-left:1.5px solid var(--line)}
.values b{display:block;margin-bottom:22px;font:700 12px/1 var(--font-mono);color:var(--accent-text)}
.values h3{margin-bottom:10px;font-size:20px;letter-spacing:-.02em;line-height:1.15}
.values p{font-size:15px;color:var(--text-2)}

/* Process */
.process{padding-top:clamp(40px,5vw,80px)}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;counter-reset:step}
.steps li{position:relative;padding-top:34px;border-top:3px solid var(--edge)}
.steps li::before{content:'';position:absolute;top:-10px;left:0;width:17px;height:17px;border:2.5px solid var(--edge);border-radius:50%;background:var(--accent);transition:transform var(--dur) var(--ease-out)}
.steps li:hover::before{transform:scale(1.3)}
.steps b{display:block;margin-bottom:16px;font:800 60px/.9 var(--font-display);font-stretch:85%;color:transparent;-webkit-text-stroke:1.5px var(--text);transition:color var(--dur)}
.steps li:hover b{color:var(--accent);-webkit-text-stroke-color:var(--edge)}
.step-label{display:block;margin-bottom:10px;font:700 11px/1.3 var(--font-mono);letter-spacing:.1em;color:var(--accent-text)}
.steps h3{margin-bottom:12px;font-size:23px;letter-spacing:-.025em}
.steps p{font-size:15px;color:var(--text-2)}

/* Contact */
.contact{padding-top:clamp(40px,5vw,80px)}
.contact-panel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);padding:clamp(28px,5vw,72px);border:2px solid #17171D;border-radius:var(--radius-lg);background:var(--lime);box-shadow:10px 10px 0 var(--pix)}
.contact-intro{--text:#17171D;--text-2:#2C3311;--text-3:#3A4119;--line:#17171D4d;--edge:#17171D;--focus:#17171D;color:#17171D}
.contact h2{margin:22px 0 26px;font-size:clamp(50px,7.2vw,112px);line-height:.92}
.contact h2 em{display:inline-block;margin-top:.06em;padding:0 .12em .04em;border-radius:.06em;background:#17171D;color:var(--lime);transform:rotate(-2deg)}
.contact-intro>p{max-width:30em;font-size:17px;color:var(--text-2)}
.price{margin-top:34px;padding-top:22px;border-top:2px solid #17171D}
.price>span{font:700 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.price strong{display:block;margin:10px 0 8px;font:800 clamp(30px,3vw,42px)/1 var(--font-display);font-stretch:88%;letter-spacing:-.03em}
.price small{display:block;max-width:34em;font-size:14px;color:var(--text-2)}
.channels{margin-top:28px}
.channels-title{display:block;margin-bottom:8px;font:700 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.channels ul{display:grid;gap:8px}
.channels li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.channels li span{min-width:80px;font:500 13px/1 var(--font-mono);color:var(--text-3)}
.channels li a{font-weight:700;font-size:18px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.channels li a:hover{text-decoration-thickness:4px}
#contact-pending{max-width:32em;font-size:15px;color:var(--text-2)}
#contact-pending[hidden],#contact-channels[hidden]{display:none}
form{display:flex;flex-direction:column;align-self:start;padding:clamp(22px,3vw,36px);border:2px solid #17171D;border-radius:22px;background:var(--bg-elev);color:var(--text)}
form h3{margin-bottom:6px;font-size:clamp(26px,2.4vw,34px)}
label{margin:20px 0 8px;font-weight:600;font-size:15px}
input,textarea,select{width:100%;min-height:52px;padding:13px 16px;border:2px solid var(--card-border);border-radius:12px;background:var(--bg);color:var(--text);font-size:16px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
:root[data-theme="light"] input,:root[data-theme="light"] textarea,:root[data-theme="light"] select{border-color:#17171D80}
input:hover,textarea:hover,select:hover{border-color:var(--edge)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 35%,transparent)}
select{appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 23px) 52%,calc(100% - 17px) 52%;background-size:6px 6px;background-repeat:no-repeat}
select option{background:var(--bg);color:var(--text)}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:1}
.field-error{min-height:1.5em;margin-top:6px;font-size:14px;font-weight:600;color:var(--error)}
[aria-invalid="true"]{border-color:var(--error)!important}
form .button{width:100%;margin-top:10px}
.form-note{margin-top:14px;font-size:13px;line-height:1.55;color:var(--text-3)}
#form-status{min-height:1.5em;margin-top:8px;font-size:14px;font-weight:700;color:var(--text-2)}
#form-status.is-error{color:var(--error)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{padding:clamp(48px,6vw,90px) var(--pad) 28px;border-top:1.5px solid var(--line)}
.footer-mark{display:block;width:fit-content;max-width:100%;margin-bottom:clamp(24px,3vw,40px);border-radius:12px}
.footer-mark .wordmark{display:block;font-size:clamp(52px,12.5vw,200px);line-height:.9}
.footer-mark:hover .cursor::after{animation:blink 1.05s steps(1) infinite}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.footer-tagline{font:800 clamp(22px,2.2vw,30px)/1.1 var(--font-display);font-stretch:88%;letter-spacing:-.025em}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 6px}
.site-footer nav a{padding:8px 10px;font-weight:600;border-radius:999px}
.site-footer nav a:hover{background:var(--surface)}
.footer-legal{margin-top:36px;padding-top:20px;border-top:1.5px solid var(--line);font:500 12px/1.5 var(--font-mono);color:var(--text-3)}
.footer-legal a{padding:6px 0}
.footer-legal a:hover{color:var(--text)}

/* ==========================================================================
   Dialog
   ========================================================================== */
dialog{width:min(620px,calc(100vw - 32px));max-height:min(90dvh,760px);overflow:auto;padding:clamp(28px,4vw,46px);border:2px solid var(--edge);border-radius:24px;background:var(--bg);color:var(--text);box-shadow:10px 10px 0 var(--accent)}
dialog::backdrop{background:var(--overlay);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.motion dialog[open]{animation:pop .38s var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}}
dialog h2{margin:22px 0 16px;font-size:clamp(34px,4vw,48px)}
dialog p{font-size:17px;color:var(--text-2)}
#demo-extra{margin:24px 0 30px;border-top:1.5px solid var(--line)}
#demo-extra li{display:flex;gap:12px;padding:12px 0;border-bottom:1.5px solid var(--line);font-weight:600}
#demo-extra li::before{content:'↗';color:var(--pix-text)}
.close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:46px;height:46px;border:2px solid var(--edge);border-radius:50%;background:transparent;font-size:26px;line-height:1;transition:transform var(--dur) var(--ease-out),background-color var(--dur-fast)}
.close:hover{transform:rotate(90deg);background:var(--accent);color:var(--on-accent)}

/* ==========================================================================
   Scroll reveal — content stays visible without JS or with reduced motion.
   ========================================================================== */
.motion.ui-ready [data-reveal]:not(.is-in){opacity:0;transform:translateY(26px)}
.motion [data-reveal].is-in{transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out),box-shadow var(--dur) var(--ease-out);transition-delay:var(--d,0ms)}
.motion [data-reveal].is-in:hover{transition-delay:0ms}
[data-reveal]:nth-child(2){--d:70ms}[data-reveal]:nth-child(3){--d:140ms}[data-reveal]:nth-child(4){--d:210ms}[data-reveal]:nth-child(5){--d:280ms}[data-reveal]:nth-child(6){--d:350ms}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .site-menu{gap:14px}
  .site-menu nav a{padding-inline:9px;font-size:14px}
  .brand-descriptor{display:none}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .values{grid-template-columns:repeat(3,minmax(0,1fr))}
  .values li:nth-child(4){padding-left:0;border-left:0}
  .steps{grid-template-columns:1fr;gap:0}
  .steps li{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.2fr);column-gap:32px;padding:28px 0 28px 44px;border-top:0;border-left:3px solid var(--edge)}
  .steps li::before{top:30px;left:-10px}
  .steps b{grid-row:span 3;font-size:52px;margin:0}
  .step-label{grid-column:2}
  .steps h3{grid-column:2}
  .steps p{grid-column:3;grid-row:1/span 2}
}
@media (max-width:1000px){
  .menu-toggle{display:inline-flex}
  .js .site-menu{display:none}
  .js .menu-open .site-menu{display:flex}
  .site-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:22px;max-height:calc(100dvh - var(--header-h));overflow:auto;padding:16px var(--pad) 28px;background:var(--bg);border-bottom:2px solid var(--edge);box-shadow:0 24px 40px -24px #0005}
  html:not(.js) .header-inner{flex-wrap:wrap}
  html:not(.js) .site-menu{position:static;flex-basis:100%;border:0;box-shadow:none;padding-inline:0}
  .motion .menu-open .site-menu{animation:menu-in .32s var(--ease-out)}
  @keyframes menu-in{from{opacity:0;transform:translateY(-10px)}}
  .site-menu nav{flex-direction:column;gap:0;margin:0}
  .site-menu nav a{padding:14px 2px;border-radius:0;border-bottom:1.5px solid var(--line);font:800 30px/1.1 var(--font-display);font-stretch:88%;letter-spacing:-.03em}
  .site-menu nav a:hover{background:none;color:var(--accent-text)}
  .site-controls{justify-content:space-between}
  .nav-cta{min-height:54px;font-size:16px}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:28px}
  .hero h1{font-size:clamp(40px,8.4vw,76px)}
  .mascot-stage{height:clamp(380px,62vw,520px);margin-top:4px}
  .section-heading{grid-template-columns:1fr;align-items:start}
  .about{grid-template-columns:1fr}
  .about-art{min-height:380px}
  .contact-panel{grid-template-columns:1fr;box-shadow:7px 7px 0 var(--pix)}
}
@media (max-width:700px){
  :root{--header-h:66px}
  .brand .wordmark{font-size:24px}
  .menu-toggle-text{display:none}
  .menu-toggle{width:48px;padding:0;justify-content:center}
  .hero h1{margin:20px 0 22px;font-size:clamp(38px,11vw,60px)}
  .hero-lead{font-size:17px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .button{width:100%}
  .hero-meta{margin-top:28px;gap:8px 16px;font-size:11px}
  .mascot-stage{height:clamp(340px,96vw,440px)}
  .sticker{width:88px;height:88px;top:10%;right:0}
  .sticker b{font-size:18px}
  .sticker span{font-size:10px}
  .chip-a{top:auto;bottom:30%;left:0}
  .chip-b{display:none}
  .stage-label{display:none}
  .play{left:2%;bottom:4%}
  .stage-note{display:none}
  .spark{width:34px;left:4%;top:4%}
  .ticker-group{padding-block:14px;gap:22px;padding-right:22px}
  .section-top{flex-direction:column;align-items:flex-start;gap:6px}
  .micro{text-align:left}
  .service-grid{grid-template-columns:1fr;gap:16px}
  .service-card{min-height:0;padding:24px}
  .service-index{top:24px;right:24px}
  .service-icon{margin-bottom:22px;font-size:40px}
  .work-grid{grid-template-columns:1fr}
  .work-next{flex-direction:column;align-items:flex-start}
  .work-next .button{width:100%}
  .values{grid-template-columns:1fr}
  .values li,.values li+li{padding:22px 0;border-left:0;border-bottom:1.5px solid var(--line)}
  .values li{display:grid;grid-template-columns:40px 1fr;column-gap:8px}
  .values b{grid-row:span 2;margin:4px 0 0}
  .steps li{grid-template-columns:1fr;padding:24px 0 24px 32px}
  .steps li::before{top:28px}
  .steps b{grid-row:auto;font-size:44px;margin-bottom:10px}
  .step-label,.steps h3,.steps p{grid-column:1;grid-row:auto}
  .brace{font-size:clamp(150px,44vw,220px)}
  .about-cursor{font-size:clamp(70px,20vw,100px)}
  .dev-a{left:6%;top:12%}.dev-b{right:6%;top:20%}
  .about-art-label{left:20px;bottom:18px;font-size:10px}
  .contact{padding-inline:12px}
  .contact-panel{padding:28px 20px;border-radius:24px;box-shadow:5px 5px 0 var(--pix)}
  .contact-intro{padding-inline:4px}
  form{padding:22px 18px}
  .footer-row{flex-direction:column;align-items:flex-start}
  .site-footer nav{margin-left:-10px}
  .footer-legal{flex-direction:column-reverse;gap:8px}
}
@media (max-width:380px){
  .brand .wordmark{font-size:22px}
  .hero h1{font-size:36px}
  .button{padding-inline:18px;font-size:14px}
  .site-controls{flex-wrap:wrap;gap:10px}
  .contact h2{font-size:46px}
}
@media (min-width:1700px){
  .hero{min-height:min(calc(100svh - var(--header-h)),940px)}
}

/* ==========================================================================
   Reduced motion: everything works, nothing travels.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .button-primary:hover,.service-card:hover,.work-card:hover .mock,.play:hover,.close:hover{transform:none}
  .ticker-track{transform:none}
}