/* ============================================================
   PEC GLOBAL — Design tokens & base
   Brand: Navy #1e2470 + Green #22a02e (from logo)
   Craft borrowed from A-CONNECT: Manrope, tight tracking,
   pill buttons, layered soft shadows, no gradients, 12px cards.
   ============================================================ */
:root{
  /* Brand */
  --navy:#1e2470;
  --navy-700:#191e5e;
  --navy-800:#141a52;
  --navy-900:#0c1038;
  --navy-950:#080b29;
  --green:#22a02e;
  --green-600:#1c8a27;
  --green-700:#177322;
  --green-tint:#eaf6ec;
  --green-tint-2:#dcf0df;

  /* Neutrals — cool paper, not warm cream (navy reads cooler) */
  --canvas:#f4f6fa;
  --canvas-2:#eef1f7;
  --white:#ffffff;
  --line:#e4e8f0;
  --line-2:#d7dce8;

  /* Ink — navy-tinted blacks */
  --ink:#10153a;
  --ink-90:rgba(16,21,58,0.90);
  --ink-70:rgba(16,21,58,0.66);
  --ink-50:rgba(16,21,58,0.48);
  --on-dark:#ffffff;
  --on-dark-70:rgba(255,255,255,0.72);
  --on-dark-50:rgba(255,255,255,0.50);
  --on-dark-line:rgba(255,255,255,0.14);

  /* Type */
  --sans:"Manrope",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  /* Radii */
  --r-card:14px;
  --r-pill:50px;
  --r-input:6px;

  /* Elevation — whisper-soft, stacked */
  --sh-card:0 1px 2px rgba(16,21,58,.05), 0 8px 24px -12px rgba(16,21,58,.18);
  --sh-card-lg:0 2px 4px rgba(16,21,58,.06), 0 24px 48px -20px rgba(16,21,58,.28);
  --sh-nav:0 1px 0 rgba(16,21,58,.04), 0 4px 18px -8px rgba(16,21,58,.16);
  --sh-float:0 8px 24px -6px rgba(34,160,46,.45), 0 2px 8px rgba(12,16,56,.24);

  /* Motion */
  --ease:cubic-bezier(.25,.46,.45,.94);
  --dur:.22s;

  --maxw:1240px;
  --gutter:clamp(20px,5vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--canvas);overscroll-behavior-y:none}
body{
  font-family:var(--sans);
  background:var(--canvas);
  overscroll-behavior-y:none;
  color:var(--ink-90);
  line-height:1.5;
  letter-spacing:-.011em;
  -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;border:none;background:none}
::selection{background:var(--green);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* Eyebrow */
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--green-700);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow.on-dark{color:#5fe06f}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor;display:inline-block}

/* Headings — weight + colour driven hierarchy */
h1,h2,h3{letter-spacing:-.025em;line-height:1.04;color:var(--ink);font-weight:800}
.display{font-size:clamp(40px,6.2vw,78px);line-height:.98;letter-spacing:-.025em;font-weight:800}
.h2{font-size:clamp(30px,4.2vw,52px);letter-spacing:-.03em}
.h3{font-size:clamp(20px,2.4vw,27px);letter-spacing:-.02em;font-weight:700}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-70);font-weight:450}

/* Buttons — universal pill, press scale */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:54px;padding:0 28px;border-radius:var(--r-pill);
  font-weight:700;font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn:active{transform:scale(.95)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 2px 10px -2px rgba(34,160,46,.5)}
.btn-green:hover{background:var(--green-600)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-700)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--navy);background:rgba(30,36,112,.03)}
.btn-ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)}
.btn-ghost-light:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
.btn-white{background:#fff;color:var(--green-700);box-shadow:0 12px 28px -12px rgba(0,0,0,.45)}
.btn-white:hover{background:#f1faf2;color:var(--green-700)}
.btn-sm{height:44px;padding:0 20px;font-size:14.5px}
.btn .ico{width:18px;height:18px}

/* icon helper */
.ico{display:inline-block;flex:none;stroke-width:1.6}
svg.ico{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* section rhythm */
.section{padding:clamp(64px,9vw,128px) 0}
.section-tight{padding:clamp(48px,6vw,88px) 0}

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

/* mono numerals */
.mono{font-family:var(--mono);font-feature-settings:"tnum"}