/* WEB JP — bilingual static portfolio. Styles 2026 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#080b12;--bg2:#0d121c;--surface:#121924;--surface2:#171e2b;--border:rgba(205,232,242,.13);--ink:#f4f5f5;--muted:#a8b0bc;--cyan:#00d9ef;--magenta:#ba269b;--serif:'Space Grotesk',Arial,sans-serif;--body:'DM Sans',Arial,sans-serif;--wrap:1180px;--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--body);overflow-x:hidden}body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E")}
::selection{background:var(--cyan);color:#071017}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}img{display:block;max-width:100%}svg{display:block}h1,h2,h3,p,figure{margin:0}.container{max-width:calc(var(--wrap) + 64px);margin-inline:auto;padding-inline:32px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:12px}.eyebrow::before{content:"";width:26px;height:1px;background:currentColor}.display{font:600 clamp(42px,5.9vw,80px)/1.04 var(--serif);letter-spacing:-.067em}.section-heading{font:600 clamp(36px,4vw,58px)/1.12 var(--serif);letter-spacing:-.058em;max-width:750px}.gradient-text{background:linear-gradient(105deg,var(--cyan) 5%,#84e2f2 45%,#cc57bb 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.muted{color:var(--muted)}.section{padding-block:116px}.section-top{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:44px}.section-top .eyebrow{margin-bottom:17px}.section-desc{max-width:400px;color:var(--muted);line-height:1.85}.pill{border:1px solid var(--border);border-radius:100px;padding:8px 15px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#c0cbd5;white-space:nowrap}.button{display:inline-flex;justify-content:center;align-items:center;gap:11px;min-height:52px;padding:12px 23px;border:1px solid transparent;border-radius:8px;background:var(--cyan);color:#031216;font:700 13px/1.1 var(--body);transition:transform .22s,background .22s,border .22s;white-space:nowrap}.button:hover{transform:translateY(-3px);background:#6cf4fc}.button svg{width:17px;height:17px}.button--outline{border-color:rgba(220,240,245,.25);background:rgba(255,255,255,.025);color:var(--ink)}.button--outline:hover{background:rgba(255,255,255,.09);border-color:var(--cyan)}.button--dark{background:#f3f7f7;color:#0b111c}.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px}.text-link:hover{color:var(--cyan)}.text-link svg{width:15px;height:15px}.skip-link{position:absolute;z-index:1000;top:-100px;left:20px;padding:12px;background:var(--cyan);color:#000}.skip-link:focus{top:20px}
/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(8,11,18,.74);border-bottom:1px solid rgba(255,255,255,.055);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);transition:background .2s}.site-header.scrolled{background:rgba(8,11,18,.93)}.nav-wrap{max-width:calc(var(--wrap) + 64px);margin:auto;min-height:82px;padding:0 32px;display:flex;justify-content:space-between;align-items:center;gap:22px}.brand{display:flex;align-items:center;flex:none}.brand img{width:144px;height:auto}.nav-items{display:flex;align-items:center;gap:31px}.nav-items>a{font-size:12px;font-weight:700;color:#c9d1db;transition:color .2s}.nav-items>a:hover{color:var(--cyan)}.nav-right{display:flex;align-items:center;gap:16px}.lang-switch{display:flex;align-items:center;gap:7px;padding:4px;border:1px solid var(--border);border-radius:50px;font-size:11px;font-weight:700}.lang-switch a{border-radius:50px;padding:5px 9px;color:#8996a5}.lang-switch a[aria-current="page"]{background:rgba(0,217,239,.15);color:var(--cyan)}.nav-cta{font-size:12px;padding-inline:15px;min-height:43px}.menu-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--ink)}.menu-toggle svg{width:22px;height:22px}
/* Hero */
.hero{position:relative;padding-top:145px;min-height:850px;overflow:hidden;background:radial-gradient(ellipse 43% 53% at 84% 43%,rgba(18,62,91,.23),transparent 82%),linear-gradient(180deg,#080b12,#0a1019)}.hero::before{content:"";position:absolute;width:630px;height:630px;right:-185px;top:90px;background:radial-gradient(circle,rgba(0,217,239,.16),transparent 65%);pointer-events:none}.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,217,239,.35),transparent)}.hero-layout{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:0;min-height:635px}.hero-copy{position:relative;z-index:2;padding-bottom:38px}.hero-kicker{display:flex;align-items:center;gap:11px;font-size:11px;letter-spacing:.19em;text-transform:uppercase;font-weight:700;color:#d7e2e9;margin-bottom:29px}.hero-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(0,217,239,.11),0 0 25px rgba(0,217,239,.7)}.hero h1{max-width:750px;font:600 clamp(54px,6.9vw,96px)/.99 var(--serif);letter-spacing:-.078em;margin-bottom:30px}.hero h1 em{font-style:normal}.hero-lead{max-width:490px;font-size:17px;line-height:1.85;color:#adb9c7;margin-bottom:36px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.hero-micro{margin-top:43px;display:flex;gap:14px;align-items:center;color:#9ca9b4;font-size:12px;letter-spacing:.04em}.hero-micro .line{height:1px;width:30px;background:var(--cyan)}.hero-art{position:relative;height:660px;align-self:end;isolation:isolate}.hero-art::before{content:"";position:absolute;width:83%;aspect-ratio:1;top:9%;left:12%;border:1px solid rgba(0,217,239,.2);border-radius:50%;box-shadow:inset 0 0 75px rgba(0,217,239,.025),0 0 105px rgba(0,217,239,.035)}.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,#0a1019 99%);pointer-events:none;z-index:2}.orbit{position:absolute;inset:13% 6% 12% 3%;border:1px solid rgba(172,62,173,.1);border-radius:50%;transform:rotate(-28deg);z-index:-1}.hero-photo{position:absolute;bottom:-40px;left:-9%;width:115%;height:105%;object-fit:contain;object-position:center bottom;filter:contrast(1.04) saturate(.93);z-index:1}.hero-vertical{position:absolute;right:2px;top:41%;writing-mode:vertical-rl;font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:#96acbc;z-index:3}.hero-label{position:absolute;bottom:125px;right:-7px;z-index:4;border:1px solid rgba(237,255,255,.18);background:rgba(9,14,22,.72);backdrop-filter:blur(11px);padding:13px 19px;border-radius:5px;line-height:1.3}.hero-label strong{display:block;font-size:13px;letter-spacing:.04em}.hero-label small{display:block;color:var(--cyan);font-size:10px;letter-spacing:.13em;margin-top:6px}.hero-index{position:absolute;left:1%;top:12%;color:rgba(0,217,239,.55);font:700 11px var(--serif);letter-spacing:.24em;z-index:3}
/* signal row */
.capabilities{border-bottom:1px solid var(--border);background:#0c111b}.capabilities-inner{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px}.capabilities span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#b9c7d2}.capabilities .star{color:var(--cyan);font-size:17px}
/* Services */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.service-card{position:relative;padding:30px 25px;min-height:330px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(145deg,#121925,#0d121b);transition:transform .25s,border .25s,background .25s;overflow:hidden}.service-card:hover{transform:translateY(-6px);border-color:rgba(0,217,239,.45)}.service-card::after{content:"";position:absolute;width:120px;height:120px;right:-90px;top:-90px;border-radius:50%;background:var(--cyan);filter:blur(80px);opacity:.3;transition:top .25s,right .25s}.service-card:hover::after{top:-40px;right:-40px}.service-number{font-size:11px;font-weight:700;color:#6c8798;letter-spacing:.15em}.service-icon{width:54px;height:54px;border:1px solid rgba(0,217,239,.2);background:rgba(0,217,239,.055);display:grid;place-items:center;border-radius:11px;margin:31px 0 30px;color:var(--cyan)}.service-icon svg{width:23px;height:23px;stroke-width:1.6}.service-card h3{font:600 20px/1.26 var(--serif);letter-spacing:-.035em;margin-bottom:12px}.service-card p{font-size:13px;color:#a7b4c1;line-height:1.85}
/* Portfolio */
.work{background:#0a1019;border-top:1px solid rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.035)}.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.project-card{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:#111824;transition:transform .25s,border .25s}.project-card:hover{transform:translateY(-4px);border-color:rgba(0,217,239,.34)}.project-card.featured{grid-column:1/-1}.project-preview{min-height:318px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;padding:35px}.project-card.featured .project-preview{min-height:405px}.project-preview .browser{width:min(100%,460px);border:1px solid rgba(255,255,255,.2);border-radius:8px;overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.35);transform:rotate(-4deg) translateY(17px);transition:transform .45s}.project-card:hover .browser{transform:rotate(-1deg) translateY(1px) scale(1.025)}.featured .browser{width:min(80%,640px);transform:rotate(-3deg) translateY(25px)}.featured:hover .browser{transform:rotate(-1deg) translateY(8px)}.browser-bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 12px;background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.14)}.browser-bar i{display:block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4)}.browser-inner{padding:23px 24px 28px;min-height:217px}.browser-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:35px}.browser-brand{font-weight:700;font-size:12px;letter-spacing:.05em}.browser-navline{font-size:8px;letter-spacing:.16em;opacity:.65}.browser-h1{font:600 clamp(25px,3vw,40px)/1.12 var(--serif);letter-spacing:-.058em;max-width:390px}.browser-sub{font-size:10px;line-height:1.6;max-width:250px;margin-top:14px;opacity:.72}.browser-cta{display:inline-block;padding:7px 11px;border-radius:3px;margin-top:16px;font-size:8px;font-weight:700}.preview-indebo{background:linear-gradient(135deg,#5d594f,#a9a090 53%,#655f54)}.preview-indebo .browser-inner{background:linear-gradient(90deg,rgba(17,19,22,.98) 0%,rgba(17,19,22,.82) 54%,rgba(17,19,22,.16) 100%),radial-gradient(ellipse at 85% 70%,#bcaf98,#4a453c);color:#fbf6eb}.preview-indebo .browser-cta{background:#bca58d;color:#16140f}.preview-mlc{background:linear-gradient(135deg,#283a4a,#141a24 70%)}.preview-mlc .browser-inner{background:radial-gradient(circle at 100% 100%,#324451 3%,#0a1824 70%);color:#edeef1}.preview-mlc .browser-cta{background:#c2a977;color:#111}.preview-s1{background:linear-gradient(135deg,#251913,#4c3422 50%,#111821)}.preview-s1 .browser-inner{background:radial-gradient(circle at 90% 80%,rgba(193,108,39,.4),transparent 51%),#0f1319;color:#eef2f6}.preview-s1 .browser-cta{background:#d47d3e;color:#fff}.preview-s2{background:linear-gradient(135deg,#ded7ce,#8e8478)}.preview-s2 .browser-inner{background:#ede7df;color:#292e31}.preview-s2 .browser-navline{color:#655f56}.preview-s2 .browser-cta{background:#916b36;color:#fff}.preview-akd{background:linear-gradient(135deg,#001f2c,#06262e 45%,#022029)}.preview-akd .browser-inner{background:linear-gradient(90deg,#001019 0%,#05202b 72%,#0a3741);color:#effcff}.preview-akd .browser-h1 b{color:#00e3ef}.preview-akd .browser-cta{background:#00d5ec;color:#00151d}.preview-label{position:absolute;left:28px;top:25px;padding:6px 10px;border:1px solid rgba(255,255,255,.25);color:#fff;background:rgba(5,9,13,.18);font-size:9px;letter-spacing:.15em;text-transform:uppercase;font-weight:700}.project-info{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:24px 28px 27px}.project-info small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-weight:700}.project-info h3{font:600 25px var(--serif);letter-spacing:-.04em;margin:7px 0 5px}.project-info p{color:#acbac5;font-size:13px;line-height:1.65;max-width:570px}.project-visit{flex:none;width:45px;height:45px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;transition:background .2s,transform .2s}.project-visit svg{width:18px;height:18px}.project-card:hover .project-visit{background:var(--cyan);color:#03151c;transform:rotate(45deg)}.portfolio-footnote{margin-top:18px;color:#8c9aa7;font-size:11px;line-height:1.8}
/* About */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:82px}.about-image{min-height:560px;position:relative;border-radius:16px;background:radial-gradient(circle at 60% 35%,rgba(130,55,97,.14),transparent 52%),#101824;border:1px solid var(--border);overflow:hidden}.about-image img{position:absolute;bottom:-23%;left:0;width:100%;height:123%;object-fit:contain;object-position:center bottom;filter:contrast(1.04)}.about-image::after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#101824)}.about-image .image-note{position:absolute;left:22px;bottom:23px;z-index:2;font:700 10px var(--body);letter-spacing:.2em;color:var(--cyan);text-transform:uppercase}.about-copy .eyebrow{margin-bottom:20px}.about-copy h2{margin-bottom:25px}.about-copy p{color:var(--muted);line-height:1.92;margin-bottom:17px}.about-tags{display:flex;gap:9px;flex-wrap:wrap;margin:28px 0 35px}.about-tags span{padding:8px 13px;border:1px solid var(--border);border-radius:30px;font-size:11px;color:#c8d0d9}
/* Process */
.process{background:linear-gradient(180deg,#0b111b,#080b12)}.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;border-top:1px solid var(--border);padding-top:36px}.step{position:relative;padding-right:24px}.step .index{font:600 47px/1 var(--serif);letter-spacing:-.06em;color:rgba(0,217,239,.43);margin-bottom:22px}.step h3{font:600 23px var(--serif);letter-spacing:-.04em;margin-bottom:11px}.step p{font-size:14px;color:var(--muted);max-width:320px}
/* CTA/contact */
.contact{position:relative;background:radial-gradient(ellipse at 75% 30%,rgba(144,34,122,.16),transparent 42%),radial-gradient(ellipse at 10% 70%,rgba(0,217,239,.11),transparent 38%),#0c111b;border-top:1px solid var(--border);padding-bottom:70px}.contact-header{text-align:center;max-width:780px;margin:0 auto 60px}.contact-header .eyebrow{margin-bottom:21px}.contact-header .section-heading{margin:auto}.contact-header p{color:#b2bdca;margin:20px auto 0;max-width:600px}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px}.contact-blurb{padding-top:20px}.contact-blurb h3{font:600 28px var(--serif);letter-spacing:-.045em;margin-bottom:20px}.contact-blurb p{color:#a6b3c0;margin-bottom:24px}.contact-method{display:flex;align-items:center;gap:13px;padding:17px 0;border-top:1px solid var(--border);font-size:14px;word-break:break-all}.contact-method svg{width:18px;height:18px;color:var(--cyan);flex:none}.contact-method:hover{color:var(--cyan)}.contact-form{border:1px solid rgba(255,255,255,.11);border-radius:17px;padding:34px;background:linear-gradient(135deg,rgba(22,33,46,.92),rgba(13,20,31,.96))}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-field{display:block;margin-bottom:19px}.form-field span{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.08em;font-weight:700;text-transform:uppercase;color:#d8dfe7}.form-field input,.form-field textarea,.form-field select{display:block;width:100%;outline:none;border:1px solid #33404e;border-radius:7px;background:#0b131e;color:#eef4f7;padding:13px 15px;font-size:14px;transition:border .2s}.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,217,239,.08)}.form-field input::placeholder,.form-field textarea::placeholder{color:#7b8998}.form-field textarea{resize:vertical;min-height:104px}.form-send{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.form-send small{max-width:260px;font-size:11px;line-height:1.6;color:#8594a5}
/* footer */
.site-footer{border-top:1px solid var(--border);background:#080b12}.footer-main{padding:36px 0;display:flex;justify-content:space-between;align-items:center;gap:32px}.footer-brand img{width:128px}.footer-brand p{font-size:12px;color:#8895a3;margin-top:9px}.footer-links{display:flex;align-items:center;gap:25px;font-size:12px;color:#c0cad2}.footer-links a:hover{color:var(--cyan)}.footer-bottom{border-top:1px solid rgba(255,255,255,.055);padding:17px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#798997;font-size:11px}.back-to-top{color:var(--cyan)}
/* Utilities / motion */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.reveal.visible{opacity:1;transform:translateY(0)}.progress-bar{position:fixed;z-index:150;left:0;top:0;width:0;height:2px;background:linear-gradient(90deg,var(--magenta),var(--cyan));pointer-events:none}
@media(max-width:1100px){.nav-items{gap:18px}.nav-cta{display:none}.hero h1{font-size:clamp(52px,7vw,78px)}.hero-art{height:590px}.hero{min-height:775px}.services-grid{grid-template-columns:repeat(2,1fr)}.service-card{min-height:280px}.about-grid{gap:48px}}
@media(max-width:780px){.container{padding-inline:23px}.nav-wrap{min-height:72px;padding-inline:23px}.brand img{width:126px}.menu-toggle{display:flex}.nav-items{position:absolute;top:72px;left:0;right:0;display:none;flex-direction:column;gap:0;align-items:stretch;background:#101621;border-bottom:1px solid var(--border);padding:12px 23px 18px}.nav-items.open{display:flex}.nav-items a{display:block;padding:12px 6px;font-size:14px}.hero{padding-top:100px;min-height:0}.hero-layout{grid-template-columns:1fr;min-height:auto}.hero-copy{padding-block:52px 0}.hero h1{font-size:clamp(53px,11vw,76px);max-width:660px}.hero-lead{font-size:16px}.hero-art{height:min(115vw,620px);max-width:650px;width:100%;margin:0 auto}.hero-photo{left:-3%;width:106%;bottom:-38px}.hero-vertical{right:5px}.hero-label{right:9px;bottom:88px}.capabilities-inner{min-height:82px;flex-wrap:wrap;justify-content:center;column-gap:20px;row-gap:4px;padding-block:20px}.capabilities span{font-size:10px}.section{padding-block:85px}.section-top{align-items:start;flex-direction:column;gap:15px}.portfolio-grid{gap:16px}.project-card.featured .project-preview{min-height:320px}.project-preview{min-height:270px;padding:26px}.about-grid{grid-template-columns:1fr;gap:38px}.about-image{min-height:420px;max-width:540px;width:100%;margin:auto}.about-copy{max-width:720px}.contact-grid{grid-template-columns:1fr;gap:25px}.contact-header{margin-bottom:40px}.contact-blurb{padding-top:0}.process-steps{gap:16px}}
@media(max-width:580px){.nav-right{gap:9px}.hero-kicker{font-size:10px;letter-spacing:.12em}.hero h1{font-size:clamp(47px,11.9vw,66px)}.hero-micro{margin-top:30px}.hero-art{height:104vw}.hero-label{bottom:53px;right:6px}.hero-photo{bottom:-26px}.capabilities-inner .star{display:none}.section-heading{font-size:clamp(36px,9vw,52px)}.services-grid,.portfolio-grid,.process-steps{grid-template-columns:1fr}.project-card.featured{grid-column:auto}.project-preview,.project-card.featured .project-preview{min-height:260px}.featured .browser,.project-preview .browser{width:94%;transform:rotate(-3deg) translateY(10px)}.browser-inner{min-height:195px;padding:20px}.browser-nav{margin-bottom:26px}.browser-h1{font-size:30px}.project-info{padding:19px}.project-info h3{font-size:22px}.about-image{min-height:370px}.process-steps{gap:32px}.step{border-bottom:1px solid var(--border);padding-bottom:24px}.field-row{grid-template-columns:1fr;gap:0}.contact-form{padding:24px 19px}.footer-main,.footer-bottom{flex-direction:column;align-items:flex-start}.footer-links{flex-wrap:wrap;gap:15px}.hero-actions{gap:9px}.button{padding-inline:15px;font-size:12px}.section{padding-block:76px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}