:root { --ink:#151518; --muted:#777780; --line:#e4e5e9; --paper:#f6f7f9; --lime:#a5ff19; --lime-deep:#75d900; --card:rgba(255,255,255,.6); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:clip; scrollbar-width:none; }
body { margin:0; overflow-x:clip; color:var(--ink); background:#e9eaed; font-family:Archivo,Arial,sans-serif; scrollbar-width:none; }
html::-webkit-scrollbar,body::-webkit-scrollbar { display:none; width:0; height:0; }
button,a { font:inherit; }
a { color:inherit; text-decoration:none; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.sr-only { position:absolute; width:0; height:0; overflow:hidden; }
.site-shell { width:min(100%, 1210px); min-height:100vh; margin:auto; overflow:hidden; background:linear-gradient(118deg,#fafbfc 0%,#eef0f4 50%,#fbfcfd 100%); box-shadow:0 0 55px rgba(67,72,81,.1); }
.hero { height:660px; padding:42px 52px; position:relative; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 66% 61%,rgba(178,255,47,.26),transparent 19%),linear-gradient(110deg,#f8f9fa 8%,#eef0f3 62%,#f9fafb); }
.hero::after { content:""; position:absolute; z-index:-1; inset:0; background-image:linear-gradient(rgba(255,255,255,.36) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.27) 1px,transparent 1px); background-size:90px 90px; mask-image:linear-gradient(90deg,transparent 0 55%,#000 85%); }
.topbar { position:relative; z-index:4; display:flex; align-items:center; justify-content:space-between; text-transform:uppercase; font-size:11px; letter-spacing:3px; }
.brand { display:flex; align-items:center; gap:20px; color:#383941; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; color:var(--lime); border:2px solid currentColor; clip-path:polygon(0 0,100% 0,100% 100%,50% 62%,0 100%); font-size:0; position:relative; }
.brand-mark::before,.brand-mark::after { content:""; position:absolute; width:2px; height:50px; background:currentColor; transform:rotate(-45deg); }.brand-mark::after { transform:rotate(45deg); }
.eyebrow { color:#898b93; font-size:10px; letter-spacing:2px; }.eyebrow i { display:inline-block; width:9px;height:9px;border-radius:50%;background:var(--lime);margin-left:10px; }
.hero-copy { position:relative; z-index:3; padding-top:68px; width:58%; }
h1 { margin:0; text-transform:uppercase; font-weight:900; font-size:clamp(70px,10vw,150px); letter-spacing:-9px; line-height:.87; }
h1 span,h1 strong { display:block; } h1 strong { color:var(--lime); font-weight:900; }
.intro { margin:38px 0 48px; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:13px; line-height:2.05; text-transform:uppercase; letter-spacing:4px; color:#50515a; }.intro em { color:var(--lime-deep); font-style:normal; }
.availability { display:flex; width:425px; max-width:100%; overflow:hidden; border:1px solid rgba(221,223,229,.9); border-radius:12px; background:rgba(255,255,255,.28); }.availability div { display:flex; align-items:center; gap:16px; flex:1; padding:18px 21px; font-size:10px; line-height:1.6; text-transform:uppercase; letter-spacing:1.2px; }.availability div+div{border-left:1px solid var(--line)}.availability b { font-size:10px; letter-spacing:1px; }
.portrait-wrap { position:absolute; z-index:2; width:54%; right:0; bottom:0; top:58px; overflow:hidden; mix-blend-mode:multiply; }.portrait { width:100%; height:100%; object-fit:cover; object-position:69% 3%; filter:grayscale(1) contrast(1.04) brightness(1.08); opacity:.88; mask-image:linear-gradient(90deg,transparent 0%,#000 27%,#000 100%),linear-gradient(#000 0 80%,transparent 100%); mask-composite:intersect; }.orbit { position:absolute; z-index:2; width:520px;height:520px;border:2px solid rgba(255,255,255,.7);border-radius:50%;top:10px;left:3%;}.orbit-two { width:480px;height:480px;top:30px;left:6%;border-color:rgba(255,255,255,.3)}.cross{position:absolute;z-index:3;width:36px;height:36px;opacity:.4}.cross::before,.cross::after{content:"";position:absolute;background:#fff}.cross::before{height:1px;width:100%;top:50%}.cross::after{height:100%;width:1px;left:50%}.cross-one{right:6%;top:42px}.cross-two{left:10%;top:160px}
.freelance-note { position:absolute;z-index:5;right:11%;bottom:38px;min-width:165px;padding:18px 17px;border:1px solid rgba(255,255,255,.64);border-radius:9px;background:rgba(244,245,247,.7);backdrop-filter:blur(10px);font-size:11px;line-height:1.7;text-transform:uppercase;letter-spacing:1.1px;color:#41424a;}.freelance-note strong{color:var(--lime-deep);font-size:17px;letter-spacing:-.5px}.freelance-note i { position:absolute;width:11px;height:11px;border-radius:50%;background:var(--lime);right:-36px;bottom:18px; }
.content-panel { position:relative; margin:-1px 34px 0; border:1px solid rgba(255,255,255,.72); border-radius:16px 16px 0 0; background:rgba(247,248,250,.7); box-shadow:0 -10px 26px rgba(35,38,45,.03); }.section { padding:34px 24px 10px; }.section-kicker { display:flex; align-items:center; justify-content:space-between; min-height:31px; text-transform:uppercase; }.section-kicker h2,.section-label { margin:0; position:relative; padding-left:18px; font-size:12px; font-weight:600; letter-spacing:.5px; }.section-kicker h2::before,.section-label::before { content:""; position:absolute; left:0; top:3px; width:10px; height:10px; background:var(--lime); }.section-kicker>span,.section-kicker>a,.feedback-link { color:#8b8d96; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; }.section-kicker a,.feedback-link { display:flex;align-items:center;gap:9px; }.section-kicker a svg,.feedback-link svg { width:18px;color:var(--lime-deep) }.feedback-link { border:0;background:none;cursor:pointer; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-top:20px; }.service-card { min-height:217px; position:relative;padding:24px;border:1px solid rgba(232,233,237,.94);border-radius:10px;background:rgba(255,255,255,.38); transition:transform .22s ease, background .22s ease, box-shadow .22s ease; }.service-card:hover{transform:translateY(-5px);background:#fff;box-shadow:0 12px 26px rgba(44,47,53,.07)}.card-top { display:flex;align-items:center;justify-content:space-between; }.card-top svg { width:23px; }.card-top b { color:var(--lime-deep); font:600 16px "Space Grotesk",sans-serif; }.service-card h3,.project-caption h3 { margin:39px 0 10px; font-size:13px;text-transform:uppercase; }.service-card p,.project-caption p {margin:0;max-width:175px;color:#6f7079;font-family:"Space Grotesk",sans-serif;font-size:12px;line-height:1.5}.service-card a{position:absolute;right:25px;bottom:25px;color:#888}.service-card a svg {width:18px}
.work { padding-top:29px; }.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:20px}.work-card{overflow:hidden;border:1px solid #e6e7eb;border-radius:10px;background:rgba(255,255,255,.5);transition:transform .22s ease,box-shadow .22s ease}.work-card:hover{transform:translateY(-4px);box-shadow:0 14px 24px rgba(42,44,51,.08)}.project-art{height:190px;position:relative;overflow:hidden}.dashboard-art{background:linear-gradient(139deg,#fff,#edf0ef)}.dashboard-art::before{content:"";position:absolute;left:19px;top:18px;width:42px;height:150px;background:#f5f6f6;border-radius:4px;box-shadow:75px 8px 0 -5px #fafafa,175px 17px 0 -5px #fbfbfb}.side-menu{position:absolute;left:28px;top:37px;width:25px;height:4px;background:#cfd5d4;box-shadow:0 17px #cfd5d4,0 34px #cfd5d4,0 51px #cfd5d4}.chart-line{position:absolute;left:76px;bottom:38px;width:190px;height:55px;border-bottom:3px solid var(--lime-deep);border-radius:50%;transform:rotate(-2deg)}.mini-card{position:absolute;width:35px;height:23px;top:45px;border-radius:4px;background:#fff;box-shadow:0 3px 8px rgba(20,20,20,.04)}.mini-card.a{left:78px}.mini-card.b{left:124px}.mini-card.c{left:170px}.launch-art{background:#171718;color:#fff;padding:25px 28px}.launch-logo{font-size:7px;letter-spacing:.2px}.launch-art h3{position:relative;z-index:2;margin:37px 0 5px;font-size:25px;line-height:.98;letter-spacing:-1.5px}.launch-art em{font-style:normal;color:var(--lime)}.launch-art p{position:relative;z-index:2;margin-top:13px;width:120px;font-size:6px;color:#aaa;line-height:1.5}.launch-art i{position:absolute;width:100px;height:100px;border-radius:50%;right:18px;bottom:18px;background:radial-gradient(circle at 58% 35%,#dcff9a,#a5e500 46%,#111 63%);filter:blur(.2px)}.elevate-art{background:linear-gradient(125deg,#fbfbfb,#eeeeef)}.device{position:absolute;bottom:-12px;width:106px;height:175px;background:#fff;border:1px solid #ececed;border-radius:10px 10px 0 0;box-shadow:0 8px 18px rgba(25,25,25,.07)}.device::before{content:"";position:absolute;top:13px;left:11px;width:38px;height:5px;background:#151518;border-radius:5px}.device.one{left:25px;transform:rotate(-2deg)}.device.two{right:33px;padding:49px 14px;font-size:10px}.device.two b{font-size:15px}.device.two i{display:block;width:100%;height:26px;margin-top:12px;border-radius:3px;background:#121215}.tiny-chart{position:absolute;right:45px;bottom:26px;width:70px;height:35px;border-bottom:2px solid var(--lime-deep);border-radius:50%}.project-caption {min-height:98px;padding:17px 19px;display:flex;gap:17px;position:relative}.project-caption>b{color:var(--lime-deep);font:600 15px "Space Grotesk",sans-serif}.project-caption h3{margin:0 0 6px}.project-caption p{font-size:11px}.project-caption>svg{position:absolute;right:18px;bottom:20px;width:17px;color:#8b8d93}
.stats { margin:29px 24px 0; padding:25px 8px; border:1px solid #e3e4e8; border-radius:10px; display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.25) }.stats div{padding:0 25px; border-right:1px solid #eaebee}.stats div:last-child{border:0}.stats strong{display:block;font-size:34px;letter-spacing:-2.3px;font-weight:500;line-height:1}.stats sup{font-size:17px;letter-spacing:0}.stats span{display:block;margin-top:7px;text-transform:uppercase;font-size:10px;line-height:1.55;letter-spacing:2px;color:#696a72}
.testimonials{padding-top:31px}.quote-card{min-height:104px;display:flex;align-items:center;margin-top:20px;padding:22px 27px;border:1px solid #e4e5e9;border-radius:10px;background:rgba(255,255,255,.55);box-shadow:0 8px 18px rgba(49,50,56,.035)}.quote-symbol{color:var(--lime-deep);font-size:58px;font-family:Georgia,serif;line-height:0}.quote-card p{margin:0 0 0 35px;color:#64656d;font-family:"Space Grotesk",sans-serif;font-size:12px;line-height:1.3;transition:opacity .13s ease}.person{margin-left:auto;display:flex;align-items:center;gap:17px;text-transform:uppercase;font-size:11px;letter-spacing:.2px}.person b{display:block}.person small{display:block;margin-top:5px;color:#94959c;font-size:9px;letter-spacing:.7px}.avatar{width:49px;height:49px;border-radius:50%;background:radial-gradient(circle at 58% 25%,#cab195 0 12%,transparent 13%),radial-gradient(ellipse at 55% 61%,#282826 0 29%,transparent 30%),linear-gradient(147deg,#ddd 12%,#8a7566 13% 47%,#e1dbd2 48%)}.pager{display:flex;justify-content:center;gap:9px;margin:17px}.pager button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#b4b5ba;cursor:pointer}.pager button.active{background:var(--lime)}
.contact{position:relative;margin-top:25px;padding:36px 26px 26px;border-top:1px solid #e4e5e8;display:grid;grid-template-columns:1.35fr .72fr .86fr;gap:30px;min-height:280px;overflow:hidden}.contact-heading h2{margin:16px 0 0;font-size:37px;line-height:1.04;text-transform:uppercase;letter-spacing:-1.9px}.contact-heading h2 em{color:var(--lime-deep);font-style:normal}.contact-copy{padding-top:49px;position:relative;z-index:1}.contact-copy p{margin:0;color:#53545b;font-family:"Space Grotesk",sans-serif;font-size:12px;line-height:1.55}.contact-button{display:inline-flex;align-items:center;gap:13px;margin-top:24px;color:var(--lime-deep);font-size:11px;text-transform:uppercase;letter-spacing:1px}.contact-button span{display:grid;place-items:center;width:35px;height:35px;border:1px solid #ccd0d0;border-radius:50%;font-size:20px;color:var(--lime-deep)}.contact-details{position:relative;z-index:1;padding-top:8px}.contact-details a{display:flex;align-items:center;gap:13px;height:51px;padding:8px 12px;border:1px solid #e0e1e5;border-radius:8px;background:rgba(255,255,255,.45);font-style:normal}.contact-details a+a{margin-top:5px}.contact-details svg{width:20px}.contact-details span{font-size:8px;text-transform:uppercase;letter-spacing:1.1px;color:#82838b}.contact-details b{display:block;margin-top:3px;color:#4a4b51;font-size:11px;letter-spacing:.1px;text-transform:none}.globe-wire{position:absolute;width:280px;height:280px;border:1px solid rgba(132,222,40,.25);border-radius:50%;bottom:-200px;left:65px;background:repeating-radial-gradient(ellipse at center,transparent 0 16px,rgba(132,222,40,.15) 17px 18px),repeating-linear-gradient(90deg,transparent 0 22px,rgba(132,222,40,.12) 23px 24px);transform:perspective(260px) rotateX(55deg);}.footer-line{position:absolute;bottom:19px;left:26px;right:26px;display:flex;justify-content:space-between;text-transform:uppercase;font-size:8px;letter-spacing:1.3px;color:#85868d}.footer-line span:first-child::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;vertical-align:middle;background:var(--lime)}.footer-line i{display:inline-block;width:23px;height:9px;margin-left:8px;background:var(--lime);transform:skew(-25deg)}
@media (max-width:800px){.hero{height:620px;padding:28px 26px}.hero-copy{width:80%;padding-top:83px}h1{font-size:clamp(58px,13vw,100px);letter-spacing:-6px}.portrait-wrap{width:68%;opacity:.55;top:100px}.freelance-note{right:8%;bottom:22px}.content-panel{margin:0 12px}.service-grid,.work-grid{grid-template-columns:repeat(2,1fr)}.contact{grid-template-columns:1fr 1fr}.contact-details{grid-column:2}.footer-line{position:relative;grid-column:1/-1;left:auto;right:auto;bottom:auto;margin-top:20px}.stats div{padding:0 12px}.quote-card{flex-wrap:wrap}.person{margin:12px 0 0 auto}}
@media (max-width:520px){.site-shell{width:100%}.hero{height:590px;padding:24px 18px}.topbar{font-size:8px;letter-spacing:1.8px}.brand{gap:11px}.brand-mark{width:28px;height:28px}.eyebrow{font-size:8px}.hero-copy{padding-top:80px;width:100%}h1{font-size:62px;letter-spacing:-5px}.intro{font-size:10px;letter-spacing:2.7px;margin:25px 0 28px}.availability{width:315px}.availability div{padding:12px;font-size:8px;gap:8px}.availability svg{width:20px}.portrait-wrap{width:85%;right:-11%;top:73px;opacity:.42}.freelance-note{display:none}.content-panel{margin:0;border-radius:0}.section{padding:27px 15px 8px}.section-kicker>span{display:none}.service-grid,.work-grid{grid-template-columns:1fr;gap:10px}.service-card{min-height:180px}.service-card h3{margin-top:27px}.project-art{height:170px}.stats{grid-template-columns:repeat(2,1fr);margin:25px 15px 0;gap:20px}.stats div{border:0;padding-left:10px}.testimonials{padding-bottom:0}.quote-card{padding:20px}.quote-card p{margin-left:17px;font-size:11px}.person{margin-left:50px}.contact{padding:30px 18px 22px;grid-template-columns:1fr;gap:18px}.contact-heading h2{font-size:32px}.contact-copy{padding-top:0}.contact-details{grid-column:auto;padding-top:0}.footer-line{font-size:7px}.globe-wire{left:-20px}.section-kicker a{font-size:8px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.service-card,.work-card,.quote-card p{transition:none}}

/* Dark portfolio theme */
:root { --ink:#f5f7f8; --muted:#a5acb6; --line:#2a323c; --paper:#10161d; --lime:#b7ff2a; --lime-deep:#a2ed1d; --card:rgba(19,26,35,.78); }
body { background:#080c11; color:var(--ink); }
.site-shell { background:radial-gradient(circle at 77% 0%,#1d2b32 0%,transparent 29%),linear-gradient(135deg,#0a0e13 0%,#121923 58%,#0a0e12 100%); box-shadow:0 0 80px rgba(0,0,0,.42); }
.hero { background:radial-gradient(circle at 66% 61%,rgba(183,255,42,.16),transparent 19%),linear-gradient(110deg,#0e141b 8%,#151d27 62%,#0c1117); }
.hero::after { background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); }
.brand { color:#f0f4f7; }.eyebrow,.section-kicker>span,.section-kicker>a,.feedback-link { color:#9ca5b0; }
.hero h1 { color:#f5f7f9; }.intro { color:#c2c8d0; }.availability { border-color:#2b3540; background:rgba(17,24,32,.68); }.availability div+div { border-color:#2b3540; }
.portrait-wrap { mix-blend-mode:screen; opacity:.64; }.portrait { filter:grayscale(1) contrast(1.14) brightness(.76); mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 75%,transparent 100%),linear-gradient(#000 0 80%,transparent 100%); mask-composite:intersect; }
.orbit { border-color:rgba(228,255,235,.26); }.orbit-two { border-color:rgba(255,255,255,.11); }.cross{opacity:.22}.cross::before,.cross::after{background:#dbe3e8}
.freelance-note { border-color:#3a4651; background:rgba(14,20,27,.76); color:#dce4e8; }.freelance-note strong { color:var(--lime); }
.content-panel { border-color:#27313a; background:rgba(13,18,25,.86); box-shadow:0 -10px 30px rgba(0,0,0,.18); }
.section-kicker h2,.section-label { color:#f3f7f8; }.service-card,.work-card { border-color:#29333c; background:rgba(22,30,39,.77); }.service-card:hover,.work-card:hover { background:#1a232c; box-shadow:0 14px 30px rgba(0,0,0,.28); }
.service-card p,.project-caption p { color:#aeb7c1; }.service-card a,.project-caption>svg { color:#b0bac2; }.project-caption h3,.service-card h3 { color:#f5f8fa; }
.dashboard-art { background:linear-gradient(139deg,#26323a,#151c24); }.dashboard-art::before { background:#1d272f; box-shadow:75px 8px 0 -5px #24303a,175px 17px 0 -5px #253039; }.side-menu { background:#60707d; box-shadow:0 17px #60707d,0 34px #60707d,0 51px #60707d; }.mini-card { background:#2c3943; box-shadow:none; }.elevate-art { background:linear-gradient(125deg,#212c35,#151d25); }.device { background:#e6eaed; border-color:#3d4c58; }.device::before { background:#101419; }
.stats { border-color:#2b3640; background:rgba(19,27,35,.72); }.stats div { border-color:#2a343d; }.stats span { color:#b9c1ca; }.stats strong { color:#f4f7f8; }
.quote-card { border-color:#2b3540; background:rgba(23,31,40,.85); box-shadow:0 9px 20px rgba(0,0,0,.17); }.quote-card p { color:#c5cbd2; }.person small { color:#9da7b0; }
.contact { border-color:#28323c; background:linear-gradient(125deg,rgba(12,18,24,.55),rgba(18,27,34,.78)); }.contact-heading h2 { color:#f5f8fa; }.contact-copy p { color:#c0c8d0; }.contact-details a { border-color:#303b45; background:rgba(24,32,40,.76); }.contact-details span { color:#9fa9b1; }.contact-details b { color:#f1f4f5; }.footer-line { color:#9aa4ad; }
.globe-wire { border-color:rgba(183,255,42,.25); background:repeating-radial-gradient(ellipse at center,transparent 0 16px,rgba(183,255,42,.16) 17px 18px),repeating-linear-gradient(90deg,transparent 0 22px,rgba(183,255,42,.12) 23px 24px); }
@media (max-width:520px){.content-panel{border-color:#27313a}.hero{background:radial-gradient(circle at 90% 40%,rgba(183,255,42,.12),transparent 27%),#0d131a}}

/* Website navigation */
.site-tabs { display:flex; align-items:center; gap:6px; padding:4px; border:1px solid #303b45; border-radius:999px; background:rgba(14,20,27,.68); backdrop-filter:blur(12px); }
.site-tabs a { min-width:60px; padding:9px 13px; border-radius:999px; color:#aab4bd; font:600 11px "Space Grotesk",sans-serif; letter-spacing:.4px; text-align:center; transition:color .2s ease, background .2s ease, box-shadow .2s ease; }
.site-tabs a:hover { color:#eef8e1; background:rgba(183,255,42,.1); }.site-tabs a.active { color:#121a10; background:var(--lime); box-shadow:0 4px 14px rgba(183,255,42,.18); }
.site-tabs a:focus-visible { outline:2px solid #fff; outline-offset:3px; }
#home,#portfolio,#about { scroll-margin-top:22px; }
@media (max-width:800px){.topbar { gap:14px; }.site-tabs a { min-width:51px; padding:8px 10px; font-size:10px; }.eyebrow { display:none; }}
@media (max-width:520px){.topbar { flex-wrap:wrap; justify-content:center; }.topbar .brand { order:1; margin-right:auto; }.site-tabs { order:3; width:100%; justify-content:center; }.site-tabs a { flex:1; max-width:115px; }.hero-copy { padding-top:52px; }}

/* Full-width website composition */
.site-shell { width:100%; max-width:none; min-height:100vh; overflow:visible; }
.topbar { position:sticky; top:0; height:78px; padding:0 max(28px, calc((100vw - 1220px) / 2)); background:rgba(8,12,17,.8); border-bottom:1px solid rgba(255,255,255,.06); backdrop-filter:blur(18px); z-index:20; }
.hero { height:clamp(640px, calc(100vh - 78px), 790px); padding:0 max(28px, calc((100vw - 1220px) / 2)); }
.hero-copy { padding-top:clamp(110px, 17vh, 165px); width:min(51%, 645px); }
.hero h1 { font-size:clamp(80px, 9.6vw, 160px); }.hero::after { mask-image:none; }
.portrait-wrap { width:min(52%, 790px); right:max(28px, calc((100vw - 1220px) / 2)); top:42px; }.freelance-note { right:max(85px, calc((100vw - 1120px) / 2)); bottom:62px; }
.content-panel { width:min(1220px, calc(100% - 56px)); margin:0 auto; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.section { padding:96px 0 0; }.section+.section { margin-top:88px; border-top:1px solid rgba(255,255,255,.09); }.section-kicker { min-height:45px; }.section-kicker h2 { font-size:14px; }.section-kicker>span,.section-kicker>a { font-size:10px; }
.service-grid,.work-grid { gap:20px; margin-top:28px; }.service-card { min-height:250px; padding:28px; }.work-card { border-radius:12px; }.project-art { height:250px; }.project-caption { min-height:112px; padding:22px; }
.stats { margin:96px 0 0; padding:35px 18px; border-radius:12px; }.stats strong { font-size:46px; }.stats span { font-size:11px; }
.testimonials { padding-bottom:20px; }.quote-card { min-height:132px; margin-top:28px; padding:30px 34px; }.quote-card p { font-size:14px; line-height:1.45; }
.contact { width:100vw; margin:100px calc(50% - 50vw) 0; padding:70px max(28px, calc((100vw - 1220px) / 2)); grid-template-columns:1.35fr .72fr .86fr; border-top:1px solid rgba(255,255,255,.08); }.contact .footer-line { left:max(28px, calc((100vw - 1220px) / 2)); right:max(28px, calc((100vw - 1220px) / 2)); }
#home,#portfolio,#about { scroll-margin-top:98px; }
@media (max-width:800px){.topbar { padding:0 26px; }.hero { height:650px; padding:0 26px; }.hero-copy { padding-top:118px; }.content-panel { width:min(100% - 32px, 690px); }.section { padding-top:62px; }.section+.section { margin-top:62px; }.contact { padding:45px 26px; }.project-art { height:205px; }}
@media (max-width:520px){.topbar { height:auto; min-height:66px; padding:10px 18px; }.hero { height:610px; padding:0 18px; }.hero-copy { padding-top:78px; width:100%; }.hero h1 { font-size:62px; }.portrait-wrap { right:-6%; top:83px; }.content-panel { width:100%; }.section { padding:46px 18px 0; }.section+.section { margin-top:46px; }.stats { margin:48px 18px 0; }.contact { margin-top:52px; padding:42px 18px; }.contact .footer-line { left:18px; right:18px; }}

/* Modern dark refinement — graphite, indigo light and frosted layers */
:root { --ink:#f6f7fb; --muted:#a7adbc; --line:rgba(205,211,235,.13); --paper:#141620; --lime:#b9f66d; --lime-deep:#a5e75e; --surface:rgba(255,255,255,.055); }
body { background:#0e1016; }
.site-shell { background:radial-gradient(850px 620px at 87% -9%,rgba(185,246,109,.1),transparent 60%),radial-gradient(580px 480px at 8% 33%,rgba(80,180,140,.08),transparent 65%),#101219; }
.topbar { background:rgba(14,16,22,.72); border-color:rgba(218,223,242,.09); box-shadow:0 14px 34px rgba(0,0,0,.12); }
.brand { color:#f7f8fc; }.brand-mark { color:var(--lime); border-color:rgba(185,246,109,.72); }.eyebrow { color:#9198a9; }
.hero { background:radial-gradient(520px 430px at 66% 53%,rgba(185,246,109,.16),transparent 65%),radial-gradient(420px 350px at 46% 80%,rgba(177,246,107,.12),transparent 67%),linear-gradient(115deg,#12151d 0%,#171925 54%,#11131a 100%); }
.hero::after { background-image:linear-gradient(rgba(197,203,230,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(197,203,230,.045) 1px,transparent 1px); background-size:104px 104px; }
.hero h1 { text-shadow:0 12px 40px rgba(0,0,0,.16); }.hero h1 strong { color:var(--lime); text-shadow:0 0 38px rgba(185,246,109,.12); }.intro { color:#c4c9d5; }
.availability { border-color:rgba(219,225,246,.13); background:rgba(255,255,255,.045); box-shadow:inset 0 1px rgba(255,255,255,.08); }.availability div+div { border-color:rgba(219,225,246,.1); }
.portrait-wrap { opacity:.7; mix-blend-mode:screen; filter:saturate(.88); }.portrait { filter:grayscale(1) contrast(1.04) brightness(.66); }
.orbit { border-color:rgba(185,246,109,.24); box-shadow:0 0 80px rgba(185,246,109,.07); }.orbit-two { border-color:rgba(215,220,255,.1); }.cross::before,.cross::after { background:#c5c9e0; }
.freelance-note { border-color:rgba(220,226,245,.15); background:rgba(21,24,34,.68); box-shadow:0 18px 40px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.08); }.freelance-note strong { color:var(--lime); }
.site-tabs { padding:5px; border-color:rgba(224,228,246,.12); background:rgba(255,255,255,.055); box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 28px rgba(0,0,0,.14); }
.site-tabs a { color:#aab0c0; }.site-tabs a:hover { color:#f3f5fa; background:rgba(255,255,255,.08); }.site-tabs a.active { color:#10150d; background:linear-gradient(135deg,#c8ff81,#9be657); box-shadow:0 7px 18px rgba(185,246,109,.2),inset 0 1px rgba(255,255,255,.38); }
.content-panel { background:transparent; }
.section+.section { border-top-color:rgba(215,222,243,.1); }.section-kicker h2,.section-label { color:#f4f6fa; }.section-kicker h2::before,.section-label::before { background:linear-gradient(135deg,var(--lime),#79d8b4); box-shadow:0 0 18px rgba(185,246,109,.32); }.section-kicker>span,.section-kicker>a,.feedback-link { color:#9da5b7; }
.service-card,.work-card { border-color:rgba(222,227,246,.12); background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.025)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 18px 38px rgba(0,0,0,.14); backdrop-filter:blur(16px); }.service-card:hover,.work-card:hover { border-color:rgba(185,246,109,.32); background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(185,246,109,.075)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 22px 44px rgba(0,0,0,.23); }
.card-top b,.project-caption>b { color:var(--lime); }.service-card p,.project-caption p { color:#aeb6c4; }.service-card h3,.project-caption h3 { color:#f4f6fa; }.service-card a,.project-caption>svg { color:#c2c9d5; }
.dashboard-art { background:radial-gradient(circle at 75% 55%,rgba(169,242,107,.14),transparent 22%),linear-gradient(135deg,#1e2630,#151a23); }.dashboard-art::before { background:#202934; box-shadow:75px 8px 0 -5px #26303c,175px 17px 0 -5px #222b35; }.mini-card { background:#303a48; }.side-menu { background:#687587; box-shadow:0 17px #687587,0 34px #687587,0 51px #687587; }.launch-art { background:radial-gradient(circle at 70% 70%,rgba(157,140,255,.22),transparent 25%),#15151d; }.launch-art i { background:radial-gradient(circle at 58% 35%,#d7ff97,#a4dc74 38%,#535176 62%,#161720 70%); }.elevate-art { background:linear-gradient(125deg,#2a2b3d,#191c25); }.device { background:#e2e5ec; }
.stats { border-color:rgba(222,227,246,.12); background:linear-gradient(105deg,rgba(255,255,255,.07),rgba(130,111,225,.09)); box-shadow:inset 0 1px rgba(255,255,255,.09); }.stats div { border-color:rgba(222,227,246,.1); }.stats strong { color:#f7f8fb; }.stats span { color:#acb4c2; }
.quote-card { border-color:rgba(222,227,246,.12); background:linear-gradient(100deg,rgba(185,246,109,.1),rgba(255,255,255,.055)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 20px 38px rgba(0,0,0,.12); }.quote-card p { color:#c5cad5; }.quote-symbol { color:var(--lime); }.person small { color:#9ea6b6; }
.contact { background:radial-gradient(560px 360px at 74% 78%,rgba(185,246,109,.14),transparent 65%),linear-gradient(115deg,#151823,#101219); border-top-color:rgba(222,227,246,.1); }.contact-heading h2 { color:#f8f9fc; }.contact-heading h2 em,.contact-button { color:var(--lime); }.contact-button span { border-color:rgba(185,246,109,.4); background:rgba(185,246,109,.08); }.contact-copy p { color:#b9c1cd; }.contact-details a { border-color:rgba(222,227,246,.12); background:rgba(255,255,255,.06); box-shadow:inset 0 1px rgba(255,255,255,.07); }.contact-details b { color:#f0f2f7; }
.globe-wire { opacity:.75; }.footer-line { color:#8f98a8; }
@media (max-width:520px){.site-tabs a.active{box-shadow:0 5px 15px rgba(185,246,109,.2)}.service-card,.work-card{backdrop-filter:none}.hero{background:radial-gradient(400px 300px at 90% 28%,rgba(185,246,109,.14),transparent 70%),#12141c}}

/* E-commerce portfolio hero rebuilt in HTML for crisp typography */
.topbar { background:rgba(3,3,10,.78); }
.hero.hero-ecommerce { width:100%; height:100svh; min-height:0; padding:0; isolation:isolate; overflow:hidden; background:#08070d; }
.hero.hero-ecommerce::after { display:block; z-index:1; inset:0; mask-image:none; background:linear-gradient(90deg,#08070d 0%,rgba(8,7,13,.9) 31%,rgba(8,7,13,.35) 54%,rgba(8,7,13,.03) 79%),linear-gradient(0deg,rgba(8,7,13,.7) 0%,transparent 34%); }
.commerce-visual { position:absolute; z-index:0; top:0; right:-1px; width:calc(58% + 1px); height:100%; object-fit:cover; object-position:calc(50% - 3px) center; image-rendering:auto; filter:contrast(1.04) saturate(1.03); mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%); }
.commerce-copy { position:absolute; z-index:3; top:9%; left:max(28px,calc((100vw - 1220px) / 2)); color:#fff; }.commerce-intro { margin:clamp(125px,15vw,215px) 0 0; color:#e9e9ed; font:400 clamp(14px,1.35vw,22px)/1.12 "Space Grotesk",sans-serif; letter-spacing:-.6px; }.commerce-intro span { color:#fff; font-weight:800; letter-spacing:5px; }.commerce-year { margin:clamp(28px,3.4vw,50px) 0 0; color:#fff; font:900 clamp(66px,8.2vw,126px)/.8 Archivo,sans-serif; letter-spacing:-7px; background:linear-gradient(110deg,#fff 8%,#eafed0 52%,#b9f66d 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 0 26px rgba(185,246,109,.12); }.commerce-title { position:relative; margin:clamp(15px,1.7vw,26px) 0 0; color:#fff; font:900 clamp(56px,7.2vw,112px)/.92 Archivo,sans-serif; letter-spacing:-6px; white-space:nowrap; background:linear-gradient(100deg,#fff 0%,#f9fff0 44%,#b9f66d 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 8px 22px rgba(0,0,0,.25)); }.commerce-title::after { content:""; position:absolute; left:2px; right:3%; bottom:-13px; height:2px; background:linear-gradient(90deg,#b9f66d,transparent); opacity:.8; }.commerce-orbit { position:absolute; width:clamp(380px,38vw,560px); height:clamp(145px,15vw,220px); left:-20px; top:50%; border:5px solid #b9f66d; border-top-color:transparent; border-left-color:transparent; border-radius:50%; transform:rotate(12deg); }.commerce-arrow { display:block; width:clamp(38px,4vw,62px); height:clamp(38px,4vw,62px); margin:clamp(72px,8vw,120px) 0 0; overflow:visible; fill:none; stroke:#b9f66d; stroke-width:2.25; stroke-linecap:square; stroke-linejoin:miter; }.commerce-dots { position:absolute;z-index:3;top:7%;right:max(28px,calc((100vw - 1220px) / 2));display:flex;gap:10px; }.commerce-dots i { display:block;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.28); }.commerce-dots i:nth-child(2){background:rgba(255,255,255,.6)}.commerce-dots i:last-child{background:#fff}
.hero-ecommerce .hero-copy,.hero-ecommerce .portrait-wrap,.hero-ecommerce .freelance-note { display:none; }
@media (max-width:800px){.hero.hero-ecommerce{height:100svh}.commerce-visual{width:66%;opacity:.82}.commerce-copy{left:26px}.commerce-title{letter-spacing:-5px}.commerce-orbit{border-width:3px}.commerce-dots{right:26px}}
@media (max-width:520px){.hero.hero-ecommerce{height:100svh}.commerce-visual{width:92%;opacity:.58;object-position:55% center}.commerce-copy{top:8%;left:18px}.commerce-welcome{font-size:15px}.commerce-intro{margin-top:82px;font-size:13px}.commerce-year{margin-top:30px;font-size:62px;letter-spacing:-5px}.commerce-title{font-size:49px;letter-spacing:-4px}.commerce-orbit{width:290px;height:118px;left:-10px;top:51%;border-width:3px}.commerce-arrow{width:38px;height:38px;margin-top:80px}.commerce-dots{right:18px;gap:7px}.commerce-dots i{width:9px;height:9px}}

/* Balance the hero composition on wide screens without changing its height. */
@media (min-width:801px){
  .commerce-copy { left:clamp(48px,8vw,144px); }
  .commerce-visual { width:calc(62% + 1px); object-position:calc(50% - 3px) center; }
  .commerce-dots { right:clamp(32px,5vw,96px); }
}

/* Refined brand monogram */
.brand-mark { width:36px; height:36px; flex:none; border:0; clip-path:none; color:var(--lime); }
.brand-mark::before,.brand-mark::after { content:none; }
.brand-mark svg { display:block; width:36px; height:36px; fill:none; stroke:currentColor; stroke-linecap:square; stroke-linejoin:miter; }
.brand-mark-frame { stroke-width:1.25; opacity:.38; }
.brand-mark-letter { stroke-width:2.15; }
@media (max-width:520px){.brand-mark,.brand-mark svg{width:28px;height:28px}}

/* About section */
.about-intro { width:min(1220px,calc(100% - 56px)); margin:0 auto; padding:clamp(72px,8vw,112px) 0 clamp(80px,9vw,128px); display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(52px,8vw,132px); align-items:center; }
.about-metrics { display:grid; gap:10px; }
.about-metric-card { min-height:104px; position:relative; display:grid; grid-template-columns:minmax(128px, .8fr) 1fr; align-items:center; gap:20px; padding:18px 22px; border:1px solid rgba(222,227,246,.13); border-radius:14px; background:linear-gradient(120deg,rgba(255,255,255,.1),rgba(255,255,255,.025)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 16px 34px rgba(0,0,0,.12); backdrop-filter:blur(16px); }
.about-metric-card::before { content:""; position:absolute; left:15px; top:50%; width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px rgba(185,246,109,.48); transform:translateY(-50%); }
.metric-number { grid-row:1; margin-left:14px; color:#f6f8f0; font:700 clamp(42px,4.2vw,64px)/.9 Archivo,sans-serif; letter-spacing:-.07em; background:linear-gradient(120deg,#fff 3%,#eaffd5 45%,#b9f66d 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.metric-number-type { font-size:clamp(23px,2.2vw,33px); letter-spacing:-.055em; white-space:nowrap; }
.metric-label { grid-column:2; grid-row:1; color:#c8cfda; font:500 14px/1.55 "Space Grotesk",sans-serif; letter-spacing:.02em; }
.about-copy { padding:10px 0 10px clamp(0px,1.5vw,24px); }
.about-copy h2 { margin:18px 0 20px; color:#f5f7fb; font:600 clamp(28px,2.6vw,42px)/1.1 Archivo,sans-serif; letter-spacing:-.055em; }
.about-copy h2 em { color:var(--lime); font-style:normal; }
.about-copy p { max-width:500px; margin:0; color:#b9c1cd; font:400 14px/1.95 "Space Grotesk",sans-serif; }
@media (max-width:800px){.about-intro{width:min(100% - 52px,690px);grid-template-columns:1fr;gap:46px;padding:68px 0 78px}.about-copy{padding:0}.about-copy p{max-width:620px}}
@media (max-width:520px){.about-intro{width:calc(100% - 36px);padding:50px 0 58px;gap:34px}.about-metric-card{min-height:92px;grid-template-columns:minmax(112px,.88fr) 1fr;gap:10px;padding:16px}.metric-number{font-size:38px;margin-left:12px}.metric-number-type{font-size:22px}.metric-label{font-size:13px}.about-copy h2{font-size:29px}.about-copy p{font-size:13.5px;line-height:1.85}}

/* Contact text layout — retain the existing background treatment */
.contact { width:100vw; margin:100px calc(50% - 50vw) 0; padding:70px max(28px,calc((100vw - 1220px) / 2)); display:block; min-height:318px; overflow:hidden; border-top:1px solid rgba(222,227,246,.1); background:radial-gradient(560px 360px at 74% 78%,rgba(185,246,109,.14),transparent 65%),linear-gradient(115deg,#151823,#101219); }
.contact-panel { position:relative; width:min(1220px,100%); margin:0 auto; display:grid; grid-template-columns:minmax(220px,.94fr) minmax(220px,.9fr) minmax(276px,1fr); column-gap:clamp(34px,5vw,76px); row-gap:34px; align-items:start; }
.contact-heading { min-width:0; }
.contact-copy,.contact-details { position:relative; z-index:1; min-width:0; }
.contact-heading h2 { margin:18px 0 0; font-size:clamp(34px,3.1vw,46px); line-height:1.06; letter-spacing:-.065em; }
.contact-copy { padding-top:30px; }
.contact-copy p { max-width:325px; margin:0; color:#b9c1cd; font:400 14px/1.8 "Space Grotesk",sans-serif; }
.contact-button { min-height:44px; margin-top:22px; font-size:11px; }
.contact-button span { width:40px; height:40px; }
.contact-details { display:grid; gap:8px; padding-top:0; }
.contact-details a { min-height:58px; height:auto; }
.contact-details a + a { margin-top:0; }
.contact-details span { min-width:0; }
.contact-details b { overflow-wrap:anywhere; }
.globe-wire { left:65px; bottom:-200px; }
.footer-line { position:absolute; z-index:1; bottom:19px; left:max(28px,calc((100vw - 1220px) / 2)); right:max(28px,calc((100vw - 1220px) / 2)); margin:0; padding:0; border:0; }
@media (max-width:800px){.contact{margin-top:72px;padding:45px 26px}.contact-panel{width:min(100%,690px);grid-template-columns:1fr 1fr;column-gap:36px;row-gap:30px}.contact-copy{padding-top:0}.contact-details{grid-column:1 / -1;grid-template-columns:repeat(3,1fr)}.contact-details a{min-height:70px}.footer-line{left:26px;right:26px}}
@media (max-width:520px){.contact{margin-top:52px;padding:42px 18px;min-height:0}.contact-panel{width:100%;grid-template-columns:1fr;gap:26px}.contact-heading h2{font-size:32px}.contact-copy p{max-width:35rem;font-size:14px}.contact-details{grid-column:auto;grid-template-columns:1fr;gap:8px}.contact-details a{min-height:58px}.footer-line{position:relative;left:auto;right:auto;bottom:auto;margin-top:30px;font-size:7px}.globe-wire{left:-20px;bottom:-218px}}

/* Enterprise AI website project */
.ai-website-art { background:#0d1830; }
.ai-website-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.travel-app-art { background:#f8f2ed; }
.travel-app-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.orbwork-art { background:#edf0ff; }
.orbwork-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:left center; }
.work-card:first-child .project-caption > div { flex:1; min-width:0; padding-right:24px; }
.work-card:first-child .project-caption p { max-width:none; }
.work-card:nth-child(2) .project-caption > div { flex:1; min-width:0; padding-right:24px; }
.work-card-link-target { display:block; height:100%; color:inherit; text-decoration:none; }
.work-card-link-target:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
.service-card-link .service-card-overlay-link { position:absolute; z-index:2; inset:0; display:block; width:auto; height:auto; padding:0; border:0; border-radius:inherit; background:transparent; color:transparent; }
.service-card-link .service-card-overlay-link:focus-visible { outline:2px solid var(--lime); outline-offset:-4px; }
.service-card-link > :not(.service-card-overlay-link) { position:relative; z-index:1; pointer-events:none; }
.service-card-link > a:not(.service-card-overlay-link) { position:absolute; right:24px; bottom:24px; }
.service-card-link:hover > a:not(.service-card-overlay-link) { color:#dce4e8; background:rgba(255,255,255,.045); transform:none; }
@media (max-width:520px) { .service-card-link > a:not(.service-card-overlay-link) { right:20px; bottom:20px; } }

/* Keep the card-wide link invisible; only the existing arrow gets hover feedback. */
.service-card-link > a.service-card-overlay-link { position:absolute; z-index:2; inset:0; width:auto; height:auto; padding:0; border:0; border-radius:inherit; background:transparent; color:transparent; transform:none; }
.service-card-link:hover > a.service-card-overlay-link { background:transparent; color:transparent; transform:none; }
.service-card-link > a:not(.service-card-overlay-link) { position:absolute; z-index:3; right:24px; bottom:24px; width:40px; height:40px; padding:0; pointer-events:none; }
.service-card-link:hover > a:not(.service-card-overlay-link) { color:#10150d; background:var(--lime); transform:translateX(3px); }
@media (max-width:520px) { .service-card-link > a:not(.service-card-overlay-link) { right:20px; bottom:20px; } }

/* Project detail pages */
.project-detail-page { min-height:100vh; background:#0e1016; }
.project-detail { width:min(1220px,calc(100% - 56px)); margin:0 auto; padding:110px 0 72px; }
.project-detail-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:28px; }
.project-detail-heading span { color:var(--lime); font:600 10px/1 "Space Grotesk",sans-serif; letter-spacing:.13em; }
.project-detail-heading h1 { margin:12px 0 0; color:#f5f7fb; font:700 clamp(34px,5vw,62px)/.95 Archivo,sans-serif; letter-spacing:-.06em; }
.project-back { position:fixed; right:max(24px,env(safe-area-inset-right)); bottom:max(24px,env(safe-area-inset-bottom)); z-index:30; display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 18px; border:1px solid rgba(185,246,109,.38); border-radius:999px; color:#eef5e8; background:rgba(14,16,22,.9); box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(14px); font:600 12px/1 "Space Grotesk",sans-serif; letter-spacing:.04em; transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease; }
.project-back:hover { border-color:var(--lime); color:#11170e; background:var(--lime); transform:translateY(-2px); }
.project-back:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.project-to-top { position:fixed; right:max(24px,env(safe-area-inset-right)); bottom:calc(max(24px,env(safe-area-inset-bottom)) + 60px); z-index:30; display:grid; place-items:center; width:48px; height:48px; padding:0; border:0; border-radius:50%; color:#12151a; background:#f8fafc; box-shadow:0 8px 20px rgba(0,0,0,.22); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px) scale(.92); transition:opacity .2s ease,visibility .2s ease,transform .2s ease,background .2s ease,box-shadow .2s ease; }
.project-to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.project-to-top:hover { background:var(--lime); box-shadow:0 10px 24px rgba(185,246,109,.24); transform:translateY(-2px) scale(1); }
.project-to-top:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.project-to-top svg { width:23px; height:23px; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.project-long-image { margin:0; overflow:hidden; border:1px solid rgba(222,227,246,.12); border-radius:16px; background:#171a20; box-shadow:0 24px 60px rgba(0,0,0,.28); }
.project-long-image img { display:block; width:100%; height:auto; }
.project-long-image--segmented img:not(:first-child) { margin-top:-1px; }
.segment-load-status { display:flex; min-height:76px; align-items:center; justify-content:center; gap:10px; padding:0 18px; color:#aeb7c3; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(185,246,109,.04)); font:500 11px/1.4 "Space Grotesk",sans-serif; letter-spacing:.03em; text-align:center; }
.segment-load-status[hidden] { display:none; }
.segment-load-status i { width:14px; height:14px; flex:0 0 auto; border:2px solid rgba(185,246,109,.2); border-top-color:var(--lime); border-radius:50%; animation:segment-load-spin .8s linear infinite; }
@keyframes segment-load-spin { to { transform:rotate(360deg); } }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.design-tabs-section { margin-top:10px; }
.design-tabs { display:flex; gap:10px; padding:6px; overflow-x:auto; border:1px solid rgba(222,227,246,.1); border-radius:16px; background:rgba(255,255,255,.04); scrollbar-width:none; }
.design-tabs::-webkit-scrollbar { display:none; }
.design-tab { flex:0 0 auto; min-height:46px; padding:0 18px; border:1px solid transparent; border-radius:11px; color:#b7c0cc; background:transparent; font:600 12px/1 "Space Grotesk",sans-serif; letter-spacing:.02em; white-space:nowrap; cursor:pointer; transition:color .2s ease,background .2s ease,border-color .2s ease; }
.design-tab:hover { color:#f5f7fa; background:rgba(255,255,255,.05); }
.design-tab.is-active { color:#131810; border-color:rgba(185,246,109,.5); background:var(--lime); box-shadow:0 6px 18px rgba(185,246,109,.16); }
.design-tab:focus-visible { outline:2px solid #f5f7fa; outline-offset:3px; }
.design-panels { margin-top:18px; }
.design-panel { animation:design-panel-in .26s ease both; }
.design-detail-image { display:block; width:100%; height:auto; overflow:hidden; border:1px solid rgba(222,227,246,.12); border-radius:16px; background:#171a20; box-shadow:0 24px 60px rgba(0,0,0,.28); }
.design-placeholder { display:grid; min-height:420px; place-items:center; align-content:center; padding:40px; border:1px dashed rgba(185,246,109,.26); border-radius:16px; background:radial-gradient(circle at 50% 38%,rgba(185,246,109,.09),transparent 35%),rgba(255,255,255,.025); text-align:center; }
.design-placeholder span { color:var(--lime); font:600 11px/1 "Space Grotesk",sans-serif; letter-spacing:.15em; }
.design-placeholder strong { margin-top:14px; color:#f4f6f9; font:700 clamp(24px,3vw,38px)/1 Archivo,sans-serif; letter-spacing:-.04em; }
.design-placeholder p { margin:12px 0 0; color:#aeb7c3; font:400 13px/1.5 "Space Grotesk",sans-serif; }
@keyframes design-panel-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:520px) { .design-tabs { gap:8px; margin-right:-18px; padding:5px; border-radius:14px 0 0 14px; }.design-tab { min-height:44px; padding:0 15px; font-size:11px; }.design-placeholder { min-height:320px; padding:30px 18px; border-radius:12px; }.design-detail-image { border-radius:10px; } }
@media (max-width:800px) { .project-detail { width:min(100% - 52px,690px); padding-top:102px; } }
@media (max-width:520px) { .project-detail { width:calc(100% - 36px); padding:96px 0 42px; }.project-detail-heading { display:block; margin-bottom:20px; }.project-back { right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); min-height:48px; padding:0 16px; font-size:12px; }.project-to-top { right:max(18px,env(safe-area-inset-right)); bottom:calc(max(18px,env(safe-area-inset-bottom)) + 58px); width:46px; height:46px; }.project-detail-heading h1 { font-size:40px; }.project-long-image { border-radius:10px; }.segment-load-status { min-height:68px; padding:0 14px; font-size:10px; } }
.work-card:nth-child(2) .project-caption p { max-width:none; }
.work-card:nth-child(3) .project-caption > div { flex:1; min-width:0; padding-right:24px; }
.work-card:nth-child(3) .project-caption p { max-width:none; }

/* Tool stack */
.tools-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; margin-top:28px; }
.tool-card { min-height:116px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:18px 10px; border:1px solid rgba(222,227,246,.08); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); box-shadow:-7px -7px 16px rgba(255,255,255,.018),9px 11px 22px rgba(0,0,0,.2),inset 1px 1px rgba(255,255,255,.055); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tool-card:hover { transform:translateY(-4px); border-color:rgba(185,246,109,.24); box-shadow:-7px -7px 16px rgba(255,255,255,.025),13px 16px 28px rgba(0,0,0,.28),inset 1px 1px rgba(255,255,255,.075); }
.tool-card h3 { margin:0; color:#dce2e9; font:600 11px/1.2 "Space Grotesk",sans-serif; letter-spacing:.01em; text-align:center; white-space:nowrap; }
.tool-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#c9ff82; background:linear-gradient(145deg,rgba(185,246,109,.18),rgba(185,246,109,.045)); box-shadow:inset 1px 1px rgba(255,255,255,.14),inset -2px -2px 5px rgba(0,0,0,.15),0 5px 12px rgba(0,0,0,.16); font:700 12px/1 Archivo,sans-serif; letter-spacing:-.06em; }
.tool-card img.tool-icon { display:block; padding:0; object-fit:contain; background:transparent; box-shadow:none; color:initial; font:inherit; }
.tool-figma { color:#ff866c; background:linear-gradient(145deg,rgba(255,115,91,.2),rgba(255,177,75,.055)); }.tool-sketch { color:#ffd166; background:linear-gradient(145deg,rgba(255,209,102,.2),rgba(255,145,77,.055)); }.tool-modao { color:#8cdbbe; background:linear-gradient(145deg,rgba(115,213,174,.19),rgba(97,206,230,.055)); }.tool-codex { color:#c9ff82; }.tool-trae { color:#a7d6ff; background:linear-gradient(145deg,rgba(112,182,255,.2),rgba(103,222,210,.055)); }.tool-workbuddy { color:#ffe08a; background:linear-gradient(145deg,rgba(255,212,97,.19),rgba(194,246,115,.055)); }.tool-photoshop { color:#8cc8ff; background:linear-gradient(145deg,rgba(76,152,255,.22),rgba(89,209,255,.06)); }.tool-illustrator { color:#ffae5d; background:linear-gradient(145deg,rgba(255,130,61,.22),rgba(255,201,93,.06)); }
@media (max-width:800px){.tools-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.tool-card{min-height:106px}}
@media (max-width:520px){.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}.tool-card{min-height:104px}.tool-card h3{font-size:12px}}

/* Service cards — layered visual accents */
.service-card { min-height:262px; overflow:hidden; isolation:isolate; contain:paint; transform:translateZ(0); padding:28px; border-radius:16px; border-color:rgba(222,227,246,.12); background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.025)); box-shadow:inset 0 1px rgba(255,255,255,.075),0 18px 38px rgba(0,0,0,.13); -webkit-backdrop-filter:none; backdrop-filter:none; }
.service-card > * { position:relative; z-index:1; }
.service-card::before { display:none; }
.service-card::after { position:absolute; z-index:0; width:142px; height:142px; right:-62px; top:74px; border:1px solid rgba(185,246,109,.18); border-radius:50%; box-shadow:0 0 0 21px rgba(185,246,109,.025),0 0 46px rgba(185,246,109,.055); }
.service-card:nth-child(2)::before { content:"02"; }.service-card:nth-child(2)::after { border-color:rgba(126,220,240,.2); box-shadow:0 0 0 21px rgba(126,220,240,.025),0 0 46px rgba(126,220,240,.055); }.service-card:nth-child(3)::before { content:"03"; }.service-card:nth-child(3)::after { border-color:rgba(130,214,176,.2); box-shadow:0 0 0 21px rgba(130,214,176,.025),0 0 46px rgba(130,214,176,.055); }.service-card:nth-child(4)::before { content:"04"; }.service-card:nth-child(4)::after { border-color:rgba(255,189,102,.22); box-shadow:0 0 0 21px rgba(255,189,102,.025),0 0 46px rgba(255,189,102,.05); }
.service-card:nth-child(3) { display:block; visibility:visible; opacity:1; }
.service-card .card-top svg { width:42px; height:42px; padding:10px; border:1px solid rgba(222,227,246,.12); border-radius:13px; color:#ecf0f3; background:rgba(255,255,255,.045); box-shadow:inset 0 1px rgba(255,255,255,.09),0 7px 16px rgba(0,0,0,.14); }
.service-card .card-top b { min-width:42px; padding:7px 8px; border:1px solid rgba(185,246,109,.22); border-radius:999px; color:var(--lime); background:rgba(185,246,109,.07); font-size:13px; text-align:center; }
.service-card h3 { margin:42px 0 11px; color:#f4f7fa; font-size:15px; letter-spacing:.01em; }
.service-card h3::after { display:block; width:28px; height:2px; margin-top:12px; content:""; background:linear-gradient(90deg,var(--lime),transparent); }
.service-card p { width:100%; max-width:none; margin-right:0; color:#b6bfca; font-size:12px; line-height:1.7; }
.service-card a { right:24px; bottom:24px; display:grid; width:40px; height:40px; place-items:center; border:1px solid rgba(222,227,246,.13); border-radius:50%; color:#dce4e8; background:rgba(255,255,255,.045); transition:transform .18s ease, color .18s ease, background .18s ease; }
.service-card a svg { width:18px; }.service-card:hover a { color:#10150d; background:var(--lime); transform:translateX(3px); }.service-card:hover { border-color:rgba(185,246,109,.28); background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(185,246,109,.055)); }
@media (max-width:520px){.service-card{min-height:218px;padding:23px}.service-card h3{margin-top:31px}.service-card::before{top:33px;font-size:94px}.service-card::after{top:58px}.service-card a{right:20px;bottom:20px}}

/* Page entrance and scroll reveal */
.topbar,.commerce-copy,.commerce-dots,.commerce-visual { transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1); }
.topbar { animation:hero-drop .72s cubic-bezier(.22,1,.36,1) both; }
.commerce-copy { animation:none; }
.commerce-welcome,.commerce-intro,.commerce-year,.commerce-title { animation:hero-rise .72s cubic-bezier(.22,1,.36,1) both; }
.commerce-welcome { animation-delay:.12s; }.commerce-intro { animation-delay:.24s; }.commerce-year { animation-delay:.36s; }.commerce-title { animation-delay:.48s; }
.commerce-dots { animation:hero-slide .6s cubic-bezier(.22,1,.36,1) .32s both; }
.commerce-visual { animation:hero-visual .86s cubic-bezier(.22,1,.36,1) .12s both; }
.motion-reveal { opacity:0; transform:translateY(22px); }
.motion-reveal.is-visible { animation:section-reveal .62s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms) both; }
.service-card.motion-reveal.is-visible:hover { transform:translateY(-5px); }
.work-card.motion-reveal.is-visible:hover { transform:translateY(-4px); }
.tool-card.motion-reveal.is-visible:hover { transform:translateY(-4px); }
@keyframes hero-drop { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:translateY(0); } }
@keyframes hero-rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes hero-slide { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
@keyframes hero-visual { from { opacity:0; transform:translateX(22px) scale(1.015); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes section-reveal { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }

/* Floating capsule navigation */
.topbar { position:sticky; top:14px; width:min(1220px,calc(100% - 56px)); height:66px; margin:14px auto -80px; padding:0 22px; border:1px solid rgba(224,228,246,.13); border-radius:999px; background:rgba(14,16,22,.84); box-shadow:inset 0 1px rgba(255,255,255,.07),0 15px 36px rgba(0,0,0,.2); backdrop-filter:blur(20px); }
.topbar .brand { gap:14px; font-size:10px; letter-spacing:2.6px; }
.topbar .brand-mark,.topbar .brand-mark svg { width:34px; height:34px; }
.topbar .site-tabs { position:absolute; left:50%; transform:translateX(-50%); gap:3px; padding:4px; border-color:rgba(224,228,246,.11); background:rgba(255,255,255,.045); box-shadow:inset 0 1px rgba(255,255,255,.07); }
.topbar .site-tabs a { min-width:67px; padding:9px 14px; }
.topbar .eyebrow { display:flex; align-items:center; font-size:9px; letter-spacing:2.2px; }
@media (max-width:800px) { .topbar { width:calc(100% - 32px); top:10px; margin-top:10px; margin-bottom:-76px; padding:0 18px; }.topbar .brand { font-size:9px; letter-spacing:1.8px; }.topbar .site-tabs a { min-width:56px; padding:8px 10px; } }
@media (max-width:520px) { .topbar { position:sticky; top:10px; width:calc(100% - 24px); height:auto; min-height:62px; margin-top:10px; margin-bottom:-72px; padding:9px 12px; border-radius:22px; }.topbar .brand { font-size:8px; }.topbar .site-tabs { position:static; width:auto; margin-left:auto; transform:none; }.topbar .site-tabs a { min-width:0; padding:8px 9px; font-size:9px; }.topbar .eyebrow { display:none; }.topbar .brand-mark,.topbar .brand-mark svg { width:28px; height:28px; } }

/* Project deck — a lightweight, native implementation of the supplied carousel effect. */
.project-deck { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); overflow:hidden; }
.project-deck .section-kicker,.project-deck .deck-hint { width:min(1220px,calc(100% - 56px)); margin-right:auto; margin-left:auto; }
.deck-stage { position:relative; margin-top:28px; min-height:390px; overflow:hidden; outline:none; background:transparent; }
.deck-stage > #originkit-deck-root { width:100%; height:390px; }
.deck-stage:focus-visible { outline:2px solid rgba(185,246,109,.42); outline-offset:4px; }
.deck-stage.is-dragging { cursor:grabbing; }
.deck-track { position:absolute; left:50%; top:50%; display:flex; align-items:center; gap:22px; width:max-content; transform:translate3d(calc(-50% + var(--deck-offset, 0px)), -50%, 0); will-change:transform; }
.deck-card { position:relative; flex:0 0 248px; height:298px; overflow:hidden; border:1px solid rgba(232,238,250,.15); border-radius:14px; background:#171c24; box-shadow:0 18px 34px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.11); transform:perspective(900px) rotateY(var(--deck-tilt, 0deg)); transition:transform .38s cubic-bezier(.22,1,.36,1),filter .38s ease; }
.deck-card:hover { transform:perspective(900px) translateY(-8px) rotateY(0deg); filter:brightness(1.08); }
.deck-card img { width:100%; height:100%; display:block; object-fit:cover; }
.deck-card img:not(.is-decoded) { opacity:0; }
.deck-card img.is-decoded { opacity:1; transition:opacity .16s ease-out; }
.deck-card::after { content:""; position:absolute; z-index:1; inset:48% 0 0; background:linear-gradient(transparent,rgba(4,7,11,.9)); pointer-events:none; }
.deck-card > div:last-child { position:absolute; z-index:2; right:18px; bottom:17px; left:18px; }
.deck-card span { display:block; margin-bottom:7px; color:rgba(231,237,245,.68); font:600 9px/1 "Space Grotesk",sans-serif; letter-spacing:.11em; text-transform:uppercase; }
.deck-card h3 { margin:0; color:#f6f8fb; font:600 17px/1.15 Archivo,sans-serif; letter-spacing:-.04em; }
.deck-type-art { position:relative; display:grid; height:100%; place-items:center; overflow:hidden; background:radial-gradient(circle at 70% 20%,rgba(185,246,109,.24),transparent 28%),linear-gradient(145deg,#202834,#10151c); }
.deck-type-art::before,.deck-type-art::after { content:""; position:absolute; width:180px; height:180px; border:1px solid rgba(185,246,109,.3); border-radius:50%; }.deck-type-art::before { right:-94px; top:-62px; }.deck-type-art::after { left:-104px; bottom:-96px; border-color:rgba(191,209,233,.18); }
.deck-type-art > span { position:relative; z-index:1; margin:0; color:#f4f7f8; font:800 31px/.86 Archivo,sans-serif; letter-spacing:-.08em; }.deck-type-art em { color:var(--lime); font-style:normal; }
.deck-card--lime .deck-type-art { background:radial-gradient(circle at 22% 25%,rgba(255,255,255,.42),transparent 22%),linear-gradient(145deg,#b9f66d,#7ebd47); }.deck-card--lime .deck-type-art > span { color:#14200c; }.deck-card--lime .deck-type-art em { color:#f7fff0; }
.deck-hint { display:flex; justify-content:center; gap:9px; margin:16px 0 0; color:#98a3b1; font:500 10px/1.5 "Space Grotesk",sans-serif; letter-spacing:.05em; }.deck-hint span { color:var(--lime); font-size:17px; line-height:.8; }
.project-deck .deck-track { --deck-offset:0px; }
.project-deck.is-dealt .deck-card { animation:deck-deal .68s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--deck-index) * 90ms); }
.project-deck.is-dealt .deck-card:nth-child(odd) { --deck-tilt:-2deg; }.project-deck.is-dealt .deck-card:nth-child(even) { --deck-tilt:2deg; }
@keyframes deck-deal { from { opacity:0; transform:translate3d(calc(var(--deck-index) * -12px),30px,0) rotate(calc(var(--deck-index) * 2deg)) scale(.82); } to { opacity:1; transform:perspective(900px) rotateY(var(--deck-tilt,0deg)) scale(1); } }
@media (max-width:800px) { .deck-stage { min-height:338px; }.deck-stage > #originkit-deck-root { height:338px; }.deck-card { flex-basis:214px; height:254px; }.deck-type-art > span { font-size:27px; } }
@media (max-width:520px) { .project-deck { padding-right:0; padding-left:0; }.project-deck .section-kicker,.project-deck .deck-hint { width:auto; margin-right:18px; margin-left:18px; }.deck-stage { min-height:290px; margin-top:22px; }.deck-stage > #originkit-deck-root { height:290px; }.deck-track { gap:14px; }.deck-card { flex-basis:184px; height:220px; border-radius:12px; }.deck-card > div:last-child { right:14px; bottom:14px; left:14px; }.deck-card h3 { font-size:14px; }.deck-card span { font-size:8px; }.deck-type-art > span { font-size:23px; }.deck-hint { justify-content:flex-start; font-size:9px; } }
@media (prefers-reduced-motion:reduce) { .project-deck.is-dealt .deck-card { animation:none; } .deck-card { transition:none; } }

/* Compact single-row navigation on phones and tablets. */
@media (max-width:800px) {
  .topbar {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    height:62px;
    min-height:62px;
    padding:7px 12px;
    border-radius:18px;
  }
  .topbar .brand { flex:0 0 auto; gap:0; }
  .topbar .brand > span:last-child { display:none; }
  .topbar .brand-mark,.topbar .brand-mark svg { width:30px; height:30px; }
  .topbar .site-tabs {
    position:static;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    flex:1 1 auto;
    width:auto;
    max-width:270px;
    margin-left:auto;
    padding:3px;
    transform:none;
  }
  .topbar .site-tabs a {
    min-width:0;
    min-height:44px;
    padding:0 8px;
    display:grid;
    place-items:center;
    white-space:nowrap;
    font-size:11px;
    line-height:1;
  }
  .topbar .eyebrow { display:none; }
}
@media (max-width:380px) {
  .topbar { gap:8px; padding:7px 9px; }
  .topbar .site-tabs a { padding:0 5px; font-size:10px; }
}

/* Keep the complete hero composition visible within a single viewport. */
.hero-ecommerce .commerce-copy { transform:translateY(clamp(-68px,-4.4vw,-48px)); }
@media (max-width:520px) {
  .hero-ecommerce .commerce-copy { transform:translateY(-32px); }
}