/* ============================================================
   Pixel Fuel — shared content-page design system
   Inherits the homepage tokens: space-blue base, Poppins/Raleway,
   brand five + orange→red gradient signature.
   ============================================================ */
:root{
  --bg:#060a1a;
  --bg-2:#0a1024;
  --panel:#0e1430;
  --panel-2:#121a3a;
  --ink:#f4f4f2;
  --ink-dim:#c9cede;
  --muted:#8a8a92;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);
  --font-head:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* brand palette (from brand guide) */
  --red:#E62323; --orange:#F37021; --deep-orange:#F7941D;
  --purple:#6A1B9A; --violet:#311B92;
  --grad:linear-gradient(120deg,var(--orange) 0%,var(--red) 100%);
  --grad-full:linear-gradient(120deg,var(--deep-orange) 0%,var(--red) 55%,var(--purple) 100%);
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; background:#060a1a}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Blue radial glow echoing the homepage's 3D scene backdrop:
   lighter navy up top, fading to the deep space-blue at the edges. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -15%, #12203f 0%, rgba(11,16,36,0) 55%),
    radial-gradient(100% 70% at 50% 0%, rgba(30,45,90,.55) 0%, rgba(6,10,26,0) 60%),
    linear-gradient(180deg, #0a1024 0%, #060a1a 70%);
}
a{color:inherit}
img{max-width:100%;display:block}

/* ---------- nav ---------- */
.pf-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  /* consistent height in BOTH states so nothing jumps on scroll or page change.
     Slightly more padding below the row than above for a balanced, deeper bar. */
  padding:20px clamp(20px,5vw,64px) 24px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
/* once scrolled, gain the blurred bar for readability over content.
   Padding is unchanged, so the bar keeps the same height — only the
   background / blur / border fade in. No layout shift. */
.pf-nav.scrolled{
  background:rgba(6,10,26,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.pf-logo{ display:block; height:clamp(30px,4.4vw,44px); line-height:0; }
.pf-logo svg{ height:100%; width:auto; display:block }
.pf-logo:hover{ opacity:.85 }
.pf-links{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.pf-links a{
  font-family:var(--font-head); font-weight:500; font-size:14px;
  letter-spacing:.01em; text-decoration:none; color:#e7eaf2;
  transition:color .2s ease; white-space:nowrap;
}
.pf-links a:not(.pf-cta):hover{ color:var(--orange) }
.pf-links a.active{ color:var(--orange) }
.pf-links a.pf-cta{
  font-family:var(--font-head); font-weight:600; color:#fff !important;
  background:var(--grad); padding:9px 18px; border-radius:8px;
  box-shadow:0 6px 20px -6px rgba(230,35,35,.55);
  transition:filter .18s ease, box-shadow .18s ease;
}
.pf-cta:hover{ filter:brightness(1.08); box-shadow:0 10px 28px -6px rgba(230,35,35,.8) }
.pf-burger{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.pf-burger span{ display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; border-radius:2px; transition:.25s }
@media (max-width:820px){
  .pf-links{
    position:fixed; inset:57px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:rgba(8,12,30,.98); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line); padding:8px 0;
    transform:translateY(-120%); transition:transform .3s ease; pointer-events:none;
  }
  .pf-links.open{ transform:translateY(0); pointer-events:auto }
  .pf-links a{ padding:14px clamp(20px,5vw,64px); font-size:16px }
  .pf-links a.pf-cta{ margin:8px clamp(20px,5vw,64px); text-align:center }
  .pf-burger{ display:block }
}

/* ---------- layout primitives ---------- */
.wrap{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,48px) }
section{ position:relative; z-index:1 }
.section-pad{ padding:clamp(56px,9vw,110px) 0 }
.eyebrow{
  font-family:var(--font-head); font-weight:600; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--deep-orange);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:8px;
  /* compressed pixrow: 3 squares spanning the palette's warm-to-cool arc
     (red, deep-orange, violet) — the economical version of the 5-square .pixrow.
     Drawn as inline SVG rects so corners can round: 8px squares, rx 1.4 (~17.5%),
     matching .pixrow's 2px/12px (~17%) rounding. 1px gap between each. */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='8' viewBox='0 0 26 8'%3E%3Crect width='8' height='8' rx='1.4' fill='%23E62323'/%3E%3Crect x='9' width='8' height='8' rx='1.4' fill='%23F7941D'/%3E%3Crect x='18' width='8' height='8' rx='1.4' fill='%23311B92'/%3E%3C/svg%3E") no-repeat center/contain;
}
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.05; letter-spacing:-.01em }
h1{ font-size:clamp(34px,6vw,64px) }
h2{ font-size:clamp(26px,4vw,42px) }
h3{ font-size:clamp(18px,2.2vw,23px) }
.lead-p{ font-size:clamp(16px,1.7vw,20px); color:var(--ink-dim); font-weight:300; max-width:60ch }
.muted{ color:var(--muted) }
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--red);
}

/* ---------- hero (shared) ---------- */
.pf-hero{ padding:clamp(28px,6vw,64px) 0 clamp(40px,6vw,70px) }
.pf-hero h1{ margin:18px 0 22px }
.pf-hero .lead-p{ margin-bottom:32px }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-head); font-weight:600; font-size:15px;
  text-decoration:none; padding:13px 24px; border-radius:9px; cursor:pointer;
  border:1px solid transparent; transition:filter .18s, box-shadow .18s, background .18s, border-color .18s;
}
.btn-primary{ background:var(--grad); color:#fff; box-shadow:0 8px 24px -8px rgba(230,35,35,.6) }
.btn-primary:hover{ filter:brightness(1.08); box-shadow:0 12px 32px -8px rgba(230,35,35,.85) }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2) }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange) }

/* ---------- cards ---------- */
.card{
  background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%);
  border:1px solid var(--line); border-radius:16px; padding:26px;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.card:hover{ border-color:var(--line-2); transform:translateY(-3px); box-shadow:0 24px 50px -24px rgba(0,0,0,.7) }
.grid{ display:grid; gap:20px }
.grid-2{ grid-template-columns:repeat(2,1fr) }
.grid-3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:860px){ .grid-2,.grid-3{ grid-template-columns:1fr } }

/* ---------- pixel divider ---------- */
.pixrow{ display:flex; gap:6px; margin:0 0 20px }
.pixrow i{ width:12px; height:12px; border-radius:2px; display:block; opacity:.9 }
/* single-square heading decal (one brand colour each) */
.sqmark{ width:22px; height:22px; border-radius:5px; display:block; margin-bottom:18px }
.sqmark.c1{ background:var(--orange) }
.sqmark.c2{ background:var(--purple) }
.sqmark.c3{ background:var(--red) }
.pixrow i:nth-child(1){ background:var(--red) }
.pixrow i:nth-child(2){ background:var(--orange) }
.pixrow i:nth-child(3){ background:var(--deep-orange) }
.pixrow i:nth-child(4){ background:var(--purple) }
.pixrow i:nth-child(5){ background:var(--violet) }

/* ---------- reveal on scroll ---------- */
/* Scroll reveal disabled — content is visible immediately (no fade/slide).
   Kept as a no-op so existing class="reveal" markup needs no changes and the
   IntersectionObserver JS harmlessly toggles a class with no visual effect. */
.reveal{ opacity:1; transform:none; transition:none }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none } }

/* ---------- footer ---------- */
.pf-foot{
  position:relative; z-index:1; border-top:1px solid var(--line);
  margin-top:40px; padding:48px 0 40px; background:var(--bg-2);
}
.pf-foot .wrap{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start }
.pf-foot h4{ font-size:15px; margin-bottom:12px }
.pf-foot a{ color:var(--ink-dim); text-decoration:none; font-size:14px; display:block; padding:3px 0 }
.pf-foot a:hover{ color:var(--orange) }
.pf-foot .fcol{ min-width:150px }
.pf-foot .fmeta{ color:var(--muted); font-size:13px; line-height:1.9 }
.pf-foot .fbrand{ max-width:260px }
.pf-foot .fbrand p{ color:var(--muted); font-size:13.5px; margin-top:12px }
.foot-bottom{
  border-top:1px solid var(--line); margin-top:34px; padding-top:22px;
  color:var(--muted); font-size:12.5px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; align-items:baseline;
}
/* every text bit in the bottom row shares one size + line-height so they sit on
   the same baseline (the Privacy/Terms links were inheriting .pf-foot a's 14px). */
.foot-bottom span, .foot-bottom a{ font-size:12.5px; line-height:1.6; }
.foot-legal{ display:inline-flex; align-items:baseline; gap:16px; }
.foot-legal a{ color:var(--muted); text-decoration:none; transition:color .2s ease; padding:0; }
.foot-legal a:hover{ color:var(--orange); }

/* capability-partner outbound link: same colour as body copy, orange on hover */
.partner-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:20px;
  font-family:var(--font-head); font-weight:600; font-size:14px;
  color:var(--muted); text-decoration:none; transition:color .2s ease;
}
.partner-link:hover{ color:var(--orange); }

/* ============================================================
   Draft-inspired additions: light sections, two-tone headings,
   icon tiles, "popular" ribbon, social row.
   ============================================================ */

/* ---------- light section variant (alternating rhythm) ---------- */
.section-light{
  background:#f4f5f8; color:#1a1f2e; position:relative; z-index:1;
  background-image:radial-gradient(rgba(106,27,154,.10) 1px, transparent 1px);
  background-size:26px 26px;
  /* retune borderline tokens so dark-tuned white borders become subtle dark
     lines on the light background (e.g. the day-rate row dividers). */
  --line:rgba(20,25,45,.12);
  --line-2:rgba(20,25,45,.18);
}
.section-light h1,.section-light h2,.section-light h3,.section-light h4{ color:#151a28 }
.section-light .muted{ color:#5b6478 }
.section-light .lead-p{ color:#404a5e }
.section-light .card{
  background:#ffffff; border-color:rgba(20,25,45,.08);
  box-shadow:0 12px 34px -22px rgba(20,25,45,.35);
}
.section-light .card:hover{ border-color:rgba(243,112,33,.35); box-shadow:0 26px 50px -26px rgba(20,25,45,.45) }
.section-light .eyebrow{ color:var(--red) }

/* ---------- two-tone heading (dark text + gradient tail) ---------- */
.h-twotone .g{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--red);
}

/* ---------- icon tile (rounded gradient square + glyph) ---------- */
.itile{
  width:52px; height:52px; border-radius:13px; display:grid; place-content:center;
  background:var(--grad); box-shadow:0 10px 24px -10px rgba(230,35,35,.6);
  color:#fff; font-size:22px; line-height:1; margin-bottom:18px;
}
.itile.alt{ background:linear-gradient(135deg,var(--purple),var(--violet)); box-shadow:0 10px 24px -10px rgba(49,27,146,.6) }
.itile svg{ width:24px; height:24px; fill:#fff }

/* process step connector arrows (desktop) */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch }
.steps .card{ position:relative }
.steps .card:not(:last-child)::after{
  content:"→"; position:absolute; right:-13px; top:50%; transform:translateY(-50%);
  color:var(--orange); font-size:20px; font-weight:700; z-index:2;
}
@media (max-width:860px){
  .steps{ grid-template-columns:1fr }
  .steps .card:not(:last-child)::after{ content:"↓"; right:50%; top:auto; bottom:-14px; transform:translateX(50%) }
}

/* ---------- "Most Popular" ribbon on a package card ---------- */
.card.popular{
  border-color:var(--orange); box-shadow:0 24px 70px -30px rgba(230,35,35,.55);
  position:relative;
}
/* purple/violet 'Best Value' variant — a distinct endorsement that doesn't
   compete with the orange 'Most Popular' highlight. */
.card.value{
  border-color:var(--purple); box-shadow:0 24px 70px -30px rgba(106,27,154,.55);
  position:relative;
}
.ribbon{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff; font-family:var(--font-head); font-weight:600;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 16px; border-radius:999px; white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(230,35,35,.7);
}
.ribbon.value{
  background:linear-gradient(120deg,var(--purple) 0%,var(--violet) 100%);
  box-shadow:0 8px 20px -8px rgba(106,27,154,.8);
}

/* ---------- footer social row ----------
   NOTE: .pf-foot a sets display:block globally, so these rules are more
   specific (.pf-foot .fsocial a) to win and force the tile layout. */
.pf-foot .fsocial{ display:flex; gap:10px; margin-top:18px }
.pf-foot .fsocial a{
  width:40px; height:40px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line-2); color:var(--ink-dim);
  transition:background .2s, border-color .2s, color .2s; padding:0; flex:0 0 40px;
}
.pf-foot .fsocial a:hover{ background:var(--grad); border-color:transparent; color:#fff }
.pf-foot .fsocial a svg{ width:18px; height:18px; fill:currentColor; display:block }

/* ---------- feature lists (package cards etc.) ----------
   Replaces the tiny "·" with a clean orange marker. */
ul.feat{ list-style:none; display:grid; gap:11px; font-size:14.5px; color:var(--ink-dim); }
ul.feat li{ position:relative; padding-left:20px; line-height:1.5; }
ul.feat li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:10px; height:2px; border-radius:2px;
  background:var(--grad);
}
.section-light ul.feat li{ color:#404a5e; }

/* ---------- package pyramid ----------
   Top row uses the SAME 3-column track as the bottom row, but the two cards
   occupy the centre columns (1.5 → 3.5), so every card is identical width and
   the two sit centered above the three. Bulletproof: no viewport math. */
.pyramid-top{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:20px;
}
.pyramid-top > .card:nth-child(1){ grid-column:2 / 4; }
.pyramid-top > .card:nth-child(2){ grid-column:4 / 6; }
@media (max-width:860px){
  .pyramid-top{ grid-template-columns:1fr; }
  .pyramid-top > .card:nth-child(1),
  .pyramid-top > .card:nth-child(2){ grid-column:auto; }
}

/* pyramid-bottom: 2 cards centered beneath a 3-card row, each the SAME width
   as a top card. Same 6-col trick — cards occupy the centre columns. */
.pyramid-bottom{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:20px;
}
.pyramid-bottom > .card:nth-child(1){ grid-column:2 / 4; }
.pyramid-bottom > .card:nth-child(2){ grid-column:4 / 6; }
@media (max-width:860px){
  .pyramid-bottom{ grid-template-columns:1fr; }
  .pyramid-bottom > .card:nth-child(1),
  .pyramid-bottom > .card:nth-child(2){ grid-column:auto; }
}