:root {
  --ink: #f5f8ff;
  --muted: #a9b6c9;
  --dark: #050b14;
  --panel: #0a1422;
  --cyan: #37d9ff;
  --pink: #ff43b7;
  --line: rgba(255,255,255,.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--dark); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 16px; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.nav { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 22px clamp(22px,5vw,76px); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: .04em; }
.brand small { display: block; color: var(--cyan); font: 600 .62rem/1.2 "DM Sans", sans-serif; letter-spacing: .22em; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(55,217,255,.55); border-radius: 11px; color: var(--cyan); box-shadow: inset 0 0 18px rgba(55,217,255,.12); }
.nav-cta { border: 1px solid rgba(255,255,255,.32); border-radius: 999px; padding: 10px 18px; font-size: .9rem; font-weight: 700; transition: .2s ease; }
.nav-cta:hover { background: #fff; color: #07111f; }
.hero { min-height: 760px; height: min(900px,100svh); position: relative; display: flex; align-items: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#06101f 0%,rgba(6,16,31,.95) 33%,rgba(6,16,31,.1) 70%), linear-gradient(0deg,#050b14 0%,transparent 25%); z-index: 1; }
.hero-media { position: absolute; inset: 0; background: url("claw-hero.webp") center/cover no-repeat; }
.hero-copy { position: relative; z-index: 2; max-width: 690px; padding: 120px clamp(22px,7vw,110px) 80px; }
.eyebrow { margin: 0 0 19px; color: var(--cyan); font-weight: 700; font-size: .76rem; letter-spacing: .22em; }
h1,h2,h3 { font-family: "Space Grotesk", sans-serif; margin-top: 0; }
h1 { margin-bottom: 25px; font-size: clamp(3.55rem,7.4vw,7.6rem); line-height: .89; letter-spacing: -.07em; }
h1 em { font-style: normal; color: var(--cyan); text-shadow: 0 0 28px rgba(55,217,255,.2); }
.lede { max-width: 585px; margin: 0 0 31px; color: #cbd5e4; font-size: clamp(1.05rem,1.45vw,1.25rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; border-radius: 999px; padding: 0 25px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.primary { background: linear-gradient(100deg,var(--cyan),#8cf0ff); color: #03101b; box-shadow: 0 10px 34px rgba(55,217,255,.2); }
.primary:hover { box-shadow: 0 14px 40px rgba(55,217,255,.34); }
.ghost { border: 1px solid rgba(255,255,255,.28); background: rgba(7,15,27,.4); }
.ghost:hover { background: rgba(255,255,255,.09); }
.micro,.secure { color: #8190a5; font-size: .78rem; }
.micro { margin: 17px 0 0 5px; }
.concept-note { position: absolute; z-index: 2; right: 20px; bottom: 32px; color: rgba(255,255,255,.55); font-size: .69rem; }
.proof { display: grid; grid-template-columns: repeat(4,1fr); max-width: 1180px; margin: -32px auto 0; position: relative; z-index: 3; border: 1px solid var(--line); border-radius: 18px; background: rgba(9,19,33,.94); backdrop-filter: blur(16px); }
.proof article { display: flex; justify-content: center; align-items: center; gap: 15px; min-height: 118px; padding: 20px; border-right: 1px solid var(--line); }
.proof article:last-child { border: 0; }
.proof strong { font: 700 clamp(1.7rem,2.5vw,2.35rem)/1 "Space Grotesk"; color: var(--cyan); }
.proof span { color: var(--muted); font-size: .78rem; line-height: 1.35; text-transform: uppercase; letter-spacing: .08em; }
.story { max-width: 1180px; margin: auto; padding: 135px 24px; }
.story-intro { display: grid; grid-template-columns: 1.45fr 1fr; column-gap: 80px; align-items: end; margin-bottom: 70px; }
.story-intro .eyebrow { grid-column: 1 / -1; }
h2 { margin-bottom: 0; font-size: clamp(2.5rem,5vw,5.2rem); line-height: .98; letter-spacing: -.055em; }
h2 span { color: #718097; }
.story-intro > p:last-child { color: var(--muted); line-height: 1.75; font-size: 1.05rem; margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.feature { min-height: 240px; padding: 34px; background: var(--panel); }
.feature-wide { grid-column: 1 / -1; min-height: 270px; background: radial-gradient(circle at 90% 15%,rgba(255,67,183,.13),transparent 33%),var(--panel); }
.number { color: var(--pink); font-family: "Space Grotesk"; font-weight: 700; }
.feature h3 { margin: 54px 0 12px; font-size: 1.55rem; letter-spacing: -.025em; }
.feature p { max-width: 490px; margin: 0; color: var(--muted); line-height: 1.65; }
.buy { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: center; padding: 120px max(24px,calc((100vw - 1180px)/2)); background: radial-gradient(circle at 9% 86%,rgba(55,217,255,.12),transparent 36%),radial-gradient(circle at 80% 20%,rgba(255,67,183,.08),transparent 31%),#07111e; border-block: 1px solid var(--line); }
.buy-copy { max-width: 600px; color: var(--muted); line-height: 1.75; font-size: 1.08rem; }
.offer-card { padding: 38px; border: 1px solid rgba(55,217,255,.28); border-radius: 22px; background: rgba(8,19,33,.84); box-shadow: 0 30px 70px rgba(0,0,0,.28); }
.offer-label { margin: 0; color: var(--cyan); font-weight: 700; letter-spacing: .15em; font-size: .76rem; }
.price { margin: 18px 0 3px; font: 700 clamp(3.4rem,6vw,5.7rem)/1 "Space Grotesk"; letter-spacing: -.06em; }
.price span { font-size: .42em; vertical-align: top; line-height: 1.7; margin-right: 5px; }
.shipping { color: var(--muted); margin: 0 0 28px; }
.offer-card ul { list-style: none; padding: 24px 0; margin: 0 0 27px; border-block: 1px solid var(--line); }
.offer-card li { margin: 11px 0; color: #d1dbea; }
.offer-card li::before { content: "✓"; color: var(--cyan); margin-right: 11px; font-weight: 700; }
.full { width: 100%; }
.secure { text-align: center; margin: 12px 0 0; }
footer { max-width: 1180px; margin: auto; padding: 45px 24px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 30px; color: #738198; font-size: .78rem; }
.footer-brand { grid-row: span 2; color: #dfe7f3; }
footer p { margin: 0; text-align: right; }
.notice { position: fixed; left: 50%; bottom: 26px; z-index: 20; transform: translate(-50%,120px); opacity: 0; width: min(92vw,560px); padding: 16px 20px; border: 1px solid rgba(55,217,255,.3); border-radius: 12px; background: #0b1c2d; box-shadow: 0 20px 50px rgba(0,0,0,.4); text-align: center; transition: .28s ease; }
.notice.show { transform: translate(-50%,0); opacity: 1; }
@media (max-width: 820px) {
  .nav { padding: 18px 19px; }
  .nav-cta { padding: 9px 14px; }
  .hero { min-height: 790px; height: auto; align-items: flex-start; }
  .hero::before { background: linear-gradient(180deg,rgba(5,11,20,.18),#050b14 59%,#050b14 100%),linear-gradient(90deg,#06101f 0%,transparent 80%); }
  .hero-media { height: 53%; background-position: 65% center; }
  .hero-copy { padding: 430px 22px 80px; }
  h1 { font-size: clamp(3.2rem,15vw,5.2rem); }
  .concept-note { display: none; }
  .proof { margin: 0 18px; grid-template-columns: 1fr 1fr; }
  .proof article:nth-child(2) { border-right: 0; }
  .proof article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .story { padding: 95px 20px; }
  .story-intro,.buy { grid-template-columns: 1fr; }
  .story-intro { row-gap: 28px; margin-bottom: 48px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-wide { grid-column: auto; }
  .buy { gap: 48px; padding: 90px 20px; }
  footer { grid-template-columns: 1fr; }
  .footer-brand { grid-row: auto; margin-bottom: 20px; }
  footer p { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }