@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --bg:#f4f2ed;
  --ink:#151515;
  --muted:#6e6b65;
  --line:#d8d5ce;
  --card:#e9e6df;
  --dark:#181818;
  --white:#f8f7f3;
  --accent:#d9ff52;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.nav{height:86px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.wordmark{font:600 20px "Manrope",sans-serif;letter-spacing:-.055em}
.wordmark span{font-weight:400}
.nav nav{display:flex;gap:34px;font-size:13px;color:#4e4b46}
.nav nav a{transition:opacity .2s}.nav nav a:hover{opacity:.5}
.hero{padding:clamp(110px,15vw,205px) 8vw 145px;max-width:1350px}
.eyebrow,.section-label,.product-kicker,.screen-label{font-size:10px;text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--muted)}
.hero h1{font:500 clamp(56px,8.5vw,128px)/.92 "Manrope",sans-serif;letter-spacing:-.075em;max-width:1120px;margin:28px 0 42px}
em{font-style:normal;color:#77736c}
.hero-copy{font-size:17px;line-height:1.6;color:#5f5c56;max-width:510px;margin-bottom:35px}
.text-link{display:inline-flex;gap:18px;align-items:center;font-size:13px;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:8px}
.text-link span{font-size:16px}
.product-section,.statement,.principles{padding:0 5vw 150px}
.section-label{padding-bottom:22px;border-bottom:1px solid var(--line)}
.product-card{background:var(--dark);color:var(--white);min-height:650px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.product-info{padding:58px 6vw 55px;display:flex;flex-direction:column;justify-content:space-between}
.product-kicker{color:#8d8b86}
.product-info h2{font:600 clamp(65px,9vw,125px)/.85 "Manrope",sans-serif;letter-spacing:-.09em;margin:25px 0 18px}
.tagline{font:500 23px/1.25 "Manrope",sans-serif;letter-spacing:-.035em;max-width:330px}
.description{color:#a9a6a0;line-height:1.65;max-width:390px;font-size:14px;margin-top:30px}
.pill-link{align-self:flex-start;border:1px solid #555;padding:12px 17px;border-radius:100px;font-size:12px;transition:.2s}
.pill-link:hover{background:#fff;color:#111;border-color:#fff}
.phone-stage{position:relative;min-height:650px;display:flex;align-items:center;justify-content:center;background:#202020}
.phone{width:220px;height:450px;border:7px solid #343434;border-radius:34px;background:#111;box-shadow:0 25px 70px #0008;position:relative;z-index:2;overflow:hidden}
.phone-back{position:absolute;transform:translate(-115px,15px) rotate(-10deg);z-index:1;opacity:.55}
.phone-notch{position:absolute;z-index:3;left:50%;transform:translateX(-50%);top:8px;width:80px;height:20px;background:#111;border-radius:20px}
.screen{height:100%;padding:72px 22px 25px;background:#e9e6df;color:#151515;display:flex;flex-direction:column}
.screen-label{font-size:8px;color:#777}
.screen strong{font:600 82px/.9 "Manrope",sans-serif;letter-spacing:-.1em;margin-top:28px}
.screen-sub{font-size:12px;color:#777}
.mini-bars{display:flex;align-items:end;height:100px;gap:6px;margin:45px 0 20px}
.mini-bars i{display:block;width:100%;background:#151515;border-radius:3px}
.mini-bars i:nth-child(1){height:38%}.mini-bars i:nth-child(2){height:68%}.mini-bars i:nth-child(3){height:50%}.mini-bars i:nth-child(4){height:82%}.mini-bars i:nth-child(5){height:60%}.mini-bars i:nth-child(6){height:90%}.mini-bars i:nth-child(7){height:72%}
.screen small{font-size:8px;color:#777}
.statement{padding-top:0}
.statement-grid{display:grid;grid-template-columns:1.15fr .65fr;gap:10vw;padding-top:60px}
.statement h2,.contact h2{font:500 clamp(42px,5.6vw,80px)/1.02 "Manrope",sans-serif;letter-spacing:-.07em;margin:0}
.about-copy{font-size:15px;line-height:1.7;color:#62605b;padding-top:10px}
.about-copy p{margin:0 0 25px}
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:60px}
.principle-grid>div{background:var(--bg);padding:35px 28px 40px;min-height:210px}
.principle-grid span{font-size:10px;color:var(--muted)}
.principle-grid h3{font:500 24px "Manrope",sans-serif;letter-spacing:-.04em;margin:45px 0 10px}
.principle-grid p{font-size:13px;color:var(--muted);line-height:1.5;max-width:250px}
.contact{background:var(--dark);color:var(--white);padding:145px 8vw}
.contact h2{margin:28px 0 45px}
.contact .eyebrow{color:#8d8b86}
.contact .text-link{border-color:#aaa}
footer{padding:28px 5vw;display:flex;justify-content:space-between;color:#77736c;font-size:10px;border-top:1px solid var(--line);text-transform:uppercase;letter-spacing:.08em}
@media(max-width:760px){
  .nav{height:72px;padding:0 6vw}.nav nav{gap:16px}.nav nav a:first-child{display:none}
  .hero{padding:100px 6vw 105px}.hero h1{font-size:57px}
  .product-section,.statement,.principles{padding-left:6vw;padding-right:6vw;padding-bottom:100px}
  .product-card{display:block}.product-info{min-height:570px;padding:42px 8vw}
  .phone-stage{min-height:520px}.phone{transform:scale(.82)}.phone-back{transform:translate(-85px,15px) rotate(-10deg) scale(.82)}
  .statement-grid{display:block;padding-top:42px}.about-copy{margin-top:45px}
  .principle-grid{grid-template-columns:1fr}.principle-grid>div{min-height:170px}
  .principle-grid h3{margin-top:30px}.contact{padding:105px 7vw}
  footer{padding:24px 6vw;display:block}footer span{display:block;margin:5px 0}
}