/* ==========================================================================
   RGBGR — domain sale landing page
   ========================================================================== */

:root{
  --r: #ff3355;
  --g: #22dd7a;
  --b: #3b82f6;

  --bg:   #05060c;
  --bg2:  #090b14;
  --ink:  #eef1fa;
  --mid:  #a7b0c8;
  --dim:  #6b7590;
  --line: rgba(150,170,220,.13);
  --card: rgba(255,255,255,.028);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", "Segoe UI Mono", Menlo, Consolas, monospace;

  --maxw: 1120px;
  --r-lg: 20px;
  --r-md: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; }
img{ max-width:100%; }

::selection{ background:rgba(59,130,246,.35); color:#fff; }

:focus-visible{
  outline:2px solid var(--b);
  outline-offset:3px;
  border-radius:6px;
}

/* ==========================================================================
   BACKGROUND
   ========================================================================== */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:
  radial-gradient(120% 80% at 50% 0%, #0c1022 0%, #06070f 55%, #04050a 100%); }

.orb{
  position:absolute; display:block;
  width:62vmax; height:62vmax; border-radius:50%;
  filter:blur(100px); opacity:.2; mix-blend-mode:screen;
  will-change:transform;
}
.o-r{ background:radial-gradient(circle, var(--r) 0%, transparent 62%); top:-22vmax; left:-16vmax; animation:f1 30s ease-in-out infinite; }
.o-g{ background:radial-gradient(circle, var(--g) 0%, transparent 62%); top:-14vmax; right:-20vmax; animation:f2 38s ease-in-out infinite; }
.o-b{ background:radial-gradient(circle, var(--b) 0%, transparent 62%); top:26vmax; left:22vmax; animation:f3 34s ease-in-out infinite; }
@keyframes f1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(10vmax,8vmax,0) scale(1.16)} }
@keyframes f2{ 0%,100%{transform:translate3d(0,0,0) scale(1.08)} 50%{transform:translate3d(-12vmax,10vmax,0) scale(.92)} }
@keyframes f3{ 0%,100%{transform:translate3d(0,0,0) scale(.96)} 50%{transform:translate3d(-8vmax,-12vmax,0) scale(1.14)} }

.grid{
  position:absolute; inset:0; display:block;
  background-image:
    linear-gradient(rgba(140,165,225,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,165,225,.05) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 12%, #000 10%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 12%, #000 10%, transparent 75%);
}
.noise{
  position:absolute; inset:0; display:block; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}

/* ==========================================================================
   NAV
   ========================================================================== */
/* full-bleed bar, content constrained by an inner wrapper */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  background:linear-gradient(to bottom, rgba(5,6,12,.82), rgba(5,6,12,.28));
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.stuck{
  border-bottom-color:var(--line);
  background:rgba(5,6,12,.9);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--maxw); margin:0 auto;
  padding:15px clamp(18px,4vw,32px);
}

.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.brand-dots{ display:inline-flex; gap:-4px; }
.brand-dots i{
  width:13px; height:13px; border-radius:50%; display:block; margin-right:-5px;
  mix-blend-mode:screen;
}
.brand-dots i:nth-child(1){ background:var(--r); }
.brand-dots i:nth-child(2){ background:var(--g); }
.brand-dots i:nth-child(3){ background:var(--b); margin-right:0; }
.brand-txt{ font-weight:800; letter-spacing:.16em; font-size:15px; }

.nav-links{ display:flex; align-items:center; gap:clamp(12px,2.4vw,28px); }
.nav-links a{
  text-decoration:none; color:var(--mid); font-size:14px; font-weight:500;
  transition:color .2s;
}
.nav-links a:hover{ color:#fff; }
.nav-cta{
  padding:9px 20px; border-radius:99px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:#fff !important;
}
.nav-cta:hover{ border-color:rgba(160,190,255,.4); background:rgba(255,255,255,.08); }
@media (max-width:560px){ .nav-links a:not(.nav-cta){ display:none; } }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(56px,10vw,110px) clamp(18px,4vw,32px) 0;
}
.h2{
  margin:0;
  font-size:clamp(26px,4.4vw,42px);
  line-height:1.15; font-weight:800; letter-spacing:-.02em;
}
.sub{
  margin:10px 0 clamp(28px,4vw,44px);
  color:var(--mid); font-size:clamp(15px,1.7vw,18px); max-width:56ch;
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .orb{ animation:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(44px,9vw,96px) clamp(18px,4vw,32px) 0;
  text-align:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 clamp(20px,3vw,30px);
  padding:7px 16px 7px 11px; border-radius:99px;
  border:1px solid var(--line); background:rgba(255,255,255,.035);
  color:var(--mid); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
}
@media (max-width:480px){ .sm-hide{ display:none; } }
.pip{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:var(--g); box-shadow:0 0 0 0 rgba(34,221,122,.6);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,221,122,.55) }
  70%{ box-shadow:0 0 0 9px rgba(34,221,122,0) }
  100%{ box-shadow:0 0 0 0 rgba(34,221,122,0) }
}
@media (prefers-reduced-motion: reduce){ .pip{ animation:none } }

.wordmark{
  margin:0;
  font-size:clamp(66px,18vw,190px);
  line-height:.9; font-weight:900; letter-spacing:-.035em;
  display:flex; justify-content:center;
}
.wordmark .l{
  display:inline-block;
  transition:transform .35s cubic-bezier(.2,1.4,.4,1), filter .35s;
}
.wordmark .l:hover{ transform:translateY(-10px) scale(1.04); }
.l-r{ color:var(--r); text-shadow:0 0 60px rgba(255,51,85,.5); }
.l-g{ color:var(--g); text-shadow:0 0 60px rgba(34,221,122,.42); }
.l-b{ color:var(--b); text-shadow:0 0 60px rgba(59,130,246,.5); }

.mixbar{
  width:min(560px,86%); height:3px; margin:clamp(20px,3vw,30px) auto 0;
  border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.06);
}
.mixbar i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, var(--r), #ffd23f 22%, var(--g) 48%, #22d3ee 72%, var(--b));
  background-size:220% 100%;
  animation:slide 7s linear infinite;
}
@keyframes slide{ to{ background-position:220% 0; } }
@media (prefers-reduced-motion: reduce){ .mixbar i{ animation:none } }

.lede{
  margin:clamp(24px,3.4vw,34px) auto 0;
  max-width:56ch;
  font-size:clamp(16px,2.1vw,21px);
  color:var(--mid);
}
.lede strong{ color:#fff; font-family:var(--mono); font-weight:600; letter-spacing:-.01em; }

.hero-cta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin:clamp(28px,4vw,40px) 0 0;
}
.hero-note{ margin:18px 0 0; color:var(--dim); font-size:13.5px; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px; border-radius:99px;
  font-family:inherit; font-size:15px; font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .12s, box-shadow .28s, background .25s, border-color .25s, color .25s;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-sm{ padding:11px 22px; font-size:14px; }
.btn-wide{ width:100%; padding:16px 28px; font-size:16px; }

.btn-primary{
  color:#07080f;
  background:linear-gradient(100deg, var(--r) 0%, #ffd23f 34%, var(--g) 63%, var(--b) 100%);
  background-size:180% 100%;
  box-shadow:0 8px 30px rgba(59,130,246,.24), 0 2px 10px rgba(0,0,0,.4);
}
.btn-primary:hover{
  background-position:100% 0;
  box-shadow:0 12px 44px rgba(120,180,255,.36), 0 2px 10px rgba(0,0,0,.4);
}
.btn-ghost{
  color:var(--ink); border-color:var(--line); background:rgba(255,255,255,.035);
  font-family:var(--mono); font-size:14px;
}
.btn-ghost:hover{ border-color:rgba(160,190,255,.42); background:rgba(255,255,255,.075); }
.copy-icon{ opacity:.5; font-size:15px; }
.copy-btn.done{ border-color:var(--g); color:var(--g); }

/* ==========================================================================
   DOMAIN CARDS
   ========================================================================== */
.cards{
  display:grid; gap:clamp(14px,2.4vw,22px);
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
}
.card{
  position:relative; overflow:hidden;
  padding:clamp(24px,3.4vw,38px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--card);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), border-color .35s, background .35s;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg, transparent, currentColor, transparent);
  opacity:.7;
}
.card-com{ color:var(--b); }
.card-ai{ color:var(--g); }
.card:hover{ transform:translateY(-5px); border-color:rgba(160,190,255,.28); background:rgba(255,255,255,.05); }

.card-tag{
  display:inline-block; margin-bottom:16px;
  padding:5px 13px; border-radius:99px;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  border:1px solid currentColor; opacity:.85;
}
.card-domain{
  margin:0 0 14px;
  font-family:var(--mono); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(28px,4.6vw,44px); line-height:1.05;
  color:#fff; word-break:break-word;
}
.card-domain em{ font-style:normal; color:currentColor; }
.card-body{ margin:0 0 18px; color:var(--mid); font-size:15.5px; }
.card-list{ margin:0 0 24px; padding:0; list-style:none; display:grid; gap:9px; }
.card-list li{
  position:relative; padding-left:24px; color:var(--mid); font-size:14.5px;
}
.card-list li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:50%; background:currentColor;
}
.card-list b{ color:#fff; font-weight:600; }
.card-cta{
  display:inline-block; text-decoration:none; font-weight:600; font-size:14.5px;
  color:currentColor; transition:gap .2s, opacity .2s;
}
.card-cta:hover{ opacity:.75; }

.bundle{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  margin-top:clamp(14px,2.4vw,22px);
  padding:clamp(20px,3vw,28px) clamp(22px,3.4vw,34px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(100deg, rgba(255,51,85,.07), rgba(34,221,122,.06), rgba(59,130,246,.09));
}
.bundle-txt{ color:var(--mid); font-size:15.5px; max-width:62ch; }
.bundle-txt strong{ color:#fff; display:block; font-size:17px; margin-bottom:3px; }

/* ==========================================================================
   FEATURES
   ========================================================================== */
.grid-3{
  display:grid; gap:clamp(12px,2.2vw,20px);
  grid-template-columns:repeat(auto-fit, minmax(268px,1fr));
}
.feat{
  padding:clamp(20px,2.8vw,30px);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--card);
  transition:transform .3s, border-color .3s, background .3s;
}
.feat:hover{ transform:translateY(-3px); border-color:rgba(160,190,255,.24); background:rgba(255,255,255,.05); }
.feat-ico{
  width:44px; height:44px; margin-bottom:16px;
  display:grid; place-items:center; border-radius:12px;
  font-size:19px; font-weight:700;
  border:1px solid var(--line);
}
.ico-pal { color:var(--r); background:rgba(255,51,85,.1); }
.ico-rgb { color:var(--g); background:rgba(34,221,122,.1); }
.ico-five{ color:var(--b); background:rgba(59,130,246,.12); }
.ico-pair{ color:#ffd23f; background:rgba(255,210,63,.1); }
.ico-flex{ color:#22d3ee; background:rgba(34,211,238,.1); }
.ico-clean{ color:#c084fc; background:rgba(192,132,252,.1); }
.feat h3{ margin:0 0 8px; font-size:17.5px; font-weight:700; letter-spacing:-.01em; }
.feat p{ margin:0; color:var(--mid); font-size:14.8px; }

/* ==========================================================================
   CHIPS
   ========================================================================== */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.chips li{
  padding:10px 18px; border-radius:99px;
  border:1px solid var(--line); background:var(--card);
  color:var(--mid); font-size:14.5px;
  transition:color .25s, border-color .25s, transform .25s;
}
.chips li:hover{ color:#fff; border-color:rgba(160,190,255,.35); transform:translateY(-2px); }

/* ==========================================================================
   ENQUIRE
   ========================================================================== */
.section-enquire{ padding-bottom:clamp(56px,9vw,100px); }
.enq{
  display:grid; gap:clamp(24px,4vw,48px);
  grid-template-columns:1fr;
  padding:clamp(26px,4.4vw,52px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,51,85,.09), transparent 55%),
    radial-gradient(120% 100% at 100% 0%, rgba(59,130,246,.11), transparent 55%),
    rgba(255,255,255,.02);
}
@media (min-width:900px){ .enq{ grid-template-columns:0.9fr 1.1fr; align-items:start; } }
.enq-head .h2{ margin-bottom:0; }
.enq-head .sub{ margin-bottom:26px; }

.maillink{
  display:inline-block; word-break:break-all;
  font-family:var(--mono); font-size:clamp(17px,2.6vw,25px); font-weight:600;
  text-decoration:none; letter-spacing:-.01em;
  background:linear-gradient(100deg, var(--r), #ffd23f 40%, var(--g) 68%, var(--b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:opacity .25s;
}
.maillink:hover{ opacity:.78; }
.enq-actions{ margin-top:20px; }

.enq-form{ display:grid; gap:16px; }
.form-note{
  margin:0; padding:12px 16px; border-radius:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.028);
  color:var(--dim); font-size:13px; line-height:1.55;
}
.field{ display:grid; gap:7px; }
.field > label{ font-size:13px; font-weight:600; color:var(--mid); letter-spacing:.02em; }
.opt{ color:var(--dim); font-weight:400; }
.row{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:520px){ .row{ grid-template-columns:1fr 1fr; } }

input[type=text], input[type=email], textarea{
  width:100%; padding:13px 15px;
  font-family:inherit; font-size:15px; color:var(--ink);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:11px;
  transition:border-color .22s, background .22s;
}
textarea{ resize:vertical; min-height:104px; line-height:1.6; }
input::placeholder, textarea::placeholder{ color:#5b6480; }
input:hover, textarea:hover{ border-color:rgba(160,190,255,.28); }
input:focus, textarea:focus{
  outline:none; border-color:var(--b); background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(59,130,246,.16);
}

/* segmented radio */
.seg{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  padding:5px; border:1px solid var(--line); border-radius:13px;
  background:rgba(255,255,255,.028);
}
.seg input{ position:absolute; opacity:0; width:0; height:0; }
.seg label{
  text-align:center; padding:10px 6px; border-radius:9px; cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--mid);
  transition:background .22s, color .22s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.seg label:hover{ color:#fff; }
.seg input:checked + label{ background:rgba(255,255,255,.1); color:#fff; }
.seg input#i-com:checked + label{ box-shadow:inset 0 -2px 0 var(--b); }
.seg input#i-ai:checked + label{ box-shadow:inset 0 -2px 0 var(--g); }
.seg input#i-both:checked + label{ box-shadow:inset 0 -2px 0 var(--r); }
.seg input:focus-visible + label{ outline:2px solid var(--b); outline-offset:2px; }

.form-fallback{ margin:0; color:var(--dim); font-size:13px; text-align:center; }
.form-fallback a{ color:var(--mid); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(44px,7vw,80px) clamp(18px,4vw,32px) clamp(36px,5vw,56px);
  border-top:1px solid var(--line);
  text-align:center;
}
.foot-mark{
  font-weight:900; font-size:26px; letter-spacing:-.02em; margin-bottom:16px;
}
.foot-line{ margin:0 0 6px; color:var(--mid); font-size:15px; }
.foot-line strong{ color:#fff; font-family:var(--mono); font-weight:600; }
.foot-mail{ margin:0 0 18px; font-family:var(--mono); font-size:15px; }
.foot-mail a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; }
.foot-mail a:hover{ border-bottom-color:var(--b); }
.foot-fine{ margin:0; color:var(--dim); font-size:12.5px; }

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{
  position:fixed; left:50%; bottom:28px; z-index:99;
  transform:translate(-50%, 22px);
  padding:12px 22px; border-radius:99px;
  border:1px solid var(--line);
  background:rgba(12,16,28,.95);
  backdrop-filter:blur(10px);
  color:#fff; font-size:14px; font-weight:500;
  opacity:0; pointer-events:none;
  transition:opacity .28s, transform .28s;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }