/* ============================================================
   TELECOMUNICACIONES MÁLAGA — Design System v5
   ============================================================ */

/* ── Variables ── */
:root {
  --bg:       #04090f;
  --bg-soft:  #070f18;
  --panel:    #0b1c2b;
  --panel-2:  #0f2438;
  --glass:    rgba(11,28,43,.72);
  --text:     #edf6ff;
  --muted:    #7da8c4;
  --muted-2:  #b4d2e5;
  --line:     rgba(90,150,195,.16);
  --line-2:   rgba(90,150,195,.28);
  --brand:    #0a7ec2;
  --brand-2:  #22b2e8;
  --accent:   #f5a623;
  --accent-2: #ffd166;
  --red:      #e05252;
  --green:    #3ecf8e;
  --shadow:   0 24px 64px rgba(0,8,18,.56);
  --shadow-sm:0 6px 24px rgba(0,8,18,.36);
  --max:      1200px;
  --r:        22px;
  --r-sm:     14px;
  --r-xs:     9px;
  --ease:     cubic-bezier(.22,.68,0,1.2);
  --t:        .22s ease;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.7; color:var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 40% at 110% -5%,  rgba(34,178,232,.13), transparent),
    radial-gradient(ellipse 60% 50% at -10% 110%, rgba(245,166,35,.10), transparent),
    radial-gradient(ellipse 90% 60% at 50%   120%, rgba(10,126,194,.08), transparent);
  min-height:100vh; overflow-x:hidden;
}
a { color:var(--accent-2); text-decoration:none; transition:color var(--t) }
a:hover { color:#fff }
img { max-width:100%; display:block; height:auto }
ul,ol { list-style:none }
button { cursor:pointer; border:none; background:none; font:inherit }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--brand); border-radius:99px }

/* ── Layout ── */
.container { width:min(var(--max),94vw); margin:0 auto }
.section    { padding:72px 0 }
.section-sm { padding:40px 0 }

/* ── Typography ── */
h1 { font-size:clamp(2.1rem,5vw,4.6rem); line-height:1.02; font-weight:900; letter-spacing:-.03em; color:#fff }
h2 { font-size:clamp(1.5rem,2.8vw,2.6rem); line-height:1.1;  font-weight:800; letter-spacing:-.02em; color:#fff }
h3 { font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.25; font-weight:700; color:#fff }
h4 { font-size:1rem; font-weight:700; color:#fff }
p  { color:var(--muted-2); margin-bottom:1rem }
p:last-child { margin-bottom:0 }
.lead { font-size:1.18rem; color:#d4ecf7; line-height:1.6 }
.small { font-size:.88rem }
strong { color:#fff; font-weight:700 }
.section-label {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  color:var(--brand-2); margin-bottom:16px;
}
.section-label::before { content:''; width:28px; height:2px; background:var(--brand-2); border-radius:2px }

/* ── Navigation ── */
.topbar {
  position:sticky; top:0; z-index:100;
  padding:0;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(180%);
  background:rgba(4,9,15,.78);
  transition:box-shadow var(--t);
}
.topbar.scrolled { box-shadow:0 8px 40px rgba(0,8,18,.5) }
.nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 0; gap:24px;
}
.logo {
  display:flex; align-items:center; gap:14px;
  font-weight:900; color:#fff; flex-shrink:0;
  letter-spacing:-.01em;
}
.logo:hover { color:#fff; text-decoration:none }
.logo-mark {
  width:44px; height:44px; border-radius:13px; flex-shrink:0;
  background:#fff url('/assets/logo-corporativo.jpg') center/cover no-repeat;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 20px rgba(0,8,18,.3);
}
.logo-text { display:flex; flex-direction:column; line-height:1.15 }
.logo-text span { font-size:1rem; color:#fff }
.logo-text small { font-size:.72rem; color:var(--muted); font-weight:600; letter-spacing:.04em }
.nav-links { display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.nav-links a {
  padding:8px 13px; border-radius:var(--r-xs);
  color:var(--muted-2); font-weight:700; font-size:.9rem;
  transition:color var(--t),background var(--t);
}
.nav-links a:hover { color:#fff; background:rgba(255,255,255,.07); text-decoration:none }
.nav-links a.active { color:#fff; background:rgba(34,178,232,.12) }
.nav-cta {
  padding:9px 18px; border-radius:var(--r-xs);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#0a1a26 !important; font-weight:900; font-size:.88rem;
  box-shadow:0 6px 20px rgba(245,166,35,.28);
  transition:filter var(--t),transform var(--t) !important;
}
.nav-cta:hover { filter:brightness(1.06); transform:translateY(-1px); text-decoration:none !important }

/* hamburger */
.nav-toggle { display:none; flex-direction:column; gap:5px; padding:10px; border-radius:var(--r-xs) }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--muted-2); border-radius:2px; transition:var(--t) }
@media(max-width:768px){
  .nav-toggle { display:flex }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:4px; padding:16px; background:rgba(4,9,15,.97); border-bottom:1px solid var(--line) }
  .nav-links.open { display:flex }
  .nav-links a { width:100%; padding:12px 16px }
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:var(--r-sm); font-weight:800; font-size:.95rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#0a1a26; box-shadow:0 12px 32px rgba(245,166,35,.26);
  transition:filter var(--t),transform var(--t),box-shadow var(--t);
}
.btn:hover { filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 18px 40px rgba(245,166,35,.34); text-decoration:none; color:#0a1a26 }
.btn.secondary {
  background:rgba(255,255,255,.04); color:var(--text);
  border:1px solid var(--line-2); box-shadow:none;
}
.btn.secondary:hover { background:rgba(255,255,255,.08); transform:translateY(-2px); box-shadow:none }
.btn.ghost { background:transparent; color:var(--brand-2); border:1.5px solid var(--brand-2); box-shadow:none }
.btn.ghost:hover { background:rgba(34,178,232,.1); transform:translateY(-2px) }
.btn.sm { padding:10px 18px; font-size:.88rem; border-radius:var(--r-xs) }

/* ── Hero ── */
.hero { padding:90px 0 60px; position:relative; overflow:hidden }
.hero::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(34,178,232,.14), transparent 55%),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(245,166,35,.09), transparent 55%);
  pointer-events:none;
}
.hero .container { position:relative; z-index:1 }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center }
.hero-kicker {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  background:rgba(34,178,232,.1); border:1px solid rgba(34,178,232,.22);
  color:#9de8ff; font-size:.85rem; font-weight:800; letter-spacing:.04em;
  margin-bottom:22px;
}
.hero-kicker span { width:7px; height:7px; border-radius:50%; background:var(--brand-2); animation:pulse 2s infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.hero h1 { margin-bottom:20px }
.hero .lead { margin-bottom:28px }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:32px }
.hero-tags { display:flex; flex-wrap:wrap; gap:10px }
.tag {
  padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  color:var(--muted-2); font-size:.85rem; font-weight:700;
  transition:border-color var(--t),color var(--t);
}
.tag:hover { border-color:var(--line-2); color:#fff }

/* Hero visual panel */
.hero-panel {
  background:linear-gradient(145deg,rgba(15,36,56,.95),rgba(7,21,34,.98));
  border:1px solid var(--line-2); border-radius:28px;
  padding:32px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.hero-panel::before {
  content:''; position:absolute; top:-60px; right:-60px;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(34,178,232,.18),transparent 70%);
  pointer-events:none;
}
.hero-panel::after {
  content:''; position:absolute; bottom:-40px; left:-40px;
  width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle,rgba(245,166,35,.14),transparent 70%);
  pointer-events:none;
}
.hero-logo-row { display:flex; align-items:center; gap:18px; margin-bottom:28px }
.hero-logo-img {
  width:88px; height:88px; border-radius:22px; flex-shrink:0;
  background:#fff url('/assets/logo-corporativo.jpg') center/cover no-repeat;
  border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow-sm);
}
.hero-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:24px }
.stat-box {
  padding:18px; border-radius:16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  text-align:center;
}
.stat-box .num { display:block; font-size:2rem; font-weight:900; color:#fff; line-height:1 }
.stat-box .lbl { display:block; font-size:.78rem; color:var(--muted); font-weight:700; margin-top:4px }
.hero-list { margin-top:22px }
.hero-list li {
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.9rem; color:var(--muted-2); font-weight:600;
}
.hero-list li:last-child { border-bottom:0 }
.hero-list li::before { content:'✓'; color:var(--brand-2); font-weight:900; flex-shrink:0; margin-top:1px }

/* ── Stats bar ── */
.stats-bar { padding:36px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.stats-grid .stat {
  padding:16px 28px; text-align:center; position:relative;
}
.stats-grid .stat:not(:last-child)::after {
  content:''; position:absolute; right:0; top:20%; bottom:20%;
  width:1px; background:var(--line);
}
.stat .big { display:block; font-size:2.2rem; font-weight:900; color:#fff; letter-spacing:-.04em }
.stat .sub { display:block; font-size:.82rem; color:var(--muted); font-weight:700; margin-top:4px }

/* ── Cards / Panels ── */
.card, .panel {
  background:linear-gradient(160deg,rgba(15,36,56,.9),rgba(7,21,34,.95));
  border:1px solid var(--line); border-radius:var(--r);
  padding:28px; box-shadow:var(--shadow-sm);
}
.card-hover {
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.card-hover:hover {
  transform:translateY(-4px);
  border-color:rgba(245,166,35,.3);
  box-shadow:var(--shadow);
  text-decoration:none;
}

/* ── Service cards ── */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.service-card {
  display:block; padding:0; overflow:hidden;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.service-card:hover { transform:translateY(-5px); border-color:rgba(34,178,232,.35); box-shadow:var(--shadow); text-decoration:none }
.service-icon {
  width:52px; height:52px; border-radius:14px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(34,178,232,.12); border:1px solid rgba(34,178,232,.2);
  font-size:1.5rem;
}
.service-card .badge { display:inline-block; margin-bottom:10px }
.service-card h3 { margin-bottom:10px }
.service-card p { font-size:.92rem }
.service-arrow { margin-top:18px; color:var(--accent-2); font-size:.9rem; font-weight:800 }

/* ── Badge / Kicker ── */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:rgba(34,178,232,.1); color:#9de8ff;
  font-size:.78rem; font-weight:800; letter-spacing:.04em;
  border:1px solid rgba(34,178,232,.18);
}
.badge.accent { background:rgba(245,166,35,.12); color:var(--accent-2); border-color:rgba(245,166,35,.22) }
.badge.green  { background:rgba(62,207,142,.1);  color:#7ef5c4;         border-color:rgba(62,207,142,.2) }

/* ── Blog grid ── */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.blog-grid.two-col { grid-template-columns:repeat(2,1fr) }
.blog-card {
  display:flex; flex-direction:column; overflow:hidden;
  padding:0; transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.blog-card:hover { transform:translateY(-5px); border-color:rgba(245,166,35,.32); box-shadow:var(--shadow); text-decoration:none }
.blog-card-media {
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--panel-2); border-bottom:1px solid var(--line);
}
.blog-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease }
.blog-card:hover .blog-card-media img { transform:scale(1.04) }
.blog-card-body { padding:22px 24px 26px; flex:1; display:flex; flex-direction:column }
.blog-card-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap }
.blog-card h3 { color:#fff; margin-bottom:10px; flex:1 }
.blog-card p { font-size:.9rem; margin-bottom:0 }
.read-more { margin-top:16px; color:var(--accent-2); font-size:.86rem; font-weight:800; display:flex; align-items:center; gap:6px }
.read-more::after { content:'→'; transition:transform var(--t) }
.blog-card:hover .read-more::after { transform:translateX(4px) }
.readtime { font-size:.8rem; color:var(--muted); font-weight:700 }

/* ── Featured blog card (large) ── */
.blog-featured {
  display:grid; grid-template-columns:1.2fr .8fr; gap:0;
  overflow:hidden; padding:0;
}
.blog-featured .blog-card-media { aspect-ratio:auto; min-height:280px; border-bottom:none; border-right:1px solid var(--line) }
.blog-featured .blog-card-body { padding:36px 32px; justify-content:center }
.blog-featured h3 { font-size:1.4rem }

/* ── Article layout ── */
.hero-mini { padding:52px 0 16px }
.breadcrumbs { font-size:.88rem; color:var(--muted); margin-bottom:16px }
.breadcrumbs a { color:var(--muted) }
.breadcrumbs a:hover { color:#fff }
.breadcrumbs span { margin:0 8px; opacity:.5 }
.article { padding:40px 0 72px }
.article-wrap { display:grid; grid-template-columns:260px minmax(0,1fr); gap:32px; align-items:start }
.toc {
  position:sticky; top:82px; height:fit-content;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px;
}
.toc h4 { margin-bottom:14px; font-size:.88rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }
.toc a { display:block; padding:7px 0; color:var(--muted); font-size:.9rem; border-bottom:1px solid rgba(255,255,255,.05) }
.toc a:last-child { border-bottom:0 }
.toc a:hover { color:#fff; text-decoration:none }
.toc a.active { color:var(--brand-2) }
.article-content { min-width:0 }
.article-content h2,.article-content h3 { scroll-margin-top:90px }
.article-content h2 { margin:42px 0 16px; padding-bottom:12px; border-bottom:1px solid var(--line) }
.article-content h3 { margin:28px 0 12px }
.article-content p  { margin-bottom:18px }
.article-content ul,.article-content ol { padding-left:20px; margin-bottom:18px }
.article-content ul li,.article-content ol li { margin-bottom:10px; color:var(--muted-2) }
.article-content a { color:var(--accent-2); text-decoration:underline; text-underline-offset:3px }
.article-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:24px }
.article-cover {
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); margin-bottom:32px; box-shadow:var(--shadow-sm);
}
.article-cover img { width:100%; aspect-ratio:16/5; object-fit:cover }
.check-list { padding-left:0 }
.check-list li { display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; color:var(--muted-2) }
.check-list li::before { content:'✓'; color:var(--green); font-weight:900; flex-shrink:0 }
.highlight { color:#fff; font-weight:700 }

/* ── Callout / Notice ── */
.callout {
  padding:20px 24px; border-left:4px solid var(--accent);
  background:rgba(245,166,35,.08); border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin:24px 0;
}
.callout.blue { border-left-color:var(--brand-2); background:rgba(34,178,232,.08) }
.callout.green { border-left-color:var(--green); background:rgba(62,207,142,.08) }
.callout p { margin:0; color:var(--text) }
.quote { font-size:1.1rem; font-weight:700; color:#fff; font-style:italic }
.notice {
  padding:18px 22px; border-radius:var(--r-sm);
  background:rgba(34,178,232,.08); border:1px solid rgba(34,178,232,.2);
  margin:20px 0;
}

/* ── Table ── */
.table-wrap { overflow-x:auto; margin:24px 0; border-radius:var(--r); border:1px solid var(--line) }
.table { width:100%; border-collapse:collapse; background:rgba(255,255,255,.02) }
.table th { padding:14px 18px; text-align:left; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:rgba(255,255,255,.03); border-bottom:1px solid var(--line) }
.table td { padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.06); color:var(--muted-2); vertical-align:top }
.table tr:last-child td { border-bottom:0 }
.table tr:hover td { background:rgba(255,255,255,.03) }

/* ── CTA Section ── */
.cta-section { padding:72px 0 }
.cta-box {
  background:linear-gradient(135deg,rgba(10,126,194,.18),rgba(245,166,35,.12));
  border:1px solid rgba(34,178,232,.2); border-radius:28px;
  padding:56px 48px; text-align:center; position:relative; overflow:hidden;
}
.cta-box::before {
  content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(34,178,232,.1),transparent 70%);
  pointer-events:none;
}
.cta-box h2 { margin-bottom:16px }
.cta-box p  { margin-bottom:28px; max-width:540px; margin-left:auto; margin-right:auto }
.cta-box .btn-row { display:flex; gap:16px; justify-content:center; flex-wrap:wrap }

/* ── Brand band ── */
.brand-band {
  padding:18px 22px; border-radius:var(--r-sm);
  background:linear-gradient(90deg,rgba(34,178,232,.08),rgba(245,166,35,.07));
  border:1px solid var(--line); margin-top:22px;
}

/* ── Grid helpers ── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:22px }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.grid-2-1 { display:grid; grid-template-columns:2fr 1fr; gap:24px }

/* ── Divider ── */
.divider { border:none; border-top:1px solid var(--line); margin:0 }

/* ── Animations ── */
@keyframes fadeInUp  { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes slideInL  { from{opacity:0;transform:translateX(-28px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInR  { from{opacity:0;transform:translateX(28px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn   { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
.anim-up    { animation:fadeInUp .6s var(--ease) both }
.anim-up-d1 { animation:fadeInUp .6s var(--ease) .1s both }
.anim-up-d2 { animation:fadeInUp .6s var(--ease) .2s both }
.anim-up-d3 { animation:fadeInUp .6s var(--ease) .3s both }
.anim-up-d4 { animation:fadeInUp .6s var(--ease) .4s both }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease }
.reveal.visible { opacity:1; transform:none }

/* ── List clean ── */
.list-clean { list-style:none; padding:0 }
.list-clean li { padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07); color:var(--muted-2) }
.list-clean li:last-child { border-bottom:0 }
.list-clean a { color:var(--muted-2); font-weight:600 }
.list-clean a:hover { color:#fff }

/* ── Tags row ── */
.tag-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }

/* ── Footer ── */
footer {
  border-top:1px solid var(--line);
  padding:56px 0 36px; margin-top:40px;
}
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; margin-bottom:40px }
.footer-brand .logo { margin-bottom:16px }
.footer-brand p { font-size:.9rem; color:var(--muted) }
.footer-col h4 { font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:14px }
.footer-col a { display:block; color:var(--muted); font-size:.9rem; padding:5px 0; transition:color var(--t) }
.footer-col a:hover { color:#fff }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:28px; border-top:1px solid var(--line) }
.footer-bottom p { margin:0; font-size:.85rem; color:var(--muted) }

/* ── Misc ── */
.info-row { display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:center }

/* ── Responsive ── */
@media(max-width:1024px){
  .hero-grid      { grid-template-columns:1fr; gap:32px }
  .footer-grid    { grid-template-columns:1fr 1fr; gap:28px }
  .services-grid  { grid-template-columns:repeat(2,1fr) }
  .blog-grid      { grid-template-columns:repeat(2,1fr) }
  .article-wrap   { grid-template-columns:1fr; }
  .toc            { position:static }
  .blog-featured  { grid-template-columns:1fr }
  .blog-featured .blog-card-media { border-right:none; border-bottom:1px solid var(--line); min-height:220px }
}
@media(max-width:768px){
  h1              { font-size:2.2rem }
  h2              { font-size:1.5rem }
  .section        { padding:48px 0 }
  .hero           { padding:56px 0 36px }
  .services-grid  { grid-template-columns:1fr }
  .grid-2,.grid-3,.grid-4,.grid-2-1,.info-row { grid-template-columns:1fr }
  .blog-grid      { grid-template-columns:1fr }
  .stats-grid     { grid-template-columns:repeat(2,1fr) }
  .stats-grid .stat:not(:last-child)::after { display:none }
  .footer-grid    { grid-template-columns:1fr }
  .cta-box        { padding:36px 24px }
  .hero-stats     { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:480px){
  .hero-actions   { flex-direction:column }
  .hero-actions .btn { width:100%; justify-content:center }
  .stats-grid     { grid-template-columns:1fr }
}