/* Safenames expired-domain parking page, v2.2.0: built to mirror www.safenames.net.
   Type and palette from the Safenames Brand Guidelines 2025: Poppins (Light body, Semibold headings),
   Base Blue, Heritage/Safenames Cyan, Domain Gold, Hosting Orange, BP Pink, Cyber Purple, Plaster. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); }

:root {
  --base: #051C2C;
  --base-deep: #04141F;
  --cyan: #27AAE1;
  --gold: #FFC81A;
  --orange: #F15A29;
  --pink: #EC008C;
  --purple: #A318F2;
  --green: #28AC87;
  --plaster: #F4F4F4;
  --white: #FFFFFF;
  --ink: #0B2234;
  --muted: #5B6B78;
  --rule: #E3E9EE;
  --font: "Poppins", Calibri, "Segoe UI", Arial, sans-serif;
  --wrap: 1140px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-weight: 300; font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--white); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; margin: 0 0 .6em; letter-spacing: 0; }
p { margin: 0 0 1em; }
sup { font-size: .6em; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin: 0 auto; }
.accent { color: var(--cyan); }

/* Top bar and nav, as on safenames.net */
.topbar { background: var(--base-deep); color: #B9C7D2; font-size: .78rem; font-weight: 400; }
.topbar .wrap { display: flex; gap: 1.5rem; align-items: center; min-height: 34px; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--white); }
.topbar-right { margin-left: auto; }
.nav { background: var(--cyan); color: var(--white); }
.nav .wrap { display: flex; align-items: center; gap: 2rem; min-height: 64px; }
.brand img { width: 136px; height: 34px; }
.nav nav { display: none; gap: 1.6rem; margin-left: auto; font-size: .9rem; font-weight: 400; }
.nav nav a { color: var(--white); text-decoration: none; }
.nav nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-login { margin-left: auto; color: var(--white); font-size: .9rem; font-weight: 400; text-decoration: none; }
.nav nav + .nav-login { margin-left: 0; }
@media (min-width: 900px) { .nav nav { display: flex; } }

/* Buttons (site style: small radius, arrow, filled in the section colour) */
.btn { display: inline-block; padding: .7rem 1.15rem; border-radius: 6px; font-weight: 400; font-size: .92rem; text-decoration: none; line-height: 1.3; transition: filter .15s ease, background-color .15s ease; }
.btn:hover { filter: brightness(1.08); }
.btn-primary, .btn-cyan { background: var(--cyan); color: var(--white); }
.btn-ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.75); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-gold { background: var(--gold); color: var(--base); }
.btn-purple { background: var(--purple); color: var(--white); }
.btn-orange { background: var(--orange); color: var(--white); }
.btn-pink { background: var(--pink); color: var(--white); }

/* Hero: dark gradient like the homepage, headline accent in cyan */
.hero { color: var(--white); background: radial-gradient(120% 140% at 85% 20%, #10335a 0%, var(--base) 45%, #140f33 100%); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; padding: 3.5rem 0 2.5rem; }
.status { margin: 0 0 1rem; font-size: .85rem; font-weight: 400; color: #B9C7D2; }
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); margin-bottom: 1rem; overflow-wrap: anywhere; }
.lede { max-width: 36rem; font-size: 1.02rem; color: #D5DEE6; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 0; }
.hero-art { justify-self: center; }
.hero-art img { width: min(260px, 70vw); filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
@media (min-width: 820px) {
  .hero-grid { grid-template-columns: 1.2fr .8fr; gap: 3rem; padding: 5rem 0 4rem; }
  .hero-art img { width: 320px; }
}

/* Statement band: the dark section with the service-icons banner from safenames.net */
.statement { background: var(--base); color: #D5DEE6; text-align: center; padding: 3.5rem 0 4rem; }
.statement h2 { color: var(--white); font-size: clamp(1.5rem, 3.4vw, 2.1rem); max-width: 34rem; margin: 1.5rem auto .8rem; }
.statement p { max-width: 44rem; margin: 0 auto; font-size: 1rem; }
.banner { width: min(820px, 94vw); height: auto; margin: 0 auto .5rem; }

/* Cards: white on a soft light field, one per service family, in its colour */
.cards { background: radial-gradient(60% 50% at 20% 0%, #E8F4FB 0%, var(--white) 60%), radial-gradient(50% 50% at 90% 100%, #EEF3FF 0%, var(--white) 60%); padding: 3.5rem 0 3rem; }
.cards .wrap { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.card { background: var(--white); border-radius: 12px; padding: 1.75rem 1.6rem 1.6rem; box-shadow: 0 18px 40px rgba(5,28,44,.08), 0 1px 2px rgba(5,28,44,.06); }
.card h3 { font-size: 1.2rem; color: var(--ink); margin: .9rem 0 .25rem; }
.card .sub { font-weight: 600; font-size: .98rem; margin-bottom: .9rem; }
.card p { font-size: .93rem; color: var(--muted); font-weight: 400; }
.card .btn { margin-top: .25rem; }
.sub-cyan { color: var(--cyan); } .sub-gold { color: #D9A200; } .sub-purple { color: var(--purple); } .sub-orange { color: var(--orange); } .sub-pink { color: var(--pink); }
.icon { width: 28px; height: 28px; }
.icon-cyan { fill: var(--cyan); } .icon-gold { fill: var(--gold); } .icon-purple { fill: var(--purple); } .icon-orange { fill: var(--orange); } .icon-pink { fill: var(--pink); }
@media (min-width: 760px) {
  .cards .wrap { grid-template-columns: 1fr 1fr; }
  .card-wide { grid-column: 1 / -1; max-width: 760px; justify-self: center; width: 100%; }
}

/* Closing line and footer */
.closing { text-align: center; padding: 2.5rem 0 4rem; }
.closing h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.closing p { max-width: 40rem; margin: 0 auto 1.6rem; color: var(--muted); font-weight: 400; }
.footer { background: var(--base-deep); color: #B9C7D2; font-size: .9rem; font-weight: 400; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0 2rem; }
.footer img { width: 136px; height: 34px; }
.mission { margin: 1rem 0 0; color: var(--cyan); font-weight: 600; }
.footer dl { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; }
.footer dt { font-size: .8rem; color: #8FA3B3; }
.footer dd { margin: .1rem 0 0; }
.footer dd a { color: var(--white); text-decoration: none; font-weight: 600; }
.footer dd a:hover { text-decoration: underline; }
.legal { border-top: 1px solid rgba(255,255,255,.08); padding: 1.2rem 0 1.6rem; font-size: .78rem; color: #8FA3B3; }
.legal p { margin: 0; }
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 2fr; align-items: start; }
  .footer dl { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } html { scroll-behavior: auto; } }