:root{
  --paper:#f6f1ff;
  --ink:#131117;
  --lime:#a6ff3c;
  --pink:#ff6f91;
  --blue:#5b6dff;
  --mint:#47d8c6;
  --lav:#d8ccff;
  --line:#1b1621;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Inter",sans-serif;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
.grain{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.13;background-image:radial-gradient(#17131e .55px,transparent .55px);background-size:5px 5px;mix-blend-mode:multiply}

.topbar{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:14px 28px;background:rgba(246,241,255,.92);backdrop-filter:blur(14px);border-bottom:2px solid var(--line)}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:white;font:500 13px "DM Mono"}
.brand-copy{font:700 12px "DM Mono";letter-spacing:.06em}
.topnav{display:flex;gap:28px}
.topnav a{font:600 13px "Inter";text-decoration:none;position:relative}
.topnav a:after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;background:var(--ink);transition:.25s}
.topnav a:hover:after{right:0}
.top-cta{justify-self:end;text-decoration:none;border:2px solid var(--line);padding:12px 16px;border-radius:999px;font:500 10px "DM Mono";transition:.25s}
.top-cta:hover{background:var(--ink);color:white}

.hero{min-height:calc(100vh - 74px);display:grid;grid-template-columns:1.05fr .95fr;border-bottom:2px solid var(--line)}
.hero-copy{padding:8vw 6vw 7vw;display:flex;flex-direction:column;justify-content:center}
.eyebrow,.section-label,.mono,.micro{font:500 10px "DM Mono";letter-spacing:.1em}
.hero h1{font:700 clamp(66px,8.7vw,132px)/.89 "Fraunces",serif;letter-spacing:-.055em;margin:24px 0 28px;max-width:900px}
.hero h1 em{font-style:italic;color:var(--blue)}
.hero-text{font-size:21px;line-height:1.55;max-width:680px}
.hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.btn{padding:14px 18px;border-radius:12px;text-decoration:none;font-weight:700;font-size:13px;border:2px solid var(--line)}
.btn-dark{background:var(--ink);color:white}
.btn-outline:hover{background:var(--lime)}

.hero-canvas{position:relative;overflow:hidden;background:var(--lav);border-left:2px solid var(--line);display:grid;place-items:center;min-height:680px}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(19,17,23,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(19,17,23,.12) 1px,transparent 1px);background-size:46px 46px}
.hero-device-card{position:relative;z-index:3;width:min(560px,70%);background:var(--paper);border:3px solid var(--line);padding:34px;border-radius:28px;display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:center;box-shadow:14px 14px 0 var(--ink);transform:rotate(-3deg);animation:cardFloat 5s ease-in-out infinite}
.hero-device-card img{width:120px;border-radius:26px;border:2px solid var(--line)}
.hero-device-card strong{font:700 48px/.92 "Fraunces";letter-spacing:-.04em}
.hero-sticker{position:absolute;z-index:4;display:grid;place-items:center;text-align:center;border:3px solid var(--line);font:500 11px/1.1 "DM Mono"}
.sticker-one{width:118px;height:118px;border-radius:50%;background:var(--lime);right:7%;top:13%;transform:rotate(12deg)}
.sticker-two{padding:12px 16px;background:var(--pink);left:8%;bottom:12%;transform:rotate(-8deg)}
.hero-orbit{position:absolute;border:3px solid var(--line);border-radius:50%}
.orbit-a{width:430px;height:430px;right:-150px;bottom:-110px}
.orbit-b{width:220px;height:220px;left:-80px;top:60px}
.hero-dot{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--blue)}
.d1{top:21%;left:18%;animation:dotMove 6s ease-in-out infinite}.d2{bottom:17%;right:25%;background:var(--mint);animation:dotMove 5s ease-in-out infinite reverse}.d3{top:45%;right:11%;background:var(--pink);animation:dotMove 7s ease-in-out infinite}
@keyframes cardFloat{50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes dotMove{50%{transform:translate(18px,-12px)}}

.studio-section,.services-section,.contact-section{padding:92px 5vw;border-bottom:2px solid var(--line)}
.studio-intro{display:grid;grid-template-columns:1fr .7fr;gap:50px;align-items:end;margin:35px 0 55px}
.studio-intro h2,.services-intro h2,.contact-lead h2{font:700 clamp(64px,7vw,105px)/.92 "Fraunces";letter-spacing:-.05em;margin:0}
.studio-intro p,.services-intro p,.contact-lead p{font-size:20px;line-height:1.55;margin:0}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.principle{border:2px solid var(--line);border-radius:22px;padding:28px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;background:white;transition:.3s}
.principle:nth-child(2){background:var(--lime)}.principle:nth-child(3){background:var(--pink)}
.principle:hover{transform:translateY(-8px)}
.principle span{font:500 10px "DM Mono";margin-bottom:auto}
.principle h3{font:700 30px/1.08 "Fraunces";margin:25px 0 10px}
.principle p{font-size:15px;line-height:1.55;margin:0}

.product-section{padding:90px 5vw;background:var(--ink);color:white;border-bottom:2px solid var(--line)}
.product-topline{display:flex;justify-content:space-between;gap:20px;align-items:center}
.invert{color:var(--lav)}
.product-topline a{font:500 10px "DM Mono";text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.product-head{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin:44px 0}
.capsule{display:inline-block;background:var(--lime);color:var(--ink);padding:8px 11px;border-radius:999px;font:500 10px "DM Mono"}
.product-head h2{font:700 clamp(70px,8vw,120px)/.9 "Fraunces";letter-spacing:-.05em;margin:18px 0 0}
.product-head p{font-size:20px;line-height:1.6;color:#d9d5df}
.product-gallery{display:grid;grid-template-columns:.65fr 1.35fr;gap:20px;align-items:stretch}
.gallery-note{background:var(--paper);color:var(--ink);border-radius:24px;padding:28px}
.gallery-note ul{padding-left:18px;margin:38px 0 0}.gallery-note li{margin:0 0 22px;font-size:18px;line-height:1.5}
.phone-strip{position:relative;min-height:720px;border-radius:24px;background:linear-gradient(135deg,#30304f,#1f2740);overflow:hidden}
.phone{position:absolute;width:260px;margin:0;transition:.45s}
.phone img{width:100%;display:block;border-radius:26px;border:2px solid #fff}
.p1{left:5%;top:100px;transform:rotate(-7deg);z-index:2}.p2{left:36%;top:40px;transform:rotate(2deg);z-index:3}.p3{right:2%;top:130px;transform:rotate(8deg);z-index:1}
.phone-strip:hover .p1{transform:translate(-8px,8px) rotate(-11deg)}.phone-strip:hover .p2{transform:translateY(-14px) rotate(0)}.phone-strip:hover .p3{transform:translate(8px,8px) rotate(12deg)}
.product-banner{margin-top:20px;border-radius:22px;overflow:hidden;border:2px solid #fff}
.product-banner img{width:100%;display:block}

.services-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;margin-top:38px}
.services-intro{position:sticky;top:110px;align-self:start}
.services-intro p{margin-top:24px}
.service-list{display:grid;gap:14px}
.service-row{display:grid;grid-template-columns:70px 1fr 110px;gap:22px;align-items:center;background:white;border:2px solid var(--line);border-radius:20px;padding:24px;transition:.3s}
.service-row:hover{transform:translateX(8px);background:var(--lav)}
.service-num{font:700 42px "Fraunces";color:var(--blue)}
.service-copy h3{font:700 28px "Fraunces";margin:0 0 7px}.service-copy p{margin:0;line-height:1.5;color:#4e4758}
.service-tag{font:500 9px "DM Mono";border:1px solid var(--line);padding:8px 9px;border-radius:999px;justify-self:end}

.moving-strip{overflow:hidden;background:var(--blue);color:white;border-bottom:2px solid var(--line)}
.marquee{display:flex;width:max-content;gap:42px;padding:22px 0;animation:marquee 20s linear infinite}
.marquee span{font:500 14px "DM Mono";white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

.contact-section{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact-lead p{margin-top:24px;max-width:620px}
.contact-card{background:var(--lime);border:2px solid var(--line);border-radius:26px;padding:30px;box-shadow:12px 12px 0 var(--ink)}
.contact-line{display:grid;grid-template-columns:100px 1fr;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}
.contact-line span{font:500 9px "DM Mono"}.contact-line strong,.contact-line a{font-size:17px;line-height:1.45;text-decoration:none}
.contact-action{display:block;margin-top:24px;padding:15px;background:var(--ink);color:white;text-decoration:none;text-align:center;border-radius:12px;font:500 11px "DM Mono"}

.site-footer{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;padding:34px 5vw;background:var(--ink);color:white}
.footer-left{display:flex;gap:14px;align-items:center}.footer-mark{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--paper);color:var(--ink);font:500 12px "DM Mono"}.footer-left strong{display:block;font:600 13px "DM Mono"}.footer-left span,.footer-center,.footer-right{font:500 9px "DM Mono";color:#b9b3c5}.footer-right{justify-self:end;display:flex;gap:18px}.footer-right a{text-decoration:none;color:white}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}.reveal.visible{opacity:1;transform:none}

/* Privacy */
.policy-page{min-height:100vh;background:var(--paper)}
.policy-header{padding:28px 5vw;border-bottom:2px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.policy-header a{text-decoration:none;font:500 10px "DM Mono";border:2px solid var(--line);padding:10px 12px;border-radius:999px}
.policy-main{padding:70px 5vw 100px}
.policy-title{max-width:950px}.policy-title .section-label{margin-bottom:18px}.policy-title h1{font:700 clamp(80px,10vw,150px)/.88 "Fraunces";letter-spacing:-.055em;margin:0 0 26px}.policy-title p{font-size:20px;line-height:1.55}
.policy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:45px}
.policy-card{background:white;border:2px solid var(--line);border-radius:22px;padding:26px;min-height:250px}
.policy-card:nth-child(3n+2){background:var(--lav)}.policy-card:nth-child(4n){background:var(--lime)}
.policy-card h2{font:500 10px "DM Mono";letter-spacing:.08em;margin:0 0 16px}.policy-card p{font-size:16px;line-height:1.65;margin:0}.policy-card a{font-weight:700}
.policy-card.wide{grid-column:1/-1}
.policy-effective{margin-top:34px;border-top:2px solid var(--line);padding-top:18px;font:500 9px "DM Mono"}

@media(max-width:1020px){
  .topbar{grid-template-columns:1fr auto}.topnav{display:none}.hero{grid-template-columns:1fr}.hero-canvas{border-left:0;border-top:2px solid var(--line)}
  .studio-intro,.product-head,.services-grid,.contact-section{grid-template-columns:1fr}
  .services-intro{position:static}.product-gallery{grid-template-columns:1fr}.principles{grid-template-columns:1fr}
}
@media(max-width:700px){
  .topbar{padding:12px 16px}.top-cta{display:none}.brand-copy{font-size:10px}
  .hero-copy{padding:70px 20px}.hero h1{font-size:70px}.hero-text{font-size:18px}.hero-canvas{min-height:520px}.hero-device-card{width:82%;grid-template-columns:90px 1fr;padding:24px}.hero-device-card img{width:90px}.hero-device-card strong{font-size:36px}
  .studio-section,.product-section,.services-section,.contact-section{padding:58px 20px}
  .studio-intro h2,.services-intro h2,.contact-lead h2{font-size:64px}
  .product-head h2{font-size:68px}.product-head p{font-size:18px}
  .phone-strip{min-height:560px}.phone{width:190px}.p1{left:-5px}.p2{left:27%}.p3{right:-26px}
  .service-row{grid-template-columns:48px 1fr}.service-tag{grid-column:2;justify-self:start}.service-num{font-size:34px}
  .site-footer{grid-template-columns:1fr}.footer-center{display:none}.footer-right{justify-self:start}
  .policy-main{padding:50px 20px 70px}.policy-header{padding:20px}.policy-title h1{font-size:72px}.policy-grid{grid-template-columns:1fr}.policy-card.wide{grid-column:auto}
}