:root{color-scheme:dark;--bg:#070708;--text:#f2efe8;--muted:#9998a1;--line:rgba(255,255,255,.14);--accent:#aeb8ff;--lime:#d9ff43}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-width:320px;margin:0;overflow-x:hidden;background:radial-gradient(circle at 70% 12%,rgba(108,93,203,.13),transparent 30%),var(--bg);color:var(--text);font-family:"Space Grotesk",Arial,sans-serif}
.design-preview__noise{position:fixed;z-index:20;inset:0;opacity:.035;pointer-events:none;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='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.design-preview__glow{position:fixed;z-index:-1;border-radius:50%;filter:blur(95px);opacity:.22;pointer-events:none}
.design-preview__glow--one{top:18%;right:-12vw;width:36vw;height:36vw;background:#7863d8;animation:glowDrift 11s ease-in-out infinite alternate}
.design-preview__glow--two{left:-10vw;bottom:4%;width:30vw;height:30vw;background:#667ab9;animation:glowDrift 13s -4s ease-in-out infinite alternate}
.design-header{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(1440px,calc(100% - 64px));height:94px;margin:auto;border-bottom:1px solid var(--line)}
.design-header a{color:inherit;text-decoration:none}
.design-header__brand{display:flex;align-items:center;gap:12px;width:max-content;font-size:10px;line-height:.95;letter-spacing:.08em;text-transform:uppercase}
.design-header__brand img{width:34px;height:34px;object-fit:contain}
.design-header__status{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.55);font-size:9px;letter-spacing:.17em;text-transform:uppercase}
.design-header__status i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime);animation:statusPulse 2.4s ease-in-out infinite}
.design-header__back{justify-self:end;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.design-header__back span{display:inline-block;margin-left:8px;transition:transform .35s}
.design-header__back:hover span{transform:translate(4px,-4px)}
.design-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:center;gap:clamp(48px,8vw,130px);width:min(1380px,calc(100% - 64px));min-height:calc(100svh - 94px);margin:auto;padding:clamp(70px,9vw,140px) 0}
.design-hero__eyebrow,.design-directions__heading>p{margin:0 0 26px;color:rgba(255,255,255,.48);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.design-hero h1{max-width:940px;margin:0;font-size:clamp(58px,8.7vw,148px);font-weight:400;line-height:.82;letter-spacing:-.072em}
.design-hero h1 em{display:block;color:rgba(255,255,255,.38);font-style:normal}
.design-hero__lead{max-width:700px;margin:clamp(34px,5vw,62px) 0 0;color:#aaa9b0;font-size:clamp(16px,1.45vw,21px);line-height:1.65}
.design-hero__actions{display:flex;align-items:center;gap:28px;margin-top:38px}
.design-button{display:flex;align-items:center;justify-content:space-between;gap:38px;min-width:260px;padding:17px 20px;border:1px solid rgba(210,216,255,.42);border-radius:999px;background:rgba(136,122,224,.12);color:#fff;text-decoration:none;font-size:12px;letter-spacing:.05em;transition:background .35s,color .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.design-button:hover{background:var(--text);color:#09090a;transform:translateY(-4px)}
.design-hero__note{max-width:185px;color:rgba(255,255,255,.38);font-size:10px;line-height:1.45;letter-spacing:.06em;text-transform:uppercase}
.design-orbit{position:relative;display:grid;place-items:center;width:min(38vw,520px);aspect-ratio:1;margin:auto}
.design-orbit>i{position:absolute;inset:5%;border:1px solid rgba(174,184,255,.18);border-radius:50%;animation:orbitSpin 24s linear infinite}
.design-orbit>i:nth-of-type(2){inset:18%;border-style:dashed;animation-direction:reverse;animation-duration:18s}
.design-orbit>i:nth-of-type(3){inset:31%;animation-duration:13s}
.design-orbit__core{position:relative;z-index:2;display:grid;place-items:center;width:30%;aspect-ratio:1;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:radial-gradient(circle at 36% 25%,rgba(255,255,255,.18),rgba(91,74,170,.2) 42%,rgba(5,5,8,.8));box-shadow:0 0 80px rgba(126,109,220,.22)}
.design-orbit__core span{font-size:clamp(24px,3vw,44px);letter-spacing:-.06em}
.design-orbit__core small{position:absolute;bottom:22%;color:rgba(255,255,255,.38);font-size:7px;letter-spacing:.12em;text-transform:uppercase}
.design-orbit__point{position:absolute;z-index:3;display:grid;place-items:center;width:52px;aspect-ratio:1;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(7,7,10,.78);color:#dfe3ff;font-size:10px;font-weight:400;box-shadow:0 14px 35px rgba(0,0,0,.38);backdrop-filter:blur(12px);animation:pointFloat 5s ease-in-out infinite}
.design-orbit__point--one{left:1%;top:43%}.design-orbit__point--two{right:8%;top:12%;animation-delay:-1.7s}.design-orbit__point--three{right:1%;bottom:22%;animation-delay:-3.4s}
.design-directions{width:min(1380px,calc(100% - 64px));margin:auto;padding:clamp(90px,12vw,180px) 0}
.design-directions__heading{display:grid;grid-template-columns:.72fr 1.28fr;gap:40px;align-items:start;margin-bottom:62px;opacity:0;transform:translateY(28px);transition:opacity .8s,transform .9s cubic-bezier(.16,1,.3,1)}
.design-directions__heading.is-visible{opacity:1;transform:none}
.design-directions__heading h2{max-width:850px;margin:0;font-size:clamp(42px,6vw,92px);font-weight:400;line-height:.92;letter-spacing:-.055em}
.design-directions__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.design-card{position:relative;min-height:310px;padding:clamp(28px,4vw,56px);overflow:hidden;border-right:1px solid var(--line);border-bottom:1px solid var(--line);opacity:0;transform:translateY(36px);transition:opacity .7s,transform .9s cubic-bezier(.16,1,.3,1),background .45s}
.design-card:nth-child(2){transition-delay:.08s}.design-card:nth-child(3){transition-delay:.16s}.design-card:nth-child(4){transition-delay:.24s}.design-card.is-visible{opacity:1;transform:none}.design-card:hover{background:rgba(255,255,255,.035)}
.design-card>span{color:rgba(255,255,255,.4);font-size:9px;letter-spacing:.17em;text-transform:uppercase}
.design-card h3{max-width:12ch;margin:clamp(40px,6vw,74px) 0 20px;font-size:clamp(30px,3.2vw,50px);font-weight:400;line-height:.96;letter-spacing:-.045em}
.design-card p{max-width:48ch;margin:0;color:#8f8e95;font-size:14px;line-height:1.6}
.design-card>i{position:absolute;right:34px;top:30px;color:rgba(255,255,255,.42);font-size:20px;font-style:normal;transition:transform .4s,color .4s}.design-card:hover>i{color:#fff;transform:translate(5px,-5px)}
.design-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(1380px,calc(100% - 64px));min-height:110px;margin:auto;border-top:1px solid var(--line);color:rgba(255,255,255,.42);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.design-footer a{color:inherit;text-decoration:none}.design-footer span:last-child{justify-self:end}
@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes pointFloat{50%{transform:translateY(-10px)}}@keyframes glowDrift{to{transform:translate3d(4vw,-4vh,0) scale(1.08)}}@keyframes statusPulse{50%{opacity:.35;transform:scale(.68)}}
@media(max-width:900px){.design-header{width:calc(100% - 36px);grid-template-columns:1fr 1fr}.design-header__status{display:none}.design-hero{grid-template-columns:1fr;width:calc(100% - 36px);padding-top:90px}.design-orbit{width:min(78vw,470px)}.design-directions,.design-footer{width:calc(100% - 36px)}.design-directions__heading{grid-template-columns:1fr}.design-directions__grid{grid-template-columns:1fr}.design-card{min-height:280px}.design-footer{grid-template-columns:1fr auto}.design-footer span:last-child{display:none}}
@media(max-width:560px){.design-header{height:78px}.design-header__brand img{width:30px;height:30px}.design-header__back{font-size:9px}.design-hero{min-height:auto;padding:86px 0 55px}.design-hero h1{font-size:clamp(52px,17vw,82px)}.design-hero__lead{font-size:15px}.design-hero__actions{align-items:flex-start;flex-direction:column}.design-button{width:100%;min-width:0}.design-orbit{width:88vw;margin-top:28px}.design-directions{padding:80px 0}.design-directions__heading{margin-bottom:38px}.design-directions__heading h2{font-size:42px}.design-card{min-height:250px;padding:26px 22px}.design-card h3{margin-top:48px}.design-footer{min-height:96px;font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.design-preview__glow,.design-header__status i,.design-orbit>i,.design-orbit__point{animation:none}.design-card,.design-directions__heading{opacity:1;transform:none;transition:none}}
