/* ==================================================================
   HSECompass - the public site.

   A landing page has one job: a person who has never heard of this
   decides, in about forty seconds, whether it is worth their afternoon.
   So the page is built to be read while scrolling and to answer in the
   order the questions arrive - what is it, why do I care, what does it
   cover, how do I start, who says it is any good, how do I reach you.

   The brand comes from the logo: forest green for structure, orange for
   the one action on each screenful, teal for the live detail. The dark
   opening section is deliberate - it is the only place on the page that
   is not paper, which is what makes the rest of it feel like paper.

   Everything moves for a reason, and everything that moves stops for
   anyone who has asked their machine not to animate.
   ================================================================== */

:root{
  --green:#014B31; --green-700:#013A26; --green-900:#01291B; --green-50:#E8F0EC;
  --orange:#E2611B; --orange-600:#C45113; --orange-50:#FDF0E8;
  --teal:#07827C; --teal-50:#E4F2F1;

  --bg:#F8F6F0; --paper:#FFFFFF; --ink:#131A17; --body:#46504B; --muted:#7A847E;
  --line:#E4E7E3; --line-dark:rgba(255,255,255,.14);

  --ok:#3A7D5C; --warn:#D48C2C; --crit:#B53B3B;

  --r:16px; --r-sm:10px; --r-lg:24px;
  --sh-1:0 1px 2px rgba(19,26,23,.04), 0 2px 6px rgba(19,26,23,.05);
  --sh-2:0 2px 6px rgba(19,26,23,.05), 0 14px 34px rgba(19,26,23,.09);
  --sh-3:0 30px 70px rgba(19,26,23,.18);
  --ease:cubic-bezier(.22,.7,.26,1);
  --wrap:1180px;
  --head-h:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 14px); -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--body); overflow-x:hidden;
  font:16px/1.65 "Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink); line-height:1.14; margin:0 0 .5em; letter-spacing:-.025em; font-weight:750}
h1{font-size:clamp(2.05rem,4.3vw,3.35rem); letter-spacing:-.04em}
h2{font-size:clamp(1.65rem,3.2vw,2.5rem); letter-spacing:-.03em}
h3{font-size:1.1rem}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.lede{font-size:1.09rem; line-height:1.7; max-width:62ch}
.muted{color:var(--muted)} .small{font-size:.9rem} .center{text-align:center}
::selection{background:var(--orange); color:#fff}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:4px}

/* ---------------------------------------------------- scroll progress */
.progress{
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:90;
  background:linear-gradient(90deg, var(--orange), var(--teal));
  transform:scaleX(0); transform-origin:0 50%;
}

/* ------------------------------------------------------------ buttons */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1.4rem; border-radius:999px; border:1.5px solid transparent;
  font:600 .97rem/1 inherit; cursor:pointer; text-decoration:none!important;
  transition:transform .18s var(--ease), box-shadow .22s var(--ease),
             background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  overflow:hidden; white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.btn-primary{
  background:linear-gradient(135deg, var(--orange), var(--orange-600)); color:#fff;
  box-shadow:0 2px 6px rgba(226,97,27,.26), 0 12px 28px rgba(226,97,27,.22);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 6px 14px rgba(226,97,27,.3), 0 20px 40px rgba(226,97,27,.26)}
/* a light sweep on hover, because a flat button looks like a picture of one */
.btn-primary::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.3) 50%, transparent 80%);
}
.btn-primary:hover::after{transform:translateX(120%); transition:transform .7s var(--ease)}
.btn-ghost{background:var(--paper); color:var(--ink); border-color:var(--line); box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:var(--green); color:var(--green); transform:translateY(-2px); box-shadow:var(--sh-2)}
.btn-light{background:#fff; color:var(--green-700); border-color:#fff}
.btn-light:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.2)}
.btn-wire{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.btn-wire:hover{border-color:#fff; background:rgba(255,255,255,.1); transform:translateY(-2px)}
.btn-lg{padding:1rem 1.75rem; font-size:1.03rem}
.btn-sm{padding:.55rem 1rem; font-size:.88rem}

/* ------------------------------------------------------------- header */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:80; height:var(--head-h);
  display:flex; align-items:center;
  transition:height .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease);
}
.site-head .bar{display:flex; align-items:center; gap:1.1rem; width:100%}
.site-head.is-stuck{
  height:62px; background:rgba(248,246,240,.88);
  backdrop-filter:saturate(1.5) blur(14px); -webkit-backdrop-filter:saturate(1.5) blur(14px);
  box-shadow:0 1px 0 var(--line), 0 10px 30px rgba(19,26,23,.06);
}
/* Over the dark hero the header is invisible furniture in white. */
.site-head.on-dark .site-nav a{color:rgba(255,255,255,.84)}
.site-head.on-dark .site-nav a:hover{color:#fff}
.site-head.on-dark .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.38); box-shadow:none}
.site-head.on-dark .btn-ghost:hover{background:rgba(255,255,255,.12); color:#fff; border-color:#fff}
.site-head.on-dark .nav-toggle{color:#fff; border-color:rgba(255,255,255,.3)}
.brand{display:flex; align-items:center; min-width:0; flex:none}
.brand:hover{text-decoration:none}
.brand img{height:40px; width:auto; transition:height .28s var(--ease)}
.site-head.is-stuck .brand img{height:34px}
.brand .on-dark-logo{display:none}
.site-head.on-dark .brand .on-light-logo{display:none}
.site-head.on-dark .brand .on-dark-logo{display:block}

.site-nav{display:flex; gap:.2rem; margin-left:auto; align-items:center}
.site-nav a{
  position:relative; color:var(--body); font-weight:500; font-size:.94rem;
  padding:.5rem .72rem; border-radius:999px; transition:color .18s var(--ease), background .18s var(--ease);
}
.site-nav a:hover{text-decoration:none; color:var(--green)}
.site-nav a::after{
  content:""; position:absolute; left:.72rem; right:.72rem; bottom:.3rem; height:2px;
  background:var(--orange); border-radius:2px; transform:scaleX(0); transform-origin:50%;
  transition:transform .22s var(--ease);
}
.site-nav a.is-active::after{transform:scaleX(1)}
.site-nav a.is-active{color:var(--green)}
.site-head.on-dark .site-nav a.is-active{color:#fff}
.head-cta{display:flex; gap:.55rem; align-items:center; margin-left:.6rem}
/* The pair lives in the bar on a wide screen and inside the menu on a
   narrow one; only ever one of them is on the page. */
.site-nav .head-cta{display:none}
.nav-toggle{
  display:none; margin-left:auto; background:none; color:var(--ink);
  border:1.5px solid var(--line); border-radius:12px; padding:.45rem .6rem; cursor:pointer;
}

/* --------------------------------------------------------------- hero */
.hero{
  position:relative; background:var(--green-900); color:#fff; overflow:hidden;
  padding:calc(var(--head-h) + 3.6rem) 0 5.5rem; isolation:isolate;
}
/* Two slow-drifting pools of colour. They are the only thing on the page
   that moves on its own, and they move slowly enough to be felt rather
   than watched. */
.hero .aurora{position:absolute; inset:-30% -10%; z-index:-2; filter:blur(70px); opacity:.65}
.hero .aurora i{position:absolute; border-radius:50%; display:block}
.hero .aurora i:nth-child(1){width:46vw;height:46vw;left:4%;top:2%;background:rgba(7,130,124,.55); animation:drift1 26s var(--ease) infinite alternate}
.hero .aurora i:nth-child(2){width:38vw;height:38vw;right:2%;top:14%;background:rgba(226,97,27,.38); animation:drift2 32s var(--ease) infinite alternate}
.hero .aurora i:nth-child(3){width:34vw;height:34vw;left:38%;bottom:-8%;background:rgba(1,120,78,.5); animation:drift3 29s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(10%,8%,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-12%,10%,0) scale(1.2)}}
@keyframes drift3{to{transform:translate3d(8%,-10%,0) scale(1.1)}}
/* A surveyor's grid, barely there, so the colour has something to sit on. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(120% 90% at 50% 20%, #000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 20%, #000 35%, transparent 78%);
}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:3.4rem; align-items:center}
.hero h1{color:#fff}
.hero .lede{color:rgba(255,255,255,.82); font-size:1.14rem}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.2rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:#fff; padding:.42rem .9rem .42rem .5rem; border-radius:999px;
  font-size:.82rem; font-weight:650; letter-spacing:.02em;
  backdrop-filter:blur(6px);
}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none;
  box-shadow:0 0 0 0 rgba(226,97,27,.7); animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(226,97,27,0)} 100%{box-shadow:0 0 0 0 rgba(226,97,27,0)}}
.hero .cta-row{display:flex; gap:.7rem; flex-wrap:wrap; margin:1.9rem 0 1.4rem}
.trust{display:flex; gap:1.5rem; flex-wrap:wrap; color:rgba(255,255,255,.72); font-size:.88rem}
.trust span{display:flex; align-items:center; gap:.45rem}
.trust svg{width:16px;height:16px;fill:#64C9A4;flex:none}

/* the live panel ---------------------------------------------------- */
.panel{
  position:relative; border-radius:var(--r-lg); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16); box-shadow:var(--sh-3);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); overflow:hidden;
}
.panel-head{display:flex; align-items:center; gap:.5rem; padding:.8rem 1rem; border-bottom:1px solid rgba(255,255,255,.12)}
.panel-head .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3)}
.panel-tabs{margin-left:auto; display:flex; gap:.25rem}
.panel-tabs button{
  background:none; border:none; cursor:pointer; color:rgba(255,255,255,.6);
  font:600 .74rem/1 inherit; padding:.35rem .6rem; border-radius:999px;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.panel-tabs button.on{background:rgba(255,255,255,.16); color:#fff}
.panel-body{padding:1.1rem}
.p-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1rem}
.p-kpi{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.65rem .75rem}
.p-kpi b{display:block; font-size:1.5rem; line-height:1.1; color:#fff; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.p-kpi span{font-size:.7rem; color:rgba(255,255,255,.6)}
.p-bars{display:flex; align-items:flex-end; gap:.4rem; height:96px; margin-bottom:.4rem}
.p-bars i{
  flex:1; border-radius:5px 5px 0 0; background:linear-gradient(180deg, var(--teal), rgba(7,130,124,.4));
  height:12%; transition:height .7s var(--ease), background .4s var(--ease);
}
.p-bars i.hot{background:linear-gradient(180deg, var(--orange), rgba(226,97,27,.35))}
.p-rows{margin-top:.3rem}
.p-row{
  display:flex; align-items:center; gap:.6rem; padding:.55rem .2rem; font-size:.82rem;
  color:rgba(255,255,255,.88); border-top:1px solid rgba(255,255,255,.09);
}
.p-row .f{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.p-row .tag{font-size:.65rem; font-weight:700; padding:.16rem .5rem; border-radius:999px; color:#fff; flex:none}
.tag.c{background:var(--crit)} .tag.w{background:var(--warn)} .tag.o{background:var(--ok)} .tag.i{background:var(--teal)}
.p-row .when{color:rgba(255,255,255,.45); font-size:.72rem; flex:none}
.p-row.in{animation:rowin .45s var(--ease) both}
@keyframes rowin{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none}}

/* a compass that turns, slowly, behind the panel */
.hero-compass{
  position:absolute; right:-7%; top:50%; width:min(46vw,520px); aspect-ratio:1;
  transform:translateY(-50%); opacity:.07; z-index:-1; animation:spin 90s linear infinite;
}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

/* the strip under the hero ------------------------------------------ */
.marquee{
  background:var(--green-700); color:rgba(255,255,255,.82);
  border-top:1px solid rgba(255,255,255,.08); overflow:hidden; padding:.95rem 0;
}
.marquee-track{display:flex; gap:2.6rem; width:max-content; animation:slide 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{
  display:flex; align-items:center; gap:.5rem; font-size:.84rem; font-weight:600;
  letter-spacing:.04em; white-space:nowrap;
}
.marquee span::before{content:""; width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ----------------------------------------------------------- sections */
section{padding:5rem 0; position:relative}
.section-head{max-width:720px; margin-bottom:2.8rem}
.section-head.center{margin-inline:auto; text-align:center}
.kicker{
  display:inline-flex; align-items:center; gap:.45rem; color:var(--orange);
  font-weight:750; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.7rem;
}
.kicker::before{content:""; width:20px; height:2px; background:var(--orange); border-radius:2px}
.section-head.center .kicker{justify-content:center}
.band{background:var(--paper); border-block:1px solid var(--line)}
.band-dark{background:var(--green-900); color:rgba(255,255,255,.84)}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark .kicker{color:#F0A06A}
.band-dark .kicker::before{background:#F0A06A}

.grid{display:grid; gap:1.1rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem; position:relative; overflow:hidden;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:#D6DED8}
.card h3{margin-bottom:.4rem}
.card p{margin:0; font-size:.95rem}
.ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:1rem;
  background:var(--green-50); color:var(--green);
  transition:transform .26s var(--ease), background .26s var(--ease);
}
.ico svg{width:23px;height:23px}
.card:hover .ico{transform:scale(1.08) rotate(-4deg)}

/* ------------------------------------------- the split comparison

   Not a photo wipe - the two sides say different things, so hiding half
   of one would hide half a sentence. The handle gives one side more of
   the width and the other less, and both stay readable the whole way.
   ------------------------------------------------------------------ */
.compare{
  --split:50%;
  position:relative; display:grid; grid-template-columns:var(--split) 1fr;
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--sh-2); background:var(--paper); user-select:none;
}
.compare-pane{padding:3.4rem 2.4rem 2.4rem; min-width:0}
.compare-pane h3{display:flex; align-items:center; gap:.55rem; font-size:1.12rem; margin-bottom:0}
.compare-pane h3 svg{width:22px;height:22px;flex:none}
.compare-pane ul{margin:1.1rem 0 0; padding-left:1.25rem}
.compare-pane li{margin:.58rem 0; font-size:.95rem}
.compare .before{background:linear-gradient(180deg,#FCF3EF,#FAEDE7)}
.compare .before h3{color:#9A3F28} .compare .before h3 svg{fill:#C0563A}
.compare .after h3{color:var(--green)} .compare .after h3 svg{fill:var(--ok)}
.compare-handle{
  position:absolute; top:0; bottom:0; left:var(--split); width:4px; z-index:3;
  background:linear-gradient(180deg, var(--orange), var(--orange-600));
  transform:translateX(-50%); cursor:ew-resize;
}
.compare-handle::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:var(--orange);
  box-shadow:0 6px 20px rgba(226,97,27,.45), inset 0 0 0 2px rgba(255,255,255,.3);
}
.compare-handle svg{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
  width:20px; height:20px; fill:#fff; pointer-events:none;
}
.compare-handle:focus-visible{outline:none}
.compare-handle:focus-visible::after{box-shadow:0 0 0 5px rgba(226,97,27,.35)}
.compare-label{
  position:absolute; top:1.1rem; z-index:2; font-size:.68rem; font-weight:750;
  letter-spacing:.11em; text-transform:uppercase; padding:.3rem .75rem; border-radius:999px;
  pointer-events:none;
}
.compare-label.l{left:1.4rem; background:#F3D9CF; color:#9A3F28}
.compare-label.r{right:1.4rem; background:var(--green-50); color:var(--green)}

/* ------------------------------------------------- module explorer */
.explorer{display:grid; grid-template-columns:300px 1fr; gap:1.4rem; align-items:start}
.mod-list{
  display:flex; flex-direction:column; gap:.3rem; max-height:560px; overflow-y:auto;
  padding-right:.3rem; scrollbar-width:thin;
}
.mod-list::-webkit-scrollbar{width:5px}
.mod-list::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
.mod-btn{
  display:flex; align-items:center; gap:.75rem; width:100%; text-align:left; cursor:pointer;
  background:none; border:1px solid transparent; border-radius:12px; padding:.6rem .75rem;
  font:600 .92rem/1.3 inherit; color:var(--body);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.mod-btn i{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--green-50); color:var(--green); transition:.2s var(--ease);
}
.mod-btn i svg{width:18px;height:18px}
.mod-btn:hover{background:var(--green-50); transform:translateX(3px)}
.mod-btn.on{background:var(--paper); border-color:var(--line); color:var(--ink); box-shadow:var(--sh-1)}
.mod-btn.on i{background:var(--green); color:#fff; transform:scale(1.06)}
.mod-panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:2rem 2.2rem; box-shadow:var(--sh-1); min-height:420px;
}
.mod-panel .ico{width:54px;height:54px;border-radius:16px}
.mod-panel .ico svg{width:27px;height:27px}
.mod-panel h3{font-size:1.45rem; letter-spacing:-.025em}
.mod-panel .lede{font-size:1.02rem}
.mod-feats{list-style:none; margin:1.4rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.mod-feats li{display:flex; gap:.6rem; align-items:flex-start; font-size:.94rem; color:var(--body)}
.mod-feats svg{width:19px;height:19px;fill:var(--ok);flex:none;margin-top:.15rem}
.fade-swap{animation:fadeswap .36s var(--ease) both}
@keyframes fadeswap{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.mod-count{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; font-weight:700;
  color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.9rem;
}

/* ------------------------------------------------------------- steps */
.steps{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem}
.steps::before{
  content:""; position:absolute; left:6%; right:6%; top:26px; height:2px;
  background:var(--line); z-index:0;
}
.steps .fill{
  position:absolute; left:6%; top:26px; height:2px; width:0; z-index:1;
  background:linear-gradient(90deg, var(--green), var(--orange));
  transition:width 1.2s var(--ease);
}
.step{position:relative; z-index:2; padding-top:4.2rem}
.step::before{
  counter-increment:s; content:counter(s);
  position:absolute; top:0; left:0; width:54px;height:54px;border-radius:50%;
  background:var(--paper); border:2px solid var(--line); color:var(--muted);
  display:grid;place-items:center; font-weight:750; font-size:1.1rem;
  transition:.4s var(--ease);
}
.steps{counter-reset:s}
.step.lit::before{background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 10px 26px rgba(1,75,49,.28)}
.step h3{margin-bottom:.35rem}
.step p{font-size:.95rem; margin:0}

/* ------------------------------------------------------------- stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; text-align:center}
.stat b{display:block; font-size:clamp(2.1rem,4vw,3rem); line-height:1; color:#fff; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.stat span{font-size:.9rem; color:rgba(255,255,255,.7); display:block; margin-top:.5rem}

/* ------------------------------------------------------------- chips */
.chips{display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center}
.chip{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff;
  border-radius:999px; padding:.5rem 1rem; font-size:.86rem; font-weight:600;
  transition:background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover{background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.4); transform:translateY(-2px)}

/* -------------------------------------------------------- industries */
.ind{
  position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem; overflow:hidden; transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.ind:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
/* the glow follows the pointer, set from script */
.ind::before{
  content:""; position:absolute; width:260px;height:260px; border-radius:50%; pointer-events:none;
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(7,130,124,.14), transparent 65%);
  opacity:0; transition:opacity .3s var(--ease);
}
.ind:hover::before{opacity:1}
.ind h3{font-size:1rem; position:relative}
.ind p{font-size:.92rem; margin:0; position:relative}

/* --------------------------------------------------------------- faq */
.faq{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:.7rem; overflow:hidden; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq.open{border-color:#CFDBD4; box-shadow:var(--sh-1)}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:none; cursor:pointer; text-align:left;
  padding:1.1rem 1.3rem; font:650 1rem/1.4 inherit; color:var(--ink);
}
.faq-q .pm{
  width:28px;height:28px;border-radius:50%;background:var(--green-50);color:var(--green);
  display:grid;place-items:center;flex:none;font-size:1.1rem;line-height:1;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.faq.open .faq-q .pm{transform:rotate(45deg); background:var(--orange); color:#fff}
.faq-a{max-height:0; overflow:hidden; transition:max-height .36s var(--ease)}
.faq-a p{margin:0; padding:0 1.3rem 1.25rem; font-size:.96rem}

/* ----------------------------------------------------------- contact */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:2.6rem; align-items:start}
.contact-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:2rem; box-shadow:var(--sh-2);
}
.field{margin-bottom:1.05rem; position:relative}
.field label{display:block; font-size:.85rem; font-weight:650; margin-bottom:.4rem; color:var(--ink)}
.field .req{color:var(--orange)}
.field input,.field select,.field textarea{
  width:100%; padding:.78rem .9rem; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#fff; color:var(--ink); font:inherit; font-size:.95rem;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 4px rgba(1,75,49,.1);
}
.field.bad input,.field.bad textarea,.field.bad select{border-color:var(--crit)}
.field.good input,.field.good textarea{border-color:var(--ok)}
.field textarea{min-height:132px; resize:vertical}
.field .hint{font-size:.8rem; color:var(--muted); margin-top:.35rem; display:block}
.field .err{font-size:.8rem; color:var(--crit); margin-top:.35rem; display:none}
.field.bad .err{display:block}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:0 1rem}
.trap{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{display:flex; gap:.65rem; align-items:flex-start; font-size:.89rem}
.consent input{width:auto; margin-top:.25rem; accent-color:var(--green)}
.counter{position:absolute; right:.2rem; top:.1rem; font-size:.74rem; color:var(--muted)}
.alert{border-radius:var(--r-sm); padding:.95rem 1.1rem; margin-bottom:1.2rem; font-size:.95rem;
  border:1px solid; border-left-width:4px}
.alert-success{background:#EAF4EF; border-color:#BFDCCC; color:#23543C}
.alert-error{background:#FBEDED; border-color:#EFCCCC; color:#8A2C2C}
.contact-list{list-style:none; margin:1.6rem 0 0; padding:0}
.contact-list li{display:flex; gap:.85rem; align-items:flex-start; margin-bottom:1.1rem; font-size:.96rem}
.contact-list .ico{width:40px;height:40px;margin:0;flex:none;border-radius:12px}
.contact-list .ico svg{width:19px;height:19px}
.contact-list b{display:block; font-size:.78rem; color:var(--muted); font-weight:650;
  letter-spacing:.05em; text-transform:uppercase}

/* ------------------------------------------------------------ footer */
.site-foot{background:var(--green-900); color:rgba(255,255,255,.68); padding:4rem 0 1.6rem; font-size:.93rem}
.site-foot h4{color:#fff; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem}
.site-foot a{color:rgba(255,255,255,.68)}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:2.4rem}
.foot-brand img{height:46px}
.foot-brand p{max-width:34ch; margin-top:1.1rem; color:rgba(255,255,255,.58)}
.foot-list{list-style:none; margin:0; padding:0}
.foot-list li{margin:.5rem 0}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:2.8rem; padding-top:1.3rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  color:rgba(255,255,255,.45); font-size:.86rem;
}

/* ------------------------------------------------------- back to top */
.totop{
  position:fixed; right:22px; bottom:22px; z-index:70; width:46px;height:46px;border-radius:50%;
  background:var(--green); color:#fff; border:none; cursor:pointer; display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(1,75,49,.35);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.totop.on{opacity:1; visibility:visible; transform:none}
.totop:hover{background:var(--green-700)}
.totop svg{width:20px;height:20px;fill:currentColor}

/* ------------------------------------------------- reveal on scroll */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-reveal].seen{opacity:1; transform:none}

/* ------------------------------------------------------- responsive */
@media (max-width:1020px){
  .hero-grid,.contact-grid,.explorer{grid-template-columns:1fr}
  .explorer{gap:1rem}
  .mod-list{flex-direction:row; overflow-x:auto; overflow-y:hidden; max-height:none; padding-bottom:.5rem}
  .mod-btn{flex:none; white-space:nowrap}
  .mod-panel{min-height:0}
  .g4,.stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps::before,.steps .fill{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero-compass{display:none}
}
@media (max-width:820px){
  .site-nav{
    display:none; position:absolute; top:var(--head-h); left:14px; right:14px;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
    flex-direction:column; align-items:stretch; gap:0; padding:.6rem; box-shadow:var(--sh-2);
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:.75rem .9rem; border-radius:10px; color:var(--body)!important}
  .site-nav a::after{display:none}
  .site-nav a:hover{background:var(--green-50)}
  .head-cta{display:none}
  .site-nav .head-cta{display:flex; flex-direction:column; align-items:stretch; margin:.5rem 0 0; gap:.45rem}
  .nav-toggle{display:block}
  .g2,.g3,.g4,.steps,.stats,.f2,.mod-feats{grid-template-columns:1fr}
  section{padding:3.4rem 0}
  .hero{padding-top:calc(var(--head-h) + 2rem); padding-bottom:3.4rem}
  .compare{grid-template-columns:1fr!important}
  .compare-handle,.compare-label{display:none}
  .compare-pane{padding:1.5rem}
  .mod-panel{padding:1.5rem}
  .contact-card{padding:1.4rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-reveal]{opacity:1; transform:none}
  .hero .aurora{animation:none}
}