:root{
  --bgA:#0a0a0a;
  --bgB:#111114;
  --ink:#f7fafc;
  --muted:rgba(247,250,252,.72);
  --edge:rgba(255,255,255,.14);
  --accent:#60a5fa;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 50% -20%, #ffffff12, transparent 60%),
    linear-gradient(180deg, var(--bgA), var(--bgB));
  color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Header */
.hdr{
  position:sticky; top:0; z-index:50; display:flex; justify-content:center; align-items:center;
  padding:14px 20px; backdrop-filter: blur(10px);
  border-bottom:1px solid var(--edge);
  background: linear-gradient(180deg, #0b0b0bcc, #0b0b0b80);
}
.badge{
  padding:8px 16px; border: 1px solid var(--edge); border-radius:999px;
  color:var(--muted); font-weight:800; letter-spacing:.03em;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

/* Hero */
.hero{position:relative; min-height:calc(100vh - 60px); display:grid; place-items:center; isolation:isolate;}
#stage{position:absolute; inset:0; width:100%; height:100%; display:block; background:transparent}
.overlay{
  display:flex;
  flex-direction:column;
  justify-content:center;

  position:relative; text-align:center; z-index:2; padding:8vh 24px 14vh;
}
.brand-center{
  margin:0 0 10px;
  line-height:.9;
  font-weight:1000;
  font-size: clamp(28px, 6.6vw, 104px);
  letter-spacing:-.02em;
  text-shadow:0 1px 0 #000, 0 18px 60px rgba(0,0,0,.35);
  max-width: min(1200px, 94vw);
  white-space: nowrap;
  display:inline-block;
  transform: translateX(var(--titleX, 0px)) scale(var(--titleScale, 1));
  transform-origin: center center;

  text-align:center;
}
.brand-center .accent{color:var(--accent)}
.word-muted{color:#BFC6D1}
.acq-title{margin:10px 0 6px; font-size: clamp(18px, 3.1vw, 28px); font-weight:800; color:#ffffff; letter-spacing:-.01em}
.acq-note{margin:0 0 10px; font-size: clamp(13px, 1.9vw, 16px); color:#BFC6D1}
.inquiries .mail{color:#BFC6D1; border-bottom-color: rgba(191,198,209,.55)}

.sub{margin:0 auto; max-width:820px; font-size: clamp(16px, 2.2vw, 20px); color:var(--muted)}
.cta{margin-top:22px}
.btn{
  display:inline-block; padding:12px 20px; border:1px solid var(--edge); border-radius:12px;
  color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:.02em;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00));
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px); border-color:#9ecbff; box-shadow:0 10px 30px rgba(96,165,250,.15);}

/* Mystical overlays */
.radial{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1100px 640px at 50% 40%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(600px 420px at 50% 20%, rgba(96,165,250,.05), transparent 60%);
  mix-blend-mode:screen;
}
.grain{
  position:absolute; inset:-50%; z-index:3; pointer-events:none; opacity:.08;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  animation: drift 24s linear infinite alternate;
}
@keyframes drift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,0,0)}}

/* Footer */
.ftr{display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; padding:16px 22px; border-top:1px solid var(--edge); color:var(--muted)}

.ftr-link{
  color: rgba(255,255,255,.88);
  text-decoration:none;
  border-bottom:1px dotted rgba(120,160,255,.75);
  padding-bottom:2px;
  font-weight:800;
  letter-spacing:.01em;
}
.ftr-link:hover{ border-bottom-color: rgba(255,255,255,.6); }

@media (prefers-reduced-motion: reduce){
  .grain{animation:none}
  #stage{display:none}
}

.tld{ color: rgba(255,255,255,.58); }

.mail{
  color: rgba(255,255,255,.92);
  text-decoration:none;
  border-bottom: 1px dotted rgba(120,160,255,.75);
  padding-bottom: 2px;
}
.mail:hover{ border-bottom-color: rgba(255,255,255,.6); }

.inquiries{ margin-top: 14px; font-size: clamp(13px, 1.7vw, 16px); color: var(--muted); }

.copy-btn{
  margin-left: 10px;
  padding: 6px 10px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00));
  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
}
.copy-btn:hover{ border-color:#9ecbff; }
.copy-btn:active{ transform: translateY(1px); }
.copy-btn[disabled]{ opacity: .6; cursor: default; }

/* Offer button */
.btn.btn-offer{
  margin: 18px auto 14px;
  padding: 12px 24px;
  border-radius: 14px;
  border: 1px solid rgba(96,165,250,.65);
  background: linear-gradient(180deg, rgba(96,165,250,.95), rgba(96,165,250,.55));
  color: #0b1220;
  font-size: 17px;
  font-weight: 1000;
  box-shadow: 0 14px 40px rgba(96,165,250,.18);
}
.btn.btn-offer:hover{
  transform: translateY(-1px);
  border-color: rgba(96,165,250,.85);
  box-shadow: 0 18px 54px rgba(96,165,250,.22);
}

/* Offer modal */
body.is-offer-modal-open{ overflow:hidden; }

.offer-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 20px;
  z-index: 9999;
}
.offer-modal.is-visible{ display:flex; }

.offer-modal-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
}

.offer-modal-dialog{
  position:relative;
  z-index:1;
  width: min(560px, 92vw);
  max-height: 85vh;
  overflow:auto;
  border: 1px solid var(--edge);
  border-radius: 18px;
  padding: 22px 20px 18px;
  background: linear-gradient(180deg, rgba(12,12,14,.98), rgba(10,10,12,.94));
  box-shadow: 0 20px 60px rgba(0,0,0,.65);
  color: var(--ink);
  outline: none;
}

.offer-modal-close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--edge);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font-size: 26px;
  line-height: 34px;
  cursor:pointer;
}
.offer-modal-close:hover{ border-color: rgba(96,165,250,.85); }

#offer-title{ margin: 0 0 6px; font-size: 28px; line-height: 1.1; }
.offer-modal-sub{ margin: 0 0 16px; color: rgba(255,255,255,.72); }

.offer-fields{ display:grid; gap: 12px; }
.offer-field input,
.offer-field textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--edge);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font: inherit;
}
.offer-field textarea{ resize: vertical; min-height: 110px; }
.offer-field input:focus,
.offer-field textarea:focus{
  outline: none;
  border-color: rgba(96,165,250,.85);
  box-shadow: 0 0 0 3px rgba(96,165,250,.18);
}

.offer-actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.offer-actions input{
  appearance: none;
  -webkit-appearance: none;
  border-radius: 12px;
  border: 1px solid var(--edge);
  padding: 12px 16px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
}
.offer-actions input.primary{
  border-color: rgba(96,165,250,.65);
  background: linear-gradient(180deg, rgba(96,165,250,.95), rgba(96,165,250,.55));
  color: #0b1220;
}
.offer-actions input.secondary:hover,
.offer-actions input.primary:hover{ border-color: rgba(96,165,250,.85); }
.offer-actions input[disabled]{ opacity: .7; cursor: default; }

.offer-status{ margin: 12px 0 0; min-height: 22px; color: rgba(255,255,255,.75); }
.offer-status.is-error{ color: rgba(255,120,120,.92); }

.offer-success-title{ margin: 10px 0 6px; font-weight: 1000; font-size: 18px; }
.offer-success-sub{ margin: 0 0 10px; color: rgba(255,255,255,.72); }

@media (min-width: 520px){
  .offer-fields{ grid-template-columns: 1fr 1fr; }
  .offer-field{ grid-column: 1 / -1; }
  .offer-field.offer-half{ grid-column: auto; }
}

@media (max-width: 520px){
  .brand-center{ font-size: clamp(30px, 11vw, 78px); }
}

@media (max-width: 600px){
  .brand-center{ --titleX: 0px; }
.overlay{ padding: 8vh 16px 14vh; }
    .sub{ font-size: 15px; }
}
@media (max-width: 420px){
  .overlay{ padding: 7vh 14px 13vh; }
  .brand-center{ font-size: clamp(30px, 10.5vw, 78px); }
}