/* ============================================================
   python-hosting.css — SkyServer Python Hosting Page
   Design system matches domain.css exactly.
   Font: Plus Jakarta Sans | Colors: blue/slate palette
   ============================================================ */

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

/* ─── CSS Custom Properties (identical to domain.css) ─────── */
:root {
  --blue:        #2563eb;
  --blue-dark:   #1d4ed8;
  --blue-light:  #eff6ff;
  --blue-mid:    #dbeafe;
  --blue-border: #bfdbfe;
  --green:       #22c55e;
  --green-bg:    #dcfce7;
  --orange:      #f97316;
  --red:         #ef4444;
  --text-1:      #0f172a;
  --text-2:      #334155;
  --text-3:      #64748b;
  --text-4:      #94a3b8;
  --border:      #e2e8f0;
  --bg:          #f0f6ff;
  --white:       #ffffff;
  --shadow-xs:   0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:   0 2px 8px rgba(37,99,235,.08), 0 1px 3px rgba(0,0,0,.05);
  --shadow-md:   0 6px 20px rgba(37,99,235,.12), 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:   0 16px 48px rgba(37,99,235,.16), 0 4px 16px rgba(0,0,0,.08);
  --shadow-blue: 0 8px 30px rgba(37,99,235,.35);
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --font:  'Plus Jakarta Sans', sans-serif;
  --ease:  cubic-bezier(.4,0,.2,1);
  --t:     .22s;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── Utility ────────────────────────────────────────────── */
.container   { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section     { padding: 80px 0; }
.section-alt { background: var(--white); }
.section-hdr { text-align: center; margin-bottom: 56px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-light); border: 1px solid var(--blue-border);
  border-radius: 100px; padding: 4px 13px; margin-bottom: 14px;
}
.section-hdr h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.2;
  color: var(--text-1); margin-bottom: 14px;
}
.section-hdr h2 span { color: var(--blue); }
.section-hdr p {
  font-size: .98rem; color: var(--text-3); max-width: 560px;
  margin: 0 auto; line-height: 1.75;
}

/* ─── Scroll Reveal ──────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }
.d5 { transition-delay: .40s; } .d6 { transition-delay: .48s; }


/* ============================================================
   1. HERO
   ============================================================ */
.py-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #fff 0%, #eff6ff 40%, #dbeafe 100%);
  padding: 88px 0 96px;
}
.py-hero::before,
.py-hero::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.py-hero::before {
  width: 680px; height: 680px;
  background: radial-gradient(circle, rgba(96,165,250,.15) 0%, transparent 65%);
  top: -200px; right: -140px;
  animation: floatA 8s ease-in-out infinite;
}
.py-hero::after {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 65%);
  bottom: -100px; left: -80px;
  animation: floatB 10s ease-in-out infinite;
}

.py-hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
}

/* Left: Content */
.py-hero-content { }

.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.85); border: 1.5px solid var(--blue-border);
  border-radius: 100px; padding: 6px 16px;
  font-size: .78rem; font-weight: 700; color: var(--blue);
  margin-bottom: 24px; backdrop-filter: blur(6px);
  animation: fadeDown .6s var(--ease) both;
}
.hero-badge i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); display: block;
}

.py-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.15;
  color: var(--text-1); margin-bottom: 20px;
  animation: fadeUp .65s .1s var(--ease) both;
}
.py-hero h1 span { color: var(--blue); }
.py-hero h1 span.u {
  position: relative; display: inline-block;
}
.py-hero h1 span.u::after {
  content: '';
  position: absolute; left: 0; bottom: -4px; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--blue), #60a5fa);
  border-radius: 2px;
}

.hero-sub {
  font-size: 1.02rem; color: var(--text-3); max-width: 520px;
  line-height: 1.78; margin-bottom: 36px;
  animation: fadeUp .65s .2s var(--ease) both;
}

/* Hero CTA buttons */
.hero-actions {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px;
  animation: fadeUp .65s .3s var(--ease) both;
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: var(--white);
  border: none; padding: 14px 28px; border-radius: var(--r-md);
  font-family: var(--font); font-size: .95rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.btn-primary svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary:hover {
  background: var(--blue-dark); box-shadow: var(--shadow-blue);
  transform: translateY(-2px);
}

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--text-2);
  border: 1.5px solid var(--border); padding: 14px 28px; border-radius: var(--r-md);
  font-family: var(--font); font-size: .95rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: border-color var(--t), color var(--t), box-shadow var(--t), transform var(--t);
}
.btn-outline svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-outline:hover {
  border-color: var(--blue); color: var(--blue);
  box-shadow: var(--shadow-sm); transform: translateY(-2px);
}

/* Framework tags under hero CTAs */
.hero-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  animation: fadeUp .65s .4s var(--ease) both;
}
.hero-tag {
  display: inline-flex; align-items: center;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 100px; padding: 5px 14px;
  font-size: .78rem; font-weight: 600; color: var(--text-2);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t), color var(--t), transform var(--t);
}
.hero-tag:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

/* Right: Visual */
.py-hero-visual {
  display: flex; justify-content: center; align-items: center;
  animation: fadeUp .7s .25s var(--ease) both;
}

.py-visual-card {
  position: relative; width: 100%; max-width: 420px;
}

/* Terminal window */
.pvc-terminal {
  background: #1e293b; border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.pvc-titlebar {
  background: #0f172a; padding: 12px 18px;
  display: flex; align-items: center; gap: 8px;
}
.dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.dot-red    { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green  { background: #22c55e; }
.pvc-title {
  font-size: .72rem; font-weight: 600; color: #64748b;
  margin-left: 6px; font-family: 'Courier New', monospace;
}
.pvc-body {
  padding: 24px; font-family: 'Courier New', monospace; font-size: .85rem;
  line-height: 1.8; color: #94a3b8;
}
.pvc-body p { white-space: pre; }

.syn-kw  { color: #c084fc; }
.syn-mod { color: #67e8f9; }
.syn-str { color: #86efac; }
.syn-fn  { color: #fde68a; }
.syn-dec { color: #f97316; }
.syn-ok  { color: #4ade80; }

.pvc-cursor { display: flex; align-items: center; gap: 4px; }
.blink { color: #60a5fa; animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Floating stat badges */
.pvc-badge {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); border: 1.5px solid var(--blue-border);
  border-radius: 100px; padding: 6px 14px;
  font-size: .75rem; font-weight: 700; color: var(--blue);
  box-shadow: var(--shadow-md);
  animation: floatBadge 4s ease-in-out infinite;
}
.pvc-badge svg { color: var(--blue); flex-shrink: 0; }
.pvc-badge-1 { top: -18px; left: -12px; animation-delay: 0s; }
.pvc-badge-2 { top: 40%;  right: -20px; animation-delay: 1.2s; }
.pvc-badge-3 { bottom: -18px; left: 20%; animation-delay: 2.4s; }

/* Python logo watermark */
.pvc-python-logo {
  position: absolute; bottom: 18px; right: 18px; opacity: .18;
}
.pvc-python-logo svg { width: 56px; height: 56px; }


/* ============================================================
   2. TRUST BAR — UPDATED
   ============================================================ */
.trust-bar {
  background: var(--white);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.trust-inner {
  display: flex;
  justify-content: stretch;
  flex-wrap: nowrap;
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.trust-item {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 10px;
  border-right: 1px solid var(--border);
  transition: background var(--t);
  min-width: 0;
}
.trust-item:last-child { border-right: none; }
.trust-item:hover { background: var(--blue-light); }
.ti-icon {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--blue-light); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.ti-icon svg { width: 17px; height: 17px; color: var(--blue); }
.ti-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ti-num { font-size: .95rem; font-weight: 800; color: var(--text-1); line-height: 1; white-space: nowrap; }
.ti-lbl { font-size: .62rem; font-weight: 500; color: var(--text-3); white-space: nowrap; }


/* ============================================================
   3. HOSTING PLANS
   ============================================================ */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

.plan-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-xl); padding: 32px 24px 28px;
  text-align: center; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
}
.plan-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--blue-light), transparent 55%);
  opacity: 0; transition: opacity var(--t);
}
.plan-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--blue); }
.plan-card:hover::before { opacity: 1; }

.plan-card::after {
  content: ''; position: absolute; inset: -2px;
  border-radius: calc(var(--r-xl) + 2px); border: 2px solid transparent;
  background: linear-gradient(135deg, var(--blue), #60a5fa) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out; mask-composite: exclude;
  opacity: 0; transition: opacity var(--t);
}
.plan-card:hover::after { opacity: 1; }

.plan-card.featured {
  border-color: var(--blue);
  background: linear-gradient(145deg, #eff6ff, var(--white));
}
.plan-card.featured .plan-btn {
  background: var(--blue); color: var(--white);
}
.plan-card.featured .plan-btn:hover { background: var(--blue-dark); }

.plan-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: .62rem; font-weight: 800; padding: 3px 9px; border-radius: 100px;
}
.badge-popular { background: var(--blue-light); color: var(--blue); }
.badge-hot     { background: #fef3c7; color: #b45309; }
.badge-new     { background: #dcfce7; color: #15803d; }

.plan-name {
  font-size: 1.4rem; font-weight: 800; color: var(--text-1);
  margin-bottom: 4px; position: relative; z-index: 1;
  transition: color var(--t);
}
.plan-card:hover .plan-name { color: var(--blue); }
.plan-tagline { font-size: .72rem; color: var(--text-4); margin-bottom: 14px; position: relative; z-index: 1; }

.plan-discount-block {
  height: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  margin-bottom: 8px; position: relative; z-index: 1;
}
.plan-old  { font-size: .75rem; color: var(--text-4); text-decoration: line-through; margin-bottom: 2px; }
.plan-save { font-size: .68rem; color: #15803d; font-weight: 700; background: #dcfce7; border-radius: 100px; padding: 2px 8px; display: inline-block; }

.plan-price {
  font-size: 2rem; font-weight: 800; color: var(--blue);
  position: relative; z-index: 1; line-height: 1; margin-bottom: 2px;
}
.plan-price sup { font-size: .9rem; vertical-align: super; }
.plan-per { font-size: .68rem; color: var(--text-4); margin-bottom: 24px; position: relative; z-index: 1; }

.plan-specs {
  list-style: none; text-align: left; margin-bottom: 24px;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 10px;
  flex-grow: 1;
}
.plan-specs li {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--text-2);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.plan-specs li:last-child { border-bottom: none; padding-bottom: 0; }
.spec-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--blue);
}
.spec-icon svg { width: 16px; height: 16px; }
.spec-key { font-weight: 600; flex-shrink: 0; }
.spec-val { color: var(--text-3); margin-left: auto; text-align: right; }

.plan-btn {
  display: block; width: 100%; padding: 12px 0; border-radius: var(--r-sm);
  font-family: var(--font); font-size: .88rem; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--blue); color: var(--blue); background: transparent;
  text-decoration: none; text-align: center;
  position: relative; z-index: 1; margin-top: auto;
  transition: background var(--t), color var(--t), box-shadow var(--t), transform var(--t);
}
.plan-btn:hover { background: var(--blue); color: var(--white); box-shadow: var(--shadow-blue); transform: scale(1.03); }


/* ============================================================
   4. WHY SKYSERVER — FEATURE CARDS
   ============================================================ */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.feat-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative; overflow: hidden;
}
.feat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), #60a5fa);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.feat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--blue-border); }
.feat-card:hover::before { transform: scaleX(1); }
.feat-icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--blue-light); display: flex; align-items: center;
  justify-content: center; margin-bottom: 18px;
  transition: background var(--t), transform var(--t);
}
.feat-card:hover .feat-icon { background: var(--blue); transform: scale(1.1); }
.feat-icon svg { width: 26px; height: 26px; color: var(--blue); transition: color var(--t); }
.feat-card:hover .feat-icon svg { color: var(--white); }
.feat-card h3 { font-size: .95rem; font-weight: 700; color: var(--text-1); margin-bottom: 8px; }
.feat-card p  { font-size: .82rem; color: var(--text-3); line-height: 1.7; }


/* ============================================================
   5. SUPPORTED FRAMEWORKS GRID
   ============================================================ */
.fw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.fw-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: 32px 20px 28px;
  text-align: center; cursor: default;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
}
.fw-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--fw-color, var(--blue)); opacity: 0;
  transition: opacity var(--t);
}
.fw-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: var(--blue-border); }
.fw-card:hover::before { opacity: 1; }
.fw-icon {
  width: 64px; height: 64px; border-radius: var(--r-md); margin: 0 auto 16px;
  background: var(--fw-bg, var(--blue-light));
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t);
  flex-shrink: 0;
}
.fw-card:hover .fw-icon { transform: scale(1.1); }
.fw-icon svg { width: 30px; height: 30px; stroke: var(--fw-color, var(--blue)); }
.fw-name    { font-size: 1rem; font-weight: 800; color: var(--text-1); margin-bottom: 6px; }
.fw-tagline { font-size: .72rem; color: var(--text-4); line-height: 1.5; max-width: 160px; margin: 0 auto; }


/* ============================================================
   6. DEVELOPER FEATURES
   ============================================================ */
.devtools-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-md);
}

.devtools-left { padding: 56px 48px; }
.devtools-left h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800;
  color: var(--text-1); margin-bottom: 14px; line-height: 1.25;
}
.devtools-left h2 span { color: var(--blue); }
.devtools-left p { font-size: .95rem; color: var(--text-3); line-height: 1.75; margin-bottom: 28px; max-width: 420px; }

.check-list { list-style: none; margin-bottom: 34px; display: flex; flex-direction: column; gap: 12px; }
.check-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .88rem; font-weight: 500; color: var(--text-2);
}
.chk {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: var(--green-bg); display: flex; align-items: center; justify-content: center;
}
.chk svg { width: 12px; height: 12px; color: #15803d; }

.devtools-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.t-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--blue); color: var(--white); border: none;
  padding: 12px 24px; border-radius: var(--r-md);
  font-family: var(--font); font-size: .9rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background var(--t), box-shadow var(--t), transform var(--t);
  white-space: nowrap;
}
.t-btn:hover { background: var(--blue-dark); box-shadow: var(--shadow-blue); transform: translateY(-1px); }
.t-btn-outline {
  display: inline-flex; align-items: center;
  background: transparent; color: var(--text-2);
  border: 1.5px solid var(--border); padding: 12px 24px; border-radius: var(--r-md);
  font-family: var(--font); font-size: .9rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: border-color var(--t), color var(--t), transform var(--t);
}
.t-btn-outline:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }

.devtools-right {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  display: flex; align-items: center; justify-content: center;
  padding: 40px; position: relative; overflow: hidden;
}
.devtools-right::before {
  content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.14) 0%, transparent 70%);
  top: -80px; right: -60px; pointer-events: none;
}

.dt-card {
  background: var(--white); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-lg); width: 100%; max-width: 320px; position: relative; z-index: 1;
}
.dt-bar {
  background: #0f172a; padding: 12px 18px;
  display: flex; align-items: center; gap: 8px;
}
.dt-dots { display: flex; gap: 6px; }
.dt-bar-title {
  font-size: .7rem; font-weight: 600; color: #64748b;
  margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt-body { padding: 20px; }
.dt-section-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-4); margin-bottom: 10px;
}
.dt-app-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: var(--r-sm); margin-bottom: 6px;
  border: 1px solid var(--border); background: #f8fafc;
}
.dt-app-domain { font-size: .8rem; font-weight: 700; color: var(--text-1); }
.dt-app-fw     { font-size: .68rem; color: var(--text-4); margin-top: 1px; }
.tc-status {
  font-size: .65rem; font-weight: 700; padding: 3px 9px;
  border-radius: 100px; white-space: nowrap;
}
.s-ok   { background: #dcfce7; color: #15803d; }
.s-wait { background: #fef3c7; color: #b45309; }
.s-done { background: #dbeafe; color: #1d4ed8; }

.dt-pip-list { display: flex; flex-direction: column; gap: 5px; }
.dt-pip-row {
  display: flex; align-items: center; gap: 7px;
  font-size: .75rem; color: var(--text-3); font-family: 'Courier New', monospace;
}
.dt-pip-row svg { color: #22c55e; flex-shrink: 0; }

.dt-progress-row {
  display: flex; justify-content: space-between;
  font-size: .72rem; color: var(--text-3); margin-top: 16px; margin-bottom: 4px;
}
.tc-bar { height: 6px; background: #e2e8f0; border-radius: 100px; overflow: hidden; }
.tc-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--blue), #60a5fa);
  animation: progressPulse 2.5s ease-in-out infinite;
}


/* ============================================================
   7. DEPLOYMENT STEPS — UPDATED
   ============================================================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  align-items: stretch;
}

/* Continuous gradient line connecting all four icons */
.steps-grid::before {
  content: '';
  position: absolute;
  /* vertically centred on the 68px icons; icons start after step-num (~28px badge + 18px gap = 46px) */
  top: 80px;
  left: calc(12.5% + 10px);
  right: calc(12.5% + 10px);
  height: 2px;
  background: linear-gradient(90deg, var(--blue-border) 0%, var(--blue) 50%, var(--blue-border) 100%);
  z-index: 0;
  pointer-events: none;
}

.step-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 22px 26px;
  text-align: center;
  position: relative; z-index: 1;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-border);
  background: var(--blue-light);
}

/* Step number — small pill badge */
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  color: var(--blue);
  background: var(--blue-light);
  border: 1.5px solid var(--blue-border);
  border-radius: 100px;
  padding: 3px 13px;
  margin-bottom: 16px;
  line-height: 1.6;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.step-card:hover .step-num {
  background: var(--blue); color: var(--white); border-color: var(--blue);
}

/* Icon — larger, prominent, sits above the connector line */
.step-icon {
  width: 68px; height: 68px;
  border-radius: var(--r-lg);
  background: var(--blue-light);
  border: 1.5px solid var(--blue-border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  position: relative; z-index: 2;
  transition: background var(--t), border-color var(--t), transform var(--t);
  flex-shrink: 0;
}
.step-card:hover .step-icon {
  background: var(--blue);
  border-color: var(--blue);
  transform: scale(1.08);
}
.step-icon svg {
  width: 32px; height: 32px;
  stroke: var(--blue);
  transition: stroke var(--t);
}
.step-card:hover .step-icon svg { stroke: var(--white); }

.step-card h3 {
  font-size: .92rem; font-weight: 700; color: var(--text-1);
  margin-bottom: 10px; line-height: 1.35;
}
.step-card p {
  font-size: .78rem; color: var(--text-3); line-height: 1.72;
}

/* Arrow — hidden; replaced by ::before timeline line */
.step-arrow { display: none; }


/* ============================================================
   8. BEST FOR — UPDATED
   ============================================================ */
.bestfor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bestfor-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: 24px 22px;
  display: flex; gap: 16px; align-items: flex-start;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.bestfor-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-border); }
.bestfor-icon {
  width: 48px; height: 48px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--blue-light); display: flex; align-items: center; justify-content: center;
  transition: background var(--t), transform var(--t);
}
.bestfor-card:hover .bestfor-icon { background: var(--blue); transform: rotate(5deg) scale(1.1); }
.bestfor-icon svg { width: 22px; height: 22px; stroke: var(--blue); transition: stroke var(--t); }
.bestfor-card:hover .bestfor-icon svg { stroke: var(--white); }
.bestfor-card h3 { font-size: .92rem; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
.bestfor-card p  { font-size: .8rem; color: var(--text-3); line-height: 1.65; }


/* ============================================================
   9. FAQ
   ============================================================ */
.faq-layout {
  display: grid; grid-template-columns: 1fr 300px;
  gap: 32px; align-items: start;
}

.faq-list { display: flex; flex-direction: column; gap: 10px; }

.faq-item {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t), border-color var(--t);
}
.faq-item:hover { border-color: var(--blue-border); }

.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; cursor: pointer; background: var(--white);
  font-size: .93rem; font-weight: 600; color: var(--text-1);
  user-select: none; gap: 16px; min-height: 64px;
}
.faq-q .faq-toggle-btn {
  flex-shrink: 0; width: 32px; height: 32px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--white); display: flex; align-items: center; justify-content: center;
  transition: background var(--t), border-color var(--t), transform .3s var(--ease);
}
.faq-q svg {
  width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0;
  transition: transform .3s var(--ease), color .2s;
}
.faq-item.open .faq-q svg        { transform: rotate(45deg); color: var(--blue); }
.faq-item.open .faq-q .faq-toggle-btn {
  background: var(--blue-light); border-color: var(--blue-border);
}
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .45s var(--ease), padding .3s;
  background: #fafbfc;
  font-size: .88rem; color: var(--text-3); line-height: 1.75;
  padding: 0 24px;
}
.faq-item.open .faq-a { max-height: 260px; padding: 16px 24px; }

.faq-contact-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-xl); padding: 36px 28px;
  box-shadow: var(--shadow-sm); text-align: center;
  position: sticky; top: 100px;
}
.fcc-icon {
  width: 72px; height: 72px; border-radius: 18px;
  background: var(--blue-light); border: 1.5px solid var(--blue-border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
}
.fcc-icon svg { width: 32px; height: 32px; stroke: var(--blue); }
.faq-contact-card h3 {
  font-size: 1.05rem; font-weight: 800; color: var(--text-1);
  margin-bottom: 12px; line-height: 1.35;
}
.faq-contact-card p {
  font-size: .83rem; color: var(--text-3); line-height: 1.7; margin-bottom: 24px;
}
.fcc-btn {
  display: block; width: 100%;
  background: var(--blue); color: var(--white); padding: 14px 20px;
  border-radius: var(--r-md); font-family: var(--font); font-size: .9rem; font-weight: 700;
  text-decoration: none; text-align: center;
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.fcc-btn:hover { background: var(--blue-dark); box-shadow: var(--shadow-blue); transform: translateY(-2px); }


/* ============================================================
   10. FINAL CTA
   ============================================================ */
.cta-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 40%, #2563eb 70%, #3b82f6 100%);
  position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: rgba(255,255,255,.05); top: -200px; right: -100px; pointer-events: none;
}
.cta-section::after {
  content: ''; position: absolute; width: 350px; height: 350px; border-radius: 50%;
  background: rgba(255,255,255,.04); bottom: -120px; left: 40px; pointer-events: none;
}
.cta-inner {
  text-align: center; max-width: 680px; margin: 0 auto; position: relative; z-index: 1;
}
.cta-inner h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 800;
  color: var(--white); margin-bottom: 16px; line-height: 1.22;
}
.cta-inner p { font-size: 1rem; color: rgba(255,255,255,.8); margin-bottom: 36px; line-height: 1.75; }

.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.btn-wh {
  display: inline-flex; align-items: center;
  background: var(--white); color: var(--blue); border: none;
  padding: 14px 32px; border-radius: var(--r-md);
  font-family: var(--font); font-size: .95rem; font-weight: 800;
  text-decoration: none; cursor: pointer;
  transition: box-shadow var(--t), transform var(--t);
}
.btn-wh:hover { box-shadow: 0 8px 28px rgba(0,0,0,.22); transform: translateY(-2px); }
.btn-ghost {
  display: inline-flex; align-items: center;
  background: transparent; color: var(--white);
  border: 1.5px solid rgba(255,255,255,.4); padding: 14px 32px; border-radius: var(--r-md);
  font-family: var(--font); font-size: .95rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background var(--t), transform var(--t);
}
.btn-ghost:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); }

.cta-trust { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.ct-item {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; color: rgba(255,255,255,.72); font-weight: 500;
}
.ct-item svg { width: 14px; height: 14px; }


/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes fadeDown { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
@keyframes fadeUp   { from { opacity:0; transform:translateY(20px);  } to { opacity:1; transform:none; } }
@keyframes floatA   { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-16px) rotate(3deg)} }
@keyframes floatB   { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(12px) rotate(-3deg)} }
@keyframes floatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes progressPulse { 0%,100%{opacity:1} 50%{opacity:.55} }


/* ============================================================
   RESPONSIVE — 960px
   ============================================================ */
@media (max-width: 960px) {
  .py-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .py-hero-visual { display: none; }
  .hero-actions { justify-content: center; }
  .hero-tags { justify-content: center; }
  .hero-sub { margin: 0 auto 36px; }

  .devtools-grid { grid-template-columns: 1fr; }
  .devtools-right { min-height: 260px; padding: 36px; }
  .devtools-left { padding: 40px 32px; }

  /* Steps: 2×2 grid on tablet */
  .steps-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .steps-grid::before { display: none; }
  .step-card { border-radius: var(--r-lg); }

  /* Trust bar: allow slight shrink but keep one row */
  .trust-item { padding: 12px 8px; }
  .ti-num { font-size: .85rem; }
  .ti-lbl { font-size: .58rem; }

  /* Best for: 2 cols on tablet */
  .bestfor-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (max-width: 768px) {
  .section { padding: 60px 0; }

  /* Trust bar: stack vertically */
  .trust-inner { flex-direction: column; flex-wrap: wrap; }
  .trust-item {
    flex: unset;
    width: 100%; display: flex; align-items: center; gap: 14px;
    padding: 14px 20px;
    border-right: none; border-bottom: 1px solid var(--border);
    justify-content: flex-start;
  }
  .trust-item:last-child { border-bottom: none; }
  .ti-icon { width: 36px; height: 36px; }
  .ti-num  { font-size: .95rem; white-space: normal; }
  .ti-lbl  { font-size: .65rem; white-space: normal; }

  /* Plans grid: 1 column */
  .plans-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }

  /* Steps: 1 column */
  .steps-grid { grid-template-columns: 1fr; gap: 12px; }
  .steps-grid::before { display: none; }

  /* Best for: 1 col */
  .bestfor-grid { grid-template-columns: 1fr; }

  /* FAQ layout: stack */
  .faq-layout { grid-template-columns: 1fr; }
  .faq-contact-card { position: static; }

  /* CTA actions */
  .cta-actions { flex-direction: column; align-items: center; }
  .btn-wh, .btn-ghost { width: 100%; max-width: 320px; justify-content: center; }

  /* Hero actions */
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .py-hero-inner { text-align: left; }
  .hero-actions { align-items: stretch; }

  /* Framework grid: 2 col */
  .fw-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section   { padding: 48px 0; }

  .py-hero   { padding: 60px 0 72px; }
  .py-hero h1 { font-size: 1.85rem; }

  .plans-grid { max-width: 100%; }
  .plan-card  { padding: 28px 20px 24px; }

  .bestfor-grid { grid-template-columns: 1fr; }
  .fw-grid      { grid-template-columns: 1fr; }

  .devtools-left { padding: 28px 20px; }

  .feat-grid { grid-template-columns: 1fr; }

  .cta-trust { gap: 14px; }
  .ct-item   { font-size: .72rem; }

  .step-icon { width: 58px; height: 58px; }
  .step-icon svg { width: 26px; height: 26px; }
}


/* ============================================================
   RESPONSIVE — 360px and below
   ============================================================ */
@media (max-width: 360px) {
  .btn-primary, .btn-outline { padding: 12px 20px; font-size: .88rem; }
  .plan-price { font-size: 1.7rem; }
}