:root {
  --ink: #0d103c;
  --cream: #fff6e8;
  --coral: #ff5c65;
  --yellow: #ffca45;
  --violet: #8856f5;
  --cyan: #19c8dc;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; }
a { color: inherit; text-decoration: none; }

.hero { min-height: min(780px, 100vh); position: relative; isolation: isolate; overflow: hidden; color: white; background: #12155b; padding: 28px clamp(24px, 5.2vw, 80px) 42px; display: flex; flex-direction: column; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 8, 49, .92) 0%, rgba(6, 13, 66, .77) 35%, rgba(10, 13, 57, .12) 75%); }
.hero-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.grain { position: absolute; z-index: -1; inset: 0; opacity: .2; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.nav { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.brand { font: 700 clamp(27px, 2.6vw, 38px) Arial, Helvetica, sans-serif; letter-spacing: -1.8px; }
.brand span { color: var(--yellow); font-style: italic; }
.nav-link { font: 500 13px "DM Mono", monospace; letter-spacing: .05em; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 5px; transition: color .2s, border-color .2s; }
.nav-link:hover { color: var(--yellow); border-color: var(--yellow); }
.hero-copy { margin: auto 0; max-width: 665px; padding: 80px 0 56px; }
.eyebrow, .kicker, .story-label { font: 500 11px "DM Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { display: flex; gap: 10px; align-items: center; color: #cbd3ff; }
.eyebrow span { display: inline-block; height: 8px; width: 8px; background: var(--yellow); border-radius: 50%; }
h1, h2 { margin: 17px 0; font: 600 clamp(56px, 7.4vw, 112px)/.91 "Playfair Display", serif; letter-spacing: -.065em; }
h1 em, h2 em { color: var(--yellow); font-weight: 600; }
.domain-name { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight: 700; letter-spacing: -.08em; }
.intro { max-width: 405px; margin: 23px 0 24px; color: #e8eaff; font-size: 18px; line-height: 1.5; }
.price-block { display: grid; width: fit-content; gap: 2px; margin: 0 0 31px; padding: 15px 20px 17px; border-left: 4px solid var(--yellow); background: rgba(15, 18, 80, .35); backdrop-filter: blur(8px); }
.price-block span, .price-block small { color: #dce1ff; font: 11px "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.price-block strong { color: var(--yellow); font-size: clamp(35px, 4vw, 54px); line-height: 1; letter-spacing: -.06em; }
.button { display: inline-flex; align-items: center; gap: 28px; padding: 16px 22px; background: var(--yellow); color: #161646; border-radius: 5px; font-size: 14px; font-weight: 700; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-3px) rotate(-1deg); background: white; }
.button span { font-size: 23px; line-height: 12px; }
.scroll-hint { position: absolute; bottom: 20px; left: clamp(24px, 5.2vw, 80px); color: rgba(255,255,255,.55); font: 10px "DM Mono", monospace; letter-spacing: .12em; }
.scroll-hint span { margin-left: 6px; color: var(--yellow); font-size: 14px; }

.story { position: relative; display: grid; grid-template-columns: minmax(120px,.5fr) 1.7fr 1.3fr; gap: clamp(25px, 5vw, 90px); padding: clamp(76px, 10vw, 145px) clamp(24px, 10vw, 150px); background: var(--cream); }
.story-label { color: var(--coral); padding-top: 8px; }
.story-main .kicker { color: var(--violet); }
.story h2 { font-size: clamp(44px, 5.3vw, 78px); color: var(--ink); }
.story h2 em { color: var(--coral); }
.story-main > p:last-child { max-width: 430px; font-size: 17px; line-height: 1.65; color: #555378; }
.benefits { display: grid; align-content: end; gap: 0; }
.benefits article { border-top: 1px solid #d7d0c2; padding: 16px 0 18px; }
.benefits span { color: var(--violet); font: 11px "DM Mono", monospace; }
.benefits h3 { margin: 8px 0 5px; font-size: 18px; letter-spacing: -.03em; }
.benefits p { margin: 0; color: #65627a; font-size: 14px; line-height: 1.45; }

.closing { position: relative; overflow: hidden; text-align: center; padding: clamp(82px, 10vw, 138px) 24px; color: white; background: linear-gradient(120deg, #713ce7, #f25278 53%, #ff8d4a); }
.closing::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.28) 1px, transparent 1px); background-size: 17px 17px; opacity: .25; }
.closing > * { position: relative; }
.closing .eyebrow { justify-content: center; color: white; }
.closing .eyebrow span { background: #14124b; }
.closing h2 { font-size: clamp(48px, 6.2vw, 87px); margin: 18px 0 30px; }
.closing .button { background: #131448; color: white; }
.closing .button:hover { color: #131448; }
.note { margin: 35px 0 0; color: rgba(255,255,255,.83); font: 11px "DM Mono", monospace; letter-spacing: .04em; }
.closing-orb { position: absolute; border-radius: 50%; filter: blur(1px); mix-blend-mode: screen; }
.orb-one { width: 270px; height: 270px; left: -95px; bottom: -135px; background: var(--yellow); opacity: .72; }
.orb-two { width: 370px; height: 370px; right: -130px; top: -190px; background: var(--cyan); opacity: .63; }

@media (max-width: 760px) {
  .hero { min-height: 720px; }
  .hero::after { background: linear-gradient(0deg, rgba(7, 8, 46, .88), rgba(8,12,65,.70)); }
  .hero-art { object-position: 68% center; }
  .hero-copy { padding: 90px 0 70px; }
  .intro { font-size: 16px; }
  .scroll-hint { display: none; }
  .story { grid-template-columns: 1fr; gap: 30px; }
  .story-label { padding: 0; }
  .benefits { grid-template-columns: 1fr; }
}