/* Alpenglow Ops — ultra‑light one‑pager. No frameworks, no webfonts. */
:root{
  /* Warm alpenglow stops */
  --glow-1:#7B5CF5; /* purple */
  --glow-2:#FF5FA5; /* pink */
  --glow-3:#FDBA74; /* peach */
  --glow-4:#FDE68A; /* pale gold */

  /* Cool mountain accents */
  --spruce-800:#0D3A22;
  --spruce-700:#14532D;
  --spruce-500:#1F7A68;
  --sky-600:#0E7490;

  /* Neutrals */
  --ink:#0F172A;   /* very dark slate */
  --slate-700:#334155;
  --slate-300:#CBD5E1;
  --white:#FFFFFF;

  --wrap: 1120px;
  --radius: 16px;
  --shadow: 0 12px 40px rgba(15,23,42,.12);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: linear-gradient(180deg, #fff, #fff);
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--wrap); margin-inline:auto; padding:0 24px}
a{color:var(--sky-600); text-decoration:none}
a:hover{opacity:.9}
.skip-link{position:absolute; left:-9999px; top:auto}
.skip-link:focus{left:12px;top:12px;background:#000;color:#fff;padding:8px 12px;border-radius:8px;z-index:999}

/* Nav */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px) saturate(160%);
  border-bottom:1px solid rgba(203,213,225,.5);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; color:var(--spruce-700); font-weight:700; letter-spacing:.2px}
.brand .mark{transform: translateY(1px)}
.nav nav{display:flex; gap:18px; align-items:center}
.nav nav a{color:var(--ink); opacity:.86; font-weight:600}
.nav nav a:hover{opacity:1}

/* Hero with alpenglow */
.hero{
  position:relative;
  background:
    radial-gradient(1200px 620px at 70% -140px, rgba(253,230,138,.55), transparent 60%),
    radial-gradient(1200px 520px at 30% -120px, rgba(253,186,116,.55), transparent 60%),
    radial-gradient(1200px 520px at 50% -160px, rgba(255,95,165,.55), transparent 60%),
    linear-gradient(180deg, rgba(123,92,245,.35), rgba(123,92,245,0) 50%);
  padding:72px 0 48px;
}
.hero .ridge{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:160px; display:block}
.hero-grid{display:grid; grid-template-columns: minmax(0,1fr) 390px; gap:26px; align-items:start}
.glass{
  background: rgba(255,255,255,.62);
  border:1px solid rgba(203,213,225,.6);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px) saturate(140%);
}
.hero-text{padding:22px 22px}
.hero-text h1{
  font-size: clamp(32px, 5vw, 52px);
  line-height:1.1;
  margin:0 0 10px;
  letter-spacing:.2px;
}
.lead{font-size: clamp(16px,2.4vw,20px); color:var(--slate-700); margin:0 0 14px}
.meta{color:var(--slate-700); font-size:14px; margin-top:8px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 4px}

.hero-card{padding:18px}
.facts{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px}
.facts li{display:grid; grid-template-columns: 28px 1fr; gap:10px; align-items:start}
.ic{font-size:20px; line-height:1}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 16px; border-radius:12px; font-weight:700;
  border:1px solid transparent; transition: all .15s ease;
}
.btn-small{padding:8px 12px; border-radius:10px; font-weight:650}
.btn-cta{
  background: linear-gradient(135deg, var(--glow-2), var(--glow-3));
  color:var(--white);
  box-shadow: 0 10px 28px rgba(255,95,165,.25);
}
.btn-cta:hover{transform: translateY(-1px); box-shadow:0 12px 34px rgba(255,95,165,.32)}
.btn-outline{border-color: var(--spruce-700); color: var(--spruce-700); background:transparent}
.btn-outline:hover{background: rgba(20,83,45,.08)}
.btn-light{background:#fff; color:var(--ink); border-color: rgba(203,213,225,.8)}
.btn-light:hover{background:#fff}

.btn-block{display:flex; width:100%}

/* Sections */
section{padding:54px 0}
h2{font-size: clamp(22px,3.4vw,32px); margin:0 0 18px}

/* Services */
.grid4{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px}
.card{
  background:#fff; border:1px solid var(--slate-300);
  border-radius: var(--radius); padding:18px; box-shadow: var(--shadow);
}
.card h3{margin:6px 0 8px; font-size:18px}
.card p{margin:0; color:var(--slate-700)}

/* How it works */
.steps{list-style: none; padding:0; margin:0; counter-reset: step}
.steps li{position:relative; padding-left:44px; margin:14px 0}
.steps li::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:0; top:0; width:30px; height:30px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--glow-2), var(--glow-3));
  color:#fff; border-radius:8px; font-weight:800;
  box-shadow: 0 6px 18px rgba(255,95,165,.25);
}

/* Plans */
.plans{background: linear-gradient(180deg, rgba(125,96,245,.08), rgba(253,186,116,.08));}
.grid3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px}
.plan{
  background:#fff; border:1px solid var(--slate-300); border-radius:20px; padding:18px;
  box-shadow: var(--shadow);
}
.plan header{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.plan .badge{
  background: linear-gradient(135deg, var(--glow-2), var(--glow-3));
  color:#fff; font-size:12px; padding:6px 10px; border-radius:999px; font-weight:800;
  box-shadow: 0 6px 18px rgba(255,95,165,.25);
}
.plan h3{margin:10px 0 4px}
.price{font-size:28px; font-weight:800; color:var(--spruce-700); margin:6px 0 8px}
.price span{font-size:14px; color:var(--slate-700); font-weight:600}
.bullets{list-style:none; padding:0; margin: 10px 0 16px; display:grid; gap:8px; color:var(--slate-700)}
.plan-pop{transform: translateY(-4px); border-color: var(--spruce-500)}

/* Contact */
.contact{position:relative}
.contact-grid{display:grid; grid-template-columns: minmax(0,1fr) 420px; gap:18px; padding:22px}
.contact-list{list-style:none; padding:0; margin:10px 0 0; color:var(--slate-700)}
.form label{display:block; margin:10px 0}
.form span{display:block; font-size:14px; color:var(--slate-700); margin-bottom:6px}
.form input, .form textarea{
  width:100%; padding:12px 12px; border:1px solid var(--slate-300); border-radius:12px;
  background:#fff; color:var(--ink); font-size:16px;
}
.form input:focus, .form textarea:focus{outline:2px solid rgba(125,96,245,.25); border-color:#A78BFA}
.form .split{display:block}

/* Footer */
.foot{border-top:1px solid rgba(203,213,225,.7); background:#fff}
.foot-flex{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; color:var(--slate-700)}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr}
  .grid4{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid3{grid-template-columns: 1fr}
  .contact-grid{grid-template-columns: 1fr}
}
@media (max-width: 560px){
  .nav nav a:not(.btn){display:none}
  .cta-row{flex-direction:column; align-items:stretch}
}