/* ==========================================================================
   PromptProtect marketing site
   Built on the brand tokens in tokens.css (imported first in index.html).
   Look: clean, modern corporate IT-solutions / technology feel.
   Light, airy body with crisp cards and tasteful brand-colour gradient accents.
   Ink anchors the header and footer; teal/harbour support; citron used sparingly.
   ========================================================================== */

/* ----- Derived theme variables (built on brand tokens) ------------------- */
:root{
  --bg:            var(--pp-slate-0);     /* white page */
  --bg-soft:       var(--pp-slate-50);    /* faint section wash */
  --bg-wash:       #EEF5F5;               /* harbour-tinted wash */
  --ink:           var(--pp-ink);
  --surface:       var(--pp-slate-0);     /* card */
  --line:          var(--pp-slate-200);
  --line-soft:     var(--pp-slate-100);

  --text:          var(--pp-slate-900);
  --text-body:     var(--pp-slate-600);
  --text-dim:      var(--pp-slate-500);
  --text-faint:    var(--pp-slate-400);

  --brand:         var(--pp-teal);        /* primary action / links on light */
  --brand-deep:    #0A565C;
  --harbour:       var(--pp-harbour);
  --accent:        var(--pp-citron);      /* used sparingly, never as text on white */

  /* on dark surfaces (header/footer/cta band) */
  --on-dark:       var(--pp-slate-50);
  --on-dark-dim:   var(--pp-slate-300);
  --on-dark-line:  rgba(255,255,255,.12);

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;

  --shadow-xs: 0 1px 2px rgba(11,30,43,.06);
  --shadow:    0 14px 34px -20px rgba(11,30,43,.28);
  --shadow-lg: 0 30px 60px -28px rgba(11,30,43,.30);

  --maxw: 1180px;
  --gutter: clamp(16px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 120px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----- Reset / base ------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text-body);
  font-family:var(--pp-font-ui);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--pp-font-display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 .4em;
  color:var(--text);
}
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; }

/* Accessible focus ring */
:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}

/* Skip link */
.skip-link{
  position:absolute; left:12px; top:-60px;
  background:var(--brand); color:#fff;
  padding:10px 16px; border-radius:8px; font-weight:600; z-index:200;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

/* ----- Layout helpers ---------------------------------------------------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:clamp(48px,6vw,80px); }
.section--soft{ background:var(--bg-soft); }
.section--wash{ background:var(--bg-wash); }

.eyebrow{
  font-family:var(--pp-font-mono);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  font-weight:500;
  color:var(--brand);
  margin:0 0 14px;
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--harbour); display:inline-block; border-radius:2px; }
.section-head{ max-width:660px; margin:0 0 clamp(36px,5vw,56px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.section-head h2{ font-size:clamp(28px,4.4vw,44px); color:var(--text); }
.section-head p{ color:var(--text-body); font-size:clamp(16px,2vw,18px); margin-bottom:0; }

/* Placeholder markers (owner replaces these) */
.ph{ color:var(--text-faint); }
.ph-note{
  font-family:var(--pp-font-mono); font-size:11px; letter-spacing:.04em;
  color:var(--pp-coach-text); border:1px dashed var(--pp-coach);
  border-radius:6px; padding:2px 8px; display:inline-block; background:var(--pp-coach-tint);
}

/* Placeholder media slot */
.slot{
  position:relative; border:1px dashed var(--line);
  border-radius:var(--radius); background:
    repeating-linear-gradient(135deg, rgba(13,110,117,.04) 0 14px, transparent 14px 28px),
    var(--bg-wash);
  display:grid; place-items:center; text-align:center;
  color:var(--text-faint); min-height:220px; overflow:hidden;
}
.slot__tag{
  font-family:var(--pp-font-mono); font-size:12px; letter-spacing:.05em;
  padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.7); color:var(--text-dim);
}

/* ----- Buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px; border-radius:999px; font-weight:600; font-size:15px;
  border:1px solid transparent; transition:transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  white-space:nowrap; cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:0 10px 24px -12px rgba(13,110,117,.7); }
.btn--primary:hover{ background:var(--brand-deep); }
.btn--secondary{ background:transparent; color:var(--text); border-color:var(--line); }
.btn--secondary:hover{ border-color:var(--brand); color:var(--brand); }
.btn--ghost{ background:var(--bg-wash); color:var(--brand); }
.btn--ghost:hover{ background:#e3eeee; }
/* on dark surfaces */
.btn--on-dark{ background:transparent; color:var(--on-dark); border-color:var(--on-dark-line); }
.btn--on-dark:hover{ border-color:var(--harbour); color:#fff; }
.btn--accent{ background:var(--accent); color:var(--pp-ink); }
.btn--accent:hover{ background:#e3f87f; }
.btn--sm{ padding:10px 16px; font-size:14px; }
.btn--full{ width:100%; }
.btn__arrow{ transition:transform .2s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* ============================ UTILITY BAR ================================= */
.utilitybar{
  background:var(--ink); border-bottom:1px solid var(--on-dark-line);
  font-size:13px; color:var(--on-dark-dim);
}
.utilitybar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px; flex-wrap:wrap; }
.utilitybar__contact{ display:flex; gap:20px; flex-wrap:wrap; }
.utilitybar__contact a{ display:inline-flex; align-items:center; gap:7px; }
.utilitybar__contact a:hover{ color:var(--harbour); }
.utilitybar__social{ display:flex; gap:6px; }
.utilitybar__social a{
  width:28px; height:28px; display:grid; place-items:center; border-radius:6px;
  color:var(--on-dark-dim); transition:color .2s var(--ease), background .2s var(--ease);
}
.utilitybar__social a:hover{ color:var(--harbour); background:rgba(255,255,255,.06); }
.ico{ width:16px; height:16px; flex:none; }

/* ============================== HEADER / NAV ============================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,30,43,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--on-dark-line); transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck{ background:rgba(9,24,34,.96); box-shadow:0 10px 30px -18px rgba(0,0,0,.6); }
.nav{ display:flex; align-items:center; gap:24px; min-height:72px; }
.nav__brand{ display:flex; align-items:center; flex:none; }
.nav__brand img{ height:30px; width:auto; }
.nav__menu{ display:flex; gap:4px; margin-inline:auto; }
.nav__menu a{
  padding:10px 14px; border-radius:8px; font-size:15px; color:var(--on-dark-dim);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav__menu a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.nav__cta{ display:flex; gap:10px; align-items:center; flex:none; }
.nav__toggle{
  display:none; width:44px; height:44px; border:1px solid var(--on-dark-line);
  border-radius:10px; background:transparent; align-items:center; justify-content:center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after{
  content:""; display:block; width:20px; height:2px; background:#fff; position:relative; transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__toggle span::before{ position:absolute; top:-6px; }
.nav__toggle span::after{ position:absolute; top:6px; }
.nav__toggle[aria-expanded="true"] span{ background:transparent; }
.nav__toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 960px){
  .nav__menu, .nav__cta .btn--on-dark{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .nav__cta{ margin-left:auto; }
}

/* Mobile drawer */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(340px,86vw); z-index:120;
  background:var(--ink); border-left:1px solid var(--on-dark-line); color:var(--on-dark);
  transform:translateX(100%); transition:transform .3s var(--ease);
  padding:88px 24px 32px; display:flex; flex-direction:column; gap:8px; overflow-y:auto;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav a.m-link{ padding:14px 12px; border-radius:10px; font-size:17px; color:var(--on-dark); border-bottom:1px solid var(--on-dark-line); }
.mobile-nav a.m-link:hover{ background:rgba(255,255,255,.05); }
.mobile-nav .btn{ margin-top:8px; }
.mobile-nav__close{
  position:absolute; top:22px; right:20px; width:40px; height:40px; border-radius:10px;
  border:1px solid var(--on-dark-line); background:transparent; color:#fff; font-size:22px; line-height:1;
}
.scrim{ position:fixed; inset:0; background:rgba(4,12,18,.5); z-index:110; opacity:0; visibility:hidden; transition:opacity .3s var(--ease),visibility .3s; }
.scrim.is-open{ opacity:1; visibility:visible; }
body.nav-lock{ overflow:hidden; }

/* ================================ HERO =================================== */
.hero{ position:relative; overflow:hidden; background:var(--bg); padding-block:clamp(56px,8vw,104px) var(--section-y); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 55% at 85% 0%, rgba(95,196,191,.22), transparent 62%),
    radial-gradient(40% 50% at 2% 100%, rgba(13,110,117,.10), transparent 60%);
}
.hero__grid{
  position:absolute; inset:0; z-index:0; opacity:.6; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(70% 70% at 70% 10%, #000 20%, transparent 80%);
}
.hero .container{ position:relative; z-index:1; }
.hero__inner{ max-width:820px; }
.hero h1{
  font-size:clamp(36px,6.4vw,66px); line-height:1.04; margin-bottom:.35em; color:var(--text);
}
.hero h1 .accent{
  background:linear-gradient(100deg, var(--brand), var(--harbour));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{ font-size:clamp(17px,2.2vw,21px); color:var(--text-body); max-width:620px; margin-bottom:32px; }
.hero__ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
.hero__trust{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--line-soft); }
.hero__rating{ display:flex; align-items:center; gap:10px; }
.stars{ color:#E0A008; letter-spacing:2px; font-size:16px; }
.hero__rating span{ font-size:14px; color:var(--text-dim); }
.hero__logos{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.logo-chip{
  height:38px; min-width:96px; padding:0 16px; border-radius:8px;
  border:1px dashed var(--line); display:grid; place-items:center;
  font-family:var(--pp-font-mono); font-size:11px; color:var(--text-faint);
}

/* ============================ FEATURE CARDS ============================== */
.feature-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:-56px; position:relative; z-index:2; }
.feature-card{
  background:var(--surface);
  border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow); transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.feature-card__icon{
  width:52px; height:52px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(13,110,117,.12), rgba(95,196,191,.14)); color:var(--brand); margin-bottom:18px;
}
.feature-card__icon .ico{ width:26px; height:26px; }
.feature-card h3{ font-size:19px; margin-bottom:8px; color:var(--text); }
.feature-card p{ color:var(--text-body); font-size:15px; margin:0; }

/* ============================ VALUE / HOW ================================ */
.how__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }
.how__media{ position:relative; }
.how__media .slot{ min-height:360px; box-shadow:var(--shadow); background:#fff; }
.how__stat{ font-family:var(--pp-font-display); font-weight:600; font-size:clamp(44px,7vw,72px); line-height:1; color:var(--text); letter-spacing:-.03em; }
.how__stat small{ display:block; font-family:var(--pp-font-ui); font-weight:500; font-size:15px; color:var(--brand); letter-spacing:.02em; margin-top:6px; }
.checklist{ display:grid; gap:12px; margin:26px 0 30px; }
.checklist li{ display:flex; gap:12px; align-items:flex-start; color:var(--text-body); font-size:15px; }
.checklist .tick{
  flex:none; width:22px; height:22px; border-radius:6px; background:rgba(13,110,117,.12);
  color:var(--brand); display:grid; place-items:center; margin-top:1px;
}
.checklist .tick .ico{ width:14px; height:14px; }

/* ========================= WHAT YOU GET (services) ======================= */
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:28px; position:relative; overflow:hidden; box-shadow:var(--shadow-xs);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.service::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:linear-gradient(90deg,var(--brand),var(--harbour)); transition:width .3s var(--ease); }
.service:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.service:hover::before{ width:100%; }
.service__num{
  font-family:var(--pp-font-mono); font-size:13px; color:var(--brand);
  letter-spacing:.1em; margin-bottom:16px; display:block; font-weight:500;
}
.service__icon{ width:46px; height:46px; border-radius:10px; background:linear-gradient(160deg, rgba(13,110,117,.1), rgba(95,196,191,.14)); color:var(--brand); display:grid; place-items:center; margin-bottom:16px; }
.service__icon .ico{ width:24px; height:24px; }
.service h3{ font-size:18px; margin-bottom:8px; color:var(--text); }
.service p{ color:var(--text-body); font-size:14.5px; margin:0; }
.service__tier{ position:absolute; top:24px; right:22px; font-family:var(--pp-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); border:1px solid var(--line); border-radius:999px; padding:3px 9px; }

/* ============================== COUNTERS ================================= */
.counters{ background:var(--ink); color:var(--on-dark); position:relative; overflow:hidden; }
.counters::before{ content:""; position:absolute; inset:0; background:radial-gradient(40% 120% at 80% 0%, rgba(13,110,117,.45), transparent 60%); pointer-events:none; }
.counters .container{ position:relative; z-index:1; }
.counters__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.counter__num{ font-family:var(--pp-font-display); font-weight:600; font-size:clamp(34px,5vw,52px); color:#fff; letter-spacing:-.02em; }
.counter__num .suffix{ color:var(--accent); }
.counter__label{ color:var(--on-dark-dim); font-size:14px; margin-top:6px; }

/* =============================== PRICING ================================= */
.pricing__toggle{ display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto 44px; }
.pricing__toggle span{ font-size:15px; color:var(--text-dim); font-weight:500; }
.pricing__toggle span.is-active{ color:var(--text); }
.switch{ position:relative; width:56px; height:30px; border-radius:999px; background:var(--pp-slate-200); border:1px solid var(--line); padding:0; flex:none; transition:background .2s var(--ease); }
.switch[aria-checked="true"]{ background:var(--brand); border-color:var(--brand); }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:var(--shadow-xs); transition:transform .25s var(--ease); }
.switch[aria-checked="true"]::after{ transform:translateX(26px); }
.pricing__save{ font-family:var(--pp-font-mono); font-size:11px; color:var(--brand); border:1px solid var(--harbour); border-radius:999px; padding:3px 9px; }
.pricing__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:start; }
.plan{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:28px; display:flex; flex-direction:column; gap:18px; position:relative; box-shadow:var(--shadow-xs);
}
.plan--featured{ border-color:var(--brand); box-shadow:var(--shadow-lg); transform:translateY(-6px); }
.plan__badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--brand); color:#fff; font-size:12px; font-weight:600; padding:5px 14px; border-radius:999px; white-space:nowrap; }
.plan__name{ font-family:var(--pp-font-display); font-weight:600; font-size:20px; color:var(--text); }
.plan__desc{ color:var(--text-dim); font-size:13.5px; min-height:38px; margin:0; }
.plan__price{ display:flex; align-items:baseline; gap:6px; }
.plan__amount{ font-family:var(--pp-font-display); font-weight:600; font-size:40px; color:var(--text); letter-spacing:-.02em; }
.plan__per{ color:var(--text-faint); font-size:14px; }
.plan__feat-label{ font-family:var(--pp-font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--brand); margin:4px 0 2px; }
.plan ul{ display:grid; gap:10px; }
.plan ul li{ display:flex; gap:10px; font-size:14px; color:var(--text-body); align-items:flex-start; }
.plan ul li .tick{ flex:none; width:18px; height:18px; color:var(--brand); margin-top:1px; }
.plan ul.also li .tick{ color:var(--text-faint); }
.plan .btn{ margin-top:auto; }
.price-yearly{ display:none; }
.pricing.show-yearly .price-monthly{ display:none; }
.pricing.show-yearly .price-yearly{ display:inline; }

/* ============================= CASE STUDIES ============================== */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.case{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-xs); transition:transform .2s var(--ease), box-shadow .2s var(--ease); display:flex; flex-direction:column;
}
.case:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.case .slot{ border:0; border-radius:0; min-height:190px; }
.case__body{ padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.case__tag{ font-family:var(--pp-font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); }
.case h3{ font-size:18px; margin:0; color:var(--text); }
.case p{ color:var(--text-body); font-size:14.5px; margin:0; }
.case__link{ margin-top:auto; color:var(--brand); font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:8px; }
.case__link .btn__arrow{ transition:transform .2s var(--ease); }
.case:hover .case__link .btn__arrow{ transform:translateX(3px); }

/* ============================ TESTIMONIALS =============================== */
.slider{ position:relative; }
.slider__track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc(33.333% - 15px); gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 20px; scrollbar-width:none; }
.slider__track::-webkit-scrollbar{ display:none; }
.quote{
  scroll-snap-align:start; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow-xs);
}
.quote__stars{ color:#E0A008; letter-spacing:2px; }
.quote__text{ font-size:16px; color:var(--text); line-height:1.6; margin:0; }
.quote__person{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.quote__avatar{ width:46px; height:46px; border-radius:50%; border:1px dashed var(--line); display:grid; place-items:center; color:var(--text-faint); font-family:var(--pp-font-mono); font-size:10px; flex:none; background:var(--bg-wash); }
.quote__name{ font-weight:600; font-size:15px; color:var(--text); }
.quote__role{ color:var(--text-faint); font-size:13px; }
.slider__nav{ display:flex; gap:10px; justify-content:center; margin-top:20px; }
.slider__nav button{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); display:grid; place-items:center; transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.slider__nav button:hover{ border-color:var(--brand); color:var(--brand); background:var(--bg-wash); }

/* ============================= VIDEO / CTA =============================== */
.cta-band{ position:relative; overflow:hidden; background:linear-gradient(120deg, var(--pp-teal), #0a4d52 55%, var(--pp-ink)); border-radius:var(--radius-lg); padding:clamp(40px,6vw,72px); text-align:center; color:var(--on-dark); }
.cta-band::after{ content:""; position:absolute; inset:0; background:radial-gradient(50% 120% at 50% -10%, rgba(95,196,191,.4), transparent 60%); pointer-events:none; }
.cta-band__inner{ position:relative; z-index:1; max-width:640px; margin-inline:auto; }
.cta-band h2{ font-size:clamp(28px,4.4vw,42px); color:#fff; }
.cta-band p{ color:rgba(255,255,255,.88); font-size:18px; margin-bottom:28px; }
.cta-band .btn{ margin-inline:auto; }
.cta-band__play{
  width:72px; height:72px; border-radius:50%; background:var(--accent); color:var(--pp-ink);
  display:grid; place-items:center; margin:0 auto 24px; box-shadow:0 0 0 0 rgba(215,240,90,.5);
}
@media (prefers-reduced-motion: no-preference){ .cta-band__play{ animation:pulse 2.6s infinite; } }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(215,240,90,.5);} 70%{ box-shadow:0 0 0 22px rgba(215,240,90,0);} 100%{ box-shadow:0 0 0 0 rgba(215,240,90,0);} }
.cta-band__play .ico{ width:28px; height:28px; margin-left:3px; }

/* ============================== RESOURCES ================================ */
.resource{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-xs); transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.resource:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.resource .slot{ border:0; border-radius:0; min-height:170px; }
.resource__body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.resource__meta{ display:flex; align-items:center; gap:12px; font-size:12px; }
.resource__cat{ font-family:var(--pp-font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--brand); }
.resource__date{ color:var(--text-faint); }
.resource h3{ font-size:17px; margin:0; color:var(--text); }

/* ================================ FOOTER ================================= */
.site-footer{ background:var(--ink); color:var(--on-dark); border-top:4px solid var(--brand); padding-block:clamp(48px,6vw,72px) 0; }
.footer__top{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:40px; padding-bottom:48px; }
.footer__brand img{ height:30px; margin-bottom:18px; }
.footer__brand p{ color:var(--on-dark-dim); font-size:14.5px; max-width:300px; }
.footer__contact{ display:grid; gap:8px; margin-top:16px; font-size:14px; color:var(--on-dark-dim); }
.footer__contact a:hover{ color:var(--harbour); }
.footer__col h4{ font-family:var(--pp-font-ui); font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--on-dark-dim); margin-bottom:16px; font-weight:600; }
.footer__col ul{ display:grid; gap:10px; }
.footer__col a{ color:var(--on-dark-dim); font-size:14.5px; }
.footer__col a:hover{ color:#fff; }
.footer__bottom{ border-top:1px solid var(--on-dark-line); padding-block:22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer__bottom p{ margin:0; color:var(--text-faint); font-size:13px; }
.footer__social{ display:flex; gap:8px; }
.footer__social a{ width:34px; height:34px; border-radius:8px; border:1px solid var(--on-dark-line); display:grid; place-items:center; color:var(--on-dark-dim); transition:color .2s var(--ease),border-color .2s var(--ease); }
.footer__social a:hover{ color:var(--harbour); border-color:var(--harbour); }

/* =============================== REVEAL ================================== */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.is-in{ opacity:1; transform:none; }
}

/* ============================= RESPONSIVE ================================ */
@media (max-width: 960px){
  .feature-cards{ grid-template-columns:1fr; margin-top:28px; }
  .how__grid{ grid-template-columns:1fr; }
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .counters__grid{ grid-template-columns:repeat(2,1fr); }
  .pricing__grid{ grid-template-columns:repeat(2,1fr); }
  .plan--featured{ transform:none; }
  .cards-3{ grid-template-columns:1fr; }
  .slider__track{ grid-auto-columns:calc(80% - 10px); }
  .footer__top{ grid-template-columns:1fr 1fr; gap:32px; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width: 560px){
  .services__grid{ grid-template-columns:1fr; }
  .counters__grid{ grid-template-columns:1fr; }
  .pricing__grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .utilitybar__contact{ gap:14px; font-size:12px; }
  .btn{ width:100%; }
  .hero__ctas .btn{ width:100%; }
}