@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root{
  /* Base palette */
  --text:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --border:rgba(15, 23, 42, 0.08);
  --shadow:0 10px 30px rgba(2, 6, 23, 0.08);

  /* Accent + gradients */
  --accent:#4f46e5;
  --accent-contrast:#ffffff;
  --grad-1: radial-gradient(1200px 600px at 10% 10%, #8b5cf6 0%, transparent 55%),
            radial-gradient(1000px 500px at 90% 0%, #06b6d4 0%, transparent 55%),
            radial-gradient(900px 600px at 40% 100%, #22c55e 0%, transparent 55%);
  --grad-2: linear-gradient(135deg, rgba(255,255,255,.66), rgba(255,255,255,.55));

  /* Layout */
  --maxw: 1100px;
  --space: 16px;
  --space-lg: 28px;
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background: #0b1020; /* deep base */
  line-height:1.6;
  /* site-wide gradient background */
  background-image: var(--grad-1);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding: 0 var(--space);
}

/* ------------------ HERO ------------------ */
.hero{
  position:relative;
  padding: clamp(64px, 10vw, 120px) 0;
  display:grid;
  place-items:center;
  text-align:center;
}

.hero-inner{
  width:min(800px, 100%);
  padding: clamp(16px, 3vw, 32px);
    z-index: 100;
  position: relative;
}

.hero-title{
  margin:0 0 20px;
  font-weight:600;
  font-size: clamp(2rem, 6vw, 7rem);
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.2px;
  color:#fff;
  z-index: 100;
  position: relative;
}

.hero-sub{
  margin:0 0 35px;
  color: #e2e8f0;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
}

.btn-primary{
  display:inline-block;
  padding: 14px 3rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight:500;
  letter-spacing: 0.05rem;
  text-decoration:none;
  box-shadow: 0 10px 24px rgba(79,70,229,.35);
  transition: transform .06s ease, opacity .15s ease;
}
.btn-primary:hover{ opacity:.95 }
.btn-primary:active{ transform: translateY(1px) }

mark.highlight-domain{
  background: rgba(255,255,255,.18);
  color:#fff;
  padding: 0.15em 0.4em;
  border-radius: 6px;
}

/* Decorative absolute shapes */
.decor{
  position:absolute;
  border-radius:50%;
  filter: blur(26px);
  opacity:.6;
}
.decor-1{ width:220px; height:220px; left:5%; top:15%; background: #60a5fa; }
.decor-2{ width:280px; height:280px; right:8%; top:10%; background: #a78bfa; }
.decor-3{ width:260px; height:260px; right:20%; bottom:5%; background: #34d399c1; }

/* ------------------ FORM SECTION ------------------ */
.errors{
  color:#8f0000;
  font-weight:bold;
}

.form-wrap{
  padding: clamp(40px, 6vw, 40px) 0;
}

.section-heading{
  text-align:center;
  margin: 0 0 18px;
  color:#f8fafc;
  font-weight:600;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Glass effect */
.glass{
  margin: 0 auto;
  width: min(720px, 100%);
  background: var(--grad-2);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 30px 60px rgba(2,6,23,.35);
  /* graceful glass blur (fallbacks handled) */
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
}

/* Form body */
.offer-form{
  display:block;
  padding: clamp(16px, 3vw, 28px);
}

.field{ margin-bottom: var(--space-lg); }
.address-field{ display:none; }

label{
  display:inline-block;
  margin-bottom:6px;
  font-weight:600;
  color:#0f172a;
}

.req{ color:#dc2626; }

.hint{
  display:block;
  color:#475569;
  margin-top:6px;
  font-size:.9rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea{
  width:100%;
  padding: 12px 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  font: inherit;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

textarea{ resize: vertical; }

input[readonly]{
  background: rgba(248,250,252,.9);
  color:#334155;
}

input:focus, textarea:focus{
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.2);
  background: #fff;
}

/* Currency prefix */
.currency-input{ position:relative }
.currency-input .currency{
  position:absolute;
  left:12px; top:50%;
  transform: translateY(-50%);
  pointer-events:none;
  color:#64748b;
}
.currency-input input[type="number"]{
  padding-left: 28px; /* space for £ */
  -moz-appearance:textfield;
}
/* Hide WebKit number spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}

.actions{ margin-top: var(--space-lg); text-align:center; }

.actions button{
  border: none;
}

.smallprint{
  margin-top: 10px;
  color:#475569;
  font-size:.9rem;
  text-align:center;
}

.responseprint{
  margin-top: 10px;
  color:#77ff77;
  font-size:1.2rem;
  text-align:center;
}

/* ------------------ Responsiveness ------------------ */
@media (max-width: 640px){
  .hero{ padding: 64px 0; }
  .decor-1, .decor-2, .decor-3{ filter: blur(22px); opacity:.5; }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important }
}