/* ============================================================
   FG SOLUTIONS · Propuesta Blaquè · Web vertical
   ============================================================ */

:root{
  /* base surfaces */
  --bg:        #06080F;
  --bg-alt:    #080C1A;
  --bg-soft:   #0A0F22;
  --card:      rgba(14, 19, 38, 0.55);
  --card-2:    rgba(20, 27, 48, 0.65);
  --line:      rgba(255,255,255,.06);
  --line-2:    rgba(255,255,255,.12);
  --line-3:    rgba(255,255,255,.20);

  /* ink */
  --ink:       #F4F2EC;
  --ink-2:     #C4C5CC;
  --mute:      #8B8D96;
  --mute-2:    #5A5E68;
  --black-on:  #04081A;

  /* accents (expanded palette) */
  --blue:      #7BA5FF;
  --blue-dim:  #5B7FFF;
  --blue-deep: #2C4A99;
  --cyan:      #5BE0E0;
  --cyan-dim:  #2FBCBC;
  --purple:    #B080FF;
  --purple-dim:#8A55E8;
  --amber:     #FFB070;
  --amber-dim: #E08A40;
  --mint:      #7BD9A8;
  --mint-dim:  #4FB280;
  --pink:      #FF7BB0;
  --rose:      #FF8A7B;
  --rose-dim:  #C9655A;

  /* derived */
  --glow-blue:   0 30px 80px -30px rgba(123,165,255,.35);
  --glow-cyan:   0 30px 80px -30px rgba(91,224,224,.30);
  --glow-purple: 0 30px 80px -30px rgba(176,128,255,.30);
  --glow-amber:  0 30px 80px -30px rgba(255,176,112,.30);

  /* font stacks */
  --f-sans: 'Geist', system-ui, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, monospace;
  --f-serif:'Instrument Serif', serif;

  /* spacing scale */
  --pad-x: clamp(24px, 5vw, 96px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#000}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--f-sans);font-weight:400;
  -webkit-font-smoothing:antialiased;letter-spacing:-0.005em;
  overflow-x:hidden;
}
::selection{background:var(--blue);color:var(--black-on)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ============================================================
   GLOBAL ATMOSPHERIC LAYER (single canvas, fixed, behind everything)
   ============================================================ */
#bgfx-global{
  position:fixed;inset:0;width:100vw;height:100vh;
  pointer-events:none;z-index:0;
  display:block;
}
.bg-soft-vignette{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(123,165,255,.06), transparent 60%),
    radial-gradient(60% 60% at 50% 100%, rgba(176,128,255,.05), transparent 60%);
}

/* ============================================================
   TOP NAV
   ============================================================ */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad-x);
  background:linear-gradient(180deg, rgba(6,8,15,.85), rgba(6,8,15,.45) 70%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s, padding .3s;
}
.topnav.scrolled{
  border-bottom-color:var(--line);
  padding:10px var(--pad-x);
  background:rgba(6,8,15,.78);
}
.topnav .brand{display:flex;align-items:center;gap:12px}
.topnav .brand img{height:26px;opacity:.95;transition:opacity .25s}
.topnav .brand:hover img{opacity:1}
.topnav .navlinks{display:flex;gap:28px;align-items:center}
.topnav .navlinks a{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);position:relative;padding:8px 0;
  transition:color .25s;
}
.topnav .navlinks a:hover{color:var(--ink)}
.topnav .navlinks a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.topnav .navlinks a:hover::after{transform:scaleX(1)}
.btn-nav{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;
  font-size:13px;font-weight:500;
  background:linear-gradient(135deg, var(--blue), var(--cyan));
  color:var(--black-on);border:1px solid rgba(123,165,255,.5);
  transition:transform .25s, box-shadow .25s, filter .25s;
  box-shadow:var(--glow-blue);
}
.btn-nav:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 20px 50px -20px rgba(123,165,255,.6)}
.btn-nav .arr{font-family:var(--f-mono);font-size:14px}

@media (max-width: 880px){
  .topnav .navlinks{display:none}
}

/* ============================================================
   FLOATING SECTION DOTS NAV
   ============================================================ */
.dotnav{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:14px;padding:14px 8px;
  background:rgba(8,10,22,.45);border:1px solid var(--line);border-radius:999px;
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
}
.dotnav a{
  display:flex;align-items:center;justify-content:flex-end;
  position:relative;width:14px;height:14px;
}
.dotnav a span.dot{
  width:8px;height:8px;border-radius:999px;background:var(--mute-2);
  transition:all .45s cubic-bezier(.2,.7,.2,1);
  position:relative;
}
.dotnav a:hover span.dot{background:var(--ink-2);transform:scale(1.2)}
.dotnav a.active span.dot{
  width:8px;height:24px;border-radius:999px;
  background:linear-gradient(180deg, var(--blue), var(--cyan));
  box-shadow:0 0 14px rgba(123,165,255,.6);
}
.dotnav a .label{
  position:absolute;right:24px;top:50%;transform:translateY(-50%) translateX(8px);
  white-space:nowrap;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:rgba(8,10,22,.85);border:1px solid var(--line);
  padding:6px 10px;border-radius:6px;backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;
}
.dotnav a:hover .label{opacity:1;transform:translateY(-50%) translateX(0)}

@media (max-width: 720px){
  .dotnav{display:none}
}

/* ============================================================
   SECTION BASE — continuous flow, transparent (lets global bg show through)
   ============================================================ */
.section{
  position:relative;
  padding:96px var(--pad-x);
  background:transparent;
  z-index:2;
}
.section > .container{position:relative;z-index:3;max-width:1480px;margin:0 auto;width:100%}

/* divider removed for continuity */
.section-divider{display:none}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.kicker{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);
  display:inline-flex;align-items:center;gap:14px;
}
.kicker::before{content:'';width:24px;height:1px;background:currentColor}
.kicker.cyan{color:var(--cyan)}
.kicker.purple{color:var(--purple)}
.kicker.amber{color:var(--amber)}
.kicker.mint{color:var(--mint)}

.h-hero{
  font-weight:500;font-size:clamp(48px, 7vw, 104px);line-height:.98;
  letter-spacing:-0.035em;color:var(--ink);
}
.h-1{font-weight:500;font-size:clamp(40px, 5.5vw, 76px);line-height:1.02;letter-spacing:-0.03em}
.h-2{font-weight:500;font-size:clamp(32px, 4vw, 56px);line-height:1.05;letter-spacing:-0.025em}
.h-3{font-weight:500;font-size:clamp(24px, 2.2vw, 34px);line-height:1.15;letter-spacing:-0.015em}
.h-4{font-weight:500;font-size:22px;line-height:1.25;letter-spacing:-0.01em}
.serif{
  /* User wanted to keep the colored final word but in the same font/weight/size as the rest of the heading. */
  font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;
  color:var(--blue);
}
.serif.cyan{color:var(--cyan)}
.serif.purple{color:var(--purple)}
.serif.amber{color:var(--amber)}
.serif.mint{color:var(--mint)}

.lede{font-size:clamp(17px, 1.4vw, 22px);line-height:1.5;color:var(--ink-2);max-width:760px;font-weight:300}
.body{font-size:15.5px;line-height:1.6;color:var(--ink-2);font-weight:400}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.mono-tab{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ============================================================
   BADGES + PILLS
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);
  background:rgba(255,255,255,.02);backdrop-filter:blur(6px);
}
.badge.blue{color:var(--blue);border-color:rgba(123,165,255,.35);background:rgba(123,165,255,.06)}
.badge.cyan{color:var(--cyan);border-color:rgba(91,224,224,.35);background:rgba(91,224,224,.06)}
.badge.purple{color:var(--purple);border-color:rgba(176,128,255,.35);background:rgba(176,128,255,.06)}
.badge.amber{color:var(--amber);border-color:rgba(255,176,112,.4);background:rgba(255,176,112,.06)}
.badge.mint{color:var(--mint);border-color:rgba(123,217,168,.35);background:rgba(123,217,168,.06)}
.badge .dot{width:6px;height:6px;border-radius:999px;background:currentColor;box-shadow:0 0 8px currentColor}

.chk, .x{
  width:18px;height:18px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:11px;flex-shrink:0;
}
.chk{background:rgba(123,217,168,.12);color:var(--mint);border:1px solid rgba(123,217,168,.3)}
.x{background:rgba(201,101,90,.1);color:var(--rose);border:1px solid rgba(201,101,90,.25)}
.chk.blue{background:rgba(123,165,255,.12);color:var(--blue);border-color:rgba(123,165,255,.3)}
.chk.amber{background:rgba(255,176,112,.12);color:var(--amber);border-color:rgba(255,176,112,.3)}

/* ============================================================
   CARDS (glass, no top sheen, no cursor glow)
   ============================================================ */
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;padding:28px;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:border-color .35s, transform .35s, box-shadow .35s, background .35s;
  overflow:hidden;
}
.card.tilt:hover{
  border-color:var(--line-2);
  transform:translateY(-3px);
  box-shadow: 0 30px 60px -30px var(--cardshadow, rgba(123,165,255,.35));
}
.card.glow-blue   {--cardshadow: rgba(123,165,255,.4)}
.card.glow-cyan   {--cardshadow: rgba(91,224,224,.4)}
.card.glow-purple {--cardshadow: rgba(176,128,255,.4)}
.card.glow-amber  {--cardshadow: rgba(255,176,112,.4)}
.card.glow-mint   {--cardshadow: rgba(123,217,168,.4)}

/* featured plan-style card */
.card.featured{
  border-color:rgba(123,165,255,.4);
  background:var(--card-2);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:16px 24px;
  border-radius:999px;font-size:15px;font-weight:500;letter-spacing:-0.005em;
  background:linear-gradient(135deg, var(--blue), var(--cyan));
  color:var(--black-on);border:1px solid rgba(123,165,255,.5);
  transition:transform .25s, box-shadow .25s, filter .25s;
  box-shadow:var(--glow-blue);
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 30px 60px -20px rgba(123,165,255,.7)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue);filter:none}
.btn .arr{font-family:var(--f-mono);font-size:15px}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal[data-delay="1"]{transition-delay:.06s}
.reveal[data-delay="2"]{transition-delay:.12s}
.reveal[data-delay="3"]{transition-delay:.18s}
.reveal[data-delay="4"]{transition-delay:.24s}
.reveal[data-delay="5"]{transition-delay:.30s}
.reveal[data-delay="6"]{transition-delay:.36s}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:180px;padding-bottom:120px;min-height:100vh}
.hero .container{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:center}
.hero-meta{display:flex;flex-wrap:wrap;gap:14px}
.hero-art{
  position:relative;width:100%;aspect-ratio:1;max-width:560px;justify-self:end;
}
.hero-art svg{width:100%;height:100%;display:block}

.hero-statbar{
  margin-top:80px;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.hero-statbar > div{
  padding:24px 28px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;position:relative;
}
.hero-statbar > div:last-child{border-right:0}
.hero-statbar .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.hero-statbar .val{font-size:18px;color:var(--ink);font-family:var(--f-mono);letter-spacing:-0.01em}
.hero-statbar .val.accent{color:var(--blue)}

@media (max-width: 920px){
  .hero .container{grid-template-columns:1fr;gap:48px}
  .hero-art{justify-self:start;max-width:380px}
  .hero-statbar{grid-template-columns:repeat(2,1fr)}
  .hero-statbar > div:nth-child(2){border-right:0}
  .hero-statbar > div:nth-child(1),
  .hero-statbar > div:nth-child(2){border-bottom:1px solid var(--line)}
}

/* ============================================================
   METRICS GRID
   ============================================================ */
.metrics{display:grid;grid-template-columns:repeat(4, 1fr);gap:18px}
.metric{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:28px;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  display:flex;flex-direction:column;gap:14px;min-height:180px;
  overflow:hidden;
  transition:border-color .35s, transform .35s, box-shadow .35s;
}
.metric:hover{border-color:var(--line-2);transform:translateY(-3px)}
.metric .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.metric .big{
  font-size:clamp(40px, 4vw, 64px);font-weight:500;
  letter-spacing:-0.035em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.metric .big .u{font-size:.4em;color:var(--mute);margin-left:6px;font-weight:400}
.metric .desc{color:var(--ink-2);font-size:13.5px;line-height:1.5;margin-top:auto}
.metric .deco{
  position:absolute;right:-30px;top:-30px;width:140px;height:140px;
  background:radial-gradient(circle, var(--mcolor, var(--blue)), transparent 70%);
  opacity:.15;pointer-events:none;
}
.metric.blue   .deco{--mcolor: rgba(123,165,255,1)}
.metric.cyan   .deco{--mcolor: rgba(91,224,224,1)}
.metric.purple .deco{--mcolor: rgba(176,128,255,1)}
.metric.amber  .deco{--mcolor: rgba(255,176,112,1)}
.metric.mint   .deco{--mcolor: rgba(123,217,168,1)}

@media (max-width: 920px){.metrics{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.metrics{grid-template-columns:1fr}}

/* ============================================================
   PROBLEMS GRID
   ============================================================ */
.problems{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px}
.pcard{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:24px;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  display:flex;flex-direction:column;gap:14px;min-height:200px;
  transition:border-color .35s, transform .35s, box-shadow .35s;
  overflow:hidden;
}
.pcard:hover{border-color:rgba(255,176,112,.3);transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(255,176,112,.25)}
.pcard .ico{
  width:32px;height:32px;border:1px solid var(--line-2);border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--amber);
  transition:transform .4s, border-color .4s, background .4s;
}
.pcard:hover .ico{transform:rotate(-6deg) scale(1.08);border-color:var(--amber);background:rgba(255,176,112,.05)}
.pcard .t{font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-0.005em}
.pcard .d{font-size:13.5px;color:var(--mute);line-height:1.5}
.pcard .tag{font-family:var(--f-mono);font-size:10.5px;color:var(--mute-2);letter-spacing:.14em;text-transform:uppercase;margin-top:auto}

@media (max-width: 920px){.problems{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.problems{grid-template-columns:1fr}}

/* ============================================================
   SERVICES (interactive 5-layer card)
   ============================================================ */
.services{display:grid;grid-template-columns:repeat(5, 1fr);gap:14px}
.svc{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:28px 22px;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  display:flex;flex-direction:column;gap:18px;
  min-height:340px;
  cursor:pointer;
  transition:border-color .4s, transform .4s, background .4s, flex .6s;
  overflow:hidden;
}
.svc::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, var(--svc-color, var(--blue)), transparent);
  opacity:.5;transition:opacity .4s;
}
.svc:hover{transform:translateY(-3px);border-color:var(--svc-color, var(--blue))}
.svc:hover::after{opacity:1}
.svc .layer{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--svc-color, var(--blue));text-transform:uppercase}
.svc .svc-num{font-family:var(--f-mono);font-size:42px;color:var(--svc-color, var(--blue));font-weight:300;letter-spacing:-0.02em;line-height:1;opacity:.5;transition:opacity .4s, transform .4s}
.svc:hover .svc-num{opacity:1;transform:scale(1.05)}
.svc .name{font-size:18px;font-weight:500;color:var(--ink);letter-spacing:-0.01em}
.svc .desc{font-size:13.5px;color:var(--mute);line-height:1.5}
.svc .tech{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--mute-2);text-transform:uppercase;margin-top:auto}
.svc.blue   {--svc-color: var(--blue)}
.svc.cyan   {--svc-color: var(--cyan)}
.svc.mint   {--svc-color: var(--mint)}
.svc.amber  {--svc-color: var(--amber)}
.svc.purple {--svc-color: var(--purple)}

/* hover-expanded panel slides up */
.svc .extras{
  display:flex;flex-direction:column;gap:8px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s, opacity .4s;
}
.svc:hover .extras{max-height:200px;opacity:1}
.svc .extras .ex{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--ink-2);
}
.svc .extras .ex::before{content:'›';color:var(--svc-color, var(--blue));font-family:var(--f-mono)}

@media (max-width: 1024px){.services{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 720px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 500px){.services{grid-template-columns:1fr}}

/* ============================================================
   NETWORK DIAGRAM (animated)
   ============================================================ */
.netbox{
  background:var(--card);
  border:1px solid var(--line);border-radius:14px;
  overflow:hidden;position:relative;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.netbox .topbar{
  display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:11px;color:var(--mute);letter-spacing:.12em;
}
.netbox .lights{display:flex;gap:6px}
.netbox .lights span{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.08)}
.netbox .live{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--mint);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;
}
.netbox .live::before{content:'';width:6px;height:6px;border-radius:999px;background:var(--mint);box-shadow:0 0 8px var(--mint);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.netcanvas{position:relative;height:520px;padding:24px}
.netcanvas svg{width:100%;height:100%}

/* animated dashed line for data flow */
.flow{
  stroke-dasharray:4 8;
  animation:flow 2s linear infinite;
}
@keyframes flow{to{stroke-dashoffset:-24}}

/* tooltip on network nodes */
.netnode{cursor:pointer;transition:filter .25s}
.netnode:hover{filter:brightness(1.4) drop-shadow(0 0 8px currentColor)}

/* ============================================================
   ENDPOINT GRID (security, interactive)
   ============================================================ */
.endgrid{display:grid;grid-template-columns:repeat(4, 1fr);gap:14px}
.endpoint{
  position:relative;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:12px;padding:20px;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  display:flex;flex-direction:column;gap:10px;
  min-height:140px;
  cursor:pointer;transition:border-color .35s, transform .35s, box-shadow .35s;
  overflow:hidden;
}
.endpoint:hover{border-color:rgba(123,217,168,.4);transform:translateY(-2px);box-shadow:0 24px 50px -30px rgba(123,217,168,.35)}
.endpoint .server-ico{
  width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:rgba(123,165,255,.1);border:1px solid rgba(123,165,255,.3);color:var(--blue);
}
.endpoint .shield{
  width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  background:rgba(123,217,168,.1);border:1px solid rgba(123,217,168,.3);color:var(--mint);
}
.endpoint .shield::before{
  content:'';position:absolute;width:6px;height:6px;border-radius:999px;background:var(--mint);
  top:14px;right:14px;box-shadow:0 0 10px var(--mint);
  animation:pulse 2.4s infinite;animation-delay:var(--d, 0s);
}
.endpoint .name{font-family:var(--f-mono);font-size:13px;color:var(--ink);letter-spacing:.04em}
.endpoint .role{font-family:var(--f-mono);font-size:10.5px;color:var(--mute);letter-spacing:.14em;text-transform:uppercase}
.endpoint .ip{font-family:var(--f-mono);font-size:11px;color:var(--mute-2);margin-top:auto}
.endpoint.server{
  grid-column:span 4;flex-direction:row;align-items:center;justify-content:space-between;
  border-color:rgba(123,165,255,.3);
  background:var(--card-2);
}
.endpoint.server::before{display:none}
.endpoint.server:hover{border-color:rgba(123,165,255,.5);box-shadow:0 30px 60px -30px rgba(123,165,255,.4)}

@media (max-width: 920px){
  .endgrid{grid-template-columns:repeat(2,1fr)}
  .endpoint.server{grid-column:span 2}
}

/* ============================================================
   DASHBOARD (monitoring)
   ============================================================ */
.dash{
  background:var(--card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.dash .topbar{
  display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:11px;color:var(--mute);letter-spacing:.12em;
}
.dash .topbar .live{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--mint);
  font-family:var(--f-mono);font-size:11px;
}
.dash .topbar .live::before{content:'';width:6px;height:6px;border-radius:999px;background:var(--mint);animation:pulse 1.8s infinite}
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.dash-cell{background:rgba(8,11,22,.55);padding:20px;display:flex;flex-direction:column;gap:10px;min-height:130px;position:relative;overflow:hidden}
.dash-cell .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;color:var(--mute);text-transform:uppercase}
.dash-cell .v{font-size:30px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.dash-cell .v .u{font-size:13px;color:var(--mute);font-weight:400}
.dash-cell .ind{
  position:absolute;top:18px;right:18px;width:8px;height:8px;border-radius:999px;
  background:var(--mint);box-shadow:0 0 10px var(--mint);
}
.dash-cell .ind.warn{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.dash-cell .ind.info{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.dash-cell .trend{display:flex;align-items:flex-end;gap:3px;height:36px;margin-top:auto}
.dash-cell .trend span{flex:1;background:linear-gradient(180deg, var(--blue), rgba(123,165,255,.1));border-radius:1px;min-height:6px;transition:transform .3s}
.dash-cell .trend span.c{background:linear-gradient(180deg, var(--cyan), rgba(91,224,224,.1))}
.dash-cell .trend span.m{background:linear-gradient(180deg, var(--mint), rgba(123,217,168,.1))}
.dash-cell .trend span.a{background:linear-gradient(180deg, var(--amber), rgba(255,176,112,.1))}
.dash-cell:hover .trend span{transform:scaleY(1.05)}

.dash-log{padding:16px 20px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:12px;color:var(--mute);line-height:1.7;background:rgba(0,0,0,.2)}
.dash-log .row{display:flex;gap:14px;align-items:center}
.dash-log .t{color:var(--mute-2);min-width:70px}
.dash-log .lvl{padding:1px 6px;border-radius:3px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;min-width:50px;text-align:center;font-weight:500}
.dash-log .lvl.ok{background:rgba(123,217,168,.12);color:var(--mint)}
.dash-log .lvl.warn{background:rgba(255,176,112,.12);color:var(--amber)}
.dash-log .lvl.info{background:rgba(91,224,224,.12);color:var(--cyan)}
.dash-log .m{color:var(--ink-2)}

@media (max-width: 920px){.dash-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   BACKUP CALENDAR
   ============================================================ */
.calgrid{display:grid;grid-template-columns:repeat(15,1fr);gap:6px}
.calday{
  aspect-ratio:1;border-radius:4px;
  background:rgba(123,217,168,.15);border:1px solid rgba(123,217,168,.25);
  transition:transform .25s, background .25s;
  position:relative;
}
.calday:hover{transform:scale(1.15);background:rgba(123,217,168,.3);z-index:2}
.calday.cur{background:var(--mint);border-color:var(--mint);box-shadow:0 0 10px rgba(123,217,168,.7)}

/* ============================================================
   TIMELINE (methodology, interactive)
   ============================================================ */
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.timeline::before{
  content:'';position:absolute;top:18px;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2) 10%, var(--line-2) 90%, transparent);
}
.timeline::after{
  content:'';position:absolute;top:18px;left:0;height:1px;width:var(--prog, 0%);
  background:linear-gradient(90deg, var(--purple), var(--blue), var(--cyan));
  transition:width 1.2s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 0 12px var(--purple);
}
.timeline.in::after{--prog: 95%}
.tstep{display:flex;flex-direction:column;gap:16px;position:relative;padding-top:0;cursor:pointer;transition:transform .35s}
.tstep:hover{transform:translateY(-3px)}
.tstep .node{
  width:36px;height:36px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:12px;color:var(--mute);
  position:relative;z-index:2;
  transition:all .4s cubic-bezier(.2,.7,.2,1);
}
.tstep:hover .node{
  border-color:var(--purple);color:var(--purple);
  box-shadow:0 0 0 6px rgba(176,128,255,.1), 0 0 30px rgba(176,128,255,.4);
}
.tstep .ttag{font-family:var(--f-mono);font-size:10.5px;color:var(--mute-2);letter-spacing:.14em;text-transform:uppercase}
.tstep .ttitle{font-size:19px;font-weight:500;color:var(--ink);letter-spacing:-0.01em;transition:color .35s}
.tstep:hover .ttitle{color:var(--purple)}
.tstep .tdesc{font-size:13.5px;color:var(--mute);line-height:1.55}

@media (max-width: 900px){
  .timeline{grid-template-columns:1fr;gap:32px}
  .timeline::before, .timeline::after{display:none}
  .tstep{padding-left:60px;position:relative}
  .tstep .node{position:absolute;left:0;top:0}
}

/* ============================================================
   SLA TABLE (interactive)
   ============================================================ */
.sla-wrap{
  background:var(--card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.sla{width:100%;border-collapse:collapse;font-size:14.5px}
.sla th{
  padding:18px 24px;text-align:left;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);border-bottom:1px solid var(--line-2);font-weight:500;
  background:rgba(0,0,0,.2);
}
.sla th.acc{color:var(--blue)}
.sla td{padding:20px 24px;border-bottom:1px solid var(--line);vertical-align:middle;transition:background .25s}
.sla tr:last-child td{border-bottom:0}
.sla tr:hover td{background:rgba(123,165,255,.04)}
.sla .sev{display:flex;align-items:center;gap:14px;color:var(--ink);font-weight:500}
.sla .sev .pip{
  width:10px;height:10px;border-radius:3px;flex-shrink:0;position:relative;
}
.sla .sev.p1 .pip{background:var(--rose);box-shadow:0 0 12px var(--rose);animation:pulse 1.8s infinite}
.sla .sev.p2 .pip{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.sla .sev.p3 .pip{background:var(--cyan)}
.sla .sev.p4 .pip{background:var(--mute-2)}
.sla td.t{font-variant-numeric:tabular-nums;font-family:var(--f-mono);color:var(--ink);font-size:15px;letter-spacing:.02em}
.sla td.t.acc{color:var(--blue)}
.sla .desc{color:var(--mute);font-size:13.5px}

/* visual SLA bar (Enterprise vs Business response time) */
.sla-bar{
  display:inline-flex;align-items:center;gap:10px;
  width:100%;
}
.sla-bar .track{flex:1;height:6px;background:rgba(255,255,255,.04);border-radius:3px;overflow:hidden;position:relative}
.sla-bar .fill{height:100%;background:linear-gradient(90deg, var(--blue), var(--cyan));border-radius:3px;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.sla-bar.bus .fill{background:linear-gradient(90deg, var(--mute), var(--mute-2))}

/* ============================================================
   PLAN CARDS — vivid colored borders + clear differentiation
   ============================================================ */
.plans{display:grid;grid-template-columns:repeat(2, 1fr);gap:32px}
.plan{
  position:relative;
  border-radius:24px;padding:0;
  display:flex;flex-direction:column;
  height:100%;
  background:var(--card);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  overflow:hidden;
  transition:transform .4s, box-shadow .4s, border-color .4s;
}
.plan::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1.5px;
  background:var(--plan-border, linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04)));
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  z-index:1;
}
.plan:hover{transform:translateY(-4px)}

/* Enterprise (featured) — blue → cyan gradient border + top accent strip */
.plan.featured{
  --plan-border: linear-gradient(135deg, var(--blue), var(--cyan) 55%, var(--purple));
  box-shadow: 0 40px 80px -40px rgba(123,165,255,.4);
}
.plan.featured:hover{
  box-shadow: 0 50px 100px -40px rgba(123,165,255,.55);
}
.plan.featured .topstrip{
  height:6px;
  background:linear-gradient(90deg, var(--blue), var(--cyan), var(--purple));
  position:relative;z-index:2;
}
.plan.featured .topstrip::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  background-size:200% 100%;
  animation:shimmer 3s linear infinite;
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* Business — cyan/teal accent border (alternative tone) */
.plan.alt{
  --plan-border: linear-gradient(135deg, rgba(91,224,224,.55), rgba(176,128,255,.25) 70%, rgba(255,255,255,.08));
  box-shadow: 0 30px 60px -40px rgba(91,224,224,.25);
}
.plan.alt:hover{
  box-shadow: 0 40px 80px -40px rgba(91,224,224,.4);
}
.plan.alt .topstrip{
  height:4px;
  background:linear-gradient(90deg, var(--cyan), rgba(176,128,255,.5), transparent);
  position:relative;z-index:2;
}

.plan .ribbon{
  position:absolute;top:24px;right:24px;z-index:3;
  padding:7px 14px;border-radius:999px;
  background:linear-gradient(135deg, var(--blue), var(--cyan));color:var(--black-on);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;box-shadow:0 10px 30px -10px rgba(123,165,255,.7);
}
.plan .alt-tag{
  position:absolute;top:24px;right:24px;z-index:3;
  padding:7px 14px;border-radius:999px;
  background:rgba(91,224,224,.1);color:var(--cyan);
  border:1px solid rgba(91,224,224,.3);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;
}

.plan .body{
  padding:40px;display:flex;flex-direction:column;gap:24px;flex:1;color:var(--ink-2);
  position:relative;z-index:2;
}
.plan .pname{font-size:38px;font-weight:500;letter-spacing:-0.02em;color:var(--ink);line-height:1}
.plan.alt .pname{color:var(--ink-2)}
.plan .psub{color:var(--mute);font-size:13.5px;line-height:1.55;max-width:90%}
.plan .price{
  display:flex;align-items:baseline;gap:8px;
  padding:24px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.plan.featured .price{border-color:rgba(123,165,255,.2)}
.plan.alt .price{border-color:rgba(91,224,224,.18)}
.plan .price .big{
  font-size:56px;font-weight:500;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;color:var(--ink);
}
.plan.featured .price .big{
  background:linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.plan.alt .price .big{color:var(--ink-2)}
.plan .price .u{color:var(--mute);font-size:13px;font-family:var(--f-mono)}
.plan .price .iva{display:block;font-size:12.5px;color:var(--mute);font-family:var(--f-mono);margin-top:4px;letter-spacing:.04em}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.plan li{display:flex;gap:14px;align-items:flex-start;font-size:14px;color:var(--ink-2);line-height:1.5}
.plan li .ti{color:var(--ink);font-weight:500;display:block;margin-bottom:2px}
.plan.alt li .ti{color:var(--ink-2)}
.plan li .di{color:var(--mute);font-size:12.5px}

@media (max-width: 900px){.plans{grid-template-columns:1fr}}

/* ============================================================
   COST BAR COMPARE
   ============================================================ */
.cost{display:grid;grid-template-columns:repeat(2, 1fr);gap:32px}
.costcol{
  background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:32px;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.costcol.featured{border-color:rgba(123,165,255,.3)}
.costcol .head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.costcol .head .name{font-size:22px;font-weight:500;letter-spacing:-0.01em}
.costcol .head .total{font-family:var(--f-mono);font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.costcol .head .total.blue{color:var(--blue)}
.cost-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.cost-row:last-child{border-bottom:0}
.cost-row .lbl{font-size:13.5px;color:var(--ink-2);min-width:240px}
.cost-row .track{flex:1;height:8px;background:rgba(255,255,255,.025);border-radius:4px;overflow:hidden;position:relative}
.cost-row .fill{height:100%;border-radius:4px;background:linear-gradient(90deg, var(--blue-deep), var(--blue));width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.cost-row.in .fill{width:var(--w, 50%)}
.cost-row .fill.cyan{background:linear-gradient(90deg, var(--cyan-dim), var(--cyan))}
.cost-row .fill.mute{background:linear-gradient(90deg, #2a3146, #4a516a)}
.cost-row .fill.none{background:repeating-linear-gradient(45deg, var(--line-2) 0 6px, transparent 6px 12px)}
.cost-row .val{font-family:var(--f-mono);font-size:12.5px;color:var(--mute);min-width:140px;text-align:right;font-variant-numeric:tabular-nums}

@media (max-width: 900px){
  .cost{grid-template-columns:1fr}
  .cost-row .lbl{min-width:auto;flex:0 0 50%}
}

.cost-callout{
  margin-top:32px;
  background:
    linear-gradient(180deg, rgba(123,165,255,.05), rgba(123,165,255,0) 60%),
    var(--card);
  border:1px solid rgba(123,165,255,.2);border-radius:16px;
  padding:28px 32px;backdrop-filter:blur(14px);
  display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;
}
.cost-callout .diff-big{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:42px;font-weight:500;line-height:1;letter-spacing:-0.02em;color:var(--ink);
}
.cost-callout .diff-big .u{font-size:14px;color:var(--mute);font-weight:400;margin-left:4px}
.cost-callout .text{color:var(--ink-2);font-size:15px;line-height:1.55}
.cost-callout .text b{font-weight:500;color:var(--ink);white-space:nowrap}

@media (max-width: 700px){
  .cost-callout{grid-template-columns:1fr;gap:20px;padding:24px}
  .cost-callout .diff-big{font-size:34px}
}

/* ============================================================
   FEATURE MATRIX TABLE
   ============================================================ */
.matrix-wrap{
  background:var(--card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
table.matrix{width:100%;border-collapse:collapse;font-size:14px}
table.matrix th{
  padding:18px 24px;text-align:left;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);font-weight:500;border-bottom:1px solid var(--line-2);
  background:rgba(0,0,0,.2);
}
table.matrix th.acc{color:var(--blue)}
table.matrix td{padding:14px 24px;color:var(--ink-2);border-bottom:1px solid var(--line);transition:background .25s}
table.matrix tr:hover td{background:rgba(123,165,255,.03)}
table.matrix .col-feat{color:var(--ink);font-weight:500;width:40%}
table.matrix .col-ent{color:var(--ink);width:30%}
table.matrix .col-bus{color:var(--ink-2);width:30%}
table.matrix .group{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);padding:22px 24px 8px;background:rgba(0,0,0,.15);
}
table.matrix .group td{border-bottom:0}

/* ============================================================
   DIFFERENTIATORS (multi-color)
   ============================================================ */
.diffs{display:grid;grid-template-columns:repeat(4, 1fr);gap:18px}
.diff{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:28px;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  display:flex;flex-direction:column;gap:18px;min-height:280px;
  transition:transform .4s, border-color .4s, box-shadow .4s;
  overflow:hidden;
}
.diff:hover{transform:translateY(-4px);border-color:var(--dcol, var(--blue))}
.diff .num{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--mute)}
.diff .dot-big{
  width:10px;height:10px;border-radius:999px;background:var(--dcol, var(--blue));
  box-shadow:0 0 12px var(--dcol, var(--blue));margin-left:auto;
  animation:pulse 2s infinite;
}
.diff .t{font-size:22px;font-weight:500;color:var(--ink);letter-spacing:-0.01em}
.diff .d{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.diff::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--dcol, var(--blue));opacity:.5;transition:opacity .35s;
}
.diff:hover::after{opacity:1}
.diff.blue   {--dcol: var(--blue)}
.diff.cyan   {--dcol: var(--cyan)}
.diff.purple {--dcol: var(--purple)}
.diff.mint   {--dcol: var(--mint)}
.diff.amber  {--dcol: var(--amber)}

@media (max-width: 1024px){.diffs{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.diffs{grid-template-columns:1fr}}

/* partners row */
.partners{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.partners .badge{padding:10px 16px;font-size:11.5px}

/* ============================================================
   CTA / CIERRE
   ============================================================ */
.cta-steps{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px}
.cta-step{
  background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:28px;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  display:flex;flex-direction:column;gap:14px;
  transition:transform .4s, border-color .4s, box-shadow .4s;
}
.cta-step:hover{transform:translateY(-3px);border-color:rgba(123,165,255,.3);box-shadow:0 30px 60px -30px rgba(123,165,255,.3)}
.cta-step .step{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--blue);text-transform:uppercase}
.cta-step .t{font-size:20px;font-weight:500;letter-spacing:-0.01em}
.cta-step .d{font-size:13.5px;color:var(--mute);line-height:1.55}

@media (max-width: 720px){.cta-steps{grid-template-columns:1fr}}

.signature{display:flex;align-items:center;gap:18px}
.signature .av{
  width:54px;height:54px;border-radius:999px;
  background:linear-gradient(135deg, var(--blue), var(--cyan));
  display:flex;align-items:center;justify-content:center;
  color:var(--black-on);font-weight:600;font-family:var(--f-mono);font-size:16px;
  border:1px solid rgba(123,165,255,.4);box-shadow:0 8px 30px -10px rgba(123,165,255,.5);
}
.signature .meta{display:flex;flex-direction:column;gap:4px}
.signature .meta .n{color:var(--ink);font-size:16px;font-weight:500}
.signature .meta .r{color:var(--mute);font-size:13px;font-family:var(--f-mono)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:relative;z-index:5;
  padding:48px var(--pad-x);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto auto;gap:32px;align-items:center;
  background:rgba(6,8,15,.6);backdrop-filter:blur(14px);
}
.foot img{height:24px;opacity:.9}
.foot .meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.foot .contact{display:flex;flex-direction:column;gap:4px;font-family:var(--f-mono);font-size:12px;color:var(--ink-2);text-align:right}

@media (max-width: 720px){
  .foot{grid-template-columns:1fr;text-align:center}
  .foot .contact{text-align:center}
}

/* ============================================================
   UTIL
   ============================================================ */
.row{display:flex}
.col{display:flex;flex-direction:column}
.center{align-items:center}
.between{justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-32{gap:32px}.gap-48{gap:48px}.gap-64{gap:64px}
.grow{flex:1}
.flex-wrap{flex-wrap:wrap}
.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}.mt-80{margin-top:80px}
.tar{text-align:right}
.bord-top{border-top:1px solid var(--line);padding-top:24px}
.grid-2{display:grid;grid-template-columns:repeat(2, 1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px}

.section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:56px;max-width:1100px}
.section-head .lede{margin-top:4px}

@media (max-width: 720px){
  .grid-2, .grid-3{grid-template-columns:1fr}
  .section{padding:80px var(--pad-x) 80px;min-height:auto}
}