/* Quiet Vector: dark acrylic planes, warm-white typography, vector-lime signal points, and intentional asymmetry. */
:root { --ink:#090a0b; --paper:#f4f4ed; --muted:rgba(244,244,237,.62); --line:rgba(255,255,255,.14); --lime:#c7ff4a; --mono:"IBM Plex Mono",monospace; --display:"Space Grotesk","Noto Sans JP",sans-serif; --body:"Noto Sans JP",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; overflow-x:hidden; background:var(--ink); color:var(--paper); font-family:var(--body); }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
.site-shell { min-height:100vh; overflow:hidden; position:relative; background:radial-gradient(circle at 79% 4%,rgba(199,255,74,.05),transparent 25%),var(--ink); }
.noise { pointer-events:none; position:fixed; z-index:0; inset:0; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.topbar { position:absolute; z-index:5; top:0; left:0; display:flex; justify-content:space-between; align-items:center; width:100%; height:92px; padding:0 clamp(1.35rem,5vw,5.5rem); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:.65rem; color:var(--paper); text-decoration:none; font:600 1.08rem/1 var(--display); letter-spacing:-.07em; }
.brand span span { color:var(--lime); }.brand-mark { width:31px; height:31px; object-fit:contain; }.desktop-nav { display:flex; align-items:center; gap:2rem; color:rgba(244,244,237,.65); font:500 .63rem/1 var(--mono); letter-spacing:.13em; }.desktop-nav a { position:relative; color:inherit; text-decoration:none; }.desktop-nav a:after { position:absolute; content:""; width:0; height:1px; left:0; bottom:-7px; background:var(--lime); transition:width .2s ease; }.desktop-nav a:hover:after { width:100%; }.desktop-nav i { width:1px; height:16px; background:rgba(255,255,255,.2); }.status,.availability { display:inline-flex; gap:.45rem; align-items:center; }.status b,.availability i { display:inline-block; width:6px; height:6px; background:var(--lime); box-shadow:0 0 12px rgba(199,255,74,.9); }.menu-toggle,.mobile-nav { display:none; }
.hero { position:relative; z-index:1; display:flex; flex-direction:column; min-height:min(840px,100svh); padding:184px clamp(1.35rem,10vw,10rem) 42px; border-bottom:1px solid var(--line); }.hero-art { position:absolute; top:92px; right:0; width:min(66vw,940px); height:calc(100% - 92px); overflow:hidden; clip-path:polygon(14% 0,100% 0,100% 100%,0 100%,0 16%); transform:translateY(var(--hero-shift,0)); animation:product-enter 1.2s cubic-bezier(.23,1,.32,1) .1s both; }.hero-art img { width:100%; height:100%; object-fit:cover; filter:contrast(1.08) saturate(.8); }.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,#090a0b 0%,rgba(9,10,11,.88) 13%,rgba(9,10,11,.15) 59%,rgba(9,10,11,.22) 100%),linear-gradient(0deg,rgba(9,10,11,.76),transparent 35%); }.coordinate { position:absolute; z-index:1; color:rgba(244,244,237,.55); font:400 .55rem/1.7 var(--mono); letter-spacing:.1em; }.coordinate.a { right:8%; top:17%; }.coordinate.b { right:7%; bottom:12%; color:var(--lime); }.vector-line { position:absolute; z-index:2; width:74vw; height:1px; top:74%; left:-13vw; background:linear-gradient(90deg,transparent,rgba(199,255,74,.85) 18%,rgba(199,255,74,.24) 78%,transparent); transform:rotate(-28deg); animation:drift 16s ease-in-out infinite alternate; }.vector-dot { position:absolute; z-index:2; top:70.7%; left:44.2%; width:7px; height:7px; background:var(--lime); box-shadow:0 0 22px rgba(199,255,74,.9); animation:pulse 2.4s ease-in-out infinite; }.hero-content { position:relative; z-index:3; max-width:720px; }.eyebrow { display:flex; align-items:center; gap:.6rem; margin:0; color:rgba(244,244,237,.72); font:500 .63rem/1.35 var(--mono); letter-spacing:.14em; }.eyebrow span { display:block; width:7px; height:7px; background:var(--lime); box-shadow:0 0 12px rgba(199,255,74,.7); }.hero h1 { margin:1.75rem 0 1.55rem; color:var(--paper); font:500 clamp(3.15rem,7.6vw,7.4rem)/.95 var(--display); letter-spacing:-.075em; }.hero h1 em,h2 em { color:var(--lime); font-style:normal; }.lead { max-width:605px; margin:0; color:var(--muted); font-size:clamp(.9rem,1.13vw,1.05rem); line-height:2; }.actions { display:flex; align-items:center; gap:1.5rem; margin-top:2.25rem; }.primary-button { display:inline-flex; height:48px; align-items:center; gap:.7rem; padding:0 1.05rem 0 1.18rem; border:1px solid var(--lime); border-radius:0; background:var(--lime); color:#11140d; font:600 .75rem var(--body); transition:transform .16s cubic-bezier(.23,1,.32,1),box-shadow .16s ease,background .16s ease; }.primary-button:hover { background:#e2ff98; box-shadow:5px 5px 0 rgba(199,255,74,.22); }.primary-button:active { transform:scale(.97); }.primary-button span { font-size:1.15rem; }.primary-button b { font-weight:500; }.text-link { display:inline-flex; align-items:center; gap:.45rem; color:rgba(244,244,237,.72); font:500 .72rem var(--body); text-decoration:none; }.text-link:hover { color:var(--lime); }.hero-foot { position:relative; z-index:3; display:flex; justify-content:space-between; align-items:end; gap:1.5rem; margin-top:auto; padding-top:3.5rem; color:rgba(244,244,237,.46); font:500 .55rem/1.5 var(--mono); letter-spacing:.12em; }.hero-foot p { margin:0; }.hero-foot strong { color:rgba(244,244,237,.86); font-weight:500; }.hero-foot i { display:inline-block; width:3px; height:3px; margin:0 1rem; background:var(--lime); }.scroll { white-space:nowrap; }
.experience { position:relative; z-index:1; padding:clamp(5rem,11vw,10rem) clamp(1.35rem,10vw,10rem) clamp(6rem,12vw,11rem); }.section-rail { display:flex; align-items:center; gap:.75rem; color:rgba(244,244,237,.46); font:500 .56rem var(--mono); letter-spacing:.12em; }.section-rail i { width:clamp(60px,8vw,136px); height:1px; background:rgba(255,255,255,.3); }.intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,.54fr); column-gap:5rem; align-items:end; margin:clamp(4rem,8vw,7rem) 0 clamp(4rem,8vw,7.5rem); }.intro .eyebrow { grid-column:1/-1; margin-bottom:1.15rem; }.intro h2 { margin:0; font:500 clamp(2.25rem,5.1vw,5.2rem)/1.02 var(--display); letter-spacing:-.065em; }.intro>p:last-child { max-width:370px; margin:0 0 .35rem; color:var(--muted); font-size:.9rem; line-height:2; }.feature { border-top:1px solid rgba(255,255,255,.18); padding-top:.85rem; }.feature+.feature { margin-top:clamp(3.5rem,9vw,8.5rem); }.feature-top { display:grid; grid-template-columns:min-content 1fr minmax(130px,.3fr); gap:.85rem; align-items:center; }.feature-top b,.feature-top span,figure figcaption,.feature-copy small { font:500 .57rem/1.4 var(--mono); letter-spacing:.13em; }.feature-top b { color:var(--lime); }.feature-top i { height:1px; background:rgba(255,255,255,.13); }.feature-top span { color:rgba(244,244,237,.44); text-align:right; }.feature-body { display:grid; grid-template-columns:minmax(240px,.73fr) minmax(360px,1.2fr); gap:clamp(2.5rem,7vw,7.5rem); align-items:center; padding-top:clamp(2.2rem,5vw,4rem); }.feature-two .feature-body { grid-template-columns:minmax(360px,1.2fr) minmax(240px,.73fr); }.icon-box { display:grid; place-items:center; width:42px; height:42px; margin-bottom:1.6rem; border:1px solid rgba(199,255,74,.65); color:var(--lime); font:400 1.2rem var(--mono); }.icon-box.white { border-color:rgba(255,255,255,.24); color:var(--paper); }.feature-copy h3 { margin:0 0 1.35rem; font:500 clamp(1.85rem,3.2vw,3.4rem)/1.12 var(--display); letter-spacing:-.06em; }.feature-copy p { max-width:390px; margin:0; color:var(--muted); font-size:.9rem; line-height:2; }.feature-copy small { display:block; margin-top:2.2rem; color:rgba(244,244,237,.48); }figure { position:relative; aspect-ratio:1.52/1; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#111214; }figure:after { position:absolute; content:""; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(199,255,74,.08),transparent 22%,transparent 77%,rgba(255,255,255,.04)); }figure img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(1.05); transition:transform .7s cubic-bezier(.23,1,.32,1); }figure:hover img { transform:scale(1.035); }figure figcaption { position:absolute; z-index:1; bottom:.85rem; left:1rem; color:rgba(244,244,237,.58); font-size:.48rem; }
.principles { position:relative; z-index:1; padding:clamp(4.5rem,9vw,8rem) clamp(1.35rem,10vw,10rem); border-block:1px solid var(--line); background:rgba(255,255,255,.016); }.principles-head { display:flex; justify-content:space-between; gap:3rem; align-items:end; margin-bottom:clamp(2.8rem,5vw,4.5rem); }.principles-head>p:last-child { max-width:312px; margin:0; color:var(--muted); font-size:.83rem; line-height:1.9; }.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); }.principle-grid article { position:relative; min-height:240px; padding:1.6rem; border-right:1px solid var(--line); transition:background .2s ease; }.principle-grid article:last-child { border:0; }.principle-grid article:hover { background:rgba(199,255,74,.055); }.principle-icon { color:rgba(244,244,237,.82); font:400 1.2rem var(--mono); }.principle-grid b { position:absolute; right:1.4rem; top:1.5rem; color:var(--lime); font:400 .7rem var(--mono); }.principle-grid h3 { position:absolute; bottom:3.25rem; left:1.6rem; margin:0; font:600 .72rem var(--display); letter-spacing:.08em; }.principle-grid p { position:absolute; bottom:1.45rem; left:1.6rem; margin:0; color:rgba(244,244,237,.54); font-size:.75rem; }
.download-section { position:relative; z-index:1; padding:clamp(4.5rem,10vw,9rem) clamp(1.35rem,5vw,5.5rem); }.download-panel { position:relative; min-height:520px; overflow:hidden; padding:clamp(2rem,5.8vw,5.5rem); border:1px solid rgba(199,255,74,.45); background:linear-gradient(135deg,rgba(199,255,74,.1),rgba(199,255,74,.025) 35%,rgba(255,255,255,.025)); }.download-panel:after { position:absolute; content:""; inset:0; opacity:.7; pointer-events:none; background-image:linear-gradient(rgba(199,255,74,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(199,255,74,.07) 1px,transparent 1px); background-size:50px 50px; mask-image:linear-gradient(90deg,#000,transparent 70%); }.download-head,.download-copy,.download-row { position:relative; z-index:1; }.download-head,.download-row { display:flex; justify-content:space-between; align-items:center; gap:2rem; }.download-head small { color:rgba(244,244,237,.44); font:500 .57rem var(--mono); letter-spacing:.13em; }.download-copy { max-width:790px; margin-top:clamp(5rem,11vw,9.5rem); }.download-copy h2 { margin:0; font:500 clamp(2.45rem,5.8vw,5.7rem)/.99 var(--display); letter-spacing:-.075em; }.download-copy p { max-width:475px; margin:1.7rem 0 0; color:var(--muted); font-size:.9rem; line-height:2; }.download-row { margin-top:2.8rem; }.primary-button.large { height:57px; padding-inline:1.3rem; font-size:.8rem; }.availability { color:rgba(244,244,237,.57); font:500 .57rem var(--mono); letter-spacing:.1em; }
footer { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:2rem clamp(1.35rem,5vw,5.5rem); border-top:1px solid var(--line); color:rgba(244,244,237,.4); font:500 .53rem var(--mono); letter-spacing:.11em; }footer .brand { transform:scale(.86); transform-origin:left center; }footer p { margin:0; }.toast { position:fixed; z-index:9; right:1.4rem; bottom:1.4rem; display:grid; gap:.3rem; width:min(330px,calc(100vw - 2.8rem)); padding:1rem 1.1rem; border:1px solid rgba(199,255,74,.45); background:rgba(16,18,14,.94); color:var(--paper); box-shadow:0 18px 42px rgba(0,0,0,.35); transform:translateY(135%); opacity:0; transition:transform .24s cubic-bezier(.23,1,.32,1),opacity .24s ease; }.toast.show { transform:translateY(0); opacity:1; }.toast b { color:var(--lime); font:600 .75rem var(--body); }.toast span { color:rgba(244,244,237,.65); font-size:.68rem; line-height:1.7; }
.reveal { animation:rise .7s cubic-bezier(.23,1,.32,1) both; }.hero-content { animation-delay:.07s; }.hero-foot { animation-delay:.26s; }.scroll-reveal { opacity:0; transform:translateY(28px); transition:opacity .72s cubic-bezier(.23,1,.32,1),transform .72s cubic-bezier(.23,1,.32,1); }.scroll-reveal.is-visible { opacity:1; transform:none; }.feature.scroll-reveal:nth-of-type(2) { transition-delay:.08s; }.principle-grid.scroll-reveal { transition-delay:.06s; }.download-panel.scroll-reveal { transform:translateY(34px) scale(.985); }.download-panel.scroll-reveal.is-visible { transform:none; }@keyframes rise { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:none; } }@keyframes product-enter { from { opacity:0; transform:translate(34px,18px) scale(.98); } to { opacity:1; transform:translate(var(--hero-shift,0),0) scale(1); } }@keyframes drift { from { transform:rotate(-28deg) translateX(-4vw); } to { transform:rotate(-28deg) translateX(5vw); } }@keyframes pulse { 0%,100%{opacity:.72}50%{opacity:1;box-shadow:0 0 28px rgba(199,255,74,1)} }
@media (max-width:800px) { .topbar{height:76px;padding-inline:1.25rem}.desktop-nav{display:none}.menu-toggle{display:grid;place-content:center;gap:5px;width:40px;height:40px;border:1px solid rgba(255,255,255,.2);background:rgba(12,13,14,.65)}.menu-toggle span{display:block;width:16px;height:1px;background:var(--paper);transition:transform .2s ease}.menu-toggle.open span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle.open span:last-child{transform:translateY(-3px) rotate(-45deg)}.mobile-nav{position:absolute;top:76px;right:1rem;left:1rem;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.18);background:rgba(12,13,14,.96);box-shadow:0 18px 40px rgba(0,0,0,.35);opacity:0;pointer-events:none;transform:translateY(-8px);transition:.2s ease}.mobile-nav.show{opacity:1;pointer-events:auto;transform:none}.mobile-nav a{padding:1rem .7rem;color:var(--paper);font:500 .64rem var(--mono);letter-spacing:.1em;text-align:center;text-decoration:none}.mobile-nav a+a{border-left:1px solid var(--line)}.hero{min-height:790px;padding:142px 1.35rem 2rem}.hero-art{top:76px;width:100%;height:62%;clip-path:polygon(0 0,100% 0,100% 100%,12% 100%,0 87%);opacity:.7}.hero-shade{background:linear-gradient(0deg,#090a0b 0%,rgba(9,10,11,.87) 21%,rgba(9,10,11,.28) 73%,rgba(9,10,11,.64) 100%)}.coordinate{display:none}.hero-content{margin-top:17vh}.hero h1{font-size:clamp(3.05rem,15vw,4.6rem)}.lead{font-size:.84rem;line-height:1.9}.lead br{display:none}.actions{align-items:flex-start;flex-direction:column;gap:1.25rem}.hero-foot{align-items:flex-start;flex-direction:column;padding-top:2rem}.hero-foot>p:first-child{max-width:290px}.scroll{display:none}.experience,.principles{padding-inline:1.35rem}.intro{display:block;margin-top:3.5rem}.intro .eyebrow{margin-bottom:1rem}.intro>p:last-child{margin-top:1.4rem}.feature-top{grid-template-columns:min-content 1fr}.feature-top span{display:none}.feature-body,.feature-two .feature-body{display:flex;flex-direction:column;gap:2rem;align-items:stretch}.feature-two figure{order:2}.feature-two .feature-copy{order:1}figure{aspect-ratio:1.35/1}.principles-head{display:block}.principles-head>p:last-child{margin-top:1.2rem}.principle-grid{grid-template-columns:1fr}.principle-grid article{min-height:180px;border-right:0;border-bottom:1px solid var(--line)}.principle-grid article:last-child{border-bottom:0}.download-section{padding-inline:1.35rem}.download-panel{min-height:490px;padding:1.5rem}.download-copy{margin-top:6.5rem}.download-row{align-items:flex-start;flex-direction:column}.orbit{top:-4%;right:-40%;width:110vw;height:110vw}footer{align-items:flex-start;flex-direction:column;padding:1.5rem 1.35rem} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.vector-line,.vector-dot,.reveal,.hero-art{animation:none}.scroll-reveal{opacity:1;transform:none}*{transition:none!important} }