:root{--bg:#F3F7FC;--ink:#17283D;--muted:#52657A;--accent:#155EEF;--secondary:#1676E8;--highlight:#75BFFF;--soft:#E3F0FF;--card:#FFFFFF;--line:#C7D8ED;--onaccent:#FFFFFF;
--d:'Bricolage Grotesque','Trebuchet MS',sans-serif;--b:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E1726;--ink:#F3F7FC;--muted:#B0C0D5;--accent:#62A9FF;--secondary:#55A8FF;--highlight:#9BD3FF;--soft:#20364F;--card:#17263A;--line:#34445D;--onaccent:#0E1726}}
:root[data-theme="dark"]{--bg:#0E1726;--ink:#F3F7FC;--muted:#B0C0D5;--accent:#62A9FF;--secondary:#55A8FF;--highlight:#9BD3FF;--soft:#20364F;--card:#17263A;--line:#34445D;--onaccent:#0E1726}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.05rem/1.6 var(--b)}
h1,h2,h3{font-family:var(--d);line-height:1.05;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--secondary);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 0;animation:rise .7s both}
.logo{display:inline-flex;align-items:center;gap:10px;font:800 1.25rem var(--d);text-decoration:none;white-space:nowrap}
.logo img{width:48px;height:48px;display:block;border-radius:14px;box-shadow:0 6px 18px #17283D26;transition:transform .25s ease}
.logo:hover img{transform:rotate(-5deg) scale(1.05)}
nav{display:flex;gap:8px;font-weight:600;font-size:.95rem}
nav a{text-decoration:none;color:var(--muted);padding:10px 12px;border-radius:10px;transition:background .2s ease,color .2s ease}
nav a:hover{color:var(--ink);background:var(--card)}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:clamp(34px,6vw,82px);align-items:center;padding:72px 0 104px}
.hero-copy{animation:rise .8s .08s both}
h1{font-size:clamp(2.6rem,6.2vw,4.9rem);font-weight:800;letter-spacing:-.03em}
.hero p{max-width:34em;color:var(--muted);font-size:1.15rem;margin:22px 0 30px}
.btn{display:inline-block;background:var(--accent);color:var(--onaccent);font:600 1rem var(--b);padding:14px 26px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;min-height:48px;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line);margin-left:8px}
.btn:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 25%,transparent)}
.ghostcard{position:relative;background:var(--card);border:2px solid var(--line);border-radius:26px 26px 26px 6px;padding:26px 24px;box-shadow:12px 12px 0 var(--secondary);animation:float 6s ease-in-out infinite, rise .8s .18s both}
.ghostcard::before{content:"";position:absolute;top:-26px;right:26px;width:52px;height:52px;background:var(--highlight);border-radius:26px 26px 4px 4px;-webkit-mask:radial-gradient(circle at 35% 45%,#0000 5px,#000 6px);mask:radial-gradient(circle at 35% 45%,#0000 5px,#000 6px)}
pre{margin:0;font:500 .86rem/1.7 ui-monospace,'SF Mono',Menlo,Consolas,monospace;overflow-x:auto;white-space:pre;color:var(--ink)}
.k{color:var(--accent)}.c{color:var(--muted)}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.ghostcard,.hero-copy,header{animation:none}.logo img,.btn{transition:none}html{scroll-behavior:auto}}
section{padding:72px 0;border-top:2px solid var(--line)}
h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.lead{color:var(--muted);max-width:36em;margin:0 0 40px}
.services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.services li{padding:20px 0;border-bottom:1px solid var(--line)}
.services h3{font-size:1.3rem;margin-bottom:4px}
.services p{margin:0;color:var(--muted)}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.work{background:var(--card);border:2px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.work:hover{transform:translateY(-6px);box-shadow:0 14px 28px #17283D1A}
.shot{aspect-ratio:16/10;background:linear-gradient(135deg,var(--accent),var(--secondary) 72%,var(--highlight));display:grid;place-items:center;font:800 1.1rem var(--d);color:var(--onaccent)}
.work div.t{padding:16px 18px}
.work h3{font-size:1.15rem}
.work p{margin:4px 0 0;color:var(--muted);font-size:.92rem}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.offer-heading{font-size:1.45rem;margin:30px 0 14px}
.pack{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:28px 24px;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.pack:hover{transform:translateY(-5px);box-shadow:0 14px 28px #17283D1A}
.pack.main{border-color:var(--accent);box-shadow:8px 8px 0 var(--accent)}
.price{font:800 2.2rem var(--d);margin:10px 0 14px}
.price small{font:400 .9rem var(--b);color:var(--muted)}
.pack ul{margin:0 0 22px;padding-left:20px;color:var(--muted);flex:1}
.pack li{margin:6px 0}
.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;list-style:none;padding:32px 0 0;margin:0;counter-reset:s}
.steps::before{content:"";position:absolute;top:12px;left:0;width:100%;height:4px;background:var(--secondary);transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
#process.is-visible .steps::before{transform:scaleX(1)}
.steps li{counter-increment:s;position:relative;padding-top:0}
.steps li::before{content:counter(s);position:relative;z-index:1;display:block;width:36px;padding-right:8px;background:var(--bg);font:800 1.6rem/1 var(--d);color:var(--accent)}
.steps b{display:block;font-family:var(--d);font-size:1.1rem}
.steps span{color:var(--muted);font-size:.93rem}
form{display:grid;gap:14px;max-width:560px}
label{font-weight:600;display:grid;gap:6px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}
textarea{min-height:110px;resize:vertical}
.msg{min-height:1.5em;color:var(--accent);font-weight:600;margin:0}
.quote-submit:disabled{cursor:wait;opacity:.86}
.quote-submit.is-sending::before{content:"";display:inline-block;width:15px;height:15px;margin-right:10px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-3px;animation:quote-spin .7s linear infinite}
@keyframes quote-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.quote-submit.is-sending::before{animation:none;border-right-color:currentColor}}
footer{padding:36px 0 48px;color:var(--muted);font-size:.9rem;border-top:2px solid var(--line)}
@media (max-width:820px){
.hero,.services,.works,.packs{grid-template-columns:1fr}
.wrap{padding:0 20px}
header{align-items:flex-start;flex-direction:column;padding:14px 0}
nav{width:100%;justify-content:space-between;gap:2px;overflow-x:auto}
nav a{padding:9px 8px;font-size:.9rem;white-space:nowrap}
.hero{padding:42px 0 72px;gap:42px}
.steps{grid-template-columns:1fr 1fr}
.btn.ghost{margin:10px 0 0}
}
@media (max-width:480px){
body.public-site header{position:relative;top:auto}
body{font-size:1rem}
.logo{font-size:1.1rem}
.logo img{width:42px;height:42px}
h1{font-size:clamp(2.45rem,13vw,3.7rem)}
.hero p{font-size:1.05rem}
.hero .btn{display:block;width:100%;text-align:center}
.hero .btn.ghost{margin:10px 0 0}
section{padding:56px 0}
.steps{grid-template-columns:1fr;padding:8px 0 0 44px;gap:24px}
.steps::before{top:8px;left:14px;width:4px;height:calc(100% - 8px);transform:scaleY(0);transform-origin:top center}
#process.is-visible .steps::before{transform:scaleY(1)}
.steps li::before{margin-left:-44px}
.ghostcard{padding:20px 16px;box-shadow:7px 7px 0 var(--secondary)}
pre{font-size:.72rem}
}
@media (max-width:480px){
body.public-site{--bg:#0E1726;--ink:#F3F7FC;--muted:#B0C0D5;--accent:#62A9FF;--secondary:#55A8FF;--highlight:#9BD3FF;--soft:#20364F;--card:#17263A;--line:#34445D;--onaccent:#0E1726}
}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.flash{padding:12px 16px;border-radius:12px;background:var(--soft);color:var(--ink);font-weight:600;margin:0 0 16px}
.flash.err{background:#FFD6D6}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot{overflow:hidden}
.stat{color:var(--secondary);font-weight:600}

/* Public page motion layer. The base layout remains fully visible without JS. */
body{overflow-x:hidden}
.wrap{position:relative;z-index:1}
.particles{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.particle{position:absolute;width:var(--size);height:var(--size);left:var(--left);top:var(--top);border-radius:50%;background:var(--highlight);opacity:0;filter:blur(var(--blur));animation:drift var(--duration) var(--delay) ease-in-out infinite}
@keyframes drift{0%,100%{opacity:0;transform:translate3d(0,20px,0) scale(.7)}35%,65%{opacity:var(--alpha);transform:translate3d(var(--move-x),var(--move-y),0) scale(1)} }

header{position:sticky;top:0;z-index:5;transition:transform .25s ease,opacity .25s ease;background:transparent}
header.is-scrolled{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);transform:scale(.98);transform-origin:top center}
header.is-scrolled .logo img{width:40px;height:40px}
header.is-scrolled nav a{padding-top:8px;padding-bottom:8px}
nav a.is-active{color:var(--ink);background:var(--soft)}

.title-word{display:inline-block;opacity:0;transform:translate3d(0,12px,0);filter:blur(8px);animation:materialize .65s var(--delay) cubic-bezier(.2,.8,.2,1) forwards}
@keyframes materialize{to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
.verse-code .code-line{display:block}
html.js .verse-code .code-line{opacity:0;transform:translate3d(-8px,0,0)}
html.js .verse-code.is-typing .code-line{animation:write-line .42s var(--delay) ease-out forwards}
.verse-code .code-gap{height:1.7em}
.verse-code::after{content:"_";display:inline-block;color:var(--highlight);animation:cursor-blink 1s steps(1) infinite}
@keyframes write-line{to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes cursor-blink{50%{opacity:0}}

.ghostcard::before{transform:translate3d(var(--ghost-x,0px),var(--ghost-y,0px),0);animation:ghost-float 4.8s ease-in-out infinite;transition:transform .2s ease-out}
@keyframes ghost-float{0%,100%{transform:translate3d(var(--ghost-x,0px),var(--ghost-y,0px),0)}50%{transform:translate3d(var(--ghost-x,0px),calc(var(--ghost-y,0px) - 7px),0)}}

html.js .reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1);transition-delay:var(--delay,0ms)}
html.js .reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}
.services li,.work,.pack,.steps li{--delay:0ms}
.services li.reveal,.work.reveal,.pack.reveal,.steps li.reveal{transition-delay:var(--delay)}
.shot img{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.work:hover .shot img{transform:scale(1.06)}
.work.is-tilting{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-3px);transition:none}
.pack.main{position:relative;isolation:isolate}
.pack.main::after{content:"";position:absolute;inset:-3px;border:2px solid var(--accent);border-radius:20px;opacity:.25;pointer-events:none;z-index:-1;animation:recommended-glow 2.8s ease-in-out infinite}
@keyframes recommended-glow{50%{opacity:.8}}
.flash.is-confirmed{animation:confirm-pop .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes confirm-pop{0%{opacity:0;transform:translate3d(0,10px,0)}60%{transform:translate3d(0,-3px,0)}100%{opacity:1;transform:translate3d(0,0,0)}}

@media (hover:none),(pointer:coarse){
	.work:hover,.pack:hover{transform:none;box-shadow:none}
	.work:hover .shot img{transform:none}
}
@media (prefers-reduced-motion:reduce){
	.particle,.pack.main::after,.ghostcard::before{animation:none}
	.title-word{opacity:1;transform:none;filter:none;animation:none}
	html.js .verse-code .code-line,html.js .reveal{opacity:1;transform:none;transition:none}
	html.js .verse-code.is-typing .code-line{animation:none}
	.verse-code::after{animation:none}
	header,.btn,.logo img{transition:none}
}

/* Process timeline: one rail, five clear milestones. */
.process-heading{max-width:600px}
.eyebrow{margin:0 0 12px;color:var(--secondary);font:600 .78rem/1 var(--b);letter-spacing:.12em;text-transform:uppercase}
.steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:34px 0 0;margin:18px 0 0;list-style:none;counter-reset:none}
.steps::before{content:"";position:absolute;top:48px;left:8%;right:8%;height:2px;background:var(--line);transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
#process.is-visible .steps::before{transform:scaleX(1)}
.steps li{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:0;border:0;counter-increment:none}
.steps li::before{content:none}
.steps .step-index{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;margin:0 auto;color:var(--onaccent);background:var(--accent);border:6px solid var(--bg);border-radius:50%;font:800 .68rem/1 var(--d);box-shadow:0 0 0 2px var(--accent)}
.step-card{min-height:132px;padding:18px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.step-card:hover{transform:translateY(-5px);border-color:var(--secondary);box-shadow:0 14px 26px #17283D1A}
.steps b{display:block;margin-bottom:8px;font:800 1.1rem/1 var(--d)}
.steps span:not(.step-index){display:block;color:var(--muted);font-size:.92rem;line-height:1.5}
@media (max-width:820px){
	.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
	.steps::before{top:48px;left:25%;right:25%;height:calc(50% + 14px);width:2px;transform:scaleY(0);transform-origin:top center}
	#process.is-visible .steps::before{transform:scaleY(1)}
	.step-card{min-height:116px}
}
@media (max-width:480px){
	.steps{grid-template-columns:1fr;gap:14px;padding:12px 0 0 44px;margin-top:12px}
	.steps::before{top:29px;bottom:29px;left:60px;right:auto;width:2px;height:auto;transform:scaleY(0);transform-origin:top center}
	#process.is-visible .steps::before{transform:scaleY(1)}
	.steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
	.step-index{grid-column:1;margin:0}
	.step-card{grid-column:2;min-height:0;padding:16px}
}
@media (prefers-reduced-motion:reduce){
	.steps::before,.step-card{transition:none}
}