/* ==========================================================================
   iTAP — public website styles
   Single committed scheme: sage header/footer, dark-green hero banner,
   green-washed light body, dark-green gradient cards. British English.
   ========================================================================== */
:root{
  --green:#22c55e; --green2:#16a34a; --greenlite:#4ade80; --greendk:#15803d;
  --card-a:#1c5a39; --card-b:#123a24; --card-c:#0a1c12;
  --field-a:#04140d; --field-b:#0a2418; --field-c:#0d2e1e;
  --ink:#17221c; --ink-strong:#0e1a13; --ink-muted:#57675e; --ink-dim:#6b7d72;
  --sage-a:#c4d7ca; --sage-b:#b1c7b8; --sage-line:#a9c2b1;
  --line:#2a6e47; --line-soft:#1f5a3a;
  --c-text:#eaf5ee; --c-muted:#9db8a8; --c-strong:#cfe6d8;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  font-size:15px; line-height:1.6;
  background:
    radial-gradient(780px 460px at 100% -2%, rgba(34,197,94,.18), transparent 58%),
    radial-gradient(700px 480px at -6% 40%, rgba(22,163,74,.14), transparent 56%),
    linear-gradient(180deg,#dcecdf,#d3e7d9 55%,#d8ebde);
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;font-weight:600;line-height:1.15;margin:0;color:var(--ink-strong)}
p{margin:0}
img{max-width:100%}
a{color:var(--greendk);text-decoration:none}
a:hover{color:#0f6a31}
:focus-visible{outline:2px solid var(--green2);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sec{padding:76px 0}
.hl{color:var(--greendk);font-weight:600}

/* -------- header -------- */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--sage-line);
  background:rgba(196,215,202,.92);backdrop-filter:blur(12px)}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center}
.logo img{height:30px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:4px}
.nav a{padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;color:#4f6058;transition:color .15s}
.nav a:hover{color:#12201a}
.nav a.active{color:var(--greendk)}
.hdr-act{display:flex;align-items:center;gap:12px}
.signin{padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;color:#4f6058}
.signin:hover{color:var(--greendk)}
.burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;border:1px solid var(--sage-line);background:transparent;color:#25352c;cursor:pointer}
.burger svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.mobile-nav{display:none;border-top:1px solid var(--sage-line);background:rgba(196,215,202,.98)}
.mobile-nav.open{display:block}
.mobile-nav .wrap{display:flex;flex-direction:column;gap:2px;padding:14px 24px}
.mobile-nav a{padding:12px;border-radius:9px;font-size:15px;font-weight:500;color:#33443b}
.mobile-nav a.active{background:rgba(34,197,94,.14);color:var(--greendk)}
.mobile-nav .divide{margin-top:10px;padding-top:14px;border-top:1px solid var(--sage-line);display:flex;flex-direction:column;gap:10px}

/* -------- buttons -------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-family:'Space Grotesk';font-weight:600;font-size:14.5px;padding:12px 24px;cursor:pointer;transition:all .15s;border:1px solid transparent;white-space:nowrap}
.btn-lg{padding:14px 28px;font-size:16px}
.btn-primary{background:linear-gradient(180deg,var(--green),var(--green2));color:#fff;box-shadow:0 12px 30px rgba(34,197,94,.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(34,197,94,.36);color:#fff}
.btn-ghost{background:transparent;border:1px solid #c9d7cf;color:#26332c}
.btn-ghost:hover{border-color:var(--green2);color:var(--greendk)}

/* -------- atoms -------- */
.pill{display:inline-flex;align-items:center;border-radius:999px;border:1px solid rgba(74,222,128,.4);background:rgba(34,197,94,.12);padding:6px 14px;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--greenlite);font-weight:600}
.accent{display:block;height:3px;width:44px;border-radius:3px;background:linear-gradient(90deg,var(--green2),var(--greenlite))}
.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--greendk)}
.lead{font-size:15px;line-height:1.6;color:var(--ink-muted)}
.body{font-size:14.5px;line-height:1.6;color:var(--ink-muted)}
.strong{color:#26332c}
.h2{font-size:28px}
.h3{font-size:20px}
.head-block{max-width:640px}
.head-block .accent{margin-top:16px}
.head-block h2{margin-top:16px}
.head-block .lead{margin-top:12px}

/* -------- banner (dark-green hero) -------- */
.banner{position:relative;overflow:hidden;background:
  radial-gradient(1200px 600px at 15% -6%, #0e3a24 0%, transparent 55%),
  radial-gradient(1000px 520px at 108% 8%, #0b2c1c 0%, transparent 50%),
  linear-gradient(160deg,var(--field-a),var(--field-b) 60%,var(--field-c))}
.banner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(circle at 50% 30%, #000, transparent 75%)}
.banner>*{position:relative;z-index:1}
.banner .pill{border-color:rgba(74,222,128,.35)}
.hero h1{font-size:clamp(34px,5.2vw,56px);line-height:1.06;letter-spacing:-.5px;color:#fff}
.hero .sub{margin-top:22px;font-size:18px;line-height:1.6;color:var(--c-muted);max-width:640px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:48px;align-items:center}

/* -------- grids & lists -------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dotlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.dotlist li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.55;color:#3c4a42}
.dot{margin-top:8px;width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--green2)}

/* -------- cards (dark-green gradient, 3D hover) -------- */
.card{border-radius:20px;border:1px solid var(--line);color:var(--c-text);padding:30px;
  background:linear-gradient(150deg,var(--card-a) 0%,var(--card-b) 45%,var(--card-c) 100%);
  box-shadow:0 22px 50px rgba(4,20,13,.30);
  transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s,border-color .38s;
  transform:perspective(1100px);transform-style:preserve-3d}
.card:hover{transform:perspective(1100px) translateY(-10px) rotateX(4deg) rotateY(-3deg) scale(1.015);
  box-shadow:0 40px 80px rgba(4,20,13,.42),0 0 44px rgba(34,197,94,.14);border-color:var(--line)}
.card h1,.card h2,.card h3,.card h4{color:var(--c-text)}
.card .body,.card .lead{color:var(--c-muted)}
.card .strong,.card .dotlist li{color:var(--c-strong)}
.card .dot{background:var(--greenlite)}
.card .hl{color:var(--greenlite)}
.card .eyebrow{color:var(--greenlite)}
.card .btn-ghost{border-color:var(--line);color:var(--c-text)}
.card .btn-ghost:hover{border-color:var(--greenlite);color:var(--greenlite)}
.card .accent{margin-bottom:0}

/* icon tiles / number badges */
.icon-tile{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:rgba(34,197,94,.12);border:1px solid var(--line);color:var(--greenlite);transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.icon-tile.sm{width:40px;height:40px;border-radius:11px}
.icon-tile svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.icon-tile.sm svg{width:21px;height:21px}
.card:hover .icon-tile{transform:translateZ(26px) scale(1.06)}
.num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:#08190f;font-family:'Space Grotesk';font-weight:600;color:var(--greenlite);font-size:15px}

/* section-specific bits */
.kicker{font-family:'Space Grotesk';font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--greenlite)}
.fa-head{display:flex;align-items:center;gap:16px}
.cls-head{display:flex;align-items:center;gap:14px}
.qual{display:inline-block;font-size:13px;font-weight:600;color:var(--greenlite);background:rgba(34,197,94,.12);border:1px solid var(--line);border-radius:999px;padding:5px 12px}

/* -------- contact form -------- */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-size:12.5px;font-weight:500;color:var(--c-strong)}
.inp{background:#08190f;border:1px solid var(--line-soft);border-radius:11px;padding:12px 14px;color:var(--c-text);font-family:'Inter';font-size:14.5px;width:100%}
.inp::placeholder{color:#5f7d6c}
.inp:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.13)}
textarea.inp{resize:vertical;min-height:130px}
.form-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.form-status{margin-bottom:18px;padding:12px 14px;border-radius:11px;font-size:13.5px;line-height:1.5;border:1px solid transparent}
.form-status.ok{background:rgba(34,197,94,.12);border-color:var(--line);color:var(--greenlite)}
.form-status.err{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.4);color:#fca5a5}

/* -------- 3D constellation (home hero) -------- */
.stage{position:relative;height:440px;perspective:1200px}
.constell{position:absolute;inset:0;transform-style:preserve-3d;animation:tilt 16s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotateY(-15deg) rotateX(7deg)}50%{transform:rotateY(15deg) rotateX(-5deg)}}
.rings{position:absolute;left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;border:1px solid rgba(74,222,128,.12);transform:translateZ(-20px)}
.rings::after{content:"";position:absolute;inset:52px;border-radius:50%;border:1px solid rgba(74,222,128,.10)}
.hub{position:absolute;left:50%;top:50%;width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:26px;background:linear-gradient(180deg,#fff,#e9f3ed);border:1px solid rgba(255,255,255,.6);box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 66px rgba(34,197,94,.24);display:flex;align-items:center;justify-content:center;transform:translateZ(70px)}
.hub img{width:60px;height:auto;display:block}
.sat{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:rgba(17,23,19,.94);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.5);font-size:12.5px;font-weight:600;color:var(--c-strong);white-space:nowrap}
.sat svg{width:16px;height:16px;stroke:var(--greenlite);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sat .pip{width:7px;height:7px;border-radius:50%;background:var(--greenlite);box-shadow:0 0 12px rgba(74,222,128,.7)}
.float{animation:flt 7s ease-in-out infinite}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.links{position:absolute;inset:0;overflow:visible;transform:translateZ(10px)}
.links line{stroke:rgba(74,222,128,.32);stroke-width:1.5;stroke-dasharray:3 6;animation:dash 3.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-18}}

/* -------- footer -------- */
.site-footer{border-top:1px solid var(--sage-line);background:linear-gradient(180deg,var(--sage-a),var(--sage-b))}
.ftr-top{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;padding:48px 0}
.ftr-top .logo img{height:34px}
.ftr-tag{margin-top:20px;font-size:14px;line-height:1.6;color:#3f4f47;max-width:400px}
.ftr-col h4{margin-bottom:16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--greendk)}
.ftr-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr-links a{font-size:14px;color:#42524a}
.ftr-links a:hover{color:var(--greendk)}
.ftr-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;border-top:1px solid var(--sage-line);padding:24px 0;font-size:12px;color:#556258}

/* -------- responsive -------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .stage{display:none}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .nav,.hdr-act{display:none}
  .burger{display:inline-flex}
}
@media (max-width:680px){
  .sec{padding:52px 0}
  .g2,.g3,.g4,.form-2{grid-template-columns:1fr}
  .hero .sub{font-size:16px}
  .card{padding:24px}
  .split{grid-template-columns:1fr !important}
}
@media (prefers-reduced-motion:reduce){
  .constell,.float,.links line{animation:none}
  .card,.card:hover{transform:none;transition:none}
  .card:hover .icon-tile{transform:none}
}