/* ===========================
   Branded Presence — Styles
   =========================== */

:root{
  --bg:#0b0f14;
  --bg-elev:#121722;
  --ink:#ffffff;
  --muted:#b9c2cf;
  --primary:#fff400; /* yellow */
  --accent:#ea1006;  /* red */
  --accent2:#8c2228; /* deep red */
  --glass: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% 10%, #14202d 0%, transparent 50%),
    radial-gradient(900px 500px at 90% 80%, #141a27 0%, transparent 50%),
    var(--bg);
  font-family: "sofia-pro",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
}

/* Accessibility helpers */
.sr-only{position:absolute;left:-9999px}
.center{text-align:center}
.muted{color:var(--muted)}
.tiny-note{color:var(--muted);font-size:.85rem;margin-top:.75rem}

/* Loader */
#loader{
  position:fixed;inset:0;display:grid;place-items:center;
  background: radial-gradient(600px 300px at 50% 20%, #1b2436 0%, transparent 60%), var(--bg);
  z-index:9999; transition:opacity .6s ease, visibility .6s ease;
}
#loader.hidden{opacity:0;visibility:hidden}
.loader-logo{width:120px;height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5));animation:float 3.2s ease-in-out infinite}
.loader-ring{
  position:absolute; width:90px;height:90px;border-radius:50%;
  border:3px solid transparent;border-top-color:var(--primary);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Cursor follower (disabled on pricing for simplicity via JS, but styles retained) */
.cursor-dot{
  position:fixed; width:12px;height:12px; border-radius:50%;
  pointer-events:none; mix-blend-mode:difference; background:#fff; opacity:.6;
  transform:translate(-50%,-50%); transition:transform .04s linear, width .2s, height .2s, opacity .3s;
  z-index:9998;
}

/* Header */
#site-header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; gap:10px; backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(15,19,28,.75), rgba(15,19,28,.45));
  border-bottom:1px solid var(--stroke);
  transition: padding .35s ease, background .35s ease, border-color .35s ease;
}
#site-header.scrolled{
  padding:8px 20px; background: rgba(10,14,20,.9); border-color:rgba(255,255,255,.08);
}
.logo-with-text{display:flex; align-items:center; gap:12px}
.logo-with-text img{width:40px;height:40px; border-radius:50%}
.logo-title{
  font-family:"flood-std","Flood Std",cursive;
  font-size:1.6rem; letter-spacing:.5px; color:#fff;
}

/* Nav */
#navbar{display:flex; gap:16px; align-items:center}
#navbar a{
  color:#dbe6f7; text-decoration:none; padding:10px 12px; border-radius:12px;
  transition: background .25s ease, color .25s ease;
}
#navbar a:hover{background:rgba(255,255,255,.08); color:#fff}
#navbar a.active{background:linear-gradient(90deg, rgba(255,244,0,.18), rgba(234,16,6,.18))}
.contact-hover:hover{color:var(--primary)!important}
.menu-toggle{
  display:none; background:transparent; border:none; color:#fff; font-size:1.4rem; cursor:pointer;
}

/* Hero */
.hero{position:relative; padding:100px 20px 40px; max-width:1100px; margin:0 auto;}
.hero-compact{padding-bottom:10px}
.hero h1{
  font-weight:800; font-size:clamp(2rem, 4.2vw, 3.4rem); line-height:1.1; margin:0 0 10px;
}
.lead{color:#d5dceb; font-size:1.08rem; max-width:780px; margin:0 auto 16px}
.hero-cta{display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap}

/* Buttons */
.cta-button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:16px; border:1px solid rgba(255,255,255,.15);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px;
  box-shadow: var(--shadow); transition: transform .15s ease, background .25s ease, border-color .25s ease;
}
.cta-button:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.35)}
.cta-link{color:#cde1ff; text-decoration:none; font-weight:600}
.cta-link:hover{text-decoration:underline}

/* Cards / Glass */
.glass-card{
  max-width:1100px; margin:30px auto; padding:24px; background:var(--glass);
  border:1px solid var(--stroke); border-radius:var(--radius); box-shadow: var(--shadow);
}
.glass{background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius)}

/* Pricing & grids */
.highlight-box h2{margin-top:0}
.pricing-grid{
  display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width:1100px; margin:18px auto 6px;
}
.setup-card{
  padding:22px; background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .25s ease, background .25s ease;
}
.setup-card:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.08)}
.setup-card h3{margin-top:0; display:flex; align-items:center; gap:8px}
.setup-card ul{padding-left:18px; line-height:1.55}
.popular{position:relative}
.popular h3 span{
  display:inline-block; font-size:.8rem; padding:4px 8px; border-radius:999px;
  background:linear-gradient(90deg, rgba(255,244,0,.2), rgba(234,16,6,.2)); border:1px solid rgba(255,255,255,.2);
}
.badge-soft{
  display:inline-block; padding:3px 8px; border-radius:999px; border:1px dashed rgba(255,255,255,.25);
  background:rgba(255,255,255,.04); font-size:.85rem; margin-left:6px;
}

/* Hosting cards */
.hosting-grid .setup-card h4{margin:8px 0 0}
.price{
  font-weight:800; font-size:1.8rem; letter-spacing:.2px; margin:10px 0 4px;
}
.per{font-weight:500; font-size:.9rem; color:var(--muted)}
.included{margin:.5rem 0 0; font-size:.9rem; color:#d7e0f1}
.tier-badge{
  display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); font-weight:700; font-size:.8rem;
}

/* Billing toggles */
.billing-toggle-group{display:flex; align-items:center; gap:10px; margin:6px 0 12px}
.billing-toggle{
  padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04);
  color:#fff; cursor:pointer; font-weight:700;
}
.billing-toggle.active{outline:2px solid var(--primary); background:rgba(255,244,0,.08); color:#fff}

/* Tooltip */
.tooltip{position:relative; display:inline-block; margin-top:8px}
.tooltip .tooltiptext{
  visibility:hidden; width:220px; background:#1a2233; color:#fff; text-align:left; padding:10px; border-radius:8px;
  border:1px solid rgba(255,255,255,.15); position:absolute; z-index:1; left:50%; transform:translateX(-50%); bottom:130%;
}
.tooltip:hover .tooltiptext{visibility:visible}

/* SVG diagram */
.dns-svg{width:100%; max-width:680px; margin:14px auto}
.box{height:80px}
.domain{fill:var(--accent)}
.hosting{fill:var(--accent2)}
.site{fill:var(--primary)}
.label{font-size:18px; fill:#fff; font-weight:700; font-family: "sofia-pro", system-ui; text-anchor:middle; dominant-baseline:middle;}
.label.small{font-size:13px; opacity:.9}
.label.dark{fill:#000}
.flow{stroke:#fff; stroke-width:3}

/* Comparison table */
.compare-scroll{overflow:auto; border-radius:14px; border:1px solid var(--stroke)}
.compare-table{width:100%; border-collapse:separate; border-spacing:0; min-width:680px}
.compare-table thead th{
  position:sticky; top:0; background:rgba(255,255,255,.06);
  border-bottom:1px solid var(--stroke); padding:12px; text-align:left;
}
.compare-table td, .compare-table th{padding:12px}
.compare-table tbody tr:nth-child(odd){background:rgba(255,255,255,.03)}

/* FAQ */
.faq{margin:10px 0; border:1px solid var(--stroke); border-radius:12px; padding:12px; background:rgba(255,255,255,.04)}
.faq summary{cursor:pointer; font-weight:700}
.faq[open]{background:rgba(255,255,255,.06)}

/* CTA band */
.cta-band{
  max-width:1100px; margin:36px auto 60px; padding:26px 20px; text-align:center;
  background:linear-gradient(135deg, rgba(255,244,0,.10), rgba(234,16,6,.10), rgba(140,34,40,.10));
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); box-shadow: var(--shadow);
}
.cta-row{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(16px); transition: opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

/* Tilt effect base */
.tilt{transform-style:preserve-3d; will-change:transform; perspective:800px}

/* Scroll to top */
#scrollTopBtn{
  position:fixed; right:18px; bottom:18px; width:44px;height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  display:grid; place-items:center; background:rgba(255,255,255,.06); color:#fff; cursor:pointer; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease, background .25s ease;
  z-index:1000;
}
#scrollTopBtn.show{opacity:1; pointer-events:auto; transform:none}
#scrollTopBtn:hover{background:rgba(255,255,255,.12)}

/* Footer */
.site-footer{
  padding:26px 20px; text-align:center; color:var(--muted);
  border-top:1px solid var(--stroke); background:rgba(255,255,255,.03);
}

/* Mobile nav */
@media (max-width: 860px){
  .menu-toggle{display:block}
  #navbar{
    position:fixed; top:64px; right:16px; left:16px; display:grid; gap:8px; padding:14px;
    background:rgba(15,19,28,.95); border:1px solid var(--stroke); border-radius:16px;
    transform:translateY(-16px); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  }
  #navbar.open{opacity:1; transform:none; pointer-events:auto}
}

/* Animations & Reduced motion */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
  .cursor-dot{display:none}
}
/* ===== Contact form wizard ===== */
.contact-form{max-width:1000px;margin:0 auto}
.form-steps{display:flex;gap:10px;justify-content:center;margin:6px 0 18px;flex-wrap:wrap}
.step-indicator{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--stroke);border-radius:999px;background:rgba(255,255,255,.04);color:var(--muted);font-weight:700}
.step-indicator span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--stroke);color:#fff;font-size:.9rem}
.step-indicator.current{outline:2px solid var(--primary);color:#fff}

.form-step{display:none}
.form-step.current{display:block;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:800px){.form-row{grid-template-columns:1fr}}
.form-group{display:grid;gap:6px}
.form-group input,.form-group select,.form-group textarea{
  padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.04);color:#fff;outline:none
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:rgba(255,255,255,.4)}
.hint{color:var(--muted);font-size:.85rem}

.checkbox{display:flex;align-items:center;gap:10px}
.checkbox input{width:18px;height:18px}

.form-nav{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.prev-btn{border:none;background:none}
.prev-btn.cta-link{cursor:pointer}

.review-box{
  background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:14px;padding:14px;margin:6px 0 12px
}
.review-box h4{margin:0 0 8px}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:800px){.review-grid{grid-template-columns:1fr}}
.review-item{background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.2);border-radius:10px;padding:10px}
.review-item b{display:block;margin-bottom:4px}

/* Emoji fallback for JS-injected icons (hosting list) */
.hosting-grid li .emoji {
  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    "Noto Emoji",
    "Segoe UI Symbol",
    system-ui, sans-serif !important;
  font-variant-emoji: emoji;
  display: inline-block;
  width: 1.25em;
  text-align: center;
  margin-right: .25em;
  line-height: 1;
}

/* =========================================================
   LAYOUT NORMALISER — paste at the very end of style.css
   Brings consistent widths, padding, and text alignment
   across index/pricing/services/contact/thank-you.
   ========================================================= */

/* 1) Global content frame */
:root{
  --content-max: 1100px;             /* max content width */
  --content-pad: clamp(16px, 3vw, 28px);
  --section-gap: clamp(18px, 4vw, 34px);
}

/* 2) Center all main sections within the same width */
main > *{
  /* center the section blocks */
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--content-pad);
  /* vertical breathing room */
  margin-block: var(--section-gap);
}

/* Hero blocks are usually full-bleed visually but we still center their text */
.hero,
.hero-compact{
  text-align: center;
  margin-block: var(--section-gap);
}

/* Glass cards / highlight boxes already look like cards—ensure they align consistently */
.glass-card,
.highlight-box,
.cta-band,
.svg-diagram,
.compare-scroll{
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

/* 3) Type rhythm: remove random left indentation from headings & paragraphs */
main h1, main h2, main h3, main p{
  margin-left: 0;
  margin-right: 0;
}

/* 4) Lists: keep bullets but reduce default browser padding to avoid “indented” look */
main ul, main ol{
  margin: .4rem 0 0;
  padding-left: 1.15rem; /* tighter than default 40px */
}
.setup-card ul,
.feature ul,
.pricing-grid ul{
  padding-left: 1.15rem;
}

/* 5) Utilities for explicit alignment if you ever need them */
.center   { text-align: center !important; }
.left     { text-align: left   !important; }
.right    { text-align: right  !important; }

/* 6) Price rows and tiny notes: keep centered look inside auto-rendered cards */
#hosting-grid .price,
#hosting-grid .tiny-note,
#hosting-grid .included{
  text-align: center;
}

/* 7) Tabs (Services): ensure panels line up with the same content frame */
.tabs,
.tab-panel{
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: 0; /* Panels already sit inside a glass-card with padding */
}

/* 8) Prevent nested cards from re-indenting */
.glass-card .glass-card,
.highlight-box .highlight-box{
  padding-inline: 0;
}

/* 9) Keep footer and header visually consistent with the frame (no HTML changes needed) */
#site-header,
.site-footer{
  padding-inline: var(--content-pad);
}

/* Optional: constrict header contents to the same width frame */
header{
  display: grid;
  justify-content: center;
}
header > *{
  width: min(100%, var(--content-max));
}

/* Hero orbs: push behind, soften, prevent overflow */
.hero { position: relative; overflow: hidden; }
.hero > * { position: relative; z-index: 1; }

.hero-orbs{
  position: absolute;
  inset: -10% -5% auto -5%;  /* give room to float without peeking */
  width: 110%;
  height: clamp(280px, 48vw, 520px);
  z-index: 0;
  pointer-events: none;
  opacity: .22;              /* global fade */
  filter: blur(24px) saturate(.9); /* softer glow */
}

/* On very small screens, fade further */
@media (max-width: 480px){
  .hero-orbs{ opacity: .14; filter: blur(28px) saturate(.85); }
}

/* Respect reduced motion: just hide the orbs */
@media (prefers-reduced-motion: reduce){
  .hero-orbs{ display:none; }
}

.hero { position: relative; overflow: hidden; }
.hero > * { position: relative; z-index: 1; }

/* CSS-only orbs */
.hero-orbs-css {
  position: absolute; inset: -10% -5% auto -5%;
  width: 110%; height: clamp(280px, 48vw, 520px);
  z-index: 0; pointer-events: none;
}
.hero-orbs-css::before,
.hero-orbs-css::after{
  content:""; position:absolute; border-radius:50%;
  width:60vmin; height:60vmin; filter: blur(24px);
  background: radial-gradient(circle, rgba(255,244,0,.18) 0%, rgba(255,244,0,0) 70%);
  opacity:.22;
}
.hero-orbs-css::before{ left:-8%; top:-6%; animation: orbX 22s ease-in-out infinite alternate; }
.hero-orbs-css::after { right:-8%; bottom:-10%; animation: orbY 27s ease-in-out infinite alternate; }

@keyframes orbX { to { transform: translateX(40%); } }
@keyframes orbY { to { transform: translateY(-35%); } }

@media (max-width:480px){ .hero-orbs-css::before, .hero-orbs-css::after{ opacity:.14; filter: blur(28px); } }
@media (prefers-reduced-motion: reduce){ .hero-orbs-css{ display:none; } }

/* ===== Form validation UX ===== */
.required::after{ content:" *"; color:#ff6161; margin-left:4px }
input.invalid, select.invalid, textarea.invalid{
  border-color:#ff6161 !important;
  box-shadow:0 0 0 2px rgba(255,97,97,.15);
}
.field-error{
  color:#ffb3b3;
  font-size:.85rem;
  margin-top:4px;
}
.form-error-summary{
  background:rgba(255,97,97,.12);
  border:1px solid rgba(255,97,97,.35);
  color:#ffe3e3;
  padding:10px 12px;
  border-radius:12px;
  margin:6px 0 12px;
}
.form-error-summary ul{ margin:6px 0 0; padding-left:1.1rem }
.form-error-summary[hidden]{ display:none !important }
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.form-error-summary.shake{ animation:shake .35s }

/* ===== Form wizard & validation ===== */
.form-steps{display:flex;gap:10px;justify-content:center;margin:6px 0 16px;flex-wrap:wrap}
.step-indicator{display:flex;align-items:center;gap:8px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);padding:8px 12px;border-radius:999px;color:#dbe3f0}
.step-indicator span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12);font-size:.85rem}
.step-indicator.current{outline:2px solid var(--primary);color:#fff}

.form-step{display:none}
.form-step.current{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.required::after{ content:" *"; color:#ff6161; margin-left:4px }
input.invalid, select.invalid, textarea.invalid{
  border-color:#ff6161 !important;
  box-shadow:0 0 0 2px rgba(255,97,97,.15);
}
.field-error{
  color:#ffb3b3;
  font-size:.85rem;
  margin-top:4px;
}
.form-error-summary{
  background:rgba(255,97,97,.12);
  border:1px solid rgba(255,97,97,.35);
  color:#ffe3e3;
  padding:10px 12px;
  border-radius:12px;
  margin:6px 0 12px;
}
.form-error-summary ul{ margin:6px 0 0; padding-left:1.1rem }
.form-error-summary[hidden]{ display:none !important }
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.form-error-summary.shake{ animation:shake .35s }

.review-box{border:1px solid var(--stroke);background:rgba(255,255,255,.04);border-radius:12px;padding:14px;margin-bottom:12px}
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.review-item{display:flex;flex-direction:column;gap:4px}
.review-item b{color:#e9eef9}