/* =====================================================================
   HostFilya — design system (class-based, multi-page)
   Brand: friendly green web hosting
   ===================================================================== */

:root{
  --green:#e5611e; --green-d:#c24a12; --green-l:#fb8c3c;
  --ink:#2a1810; --ink-2:#3a2415; --mint:#fdba74;
  --text:#1c1410; --muted:#574b40; --muted-2:#7d7164; --muted-3:#9a8d7e;
  --bg:#ffffff; --soft:#fdf1e7; --soft-2:#fbe2d2; --line:#ead9cb; --line-2:#e3d0c0;
  --wrap:1200px; --r:18px; --r-lg:24px;
  --sh-sm:0 10px 24px -16px rgba(150,70,25,.35);
  --sh:0 24px 50px -28px rgba(150,70,25,.45);
  --sh-lg:0 40px 80px -40px rgba(42,24,16,.5);
  --head:'Bricolage Grotesque',sans-serif;
  --body:'Hanken Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--bg);color:var(--text);font-size:16px;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--head);letter-spacing:-.02em;margin:0}
p{margin:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.block{padding:90px 0}
.block-sm{padding:46px 0}
.soft-bg{background:var(--soft)}
.mint-bg{background:linear-gradient(180deg,#fff1e8,#fff)}
.ink-bg{background:var(--ink);color:#fff}
.tac{text-align:center}

/* ---------- announcement bar ---------- */
.topbar{background:var(--ink);color:#f3e5d8;text-align:center;font-size:13.5px;font-weight:500;padding:9px 20px;letter-spacing:.01em}
.topbar strong{color:var(--mint);font-weight:700}
.topbar code{font-family:var(--mono);color:#fff}
.topbar a{color:var(--mint);font-weight:600}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid #f2e8e0;transition:box-shadow .2s}
.hdr.stuck{box-shadow:0 8px 30px -18px rgba(150,70,25,.35)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;padding:15px 40px;max-width:var(--wrap);margin:0 auto}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--head);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--text)}
.logo .mark{width:32px;height:32px;border-radius:11px;background:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px -6px rgba(229,97,30,.7)}
.logo img{height:34px;width:auto;display:block}
.ftr-brand .logo img{height:40px}
.menu{display:flex;align-items:center;gap:28px}
.menu a{font-size:14.5px;font-weight:600;color:#564a40;transition:color .15s}
.menu a:hover,.menu a.on{color:var(--green)}
.hdr-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;border:0;background:transparent;cursor:pointer;color:var(--text);width:40px;height:40px;align-items:center;justify-content:center}
.burger svg{width:24px;height:24px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px;padding:11px 20px;border-radius:999px;cursor:pointer;border:1.6px solid transparent;transition:.15s;font-family:var(--body)}
.btn-fill{background:var(--green);color:#fff;box-shadow:0 10px 20px -8px rgba(229,97,30,.55)}
.btn-fill:hover{background:var(--green-d)}
.btn-line{background:#fff;border-color:var(--green);color:var(--green)}
.btn-line:hover{background:var(--soft-2)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-2)}
.btn-lg{padding:15px 30px;font-size:15.5px}
.btn-white{background:#fff;color:var(--green-d)}
.btn-white:hover{background:#fdf3ec}

/* ---------- kicker / section headings ---------- */
.kicker{display:inline-flex;align-items:center;gap:8px;background:var(--soft-2);color:var(--green-d);font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;margin-bottom:18px}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.kicker.on-ink{background:rgba(253,186,116,.12);color:var(--mint)}
.eyebrow{font:600 13px var(--mono);color:var(--green);letter-spacing:.08em;margin-bottom:12px}
.eyebrow.on-ink{color:var(--mint)}
.h-sec{font-size:40px;font-weight:800;line-height:1.08;margin-bottom:12px}
.h-sec.sm{font-size:32px}
.sub-sec{color:var(--muted);font-size:17px;max-width:560px}
.tac .sub-sec{margin-left:auto;margin-right:auto}
.hl{color:var(--green)}

/* ---------- hero ---------- */
.hero{background:radial-gradient(120% 80% at 75% -10%,#fff1e8 0%,#fff 55%);padding:72px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero h1{font-size:56px;line-height:1.04;letter-spacing:-.03em;margin-bottom:20px}
.lead{font-size:18px;line-height:1.6;color:var(--muted)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-note{font-size:13.5px;color:var(--muted-2);margin-top:18px}
.trustline{display:flex;gap:24px;margin-top:24px;flex-wrap:wrap}
.trustline span{font-size:13.5px;font-weight:600;color:#564a40;display:flex;align-items:center;gap:6px}

/* domain search box */
.dsearch{display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line-2);border-radius:999px;padding:6px 6px 6px 20px;max-width:480px;box-shadow:0 20px 44px -26px rgba(150,70,25,.45);margin-top:26px}
.dsearch .pre,.dsearch .post{font:500 14px var(--mono);color:var(--muted-3)}
.dsearch input{border:0;outline:0;flex:1;font:500 15px var(--mono);color:var(--text);background:transparent;min-width:0}
.dstatus{min-height:22px;margin-top:14px;font-size:14px;font-weight:600}
.dstatus a{color:var(--green-d);text-decoration:underline}

/* hero collage */
.collage{position:relative}
.collage-grid{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:auto auto;gap:14px;animation:floaty 9s ease-in-out infinite}
.collage-grid>div{border-radius:20px;overflow:hidden;box-shadow:var(--sh);border:1px solid #f1e8e0}
.collage-grid>div:first-child{grid-row:span 2}
.collage-grid img{width:100%;height:100%;object-fit:cover}
.float-card{position:absolute;background:#fff;border-radius:16px;padding:13px 17px;box-shadow:var(--sh);display:flex;align-items:center;gap:12px;border:1px solid #f6ede6}
.float-card.bl{left:-22px;bottom:-18px}
.float-card.tr{right:-16px;top:-16px;background:var(--ink);color:#fff;border:0}
.float-ic{width:40px;height:40px;border-radius:11px;background:var(--soft-2);color:var(--green);display:flex;align-items:center;justify-content:center}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* avatar stack */
.avatars{display:flex;align-items:center;gap:14px;margin-top:30px}
.avatars .stack{display:flex}
.avatars .stack img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.avatars .stack img+img{margin-left:-12px}
.stars{color:#E0922E;font-size:13px;letter-spacing:1px}

/* ---------- logo strip ---------- */
.logostrip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-top:64px}
.logostrip .lbl{font-size:13px;font-weight:700;color:var(--muted-3);letter-spacing:.06em}
.logostrip .brands{display:flex;gap:36px;opacity:.5;flex-wrap:wrap}
.logostrip .brands span{font:700 19px var(--head);color:var(--muted)}

/* ---------- stats ---------- */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.statcard b{font:800 44px var(--head);letter-spacing:-.02em;display:block}
.statcard p{font-size:14px;color:var(--muted);margin-top:4px}
.ink-bg .statcard b{color:#fff}
.ink-bg .statcard p{color:#d9b89c}

/* ---------- grids ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* feature card */
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .2s ease,box-shadow .2s ease}
.fcard:hover{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(150,70,25,.45)}
.fcard .ic{width:46px;height:46px;border-radius:13px;background:var(--soft-2);color:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.fcard .ic svg{width:23px;height:23px}
.fcard h3{font-size:17px;font-weight:700;margin-bottom:6px}
.fcard p{font-size:14px;line-height:1.55;color:#6b5c50}
.fcard .price{font:500 12.5px var(--mono);color:var(--green);margin-top:14px}
.lk{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--green);margin-top:14px}
.lk svg{width:16px;height:16px;transition:transform .15s}
.lk:hover svg{transform:translateX(3px)}
.fcard.cta-card{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;display:flex;flex-direction:column;justify-content:center}
.fcard.cta-card h3,.fcard.cta-card p{color:#fff}
.fcard.cta-card p{opacity:.92}

/* ---------- split section ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.flip .media{order:-1}
.media{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 36px 70px -36px rgba(150,70,25,.5);border:1px solid #efe5dc}
.media img{width:100%;height:100%;min-height:340px;object-fit:cover}
.checklist{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.checklist li{display:flex;gap:12px;align-items:flex-start}
.checklist .ck{width:24px;height:24px;flex-shrink:0;border-radius:8px;background:var(--soft-2);color:var(--green);display:flex;align-items:center;justify-content:center}
.checklist .ck svg{width:15px;height:15px}
.checklist strong{display:block;font-weight:700;color:var(--text)}
.checklist span{font-size:14px;color:var(--muted)}

/* mini feature boxes */
.minibox{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:16px}
.minibox b{display:block;font:700 15px var(--head);margin-bottom:3px}
.minibox span{font-size:13px;color:#6b5c50}

/* ---------- steps ---------- */
.steps{display:grid;gap:20px}
.stepcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.stepcard .n{font:800 15px var(--mono);color:var(--green);margin-bottom:14px}
.stepcard h3{font-size:17px;margin-bottom:6px}
.stepcard p{font-size:14px;color:#6b5c50;line-height:1.55}

/* ---------- network / regions ---------- */
.net-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.region{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between}
.region b{font:700 15px var(--head);color:#fff;display:block}
.region span{font:500 11.5px var(--mono);color:#a08a78}
.region .live{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(253,186,116,.2)}
.region.more{background:rgba(253,186,116,.1);border-color:rgba(253,186,116,.3);justify-content:center;color:var(--mint);font:700 14px var(--head)}
.net-stats{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;padding-top:34px;margin-top:40px;border-top:1px solid rgba(255,255,255,.1)}
.net-stats b{font:800 32px var(--head);color:#fff;display:block}
.net-stats span{font-size:13px;color:#d9b89c}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{background:#fff;border:1px solid #eee3da;border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column}
.plan.pop{background:var(--ink);color:#fff;position:relative;box-shadow:var(--sh-lg)}
.plan .pname{font:700 16px var(--head)}
.plan .pdesc{font-size:13.5px;color:#6b5c50;margin:4px 0 18px}
.plan.pop .pdesc{color:#d9b89c}
.plan .amt{font:800 44px var(--head);letter-spacing:-.02em}
.plan .amt small{font-size:15px;font-weight:600;color:var(--muted-2)}
.plan.pop .amt{color:#fff}
.plan.pop .amt small{color:#a08a78}
.plan .billed{font-size:12.5px;color:var(--muted-2);margin-top:4px}
.plan.pop .billed{color:#a08a78}
.plan .rule{height:1px;background:#f4ebe3;margin:22px 0}
.plan.pop .rule{background:#3f2a1a}
.plan .feats{font-size:14px;color:#564a40;line-height:2.1;flex:1}
.plan.pop .feats{color:#e8d8c9}
.plan .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--mint);color:#5a2c0c;font-size:11px;font-weight:800;padding:5px 14px;border-radius:999px;letter-spacing:.04em}
.plan .btn{margin-top:24px;width:100%}

/* comparison table */
.ctable{width:100%;border-collapse:collapse;font-size:14.5px}
.ctable th,.ctable td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.ctable thead th{font:700 15px var(--head);color:var(--text)}
.ctable td.c{text-align:center}
.ctable .yes{color:var(--green);font-weight:700}
.ctable .no{color:#cfc3b8}
.ctable tbody tr:hover{background:var(--soft)}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}

/* ---------- testimonials ---------- */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.quote .stars{margin-bottom:14px;font-size:15px;letter-spacing:2px}
.quote p{font-size:15.5px;line-height:1.6;color:#3d342d;margin-bottom:20px}
.quote .by{display:flex;align-items:center;gap:12px}
.quote .by img,.quote .av{width:42px;height:42px;border-radius:50%;object-fit:cover}
.quote .av{background:var(--soft-2);color:var(--green);display:flex;align-items:center;justify-content:center;font:800 17px var(--head)}
.quote .by strong{font-size:14.5px}
.quote .by span{font-size:12.5px;color:var(--muted-2);display:block}

/* ---------- FAQ ---------- */
.faqlist{display:grid;gap:12px;max-width:820px;margin:0 auto}
.faq{background:#fff9f4;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;font:700 16px var(--head);color:var(--text);background:none;border:0;padding:20px 22px;cursor:pointer;text-align:left}
.faq .plus{color:var(--green);font-size:22px;line-height:1;transition:transform .2s;flex-shrink:0}
.faq.open .plus{transform:rotate(45deg)}
.faq .ans{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq .ans p{font-size:14.5px;line-height:1.6;color:var(--muted);padding:0 22px 20px}

/* ---------- savings calculator ---------- */
.calc{background:linear-gradient(135deg,var(--ink),var(--ink-2));border-radius:28px;padding:52px 56px;box-shadow:var(--sh-lg);display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;color:#fff}
.calc h2{color:#fff}
.calc .sub-sec{color:#cdb29c}
.calc .payrow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.calc .payrow .lbl{font-size:13.5px;font-weight:600;color:#e8d8c9}
.calc .payrow .amt{font:800 26px var(--head);color:#fff}
.calc .payrow .amt small{font-size:14px;font-weight:600;color:#a08a78}
.calc input[type=range]{width:100%;accent-color:var(--mint);cursor:pointer}
.calc .scale{display:flex;justify-content:space-between;font:500 11.5px var(--mono);color:#a08a78;margin-top:6px}
.calc-res{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:30px;text-align:center}
.calc-res .cap{font-size:13.5px;font-weight:600;color:#cdb29c;margin-bottom:6px}
.calc-res .big{font:800 56px var(--head);color:var(--mint);letter-spacing:-.03em;line-height:1.05}
.calc-res .per{font-size:13.5px;font-weight:600;color:#e8d8c9;margin-bottom:22px}
.calc-res .mini{display:flex;justify-content:center;gap:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.calc-res .mini b{font:800 20px var(--head);color:#fff;display:block}
.calc-res .mini span{font-size:11.5px;color:#a08a78;font-weight:600}

/* ---------- big CTA band ---------- */
.cta{background:radial-gradient(120% 140% at 80% -20%,var(--green-l),var(--green-d));border-radius:28px;padding:64px 56px;text-align:center;position:relative;overflow:hidden;box-shadow:0 40px 80px -40px rgba(194,74,18,.6);color:#fff}
.cta h2{font-size:42px;letter-spacing:-.03em;margin-bottom:14px;color:#fff}
.cta p{font-size:18px;color:rgba(255,255,255,.9);max-width:480px;margin:0 auto 30px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- page hero (sub-pages) ---------- */
.pagehero{background:radial-gradient(120% 90% at 70% -20%,#fff1e8,#fff 60%);padding:70px 0 56px;text-align:center}
.pagehero h1{font-size:48px;line-height:1.05;letter-spacing:-.03em;margin-bottom:16px}
.pagehero p{font-size:18px;color:var(--muted);max-width:600px;margin:0 auto}

/* ---------- forms ---------- */
.field{width:100%;border:1.5px solid var(--line-2);border-radius:12px;padding:12px 14px;font:500 14.5px var(--body);color:var(--text);outline:0;background:#fff}
.field:focus{border-color:var(--green)}
.field::placeholder{color:var(--muted-3)}
label.flbl{font-size:13px;font-weight:700;color:#564a40;margin-bottom:6px;display:block}
.form-grid{display:grid;gap:14px}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;box-shadow:var(--sh-sm)}
.form-err{color:#c0392b;font-size:13px;font-weight:600}
.thanks{text-align:center;padding:14px 0}
.thanks .tick{width:64px;height:64px;border-radius:50%;background:var(--soft-2);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--green)}

/* contact info cards */
.info-card{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.info-card .ic{width:42px;height:42px;border-radius:11px;background:#fff;color:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:14px;border:1px solid var(--line)}
.info-card h3{font-size:16px;margin-bottom:6px}
.info-card p{font-size:14px;color:var(--muted)}
.info-card a{color:var(--green);font-weight:600}

/* ---------- blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.post-card:hover{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(150,70,25,.4)}
.post-card .pc-img{aspect-ratio:16/10;overflow:hidden}
.post-card .pc-img img{width:100%;height:100%;object-fit:cover}
.post-card .pc-body{padding:22px;display:flex;flex-direction:column;flex:1}
.post-card .pc-meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted-2);margin-bottom:10px}
.tag{display:inline-block;background:var(--soft-2);color:var(--green-d);font:700 11px var(--mono);letter-spacing:.04em;padding:4px 10px;border-radius:999px}
.post-card h3{font-size:19px;line-height:1.25;margin-bottom:8px}
.post-card p{font-size:14px;color:#6b5c50;line-height:1.55;flex:1}
.post-card .lk{margin-top:16px}
.featured-post{display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm)}
.featured-post .fp-img{min-height:340px;overflow:hidden}
.featured-post .fp-img img{width:100%;height:100%;object-fit:cover}
.featured-post .fp-body{padding:40px;display:flex;flex-direction:column;justify-content:center}

/* ---------- article ---------- */
.article{max-width:760px;margin:0 auto;padding:0 40px}
.article-hero{text-align:center;padding:60px 0 30px}
.article-hero h1{font-size:42px;line-height:1.12;letter-spacing:-.03em;margin:14px 0 18px}
.article-meta{display:flex;gap:12px;align-items:center;justify-content:center;font-size:13.5px;color:var(--muted-2)}
.article-meta .av{width:34px;height:34px;border-radius:50%;background:var(--soft-2);color:var(--green);display:inline-flex;align-items:center;justify-content:center;font:800 14px var(--head)}
.article-cover{max-width:960px;margin:20px auto 0;padding:0 40px}
.article-cover img{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh)}
.prose{font-size:17px;line-height:1.8;color:#3a322c}
.prose h2{font-size:28px;margin:42px 0 14px}
.prose h3{font-size:21px;margin:32px 0 10px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose blockquote{margin:24px 0;padding:18px 24px;border-left:4px solid var(--green);background:var(--soft);border-radius:0 12px 12px 0;font-size:18px;color:var(--text)}
.prose a{color:var(--green);font-weight:600;text-decoration:underline}
.prose code{font-family:var(--mono);background:var(--soft-2);padding:2px 6px;border-radius:6px;font-size:14px;color:var(--green-d)}
.prose img{border-radius:14px;margin:24px 0}
.callout{background:var(--soft-2);border:1px solid #f7ddc8;border-radius:14px;padding:20px 24px;margin:28px 0}

/* ---------- modal ---------- */
.modal{display:none;position:fixed;inset:0;z-index:100;background:rgba(42,24,16,.55);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal-card{background:#fff;border-radius:22px;max-width:460px;width:100%;padding:34px;box-shadow:0 40px 90px -28px rgba(42,24,16,.55);position:relative}
.modal-close{position:absolute;top:16px;right:16px;border:0;background:#f7efe9;width:32px;height:32px;border-radius:50%;cursor:pointer;color:#6b5c50;font-size:15px;line-height:1}

/* ---------- footer ---------- */
.ftr{background:var(--ink);padding:64px 0 36px;color:#ab9a8b}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.ftr-brand{max-width:280px}
.ftr-brand .logo{color:#fff;margin-bottom:14px}
.ftr-brand p{font-size:14px;color:#ab9a8b;line-height:1.6;margin-bottom:16px}
.ftr-brand .site{font:500 13px var(--mono);color:var(--mint)}
.ftr-social{display:flex;gap:10px;margin-top:16px}
.ftr-social a{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#ab9a8b;transition:.15s}
.ftr-social a:hover{background:rgba(253,186,116,.15);color:var(--mint)}
.ftr-social svg{width:17px;height:17px}
.ftr-col h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:12px}
.ftr-col ul{list-style:none;padding:0;margin:0}
.ftr-col li{margin-bottom:9px}
.ftr-col a{font-size:14px;color:#ab9a8b;transition:color .15s}
.ftr-col a:hover{color:var(--mint)}
.ftr-bot{max-width:var(--wrap);margin:44px auto 0;padding:24px 40px 0;border-top:1px solid #3a2618;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#938173}
.ftr-bot a:hover{color:var(--mint)}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid,.split,.calc,.featured-post{grid-template-columns:1fr!important}
  .split.flip .media{order:0}
  .g4,.net-grid,.statrow{grid-template-columns:repeat(2,1fr)}
  .g3,.price-grid,.post-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:44px}
  .h-sec{font-size:32px}
  .menu{position:fixed;top:64px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:10px 24px 20px;border-bottom:1px solid var(--line);box-shadow:var(--sh);display:none}
  .menu.show{display:flex}
  .menu a{padding:12px 0;width:100%;border-bottom:1px solid var(--soft)}
  .burger{display:flex}
  .hdr-cta .btn-line{display:none}
}
@media (max-width:600px){
  .wrap{padding:0 22px}
  .hdr-in{padding:13px 22px}
  .block{padding:64px 0}
  .g2,.g3,.g4,.net-grid,.price-grid,.post-grid,.statrow,.ftr-grid{grid-template-columns:1fr!important}
  .hero h1{font-size:36px}
  .cta{padding:44px 26px}
  .cta h2{font-size:30px}
  .calc{padding:36px 26px}
  .pagehero h1{font-size:34px}
  .article-hero h1{font-size:30px}
  .ftr-bot{padding:24px 22px 0}
}

/* =====================================================================
   ENHANCEMENTS — borders · unique details · hover · animation · mobile
   ===================================================================== */

/* never let decorative / absolute elements cause horizontal scroll */
html,body{overflow-x:hidden;max-width:100%}
/* sticky-header offset for in-page anchors (#pricing, #faq …) */
[id]{scroll-margin-top:96px}

/* keyboard focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}

/* ---- gradient highlight in headings ---- */
.hl{background:linear-gradient(120deg,var(--green),var(--green-l) 70%,#ffa251);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--green)}

/* ---- subtle dot texture on soft sections (unique) ---- */
.soft-bg{background-color:var(--soft);background-image:radial-gradient(rgba(229,97,30,.05) 1px,transparent 1px);background-size:22px 22px}

/* ---- animated nav underline ---- */
.menu a{position:relative}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--green),var(--mint));transition:right .28s ease}
.menu a:hover::after,.menu a.on::after{right:0}

/* ---- buttons: lift + animated sheen ---- */
.btn{position:relative;overflow:hidden;transition:transform .18s ease,background .15s ease,box-shadow .2s ease,border-color .15s ease}
.btn::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);pointer-events:none}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{left:150%;transition:left .6s ease}
.btn:active{transform:translateY(0)}
.btn-fill:hover{box-shadow:0 16px 28px -10px rgba(229,97,30,.6)}
.btn-ink:hover,.btn-white:hover{box-shadow:0 16px 28px -12px rgba(42,24,16,.45)}

/* ---- feature cards: thicker border + top accent + lift + icon flip ---- */
.fcard{position:relative;border-width:1.5px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.fcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),var(--mint));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.fcard:hover{transform:translateY(-6px);border-color:#f5d8bf;box-shadow:0 28px 50px -30px rgba(150,70,25,.5)}
.fcard:hover::before{transform:scaleX(1)}
.fcard .ic{transition:transform .3s ease,background .3s ease,color .3s ease}
.fcard:hover .ic{background:var(--green);color:#fff;transform:rotate(-6deg) scale(1.06)}
.fcard.cta-card::before{background:linear-gradient(90deg,#fff,var(--mint))}
.fcard.cta-card:hover{border-color:transparent}

/* ---- image zoom on hover ---- */
.media,.post-card .pc-img,.featured-post .fp-img,.collage-grid>div,.article-cover{overflow:hidden}
.media img,.post-card .pc-img img,.featured-post .fp-img img,.collage-grid img{transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.media:hover img,.post-card:hover .pc-img img,.featured-post:hover .fp-img img,.collage-grid>div:hover img{transform:scale(1.06)}

/* ---- pricing plans ---- */
.plan{border-width:1.5px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.plan:not(.pop):hover{transform:translateY(-6px);border-color:var(--green);box-shadow:0 28px 54px -32px rgba(150,70,25,.5)}
.plan.pop{box-shadow:0 40px 70px -34px rgba(42,24,16,.6),inset 0 0 0 1px rgba(253,186,116,.25)}
.plan.pop:hover{transform:translateY(-4px)}

/* ---- quote / info / mini / step / region / faq hovers ---- */
.quote{border-width:1.5px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.quote:hover{transform:translateY(-4px);border-color:#f5d8bf;box-shadow:0 22px 44px -30px rgba(150,70,25,.45)}
.info-card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.info-card:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 18px 36px -26px rgba(150,70,25,.4)}
.info-card:hover .ic{background:var(--green);color:#fff}
.info-card .ic{transition:.25s}
.minibox{transition:transform .2s ease,border-color .2s ease,background .2s ease}
.minibox:hover{transform:translateY(-2px);border-color:var(--green);background:#fff}
.stepcard{border-width:1.5px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.stepcard:hover{transform:translateY(-4px);border-color:#f5d8bf;box-shadow:0 22px 44px -30px rgba(150,70,25,.45)}
.region{transition:background .25s ease,border-color .25s ease,transform .25s ease}
.region:hover{background:rgba(255,255,255,.09);border-color:rgba(253,186,116,.45);transform:translateY(-2px)}
.faq{transition:border-color .2s ease,box-shadow .2s ease}
.faq:hover{border-color:#f5d8bf}
.faq.open{border-color:var(--green);box-shadow:0 16px 34px -26px rgba(150,70,25,.4)}

/* ---- pulsing live indicators ---- */
.region .live{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(253,186,116,.45)}70%{box-shadow:0 0 0 9px rgba(253,186,116,0)}100%{box-shadow:0 0 0 0 rgba(253,186,116,0)}}

/* ---- borders / inset accents on big panels ---- */
.cta{box-shadow:0 40px 80px -40px rgba(194,74,18,.6),inset 0 0 0 1px rgba(255,255,255,.16)}
.calc{border:1px solid rgba(255,255,255,.08)}
.form-card{border-width:1.5px}
.table-scroll{border-width:1.5px}
.ctable{min-width:560px}

/* ---- staggered reveal for grid children ---- */
.grid>.rv:nth-child(2),.post-grid>.rv:nth-child(2),.price-grid>.rv:nth-child(2){transition-delay:.07s}
.grid>.rv:nth-child(3),.post-grid>.rv:nth-child(3),.price-grid>.rv:nth-child(3){transition-delay:.14s}
.grid>.rv:nth-child(4),.post-grid>.rv:nth-child(4){transition-delay:.21s}
.grid>.rv:nth-child(5){transition-delay:.28s}
.grid>.rv:nth-child(6){transition-delay:.35s}

/* ---- logo mark gentle spin-in on hover ---- */
.logo .mark{transition:transform .35s ease,box-shadow .35s ease}
.logo:hover .mark{transform:rotate(-8deg) scale(1.08)}

/* ---- link arrow already animates; add tag hover ---- */
.tag{transition:background .2s ease,color .2s ease}
.post-card:hover .tag{background:var(--green);color:#fff}

/* =====================================================================
   MOBILE RESPONSIVENESS — complete pass
   ===================================================================== */
@media (max-width:960px){
  .collage{margin-top:24px}
  .float-card.bl{left:6px;bottom:8px}
  .float-card.tr{right:6px;top:8px}
  .net-stats{gap:36px}
}

@media (max-width:760px){
  .block{padding:60px 0}
  .block-sm{padding:36px 0}
  .hero{padding:48px 0 56px}
  .pagehero{padding:52px 0 40px}
  .h-sec{font-size:30px}
  .hero h1{font-size:38px}
  .cta h2{font-size:32px}
  /* floating hero chips can overlap on small screens — hide for clarity */
  .float-card{display:none}
  /* domain search: input row, button full-width below */
  .dsearch{flex-wrap:wrap;border-radius:20px;padding:10px 14px}
  .dsearch input{flex:1 1 auto}
  .dsearch .btn{flex:1 0 100%;margin-top:8px}
  /* featured blog post stacks */
  .featured-post .fp-img{min-height:220px}
  .featured-post .fp-body{padding:28px}
  /* article meta wraps */
  .article-meta{flex-wrap:wrap;justify-content:center}
}

@media (max-width:600px){
  .wrap{padding:0 20px}
  .hdr-in{padding:12px 20px}
  .logostrip{justify-content:center;text-align:center;gap:14px}
  .logostrip .brands{gap:22px;justify-content:center}
  .net-stats{gap:22px}
  .calc-res .mini{gap:18px}
  .calc-res .big{font-size:46px}
  .ftr-bot{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .ftr-social{justify-content:center}
  .hero-cta .btn,.cta-row .btn{width:100%;justify-content:center}
  .hero-cta,.cta-row{width:100%}
  .modal-card{padding:26px}
  .prose{font-size:16px}
  .prose h2{font-size:24px}
  .article-hero h1{font-size:28px}
}

@media (max-width:420px){
  .hero h1{font-size:31px}
  .h-sec{font-size:25px}
  .pagehero h1{font-size:28px}
  .amt{font-size:38px}
  .statcard b{font-size:36px}
  .kicker{font-size:12px}
}

/* respect reduced-motion preference */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
}

/* =====================================================================
   HEADER — clean full-width glass bar (relative for mobile dropdown)
   ===================================================================== */
.hdr-in{position:relative}
.hdr-cta{gap:10px}
@media (max-width:1024px){ .menu{gap:20px} }

/* =====================================================================
   UNIQUE INNER-PAGE BANNER — image + green overlay + dot grid + curve
   ===================================================================== */
.pagehero{position:relative;overflow:hidden;background-color:var(--ink);background-size:cover;background-position:center;color:#fff;padding:84px 0 76px;text-align:center}
.pagehero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,18,10,.74),rgba(30,18,10,.92)),radial-gradient(95% 75% at 50% -10%,rgba(251,140,60,.34),transparent 60%)}
.pagehero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;opacity:.6;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.pagehero>*{position:relative;z-index:2}
.pagehero h1{color:#fff}
.pagehero p{color:#ddc8b4;margin-left:auto;margin-right:auto}
.pagehero .kicker{background:rgba(253,186,116,.14);color:var(--mint);border:1px solid rgba(253,186,116,.25)}
.pagehero .kicker .dot{background:var(--mint)}
.pagehero .eyebrow{color:var(--mint)}
/* decorative search box (support page) sits nicely on the dark banner */
.pagehero .dsearch{margin-left:auto;margin-right:auto;border-color:transparent}
/* give the first content section after the banner proper breathing room
   (overrides the inline padding-top:0 the page templates carried) */
.pagehero + section{padding-top:60px!important}

@media (max-width:760px){
  .pagehero{padding:60px 0 48px}
}

/* =====================================================================
   MOBILE NAV — dropdown anchored under the floating pill
   ===================================================================== */
@media (max-width:960px){
  .menu{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 10px;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -28px rgba(150,70,25,.5);display:none}
  .menu.show{display:flex}
  .menu a{padding:13px 12px;width:100%;border-radius:10px;border-bottom:1px solid var(--soft)}
  .menu a:last-child{border-bottom:0}
  .menu a::after{display:none}
  .menu a:hover,.menu a.on{background:var(--soft-2)}
  .burger{display:flex}
  .hdr-cta .btn-line{display:none}
}

/* =====================================================================
   HELP-CENTER SEARCH RESULTS (support page)
   ===================================================================== */
.helpres{max-width:480px;margin:14px auto 0;text-align:left;background:#fff;border:2px solid var(--line);border-radius:16px;box-shadow:0 28px 56px -30px rgba(42,24,16,.55);overflow:hidden;display:none}
.helpres.show{display:block}
.helpres a[data-i]{display:block;padding:13px 18px;border-bottom:1px solid var(--soft-2)}
.helpres a[data-i]:last-child{border-bottom:0}
.helpres a[data-i]:hover{background:var(--soft-2)}
.helpres .rtag{display:inline-block;font:700 10px var(--mono);color:var(--green-d);background:var(--soft-2);padding:2px 8px;border-radius:999px;margin-right:8px;vertical-align:middle}
.helpres .rtitle{font-weight:700;color:var(--text);font-size:14.5px}
.helpres .rsnip{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45}
.helpres .empty{padding:16px 18px;color:var(--muted);font-size:14px}
.helpres .empty a{color:var(--green);font-weight:700}

/* =====================================================================
   BOLDER LOOK — heavier text, stronger borders, more weight
   ===================================================================== */
body{font-weight:500}
.lead,.sub-sec{font-weight:500}
/* keep long-form articles comfortable to read */
.prose,.prose p,.prose li,.prose blockquote{font-weight:400}
/* navigation + labels carry more weight */
.menu a{font-weight:700}
.eyebrow{font-weight:700;letter-spacing:.1em}
.topbar{font-weight:600}
.statcard p,.plan .pdesc,.fcard p,.quote p{font-weight:500}
/* stronger, more defined card borders */
.fcard,.plan,.quote,.stepcard,.info-card,.form-card,.faq,.table-scroll,.minibox{border-width:2px}
/* a subtle resting shadow gives white cards more presence */
.fcard,.stepcard,.info-card{box-shadow:0 4px 14px -10px rgba(42,24,16,.25)}
/* buttons feel more solid */
.btn-fill{box-shadow:0 12px 22px -8px rgba(229,97,30,.5)}
.btn-line{border-width:2px}
/* heading contrast */
.h-sec,.hero h1,.pagehero h1{color:var(--text)}
.pagehero h1{color:#fff}