/* ============================================================
   Mark Anthony, Portfolio
   Light premium studio theme. Shared across all pages.
   ============================================================ */

:root {
  /* Base surfaces */
  --bg:          #f6f6f4;
  --bg-2:        #ecece8;
  --surface:     #ffffff;
  --surface-2:   #fbfbf9;
  --surface-3:   #f0f0ec;
  --border:      rgba(20, 24, 31, 0.10);
  --border-2:    rgba(20, 24, 31, 0.16);

  /* Text */
  --text:        #16181d;
  --muted:       #565c66;
  --muted-2:     #8a909a;

  /* Primary accent (premium gold, the through-line) */
  --accent:      #9a6a12;
  --accent-2:    #e6b32e;
  --accent-soft: rgba(154, 106, 18, 0.10);

  /* Per-brand accents */
  --grh:      #4f9d63;
  --grh-deep: #24422e;
  --kingk:    #edb437;
  --kingk-deep:#0c0c0d;
  --gud:      #6a54ec;
  --gud-2:    #f4c531;
  --rebelx:   #f0b429;

  --radius:    18px;
  --radius-sm: 12px;
  --maxw:      1180px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }

/* Ambient background glows */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60% 50% at 82% -5%, rgba(233,185,73,0.10), transparent 60%),
    radial-gradient(50% 45% at 8% 8%, rgba(106,84,236,0.10), transparent 60%),
    radial-gradient(55% 40% at 50% 108%, rgba(79,157,99,0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.section { padding: 96px 0; position: relative; z-index: 1; }
.section--tight { padding: 64px 0; }
.center { text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
  padding: 7px 14px; border: 1px solid var(--border-2); border-radius: 100px;
  background: var(--accent-soft);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.h-xl { font-size: clamp(2.6rem, 6.5vw, 5rem); }
.h-lg { font-size: clamp(2rem, 4.5vw, 3.3rem); }
.h-md { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.grad-text {
  background: linear-gradient(100deg, var(--accent) 0%, #c8961f 55%, #7a5310 120%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -.01em; }
.brand__mark {
  width: 36px; height: 36px; border-radius: 9px; object-fit: cover; display: block;
  box-shadow: 0 4px 14px rgba(154,106,18,.22);
}
.brand small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: .16em; color: var(--muted-2); text-transform: uppercase; margin-top: 1px; }
.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__links a {
  font-size: 14.5px; font-weight: 500; color: var(--muted);
  padding: 9px 14px; border-radius: 10px; transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--text); background: var(--surface-3); }
.nav__links a.active { color: var(--text); background: var(--surface-3); }
.nav__cta {
  margin-left: 8px; color: #241a04 !important;
  background: linear-gradient(145deg, var(--accent-2), var(--accent));
  font-weight: 600 !important; padding: 10px 18px !important;
  box-shadow: 0 6px 20px rgba(154,106,18,.22);
}
.nav__cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--border-2); border-radius: 11px; background: var(--surface); color: var(--text); }
.nav__toggle span { display: block; width: 18px; height: 2px; background: currentColor; margin: 3px auto; border-radius: 2px; transition: .3s; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  padding: 14px 24px; border-radius: 12px; border: 1px solid transparent;
  transition: transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s;
}
.btn svg { width: 17px; height: 17px; }
.btn--primary { background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #14100a; box-shadow: 0 8px 26px rgba(233,185,73,.24); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(233,185,73,.34); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.btn--ghost:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--muted-2); }
.btn--lg { padding: 16px 30px; font-size: 16px; }

/* ---------- Hero ---------- */
.hero { padding: clamp(70px, 12vh, 130px) 0 70px; position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: center; }
.hero h1 { margin: 22px 0 22px; }
.hero .lead { margin-bottom: 34px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__stats { display: grid; grid-template-columns: repeat(2, max-content); gap: 26px 46px; margin-top: 44px; }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--text); }
.stat__num span { color: var(--accent); }
.stat__label { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* Hero visual, stacked brand chips */
.hero__visual { position: relative; }
.chipstack { display: grid; gap: 14px; }
.brandchip {
  display: flex; align-items: center; gap: 15px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 15px;
  padding: 16px 18px; transition: transform .25s var(--ease), border-color .25s;
}
.brandchip:hover { transform: translateX(6px); border-color: var(--border-2); }
.brandchip__logo { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; flex-shrink: 0; }
.brandchip__meta strong { display: block; font-family: var(--font-display); font-size: 15px; }
.brandchip__meta span { font-size: 12.5px; color: var(--muted); }
.brandchip__arrow { margin-left: auto; color: var(--muted-2); transition: .2s; }
.brandchip:hover .brandchip__arrow { color: var(--accent); transform: translateX(3px); }

/* ---------- Section head ---------- */
.shead { max-width: 720px; margin-bottom: 48px; }
.shead.center { margin-left: auto; margin-right: auto; }
.shead h2 { margin: 16px 0 14px; }

/* ---------- Work grid (brand cards) ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.workcard {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  position: relative;
}
.workcard:hover { transform: translateY(-6px); border-color: var(--border-2); box-shadow: 0 18px 40px rgba(20,24,31,.13); }
.workcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.workcard__body { padding: 24px 26px 26px; }
.workcard__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workcard__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
.workcard__url { font-size: 12.5px; color: var(--muted-2); font-family: var(--font-display); }
.workcard p { color: var(--muted); font-size: 14.5px; margin: 12px 0 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 12px; font-weight: 500; color: var(--muted); padding: 5px 11px; border: 1px solid var(--border-2); border-radius: 100px; background: var(--bg-2); }
.workcard__go {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(10,11,14,.62); backdrop-filter: blur(6px); border: 1px solid var(--border-2);
  color: #fff; opacity: 0; transform: translateY(-6px); transition: .25s;
}
.workcard:hover .workcard__go { opacity: 1; transform: translateY(0); }

/* ---------- Browser frame (screenshots) ---------- */
.frame { border-radius: 14px; overflow: hidden; border: 1px solid var(--border-2); background: var(--surface-2); box-shadow: 0 18px 44px rgba(20,24,31,.10); }
.frame__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--surface-3); border-bottom: 1px solid var(--border); }
.frame__dot { width: 11px; height: 11px; border-radius: 50%; background: #3a4150; }
.frame__dot:nth-child(1){ background:#ec6a5f; } .frame__dot:nth-child(2){ background:#f4bf4f; } .frame__dot:nth-child(3){ background:#61c554; }
.frame__url { margin-left: 10px; font-size: 12px; color: var(--muted); font-family: var(--font-display); background: var(--bg-2); padding: 5px 14px; border-radius: 100px; flex: 1; max-width: 340px; }
.frame__body { position: relative; aspect-ratio: 16 / 10; background: var(--surface); }
.shot-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.is-fallback .shot-img { display: none; }
.shot-fallback {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; gap: 10px;
}
.is-fallback .shot-fallback { display: flex; }
.shot-fallback__logo { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.shot-fallback__tag { font-size: 14px; opacity: .85; max-width: 34ch; }
.shot-fallback__url { margin-top: 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; font-family: var(--font-display); }
.shot-loading { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted-2); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--font-display); }

/* ---------- Feature cards / do-list ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; transition: transform .3s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-4px); border-color: var(--border-2); }
.card__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 20px; }
.card__icon svg { width: 24px; height: 24px; }
.card h3 { font-size: 1.22rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 14.5px; }

/* ---------- Brand page ---------- */
.brandhero { padding: 60px 0 40px; }
.brandhero__top { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.brandhero__logo { width: 60px; height: 60px; border-radius: 15px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.brandhero__cat { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-family: var(--font-display); }
.brandhero h1 { margin-bottom: 20px; }
.brandhero .lead { margin-bottom: 30px; }
.pill-accent { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:7px 15px; border-radius:100px; }

.spec-list { display: grid; gap: 2px; }
.spec-list li { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--border); font-size: 15px; }
.spec-list li:last-child { border-bottom: 1px solid var(--border); }
.spec-list .k { color: var(--muted); font-family: var(--font-display); font-size: 13.5px; letter-spacing: .04em; }
.spec-list .v { color: var(--text); }

.checklist { display: grid; gap: 14px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; color: var(--text); }
.checklist .tick { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-top: 1px; }
.checklist .tick svg { width: 14px; height: 14px; }
.checklist b { font-weight: 600; }
.checklist span { color: var(--muted); }

/* ---------- Stat band ---------- */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.statband .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; }
.statband .stat__num { font-size: 2.4rem; }
.editable { border-bottom: 1px dashed rgba(233,185,73,.4); }

/* ---------- SEO checklist columns ---------- */
.seocols { display: grid; grid-template-columns: repeat(2,1fr); gap: 40px; }

/* ---------- Tools grid ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tool {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 24px 22px; transition: transform .25s var(--ease), border-color .25s;
}
.tool:hover { transform: translateY(-4px); border-color: var(--border-2); }
.tool__mark { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 16px; color: #0b0c0f; }
.tool h4 { font-size: 1.02rem; margin-bottom: 5px; }
.tool p { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ---------- Graphics gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gitem { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
.gitem:hover { transform: translateY(-5px); border-color: var(--border-2); }
.gitem__media { aspect-ratio: 4/3; position: relative; overflow: hidden; display: grid; place-items: center; }
.gitem__media img { width: 100%; height: 100%; object-fit: cover; }
.gitem__cap { padding: 16px 18px; }
.gitem__cap strong { font-family: var(--font-display); font-size: 14.5px; display: block; }
.gitem__cap span { font-size: 12.5px; color: var(--muted); }
.gitem--tall { grid-row: span 2; }

.palette { display: flex; height: 100%; width: 100%; }
.palette span { flex: 1; }

/* Slot (drop-in) */
.slot { border: 1.5px dashed var(--border-2); background: var(--bg-2); display: grid; place-items: center; text-align: center; color: var(--muted-2); font-size: 13px; padding: 24px; gap: 6px; }
.slot svg { width: 26px; height: 26px; opacity: .6; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-2); border-radius: 26px; padding: 60px 50px; text-align: center;
  position: relative; overflow: hidden;
}
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(50% 120% at 50% 0%, rgba(233,185,73,.14), transparent 70%); pointer-events:none; }
.cta-band h2 { margin-bottom: 16px; }
.cta-band .lead { margin: 0 auto 30px; }
.cta-band__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 54px 0 40px; margin-top: 40px; position: relative; z-index: 1; }
.footer__grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.footer__links { display: flex; gap: 40px; flex-wrap: wrap; }
.footer__col h5 { font-family: var(--font-display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
.footer__col a { display: block; font-size: 14px; color: var(--muted); padding: 5px 0; transition: color .2s; }
.footer__col a:hover { color: var(--text); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted-2); flex-wrap: wrap; gap: 12px; }

/* ---------- Prev/next brand ---------- */
.pager { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pager a { flex: 1; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; transition: .25s; }
.pager a:hover { border-color: var(--border-2); transform: translateY(-3px); }
.pager small { font-size: 12px; color: var(--muted-2); letter-spacing:.1em; text-transform:uppercase; }
.pager strong { display: block; font-family: var(--font-display); font-size: 1.15rem; margin-top: 5px; }
.pager .next { text-align: right; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Brand theme scopes ---------- */
[data-brand="grh"]    { --b: var(--grh);    --b-deep: #1c3324; }
[data-brand="kingk"]  { --b: var(--kingk);  --b-deep: #17130a; }
[data-brand="gud"]    { --b: var(--gud);    --b-deep: #1c1745; }
[data-brand="rebelx"] { --b: var(--rebelx); --b-deep: #1a1509; }

.accent-b { color: var(--b); }
.bg-b-soft { background: color-mix(in srgb, var(--b) 16%, transparent); }
.pill-accent.bg-b-soft { color: var(--b); border: 1px solid color-mix(in srgb, var(--b) 40%, transparent); }
[data-brand] .brandhero__logo { background: var(--b); color: #0b0c0f; }
[data-brand] .checklist .tick { background: color-mix(in srgb, var(--b) 16%, transparent); color: var(--b); }
[data-brand] .card__icon { background: color-mix(in srgb, var(--b) 16%, transparent); color: var(--b); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__visual { order: 0; }
  .seocols { grid-template-columns: 1fr; gap: 26px; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .statband { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .nav__links { position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 4px;
    background: rgba(255,255,255,.98); backdrop-filter: blur(20px); padding: 16px 20px 24px; border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 36px rgba(20,24,31,.12);
    transform: translateY(-140%); transition: transform .35s var(--ease); }
  .nav__links.open { transform: translateY(0); }
  .nav__links a { padding: 14px 16px; font-size: 16px; }
  .nav__cta { margin: 6px 0 0; text-align: center; }
  .nav__toggle { display: block; }
  .work-grid, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .section { padding: 68px 0; }
  .spec-list li { grid-template-columns: 1fr; gap: 4px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gitem--tall { grid-row: span 1; }
  .cta-band { padding: 44px 24px; }
  .footer__grid { flex-direction: column; }
}
@media (max-width: 500px) {
  .wrap { padding: 0 18px; }
  .tools-grid, .statband, .gallery { grid-template-columns: 1fr; }
  .hero__stats { gap: 22px; }
  .brand small { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }

}

/* Soft depth for the light theme */
.workcard, .card, .tool, .gitem, .pager a, .statband .stat {
  box-shadow: 0 1px 2px rgba(20,24,31,.04), 0 10px 30px rgba(20,24,31,.05);
}

/* Website-preview browser chrome on fallback panels */
.shot-fallback { padding-top: 42px; }
.shot-fallback::before { content:""; position:absolute; top:0; left:0; right:0; height:30px; background:rgba(255,255,255,.10); border-bottom:1px solid rgba(255,255,255,.16); }
.shot-fallback::after { content:""; position:absolute; top:11px; left:15px; width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.45; box-shadow:14px 0 currentColor, 28px 0 currentColor; }

/* ---------- Mobile polish ---------- */
@media (max-width: 640px) {
  .h-xl { font-size: clamp(2.1rem, 9vw, 3rem); }
  .hero { padding-top: 30px; padding-bottom: 6px; }
  .hero__grid { gap: 14px; }
  .hero__visual { overflow: visible; display: flex; justify-content: center; }
  .hero__stats { gap: 18px 26px; }
  .hero__stats > div { flex: 1 0 40%; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .btn--lg { padding: 14px 22px; font-size: 15px; }
  .section, .section--tight { padding: 52px 0; }
  .shead { margin-bottom: 34px; }
  .workcard__body { padding: 20px 20px 22px; }
  .cta-band { padding: 40px 20px; border-radius: 20px; }
  .brandhero__logo { width: 52px; height: 52px; font-size: 1.3rem; }
  .frame__url { display: none; }
  .footer__links { gap: 26px; }
  .pager a { min-width: 100%; }
}

/* ============ Section bands + texture + dividers (all pages) ============ */
body > section { position: relative; z-index: 1; background: var(--bg); }
body > section:nth-of-type(3n+2) { background: #ffffff; }
body > section:nth-of-type(3n)   { background: #f3f0e8; }
body > section::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(20,24,31,.045) 1px, transparent 1.6px),
    radial-gradient(rgba(20,24,31,.028) 1px, transparent 1.6px),
    linear-gradient(rgba(20,24,31,.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,24,31,.020) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px, 78px 78px, 78px 78px;
  background-position: 0 0, 13px 13px, 0 0, 0 0;
}
body > section > .wrap { position: relative; z-index: 1; }
body > section + section { border-top: 1px solid var(--border); }
.cta-band { background: linear-gradient(135deg, #ffffff, #f4f1e9); }

/* ============ Richer scroll reveal (between-section animation) ============ */
.reveal { opacity: 0; transform: translateY(38px) scale(.99); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============ Nav shadow on scroll ============ */
.nav.scrolled { box-shadow: 0 6px 22px rgba(20,24,31,.07); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  body > section::after { display: none; }
}

/* ============ Chart / grid overflow fix (auto-fit) ============ */
canvas { max-width: 100%; }
.kpi > *, .seo-grid > *, .seo-charts > * { min-width: 0; }
.chartwrap { min-width: 0; overflow: hidden; }
.seo-brand__head > div { min-width: 0; }
/* ============ Design-review polish ============ */
/* CTA band -> dark contrast panel so it stands out on the light page */
.cta-band { background: linear-gradient(145deg, #1b1f27, #0f1216); border-color: rgba(255,255,255,.10); }
.cta-band::before { background: radial-gradient(60% 130% at 50% 0%, rgba(233,185,73,.22), transparent 70%); }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: #c3c9d2; }
.cta-band .eyebrow { color: var(--accent-2); background: rgba(233,185,73,.12); border-color: rgba(233,185,73,.28); }
.cta-band .btn--ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.22); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }

/* Bigger, bolder step numbers */
.card__icon { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }

/* Smoother tablet step for 3-up grids (process, services, method) */
@media (max-width: 820px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } }

/* ============ Blog ============ */
.post { max-width: 760px; margin: 0 auto; }
.post__cat { font-family:var(--font-display); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.post h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 14px 0 18px; }
.post__meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:14px; padding-bottom:26px; border-bottom:1px solid var(--border); margin-bottom:32px; }
.post__meta strong { color:var(--text); font-weight:600; }
.post__lead { font-size:1.2rem; color:var(--muted); line-height:1.65; margin-bottom:30px; }
.post__body { font-size:16.5px; line-height:1.75; color:#2f343b; }
.post__body h2 { font-size:1.55rem; margin:46px 0 14px; }
.post__body h3 { font-size:1.18rem; margin:28px 0 10px; }
.post__body p { margin-bottom:17px; }
.post__body ul, .post__body ol { margin:0 0 20px 22px; display:grid; gap:9px; }
.post__body ul { list-style: disc; } .post__body ol { list-style: decimal; }
.post__body li { padding-left:4px; }
.post__body a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.post__body strong { color:var(--text); }
.toc { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 26px; margin:0 0 36px; box-shadow:0 1px 2px rgba(20,24,31,.04),0 10px 30px rgba(20,24,31,.05); }
.toc h4 { font-family:var(--font-display); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:12px; }
.toc ol { margin:0 0 0 18px; display:grid; gap:7px; list-style:decimal; }
.toc a { color:var(--text); font-size:15px; text-decoration:none; }
.toc a:hover { color:var(--accent); }
.callout { background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:14px; padding:18px 22px; margin:24px 0; font-size:15.5px; }
.callout strong { color:var(--accent); }
.faq details { border-top:1px solid var(--border); padding:16px 0; }
.faq details:last-child { border-bottom:1px solid var(--border); }
.faq summary { font-family:var(--font-display); font-weight:600; font-size:16px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--accent); font-size:20px; line-height:1; }
.faq details[open] summary::after { content:"\2013"; }
.faq details p { margin-top:12px; color:var(--muted); }
/* Blog index */
.postcard { display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .3s var(--ease), border-color .3s; box-shadow:0 1px 2px rgba(20,24,31,.04),0 10px 30px rgba(20,24,31,.05); }
.postcard:hover { transform:translateY(-5px); border-color:var(--border-2); }
.postcard__body { padding:24px 26px 26px; }
.postcard__cat { font-family:var(--font-display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.postcard h3 { font-size:1.22rem; margin:11px 0 9px; }
.postcard p { color:var(--muted); font-size:14px; margin-bottom:13px; }
.postcard__meta { font-size:12.5px; color:var(--muted-2); font-family:var(--font-display); }
.post-featured { display:grid; grid-template-columns:1.05fr .95fr; }
.post-featured__art { background:linear-gradient(150deg,#1c5fb0,#123f7a); min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; text-align:center; padding:36px; }
.badge-soon { display:inline-block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); border:1px solid var(--border-2); border-radius:100px; padding:4px 10px; }
@media (max-width:720px){ .post-featured { grid-template-columns:1fr; } }

/* Hero stats: even 2x2 on mobile */
@media (max-width: 640px) { .hero__stats { grid-template-columns: repeat(2, 1fr); } .hero__stats .stat__num { font-size: 1.6rem; } }

/* ============ Hero 3D portal ============ */
.portal { position: relative; width: 100%; height: 490px; perspective: 850px; perspective-origin: 52% 42%; }
.portal__glow { position:absolute; left:50%; top:44%; width:410px; height:340px; transform:translate(-50%,-50%); z-index:0; background: radial-gradient(closest-side, rgba(46,124,232,.60), rgba(106,84,236,.24) 50%, transparent 72%); filter: blur(12px); border-radius:50%; animation: portalPulse 5s ease-in-out infinite; }
.portal__tilt { position:absolute; inset:0; z-index:1; transform-style:preserve-3d; transition: transform .25s ease-out; will-change:transform; }
.portal__stage { position:absolute; inset:0; transform-style:preserve-3d; animation: stageSway 13s ease-in-out infinite; }
.portal__stage * { transform-style:preserve-3d; }
.portal__floor { position:absolute; left:50%; top:72%; width:1000px; height:1000px; margin-left:-500px; transform: rotateX(82deg); transform-origin:top center; background-image: linear-gradient(rgba(46,124,232,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(46,124,232,.16) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(closest-side at 50% 0%, #000 8%, transparent 60%); mask-image: radial-gradient(closest-side at 50% 0%, #000 8%, transparent 60%); opacity:.55; animation: floorScroll 3.6s linear infinite; }
.portal__rings span { position:absolute; left:50%; top:43%; width:344px; height:246px; margin:-123px 0 0 -172px; border-radius:22px; border:1.6px solid rgba(46,124,232,.5); box-shadow:0 0 44px rgba(46,124,232,.12) inset; opacity:0; animation: ringFlow 7s linear infinite; }
.portal__rings span:nth-child(1){ animation-delay:0s; }
.portal__rings span:nth-child(2){ animation-delay:-1.17s; border-color:rgba(74,100,236,.5); }
.portal__rings span:nth-child(3){ animation-delay:-2.34s; border-color:rgba(106,84,236,.5); }
.portal__rings span:nth-child(4){ animation-delay:-3.5s; border-color:rgba(60,150,230,.5); }
.portal__rings span:nth-child(5){ animation-delay:-4.67s; border-color:rgba(37,190,225,.55); }
.portal__rings span:nth-child(6){ animation-delay:-5.84s; border-color:rgba(90,120,236,.5); }
.portal__screen { position:absolute; left:50%; top:43%; width:366px; height:262px; margin:-131px 0 0 -183px; transform: translateZ(120px) rotateY(-19deg) rotateX(8deg); background:#fff; border-radius:16px; border:1px solid rgba(20,24,31,.10); box-shadow: 15px 22px 0 -4px rgba(150,166,192,.5), 0 56px 98px rgba(18,40,80,.34); overflow:hidden; animation: screenFloat 9s ease-in-out infinite; }
.pscr__bar { height:30px; background:#1f2530; display:flex; align-items:center; gap:6px; padding:0 11px; }
.pscr__bar i { width:8px; height:8px; border-radius:50%; }
.pscr__bar i:nth-child(1){background:#ec6a5f;} .pscr__bar i:nth-child(2){background:#f4bf4f;} .pscr__bar i:nth-child(3){background:#61c554;}
.pscr__bar b { flex:1; height:12px; margin-left:8px; border-radius:6px; background:#333b48; max-width:150px; }
.pscr__app { display:flex; height: calc(100% - 30px); background:#fff; }
.pscr__side { width:44px; flex-shrink:0; background:#f6f7f9; border-right:1px solid rgba(20,24,31,.07); padding:8px 7px; display:grid; gap:6px; align-content:start; }
.pel { height:19px; border-radius:5px; background:#e7eaef; }
.pel.on { background:linear-gradient(145deg,#3a86e8,#1c5fb0); box-shadow:0 4px 10px rgba(46,124,232,.4); }
.pscr__canvas { flex:1; position:relative; padding:9px 10px; }
.pscr__topnav { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.ptn__brand { width:36px; height:8px; border-radius:4px; background:#c3c9d2; }
.ptn__links { margin-left:auto; display:flex; gap:5px; }
.ptn__links i { width:15px; height:5px; border-radius:3px; background:#dfe3e9; }
.ptn__btn { width:28px; height:13px; border-radius:4px; background:linear-gradient(145deg,#3a86e8,#1c5fb0); }
.pscr__hero2 { position:relative; background:#f3f6fc; border-radius:8px; padding:12px; display:flex; gap:10px; }
.ph2__l { flex:1; }
.ph2__h { height:9px; width:78%; border-radius:4px; background:#3a3f47; margin-bottom:5px; }
.ph2__h.acc { width:52%; background:linear-gradient(90deg,#3a86e8,#6a54ec); background-size:200% 100%; animation: heroShift 4s ease-in-out infinite; }
.ph2__t { height:5px; width:90%; border-radius:3px; background:#c7cdd6; margin-top:9px; }
.ph2__t.s { width:66%; margin-top:5px; }
.ph2__btn { width:54px; height:16px; border-radius:5px; margin-top:11px; background:linear-gradient(145deg,#3a86e8,#1c5fb0); box-shadow:0 5px 12px rgba(46,124,232,.4); animation: btnGlow 2.6s ease-in-out infinite; }
.ph2__card { width:104px; flex-shrink:0; background:#fff; border-radius:8px; box-shadow:0 9px 20px rgba(18,40,80,.15); padding:7px; }
.ph2__img { height:44px; border-radius:5px; background:linear-gradient(135deg,#a9c6f0,#3a86e8); margin-bottom:6px; }
.ph2__cl { height:5px; border-radius:3px; background:#dbe0e8; margin-bottom:4px; }
.ph2__cl.s { width:60%; }
.ph2__cb { width:34px; height:11px; border-radius:4px; background:#3a86e8; margin-top:6px; }
.ph2__sel { position:absolute; inset:5px; border:1.5px dashed #3a86e8; border-radius:9px; pointer-events:none; }
.ph2__tool { position:absolute; top:-13px; left:50%; transform:translateX(-50%); display:flex; gap:5px; background:linear-gradient(145deg,#3a86e8,#1c5fb0); border-radius:6px; padding:4px 7px; box-shadow:0 6px 14px rgba(46,124,232,.45); }
.ph2__tool i { width:5px; height:5px; border-radius:2px; background:rgba(255,255,255,.92); }
.pscr__feats { display:flex; gap:8px; margin-top:9px; }
.pscr__feats span { flex:1; height:36px; background:#fff; border:1px solid rgba(20,24,31,.06); border-radius:8px; box-shadow:0 5px 12px rgba(18,40,80,.06); display:grid; place-items:center; animation: cardPulse 3s ease-in-out infinite; }
.pscr__feats span:nth-child(2){ animation-delay:-1s; } .pscr__feats span:nth-child(3){ animation-delay:-2s; }
.pscr__feats em { width:15px; height:15px; border-radius:4px; }
.pscr__feats span:nth-child(1) em { background:#3a86e8; }
.pscr__feats span:nth-child(2) em { background:#6a54ec; }
.pscr__feats span:nth-child(3) em { background:#3fb984; }
.pscr__cursor { position:absolute; top:0; left:0; width:13px; height:17px; z-index:9; background:#0f2545; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));
  clip-path: polygon(0 0, 0 78%, 26% 60%, 46% 100%, 62% 92%, 42% 52%, 74% 52%); animation: cursorMove 7s ease-in-out infinite; }
.portal__chip { position:absolute; left:50%; top:43%; font-family:var(--font-display); font-weight:600; font-size:13px; color:#12305a; background:rgba(255,255,255,.92); border:1px solid rgba(46,124,232,.38); border-radius:100px; padding:8px 14px; box-shadow:0 14px 30px rgba(18,40,80,.18); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); white-space:nowrap; animation: chipBob 7s ease-in-out infinite, chipGlow 3.4s ease-in-out infinite; }
.portal__chip.pc1 { transform: translate(-206px,-134px) translateZ(240px); }
.portal__chip.pc2 { transform: translate(104px,-110px) translateZ(180px); animation-delay:-1.6s, -0.5s; }
.portal__chip.pc3 { transform: translate(134px,78px) translateZ(260px); color:#1c5fb0; animation-delay:-3.2s, -1.4s; }
.portal__chip.pc4 { transform: translate(-204px,96px) translateZ(150px); animation-delay:-4.6s, -2.1s; }
@keyframes ringFlow { 0%{ transform: translateZ(-680px); opacity:0; } 12%{ opacity:.7; } 72%{ opacity:.5; } 100%{ transform: translateZ(150px); opacity:0; } }
@keyframes floorScroll { from{ background-position:0 0; } to{ background-position:0 46px; } }
@keyframes stageSway { 0%,100%{ transform:rotateY(-7deg) rotateX(2deg);} 50%{ transform:rotateY(7deg) rotateX(-1deg);} }
@keyframes screenFloat { 0%,100%{ transform:translateZ(120px) rotateY(-19deg) rotateX(8deg) translateY(0);} 50%{ transform:translateZ(120px) rotateY(-19deg) rotateX(8deg) translateY(-13px);} }
@keyframes portalPulse { 0%,100%{ opacity:.85; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.1);} }
@keyframes chipBob { 0%,100%{ margin-top:0;} 50%{ margin-top:-11px;} }
@keyframes chipGlow { 0%,100%{ box-shadow:0 14px 30px rgba(18,40,80,.18);} 50%{ box-shadow:0 16px 36px rgba(46,124,232,.38);} }
@keyframes heroShift { 0%,100%{ background-position:0% 0;} 50%{ background-position:100% 0;} }
@keyframes btnGlow { 0%,100%{ box-shadow:0 5px 12px rgba(46,124,232,.4);} 50%{ box-shadow:0 6px 18px rgba(46,124,232,.72);} }
@keyframes cardPulse { 0%,100%{ background:#fff; transform:translateY(0);} 50%{ background:#f4f8fe; transform:translateY(-2px);} }
@keyframes cursorMove { 0%{ transform:translate(64px,34px);} 22%{ transform:translate(150px,50px);} 44%{ transform:translate(96px,150px);} 66%{ transform:translate(190px,120px);} 88%{ transform:translate(70px,96px);} 100%{ transform:translate(64px,34px);} }
@media (max-width: 940px) { .portal { height:440px; transform: scale(.9); } .hero__visual { order: 0; } }
@media (max-width: 640px) { .portal { height:250px; transform: scale(.52); transform-origin:center center; } }
/* ============ Footer, dark with gold accents + wordmark ============ */
.footer { position: relative; z-index: 1; overflow: hidden; margin-top: 40px; padding: 74px 0 84px; background: radial-gradient(130% 130% at 50% -12%, #1e222b 0%, #121419 48%, #0b0d11 100%); color: #c9cdd4; border-top: 1px solid rgba(230,179,46,.32); box-shadow: inset 0 1px 0 rgba(230,179,46,.14); }
.footer::before { content:""; position:absolute; z-index:0; pointer-events:none; top:-52%; left:50%; transform:translateX(-50%); width:1000px; max-width:140%; height:600px; background: radial-gradient(closest-side, rgba(233,185,73,.26), rgba(233,185,73,.08) 45%, transparent 72%); }
.footer::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: repeating-linear-gradient(0deg, rgba(230,179,46,.055) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, rgba(230,179,46,.04) 0 1px, transparent 1px 26px); -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 35%, transparent 82%); mask-image: radial-gradient(120% 120% at 50% 0%, #000 35%, transparent 82%); }
.footer > .wrap { position: relative; z-index: 1; }
.footer .brand { color: #fff; font-size: 1.12rem; }
.footer .brand small { color: var(--accent-2); }
.footer .brand__mark { box-shadow: 0 6px 24px rgba(233,185,73,.36); }
.footer .muted { color: #9aa0ab; }
.footer__col h5 { color: var(--accent-2); }
.footer__col a { color: #fff; }
.footer__col a:hover { color: var(--accent-2); }
.footer__bottom { border-top: 1px solid rgba(230,179,46,.20); color: #b8a878; }
.footer__bottom a { color: var(--accent-2); }

/* ============ Top announcement bar (global) ============ */
.announce { background: linear-gradient(90deg, #1b1f27, #0f1216); color: #e9ecf1; font-size: 13.5px; }
.announce__inner { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 24px; flex-wrap: wrap; text-align: center; }
.announce b { color: var(--accent-2); font-weight: 600; }
.announce a { color: #fff; font-family: var(--font-display); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 1px; white-space: nowrap; transition: border-color .2s; }
.announce a:hover { border-color: #fff; }
@media (max-width: 600px) { .announce__inner { font-size: 12px; gap: 8px; padding: 9px 16px; } }