:root {
  --coral: #ff705d;
  --coral-dark: #e95a4a;
  --ink: #213c43;
  --teal: #87e5d4;
  --cream: #fff7e9;
  --yellow: #ffd978;
  --muted: #607477;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: 'DM Sans', sans-serif; }
.site-shell { min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 79% 17%, rgba(255, 217, 120, .37), transparent 17rem), var(--cream); }
.topbar { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--cream); background: var(--ink); border-radius: 50%; font-size: 23px; line-height: 1; }
.nav-contact { color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.nav-contact span { margin-left: 6px; color: var(--coral-dark); font-size: 18px; }
.hero-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, .9fr); align-items: center; gap: 5vw; max-width: 1200px; min-height: 650px; padding-top: 60px; padding-bottom: 76px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--coral-dark); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pulse-dot { width: 9px; height: 9px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,112,93,.14); }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; }
h1 { max-width: 700px; margin: 0; font-size: clamp(3.4rem, 6vw, 5.7rem); font-weight: 600; letter-spacing: -.055em; line-height: .96; }
h1 em { color: var(--coral); font-style: normal; }
.hero-lede { max-width: 450px; margin: 29px 0 34px; color: var(--muted); font-size: 18px; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.btn-primary { border: 0; border-radius: 100px; padding: 15px 23px; color: #fff; background: var(--coral); box-shadow: 0 12px 24px rgba(233,90,74,.2); font-size: 15px; font-weight: 700; }
.btn-primary:hover, .btn-primary:focus { background: var(--coral-dark); }
.btn-primary span { margin-left: 12px; font-size: 19px; }
.price-lockup { display: flex; flex-direction: column; }
.price-label { color: var(--muted); font-size: 12px; }
.price-lockup strong { font-family: 'Space Grotesk', sans-serif; font-size: 22px; }
.price-lockup small { color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500; }
.domain-art { position: relative; min-height: 420px; }
.art-sun { position: absolute; top: 10px; right: 1%; width: 270px; height: 270px; background: var(--yellow); border-radius: 48% 52% 46% 54%; transform: rotate(20deg); }
.domain-card { position: absolute; top: 134px; left: 0; z-index: 1; display: flex; align-items: baseline; width: max-content; padding: 26px 30px 29px; background: var(--ink); border-radius: 18px; box-shadow: 15px 20px 0 var(--teal); font-family: 'Space Grotesk', sans-serif; transform: rotate(-5deg); }
.domain-prefix { color: #91a8aa; font-size: 16px; }
.domain-name, .domain-dot, .domain-tld { color: #fff; font-size: clamp(2.5rem, 5vw, 4.8rem); font-weight: 600; letter-spacing: -.07em; line-height: 1; }
.domain-dot { color: var(--coral); }
.domain-cursor { width: 4px; height: 51px; margin-left: 9px; background: var(--teal); animation: blink 1.15s step-end infinite; }
.art-star { position: absolute; z-index: 2; color: var(--coral); font-size: 36px; }
.art-star-one { top: 76px; left: -28px; }.art-star-two { right: 0; bottom: 94px; color: var(--teal); font-size: 28px; }
.art-note { position: absolute; z-index: 2; padding: 10px 14px; color: var(--ink); background: #fff; border-radius: 4px; font-size: 12px; font-weight: 700; box-shadow: 0 8px 22px rgba(33,60,67,.1); }
.note-left { bottom: 73px; left: 10px; transform: rotate(-7deg); }.note-left span { margin-right: 4px; color: var(--coral); }.note-right { top: 63px; right: 2px; transform: rotate(5deg); }.note-right span { margin-left: 5px; color: var(--coral); font-size: 18px; }
.details-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; padding-top: 78px; padding-bottom: 98px; border-top: 1px solid rgba(33,60,67,.12); }
.section-intro .eyebrow { margin-bottom: 15px; }.section-intro h2 { margin: 0; font-size: 39px; letter-spacing: -.05em; line-height: 1; }
.details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }.detail-item { display: flex; flex-direction: column; gap: 17px; }.detail-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--ink); background: var(--teal); border-radius: 14px; font-size: 24px; }.icon-globe { background: var(--yellow); }.icon-arrow { background: var(--coral); color: #fff; }.detail-item h3 { margin: 0 0 8px; font-size: 17px; }.detail-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.footer { display: flex; justify-content: space-between; padding-top: 22px; padding-bottom: 27px; border-top: 1px solid rgba(33,60,67,.12); color: var(--muted); font-size: 12px; }.footer p { margin: 0; }.footer-contact { display: flex; align-items: center; gap: 10px; }.footer-contact a { color: var(--ink); font-weight: 700; text-decoration: none; }.copy-button { padding: 3px 8px; border: 1px solid rgba(33,60,67,.2); border-radius: 5px; color: var(--ink); background: transparent; font-size: 11px; }.copy-button:hover { background: #fff; }.copy-toast { position: fixed; right: 24px; bottom: 24px; padding: 11px 16px; color: #fff; background: var(--ink); border-radius: 8px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s ease; }.copy-toast.show { opacity: 1; transform: translateY(0); }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 767px) { .topbar { padding-top: 20px; }.nav-contact { font-size: 0; }.nav-contact span { font-size: 20px; }.hero-section { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-top: 76px; padding-bottom: 72px; gap: 22px; }.hero-lede { font-size: 16px; }.hero-actions { gap: 20px; }.domain-art { min-height: 310px; margin: 10px 5px 0; }.art-sun { width: 190px; height: 190px; right: 5%; }.domain-card { top: 106px; left: 3%; padding: 20px 18px 23px; box-shadow: 9px 13px 0 var(--teal); }.domain-prefix { font-size: 11px; }.domain-name, .domain-dot, .domain-tld { font-size: 2.8rem; }.domain-cursor { height: 34px; width: 3px; }.art-star-one { top: 59px; left: -5px; }.note-left { bottom: 20px; left: 8px; }.note-right { top: 38px; right: -3px; }.details-section { display: block; padding-top: 58px; padding-bottom: 58px; }.details-grid { grid-template-columns: 1fr; gap: 25px; margin-top: 35px; }.detail-item { display: grid; grid-template-columns: 48px 1fr; gap: 16px; }.footer { align-items: flex-start; flex-direction: column; gap: 16px; }.footer-contact { flex-wrap: wrap; } }