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

:root {
  --ink: #1e1636;
  --paper: #f7f3ff;
  --surface: #ffffff;
  --violet: #8d5cf6;
  --pink: #ff5c93;
  --mint: #48d6ae;
  --gold: #ffc75a;
  --muted: #6d6680;
  --line: rgba(30, 22, 54, 0.14);
  --shadow: 0 24px 70px rgba(30, 22, 54, 0.13);
  --radius: 28px;
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; line-height: 1.65; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 10000; padding: .7rem 1rem; background: var(--ink); color: #fff; border-radius: 12px; }
.skip-link:focus { top: 1rem; }

.domain-sale-banner { position: relative; z-index: 9999; width: 100%; color: #fff; background: radial-gradient(circle at 14% 50%, rgba(255,92,147,.48), transparent 34%), linear-gradient(100deg,#1e1636 0%,#351d57 58%,#173e43 100%); border-bottom: 1px solid rgba(255,255,255,.16); box-shadow: 0 8px 28px rgba(30,22,54,.18); font-family: "DM Sans",sans-serif; }
.domain-sale-banner__content { width: min(var(--max),calc(100% - 32px)); min-height: 76px; margin: 0 auto; padding: 12px 0; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.domain-sale-banner__text { display:grid; gap:4px; line-height:1.35; }
.domain-sale-banner__text strong { font-size:clamp(1rem,2vw,1.2rem); letter-spacing:-.01em; }
.domain-sale-banner__text span { color:rgba(255,255,255,.78); font-size:.92rem; }
.domain-sale-banner__button { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:0 20px; color:#1e1636; background:var(--gold); border:1px solid #ffe093; border-radius:999px; box-shadow:0 8px 20px rgba(255,199,90,.28); font-size:.94rem; font-weight:800; text-decoration:none; transition:transform 160ms ease,background 160ms ease,box-shadow 160ms ease; }
.domain-sale-banner__button:hover,.domain-sale-banner__button:focus-visible { background:#ffd477; box-shadow:0 10px 26px rgba(255,199,90,.38); transform:translateY(-2px); outline:none; }

.site-header { position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(18px); background: rgba(247,243,255,.88); border-bottom: 1px solid var(--line); }
.nav-wrap { width:min(var(--max),calc(100% - 32px)); margin:auto; min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; font-weight:800; letter-spacing:-.03em; }
.brand img { width:42px; height:42px; border-radius:13px; }
.nav-toggle { display:inline-grid; place-items:center; width:48px; height:48px; border:1px solid var(--line); background:var(--surface); border-radius:15px; cursor:pointer; }
.nav-toggle span,.nav-toggle::before,.nav-toggle::after { content:""; width:22px; height:2px; background:var(--ink); display:block; transition:.2s; }
.site-nav { position:absolute; inset:76px 16px auto; display:none; padding:1rem; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.site-nav.open { display:grid; }
.site-nav a { padding:.8rem 1rem; border-radius:12px; text-decoration:none; font-weight:700; }
.site-nav a:hover,.site-nav a[aria-current="page"] { background:#eee6ff; color:#5f31bc; }

.container { width:min(var(--max),calc(100% - 32px)); margin:auto; }
.hero { padding:48px 0 78px; }
.hero-grid { display:grid; gap:28px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-weight:800; color:#6335bb; text-transform:uppercase; letter-spacing:.12em; font-size:.77rem; }
.eyebrow::before { content:""; width:36px; height:4px; border-radius:99px; background:linear-gradient(90deg,var(--pink),var(--gold)); }
h1,h2,h3 { font-family:"Fraunces",serif; line-height:1.05; letter-spacing:-.04em; margin:0 0 1rem; }
h1 { font-size:clamp(3rem,10vw,6.6rem); max-width:11ch; }
h2 { font-size:clamp(2.2rem,6vw,4rem); }
h3 { font-size:1.5rem; }
.lede { font-size:clamp(1.08rem,2vw,1.3rem); color:var(--muted); max-width:60ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:1.7rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 20px; border-radius:999px; text-decoration:none; font-weight:800; border:1px solid transparent; transition:.2s; }
.button-primary { background:var(--ink); color:#fff; box-shadow:0 12px 30px rgba(30,22,54,.22); }
.button-secondary { background:var(--surface); border-color:var(--line); }
.button:hover { transform:translateY(-2px); }
.hero-media { position:relative; }
.hero-media img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:clamp(24px,5vw,52px); box-shadow:var(--shadow); }
.float-card { position:absolute; right:-4px; bottom:-24px; max-width:260px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:1rem; box-shadow:var(--shadow); font-weight:700; }

.section { padding:78px 0; }
.section-head { display:grid; gap:12px; margin-bottom:34px; max-width:760px; }
.grid-3 { display:grid; gap:18px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.35rem,4vw,2rem); box-shadow:0 16px 45px rgba(30,22,54,.08); }
.card .icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:#eee6ff; font-size:1.4rem; margin-bottom:1rem; }
.card p { color:var(--muted); margin-bottom:0; }
.ribbon { overflow:hidden; padding:14px 0; background:var(--ink); color:#fff; transform:rotate(-1deg); }
.ribbon-track { display:flex; gap:2.5rem; width:max-content; animation:marquee 24s linear infinite; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
@keyframes marquee { to { transform:translateX(-50%); } }
.split { display:grid; gap:28px; align-items:center; }
.quote-panel { background:linear-gradient(135deg,#ff5c93,#8d5cf6); color:#fff; border-radius:40px; padding:clamp(2rem,6vw,4rem); }
.quote-panel blockquote { font-family:"Fraunces",serif; font-size:clamp(2rem,6vw,4.5rem); line-height:1.03; margin:0; }
.list-check { list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.8rem; }
.list-check li { display:flex; gap:.7rem; align-items:flex-start; }
.list-check li::before { content:"✓"; flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--mint); color:var(--ink); font-weight:900; }

.page-hero { padding:70px 0 36px; }
.page-hero h1 { max-width:14ch; }
.contact-grid { display:grid; gap:24px; }
.contact-form { display:grid; gap:15px; }
label { font-weight:800; }
input,textarea { width:100%; border:1px solid var(--line); background:#fff; border-radius:15px; padding:14px 15px; color:var(--ink); }
textarea { min-height:160px; resize:vertical; }
.note { color:var(--muted); font-size:.92rem; }

.site-footer { margin-top:70px; padding:55px 0 24px; background:var(--ink); color:#fff; }
.footer-grid { display:grid; gap:30px; }
.footer-links { display:flex; flex-wrap:wrap; gap:16px; }
.footer-links a { color:#ddd4ed; }
.footer-bottom { margin-top:38px; padding-top:20px; border-top:1px solid rgba(255,255,255,.15); color:#bbb2cc; font-size:.9rem; }
.error-page { min-height:70vh; display:grid; place-items:center; text-align:center; padding:50px 0; }
.error-code { font-family:"Fraunces",serif; font-size:clamp(7rem,25vw,15rem); line-height:.8; background:linear-gradient(90deg,var(--pink),var(--violet),var(--mint)); -webkit-background-clip:text; color:transparent; }

@media (max-width:680px){.domain-sale-banner__content{min-height:auto;padding:14px 0;align-items:stretch;flex-direction:column;gap:12px}.domain-sale-banner__button{width:100%}.float-card{position:relative;right:auto;bottom:auto;margin:-12px 16px 0}.hero{padding-top:34px}}
@media (min-width:760px){.grid-3{grid-template-columns:repeat(3,1fr)}.split,.contact-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1.2fr .8fr}}
@media (min-width:900px){.nav-toggle{display:none}.site-nav{position:static;display:flex;padding:0;background:transparent;border:0;box-shadow:none}.hero-grid{grid-template-columns:.92fr 1.08fr;gap:50px}.hero{padding:72px 0 100px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Layout stability patch */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
main, section, header, footer, .container, .nav-wrap, .domain-sale-banner__content,
.hero-grid > *, .split > *, .contact-grid > *, .grid-3 > * { min-width: 0; }
body { overflow-wrap: anywhere; }
.brand span { white-space: nowrap; }
.hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero h1, .page-hero h1 { overflow-wrap: normal; word-break: normal; }
.hero-media { width: 100%; max-width: 100%; }
.ribbon { transform: none; border-block: 1px solid rgba(255,255,255,.08); }
.ribbon-track { padding-inline: 1.25rem; }
.card, .quote-panel { max-width: 100%; }
.contact-form > div { display: grid; gap: .45rem; }
.site-nav { z-index: 20; }
.nav-toggle { position: relative; padding: 0; }
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after { position: absolute; left: 50%; transform: translateX(-50%); }
.nav-toggle::before { top: 15px; }
.nav-toggle span { top: 23px; }
.nav-toggle::after { top: 31px; }
.nav-toggle[aria-expanded="true"] span { opacity: 0; }
.nav-toggle[aria-expanded="true"]::before { top: 23px; transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { top: 23px; transform: translateX(-50%) rotate(-45deg); }

@media (max-width: 420px) {
  .container, .nav-wrap, .domain-sale-banner__content { width: min(100% - 24px, var(--max)); }
  h1 { font-size: clamp(2.55rem, 15vw, 3.55rem); }
  h2 { font-size: clamp(2rem, 11vw, 2.75rem); }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .brand span { font-size: .96rem; }
}

@media (min-width: 760px) and (max-width: 999px) {
  .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; }
  .hero h1 { font-size: clamp(3.7rem, 7.4vw, 5rem); }
  .float-card { max-width: 225px; }
}

@media (min-width: 900px) {
  .site-nav { inset: auto; }
}

@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .hero h1 { font-size: clamp(4.5rem, 6.2vw, 6.15rem); }
}

@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
