:root{--bg:#0b0b0c;--card:#141415;--card2:#1c1c1e;--line:#2b2b2e;--text:#f5f5f2;--muted:#a0a09a;--accent:#f7a823;--on:#17120a;--font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--r:22px;--r-s:14px}
[data-theme=light]{--bg:#f6f3ec;--card:#fff;--card2:#efe9db;--line:#ddd5c4;--text:#17140f;--muted:#6a655a;--accent:#f09a0c;--on:#17140f}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{background:var(--bg);color:var(--text);font:400 1.02rem/1.65 var(--font);overflow-x:hidden}
a{color:inherit}ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.muted{color:var(--muted)}
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.03em;font-weight:800}
h2{font-size:clamp(1.9rem,4.2vw,3rem);max-width:20ch}
em{font-style:normal;color:var(--accent)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:.82rem;font-weight:600;margin-bottom:18px}
.tag i,.chip i{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;background:var(--accent);color:var(--on);font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;font-size:1rem;transition:transform .2s,filter .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn.sm{padding:10px 20px;font-size:.92rem}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}.btn.ghost:hover{border-color:var(--accent)}
.mark{width:26px;height:26px;border-radius:50%;background:var(--accent);position:relative;flex:none}
.mark::after{content:"";position:absolute;inset:-4px -8px;border:2px solid var(--text);border-radius:50%;transform:rotate(-24deg) scaleY(.36);opacity:.85}
.mark.big{width:90px;height:90px}

/* header */
.hdr{position:fixed;top:16px;left:0;right:0;z-index:50}
.hdr-in{display:flex;align-items:center;gap:18px;padding:9px 10px 9px 20px;border-radius:999px;background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.logo{display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:1.2rem;text-decoration:none;letter-spacing:-.02em}
.nav{display:flex;gap:4px;margin-inline:auto;padding:4px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.nav a{text-decoration:none;color:var(--muted);padding:8px 18px;border-radius:999px;font-weight:600;font-size:.92rem;transition:.2s}
.nav a:hover{color:var(--text)}.nav a.on{background:var(--accent);color:var(--on)}
.hdr-act{display:flex;align-items:center;gap:10px}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:1.05rem;cursor:pointer}
.burger{display:none;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:currentColor;border-radius:2px;transition:.25s}
.burger span:first-child{top:16px}.burger span:last-child{top:24px}
.burger[aria-expanded=true] span:first-child{top:20px;rotate:45deg}.burger[aria-expanded=true] span:last-child{top:20px;rotate:-45deg}
@media(max-width:900px){.burger{display:block}.hdr-act .btn{display:none}.hdr-in{justify-content:space-between}
 .nav{position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;border-radius:var(--r);padding:10px;display:none}.nav.open{display:flex}.nav a{padding:14px 18px}}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:150px 0 70px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:.86rem;font-weight:600;margin-bottom:24px}
.chip i{background:#35d07f;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 #35d07f88}80%,100%{box-shadow:0 0 0 10px transparent}}
.hero h1{font-size:clamp(3rem,8vw,6.2rem);line-height:.98}
.role{font-size:1.2rem;font-weight:600;margin-top:16px}
.lead{color:var(--muted);font-size:1.12rem;max-width:50ch;margin:14px 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.follow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px;color:var(--muted);font-weight:600;font-size:.92rem}
.social{display:flex;gap:10px;flex-wrap:wrap}
.social a{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);text-decoration:none;font-size:.85rem;font-weight:600;color:var(--text)}.social a:hover{border-color:var(--accent)}
.stage{position:relative;aspect-ratio:4/5;border-radius:var(--r);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent) 45%,color-mix(in srgb,var(--accent) 55%,#000));background-size:cover;background-position:center top;overflow:hidden;max-height:640px;justify-self:end;width:min(100%,500px)}
.stage.has-photo .ph-mark{display:none}
.ph-mark{position:absolute;inset:0;display:grid;place-items:center;color:var(--on)}.ph-mark .mark{background:var(--on)}.ph-mark .mark::after{border-color:var(--on)}
.fl{position:absolute;background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--r-s);padding:14px 18px;color:var(--text)}
.fl.q{top:20px;right:20px;max-width:230px;font-size:.9rem;font-weight:500;line-height:1.45}
.fl.rev{left:20px;bottom:20px;display:flex;flex-direction:column}.fl.rev b{font-size:1.35rem;letter-spacing:-.02em}.fl.rev span{color:var(--muted);font-size:.85rem}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:120px}.stage{justify-self:center}}

.marquee{border-block:1px solid var(--line);background:var(--card);overflow:hidden}
.marquee>div{display:flex;gap:56px;width:max-content;padding:20px 0;animation:mq 34s linear infinite}
.marquee span{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap;display:inline-flex;align-items:center;gap:56px}
.marquee span::after{content:"✦";color:var(--accent);font-size:1.1rem}
@keyframes mq{to{transform:translateX(-50%)}}

.block{padding:84px 0}
.sec-row{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.block>h2{margin-bottom:34px}

.acc li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden;transition:background .3s,color .3s}
.acc button{width:100%;display:flex;align-items:center;gap:22px;padding:22px 28px;background:none;border:0;color:inherit;font:700 1.4rem var(--font);letter-spacing:-.02em;text-align:left;cursor:pointer}
.acc .n{font-size:.85rem;font-weight:700;opacity:.55;min-width:28px}
.acc .arr{margin-left:auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:1rem;transition:rotate .3s}
.acc .bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s}
.acc .bd>div{overflow:hidden;padding:0 28px 0 78px;font-size:1.02rem}
.acc li.open{background:var(--accent);color:var(--on);border-color:transparent}
.acc li.open .bd{grid-template-rows:1fr}.acc li.open .bd>div{padding-bottom:26px}
.acc li.open .arr{rotate:-45deg;border-color:var(--on)}
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.tool{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;transition:border-color .2s,transform .2s}
.tool:hover{border-color:var(--accent);transform:translateY(-3px)}
.ti{width:54px;height:54px;border-radius:var(--r-s);display:grid;place-items:center;background:var(--card2);color:var(--accent);font-weight:800;font-size:1.4rem;flex:none}
.tool b{display:block;font-size:1.1rem}.tool span{color:var(--muted);font-size:.9rem}

.pf-list{display:grid;gap:22px}
.pf{display:grid;grid-template-columns:1.25fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;width:100%;text-align:left;color:inherit;font:inherit;padding:0;transition:border-color .25s}
.pf:hover{border-color:var(--accent)}.pf:nth-child(even) .pf-img{order:2}
.pf-img{aspect-ratio:16/11;background-size:cover;background-position:center;display:grid;place-items:end start;padding:20px;font:800 3rem var(--font);color:rgba(255,255,255,.9);transition:transform .5s}
.pf-box{overflow:hidden}.pf:hover .pf-img{transform:scale(1.04)}
.pf-info{padding:34px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.pf-info h3{font-size:1.8rem}.pf-info p{color:var(--muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pf-info .go{margin-top:8px;align-self:flex-start;padding:10px 20px;border-radius:999px;background:var(--accent);color:var(--on);font-weight:700;font-size:.92rem}
@media(max-width:800px){.pf{grid-template-columns:1fr}.pf:nth-child(even) .pf-img{order:0}.pf-info{padding:24px}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;text-align:left;color:inherit;font:inherit;padding:0;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-5px);border-color:var(--accent)}
.thumb{aspect-ratio:4/3;background-size:cover;background-position:center;display:grid;place-items:end start;padding:16px;font:800 2.6rem var(--font);color:rgba(255,255,255,.9)}
.card-body{padding:16px 20px 20px}.card-body h3{font-size:1.2rem;margin-bottom:4px}
.meta{color:var(--muted);font-size:.9rem}
.empty{color:var(--muted);grid-column:1/-1;padding:34px;text-align:center}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:600 .9rem var(--font);cursor:pointer}
.chips button[aria-pressed=true]{background:var(--accent);color:var(--on);border-color:transparent}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,4vw,44px)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:800px){.two{grid-template-columns:1fr}}
.panel h3{font-size:1.5rem;margin-bottom:18px}
.it{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.it b{display:block;font-size:1.05rem}.it span{color:var(--muted);font-size:.92rem}.it em{font-size:.88rem;font-weight:700;white-space:nowrap;padding-top:3px}
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}
.about-ph{aspect-ratio:1;border-radius:var(--r);background:var(--accent) center/cover;display:grid;place-items:center}
@media(max-width:800px){.about{grid-template-columns:1fr}}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:44px}@media(max-width:800px){.contact{grid-template-columns:1fr}}
.cinfo{margin:0 0 24px}.cinfo li{margin-bottom:6px}.cinfo a{text-decoration:none;border-bottom:1px solid var(--accent)}
.contact form{display:flex;flex-direction:column;gap:6px}
.contact label{font-weight:600;font-size:.88rem;margin-top:8px}
.contact input,.contact textarea{padding:13px 16px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
.contact input:focus,.contact textarea:focus{border-color:var(--accent);outline:0}
.contact textarea{min-height:130px;resize:vertical}
.contact .btn{align-self:flex-start;margin-top:10px}
.form-msg{min-height:1.4em;font-size:.92rem;margin-top:6px}.form-msg.ok{color:#35d07f}.form-msg.err{color:#ff6b6b}

.foot{border-top:1px solid var(--line);background:var(--card);padding-top:64px;margin-top:30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px}
.foot-grid p{margin:16px 0;max-width:34ch;font-size:.95rem}
.foot h4{font-size:1.05rem;margin-bottom:16px}.foot li{margin-bottom:10px}.foot li a{text-decoration:none;color:var(--muted)}.foot li a:hover{color:var(--accent)}
.foot-bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:48px;padding:22px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.foot-bar a{text-decoration:none}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}

.modal{border:1px solid var(--line);border-radius:var(--r);padding:0;background:var(--card);color:var(--text);width:min(860px,calc(100% - 24px));max-height:92vh;overflow:auto;margin:auto}
.modal::backdrop{background:rgba(0,0,0,.75);backdrop-filter:blur(4px)}
.modal .x{position:absolute;top:12px;right:12px;z-index:5;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer}
.slider{position:relative;overflow:hidden;aspect-ratio:16/10;background:#000}
.track{display:flex;height:100%;transition:transform .45s cubic-bezier(.22,.8,.3,1)}
.slide{flex:0 0 100%;height:100%;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#0a0a0a}
.slide.ph{background-size:cover;display:grid;place-items:center;font:800 4rem var(--font);color:rgba(255,255,255,.85)}
.nav-btn{position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:1.6rem;cursor:pointer}
.prev{left:12px}.next{right:12px}
.dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0}
.dots button[aria-current=true]{background:var(--accent);width:22px;border-radius:6px}
.m-body{padding:24px 28px 30px}.m-body h3{font-size:2rem;margin-bottom:6px}
.m-body p{margin-top:14px;max-width:70ch;white-space:pre-line}.m-body .meta{margin-top:0}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tags span{padding:4px 12px;border-radius:999px;border:1px solid var(--line);font-size:.85rem;color:var(--muted)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* additions */
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--accent);color:var(--on);padding:8px 16px;border-radius:999px;font-weight:700}.skip:focus{left:8px}
.logo img{height:34px;width:auto;display:block}
.stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-top:6vh;border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:26px 8px}
.stats div{padding:0 26px;border-left:1px solid var(--line)}.stats div:first-child{border:0}
.stats dt{font:800 2.2rem var(--font);letter-spacing:-.03em;color:var(--accent)}.stats dd{color:var(--muted);font-size:.92rem}
.tm{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.tm figure{display:flex;flex-direction:column;gap:20px;justify-content:space-between}
.tm blockquote{font-size:1.1rem;line-height:1.6}
.tm figcaption b{display:block}.tm figcaption span{color:var(--muted);font-size:.9rem}
.m-body .btn{margin-top:18px}
.hero-l{grid-column:1}.stage{grid-column:2}
@media(max-width:900px){.hero-l,.stage{grid-column:1}}

/* ===== v3 design upgrade ===== */
body{position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(56rem 38rem at 88% -8%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 62%),radial-gradient(44rem 32rem at -12% 42%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 62%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.32;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:68px 68px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000 10%,transparent 72%)}
h1,h2,h3{text-wrap:balance}
::selection{background:var(--accent);color:var(--on)}
html.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
html.js .rv.in{opacity:1;transform:none}
.block.tight{padding-top:24px}
a.card,a.pf{text-decoration:none;display:block}a.pf{display:grid}
a.card[hidden]{display:none}
.hdr.scrolled .hdr-in{box-shadow:0 12px 40px rgba(0,0,0,.28)}
.btn{box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 28%,transparent)}.btn.ghost{box-shadow:none}
.h3{font-size:1.5rem;margin-bottom:16px}

/* page header */
.ph{padding:150px 0 28px;position:relative}
.ph h1{font-size:clamp(2.5rem,6.2vw,4.6rem);font-weight:800;max-width:18ch}
.ph .lead{margin:16px 0 0;max-width:56ch}
.crumbs{display:flex;gap:10px;flex-wrap:wrap;font-size:.86rem;color:var(--muted);margin-bottom:22px;font-weight:600}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--accent)}
.prose p{color:var(--muted);font-size:1.07rem;margin-bottom:1.1em;max-width:68ch}
.prose .hero-cta{margin-top:26px}

/* services page / values / steps */
.svc-grid,.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.vals{margin-top:30px}
.svc{display:flex;flex-direction:column;gap:10px;transition:transform .25s,border-color .25s}.svc:hover{transform:translateY(-5px);border-color:var(--accent)}
.svc b,.vals b{font-size:.9rem;color:var(--accent);letter-spacing:.08em}
.svc h3,.vals h3{font-size:1.5rem;margin:0}.svc p,.vals p{color:var(--muted)}
.svc a{margin-top:auto;padding-top:10px;text-decoration:none;color:var(--accent);font-weight:700}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.steps li{list-style:none;position:relative}
.steps span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--on);font-weight:800;margin-bottom:18px}
.steps h3{font-size:1.3rem;margin-bottom:8px}.steps p{color:var(--muted)}
.about-ph .mark{background:var(--on)}.about-ph .mark::after{border-color:var(--on)}

/* work toolbar */
.toolbar{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:28px}
.toolbar input{padding:12px 20px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;min-width:min(100%,260px)}
.toolbar input:focus{border-color:var(--accent);outline:0}
.chips small{opacity:.6;margin-left:4px}

/* project detail */
.pd-hero{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/8;background:var(--card);margin-bottom:40px}
.pd-hero img{width:100%;height:100%;object-fit:cover;display:block}
.pd-ph{height:100%;display:grid;place-items:center;font:800 6rem var(--font);color:rgba(255,255,255,.85);background-size:cover}
.pd{display:grid;grid-template-columns:1fr 330px;gap:44px;align-items:start}
@media(max-width:900px){.pd{grid-template-columns:1fr}.pd-hero{aspect-ratio:16/10}}
.pd-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:12px}
.pd-side dl{margin-bottom:10px}.pd-side dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-top:14px}.pd-side dt:first-child{margin-top:0}.pd-side dd{font-weight:600}
.pd-side .btn.block{justify-content:center;width:100%}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:44px}
.gal button{padding:0;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--card);cursor:zoom-in;aspect-ratio:4/3;display:block}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.gal button:hover img{transform:scale(1.06)}
.pn-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.pn-nav a{text-decoration:none;display:flex;flex-direction:column;gap:4px;transition:border-color .2s}.pn-nav a:hover{border-color:var(--accent)}
.pn-nav small{color:var(--muted);font-weight:600}.pn-nav b{font-size:1.15rem}
.alert-draft{background:color-mix(in srgb,var(--accent) 20%,transparent);border:1px solid var(--accent);padding:10px 16px;border-radius:var(--r-s);margin-bottom:20px;font-weight:600}
.lb{border:0;background:transparent;padding:0;max-width:96vw;max-height:94vh;width:auto;margin:auto;overflow:visible}
.lb::backdrop{background:rgba(0,0,0,.88)}
.lb img{max-width:92vw;max-height:88vh;display:block;border-radius:var(--r-s);margin:auto}
.lb .x{position:fixed;top:16px;right:16px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-size:1rem}
.lb .nav-btn{position:fixed;top:50%;translate:0 -50%}.lb .prev{left:16px}.lb .next{right:16px}

/* contact page */
.ccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:20px}
.cc{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit;padding:20px 22px;transition:border-color .2s,transform .2s}
a.cc:hover{border-color:var(--accent);transform:translateY(-3px)}
.cc small{display:block;color:var(--muted);font-size:.8rem;font-weight:600}.cc b{display:block;overflow-wrap:anywhere}
.cc .ti{font-size:1.3rem}

/* CTA band */
.ctaband{margin-top:56px}
.ctaband .in{border-radius:var(--r);padding:clamp(36px,6vw,76px);text-align:center;color:var(--on);background:radial-gradient(40rem 20rem at 80% 0,rgba(255,255,255,.28),transparent 60%),linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000))}
.ctaband h2{max-width:22ch;margin:0 auto 14px}.ctaband h2 em{color:inherit;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px}
.ctaband p{max-width:48ch;margin:0 auto 28px;opacity:.85;font-size:1.1rem}
.ctaband .btn{background:var(--on);color:var(--accent);box-shadow:none}
.foot{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--card) 70%,transparent))}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none}}
html.js .rv.in.card,html.js .rv.in.pf,html.js .rv.in.svc,html.js .rv.in.cc{transition:transform .25s,border-color .25s,opacity .3s}

.marquee{overflow:hidden}
.marquee:hover>div{animation-play-state:paused}
/* custom pages */
.page-content{max-width:820px}.page-wide{max-width:1100px}
.page-content h2{font-size:1.9rem;margin:1.6em 0 .5em}.page-content h3{font-size:1.4rem;margin:1.4em 0 .5em}.page-content h4{margin:1.2em 0 .4em}
.page-content p,.page-content li{color:var(--muted);font-size:1.07rem}.page-content p{margin-bottom:1.1em}
.page-content strong,.page-content b{color:var(--text)}
.page-content a{color:var(--accent);text-underline-offset:3px}
.page-content ul,.page-content ol{padding-left:1.4em;margin-bottom:1.1em;list-style:revert}.page-content li{margin-bottom:.4em}
.page-content blockquote{border-left:4px solid var(--accent);padding:6px 0 6px 20px;margin:1.4em 0;font-size:1.2rem;color:var(--text)}
.page-content img{max-width:100%;height:auto;border-radius:var(--r-s);margin:1.2em 0;display:block}
.page-content hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.page-content code{background:var(--card2);padding:2px 6px;border-radius:6px;font-size:.92em}.page-content pre{background:var(--card2);padding:16px;border-radius:var(--r-s);overflow:auto;margin-bottom:1.1em}
.page-content table{border-collapse:collapse;width:100%;margin-bottom:1.2em}.page-content th,.page-content td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.page-feat{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-bottom:34px;aspect-ratio:16/8}.page-feat img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== v4: buttons, cards, project page ===== */
.btn.full{width:100%;justify-content:center}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.btn:hover::after{transform:translateX(120%)}.btn.ghost::after{display:none}
.card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.card-actions .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
.card{display:flex;flex-direction:column}.card-body{display:flex;flex-direction:column;flex:1}.card-body h3 a,.pf-info h3 a{text-decoration:none}.card-body h3 a:hover,.pf-info h3 a:hover{color:var(--accent)}
.card-actions{margin-top:auto;padding-top:14px}
.thumb{position:relative;overflow:hidden;display:grid;transition:transform .5s}.card:hover .thumb{transform:scale(1.03)}
.card .thumb{border-radius:0}.card{overflow:hidden}
.thumb-tag{position:absolute;top:12px;left:12px;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(8px);color:var(--text);font:600 .74rem var(--font);padding:4px 12px;border-radius:999px;border:1px solid var(--line)}
.pf:nth-child(even) .pf-box{order:2}.pf:nth-child(even) .pf-img{order:0}
.pf-box{display:block;overflow:hidden}.pf:hover .pf-img{transform:scale(1.05)}
.pf-info .card-actions{margin-top:10px}
.pf-info .go{display:none}

.frame{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:0 30px 80px rgba(0,0,0,.28);margin-bottom:44px}
.frame-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--card2)}
.frame-bar i{width:11px;height:11px;border-radius:50%;background:var(--line)}.frame-bar i:first-child{background:#ff5f57}.frame-bar i:nth-child(2){background:#febc2e}.frame-bar i:nth-child(3){background:#28c840}
.frame-bar span{margin-left:10px;flex:1;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 14px;font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame-bar a{text-decoration:none;color:var(--accent);font-weight:700;padding:0 4px}
.frame-img{aspect-ratio:16/9;overflow:hidden;background:var(--card2)}.frame-img img{width:100%;height:100%;object-fit:cover;display:block}
.pd{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start}
@media(max-width:900px){.pd{grid-template-columns:1fr;gap:28px}}
.pd-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.pd-chips span{padding:5px 14px;border-radius:999px;background:var(--accent);color:var(--on);font-weight:700;font-size:.8rem}.pd-chips span.soft{background:transparent;color:var(--muted);border:1px solid var(--line);font-weight:600}
.pd-side{position:sticky;top:110px}.pd-side h3{font-size:1.25rem;margin-bottom:6px}
.pd-side dl div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.pd-side dt{margin:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}.pd-side dd{font-weight:600;text-align:right}
.pd-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.gal{columns:3 240px;column-gap:14px;display:block;margin-top:20px}.gal button{display:block;width:100%;margin:0 0 14px;aspect-ratio:auto;break-inside:avoid}.gal img{height:auto}
.pn-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}@media(max-width:700px){.pn-nav{grid-template-columns:1fr}}
.pn{display:flex;align-items:center;gap:16px;padding:14px;text-decoration:none;transition:border-color .2s,transform .2s}.pn:hover{border-color:var(--accent);transform:translateY(-3px)}.pn.r{flex-direction:row-reverse;text-align:right}
.pn-img{width:84px;height:64px;border-radius:var(--r-s);background-size:cover;background-position:center;flex:none}.pn small{display:block;color:var(--muted);font-weight:600}.pn b{font-size:1.05rem}

/* ===== v4: animated hero ===== */
.hero{position:relative;align-items:center}
.hero-bg{position:absolute;inset:-40px -10vw 0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.o1{width:420px;height:420px;background:var(--accent);top:-80px;right:6%;animation:drift 16s ease-in-out infinite alternate}
.o2{width:320px;height:320px;background:color-mix(in srgb,var(--accent) 55%,#7b5cff);bottom:-60px;left:2%;opacity:.28;animation:drift 20s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(-60px,50px) scale(1.15)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}}
@keyframes popIn{from{opacity:0;transform:scale(.9) translateY(24px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floaty{50%{transform:translateY(-12px)}}
@keyframes shimmer{to{background-position:200% 0}}
@keyframes blink{50%{opacity:0}}
.hero-l>*{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) both}
.hero-l>:nth-child(1){animation-delay:.05s}.hero-l>:nth-child(2){animation-delay:.15s}.hero-l>:nth-child(3){animation-delay:.25s}.hero-l>:nth-child(4){animation-delay:.35s}.hero-l>:nth-child(5){animation-delay:.45s}.hero-l>:nth-child(6){animation-delay:.55s}.hero-l>:nth-child(7){animation-delay:.65s}
.hero h1 em{background:linear-gradient(100deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#fff),var(--accent));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5s linear infinite}
.words{font-size:1.25rem;font-weight:600;margin-top:10px;min-height:1.7em}.words span{color:var(--muted)}.words .rot{color:var(--accent)}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--accent);margin-left:3px;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
.hero-r{position:relative;justify-self:end;width:min(100%,500px);--mx:0;--my:0}
.hero-r .stage{width:100%;justify-self:auto;animation:popIn 1s .2s cubic-bezier(.2,.7,.2,1) both;transform:perspective(900px) rotateY(calc(var(--mx)*7deg)) rotateX(calc(var(--my)*-7deg));transition:transform .25s ease-out;box-shadow:0 40px 90px rgba(0,0,0,.35)}
.orbit{position:absolute;inset:-7% -9%;pointer-events:none}
.ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--accent) 50%,transparent);animation:spin 30s linear infinite}
.ring i{position:absolute;top:-7px;left:50%;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px var(--accent)}
.r2{inset:9% 5%;animation-duration:44s;animation-direction:reverse;opacity:.55}.r2 i{width:10px;height:10px;top:-5px;background:#fff}
.fchip{position:absolute;z-index:3;padding:9px 18px;border-radius:999px;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(14px);border:1px solid var(--line);font-weight:700;font-size:.85rem;box-shadow:0 14px 34px rgba(0,0,0,.3);animation:popIn .8s both,floaty 6s ease-in-out infinite;translate:calc(var(--mx)*16px) calc(var(--my)*16px);white-space:nowrap}
.fchip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px}
.c1{left:-7%;top:16%;animation-delay:.6s,0s}.c2{right:-6%;top:44%;animation-delay:.8s,1.2s}.c3{right:8%;bottom:-4%;animation-delay:1s,2.4s}
@media(max-width:900px){.hero-r{justify-self:center;max-width:360px}.c1{left:-3%}.c2{right:-3%}.orbit{inset:-5% -6%}}
.stats{animation:fadeUp .9s .7s cubic-bezier(.2,.7,.2,1) both}
#prog{position:fixed;top:0;left:0;right:0;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:100}

/* ===== v4: mobile bottom nav + sheet ===== */
.bnav,.sheet{display:none}
@media(max-width:900px){
  body{padding-bottom:96px}
  .nav,.burger{display:none!important}.hdr-act .btn{display:none}
  .hdr-in{padding:8px 10px 8px 18px}
  .hero{padding-top:118px}.ph{padding-top:118px}
  .block{padding:56px 0}.ph h1{font-size:clamp(2.1rem,9vw,3rem)}
  .bnav{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;gap:2px;padding:6px;border-radius:26px;background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line);box-shadow:0 16px 44px rgba(0,0,0,.4)}
  .bnav a,.bnav button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px;border-radius:20px;border:0;background:none;color:var(--muted);font:700 .66rem var(--font);text-decoration:none;cursor:pointer;transition:.25s}
  .bnav svg{width:21px;height:21px}.bnav span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bnav .on{background:var(--accent);color:var(--on);box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 45%,transparent)}
  .sheet:not([hidden]){display:block;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);animation:fadeIn .2s}
  .sheet .sh{position:absolute;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));background:var(--card);border:1px solid var(--line);border-radius:24px;padding:10px;animation:fadeUp .3s both}
  .sheet .sh a{display:block;padding:14px 18px;border-radius:16px;text-decoration:none;font-weight:700}.sheet .sh a:active,.sheet .sh a:hover{background:var(--accent);color:var(--on)}
  .foot{padding-bottom:10px}
}
@keyframes fadeIn{from{opacity:0}}

/* ===== v4: popup ===== */
.popup:not([hidden]){position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);animation:fadeIn .25s}
.pop-box{position:relative;width:min(460px,100%);background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5);animation:popIn .5s cubic-bezier(.2,.7,.2,1)}
.pop-img{aspect-ratio:16/8;background-size:cover;background-position:center}.pop-body{padding:28px}.pop-body h3{font-size:1.7rem;margin-bottom:10px}.pop-body p{color:var(--muted);margin-bottom:22px}
.pop-x{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer}

/* ===== v4: more motion ===== */
html.js .rv.from-l{transform:translateX(-30px)}html.js .rv.from-r{transform:translateX(30px)}html.js .rv.zoom{transform:scale(.94)}
html.js .rv.in.from-l,html.js .rv.in.from-r,html.js .rv.in.zoom{transform:none}
.svc,.tool,.panel{transition:transform .3s,border-color .3s,box-shadow .3s}
.svc:hover,.tool:hover{box-shadow:0 22px 50px rgba(0,0,0,.25)}
.marquee>div{animation-duration:38s}
@media(max-width:600px){.card-actions .btn{flex:1 1 100%}.pf-info{padding:22px}.stats div{padding:0 14px}.hero h1{font-size:clamp(2.6rem,13vw,3.6rem)}}

@media(max-width:900px){.c1{top:auto;bottom:24%;left:-3%}.fl.q{max-width:200px}}