/* ============================================================
   CYBER DEFENCE INTERNATIONAL CORP. — dark-first editorial
   ============================================================ */
:root{
  --bg:#050505;
  --bg-2:#0a0b0a;
  --ink:#f2f3f2;
  --ink-dim:rgba(242,243,242,.55);
  --ink-faint:rgba(242,243,242,.28);
  --line:rgba(242,243,242,.14);
  --emerald:#14c38e;
  --emerald-deep:#0b6b4f;
  --silver-1:#f4f6f6;
  --silver-2:#9aa1a6;
  --font-d:'Inter Tight',system-ui,-apple-system,sans-serif;
  --font-m:'IBM Plex Mono',ui-monospace,monospace;
  --gutter:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.35,.17,.25,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-d);font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;line-height:1.5;
}
::selection{background:var(--emerald);color:#04110c}
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a2d2b;border:1px solid var(--bg)}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  color:var(--emerald);transform:translate(-50%,-50%);
  transition:transform .25s var(--ease),opacity .3s;
  mix-blend-mode:screen;opacity:0;
}
.cursor.is-on{opacity:1}
.cursor.is-hover{transform:translate(-50%,-50%) scale(.7)}
.cursor svg{display:block}
@media (hover:none){.cursor{display:none}}

/* ---------- header ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  mix-blend-mode:difference;
}
.brand-logo{height:40px;width:auto;mix-blend-mode:screen}
.site-nav{display:flex;gap:clamp(14px,2.4vw,38px);align-items:center}
.site-nav a{
  font-family:var(--font-m);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink);
  position:relative;padding:6px 0;transition:color .3s;
}
.site-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--emerald);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.site-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{border:1px solid var(--line);padding:8px 16px !important;border-radius:99px}
.nav-cta:hover{border-color:var(--emerald)}

/* ---------- vertical edges ---------- */
.edge{position:fixed;top:0;bottom:0;z-index:90;pointer-events:none;display:flex;align-items:center}
.edge-left{left:14px}
.edge-right{right:10px}
.edge-label{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--font-m);font-size:10px;letter-spacing:.4em;
  color:var(--ink-faint);text-transform:uppercase;white-space:nowrap;
}
.telemetry{
  writing-mode:vertical-rl;
  font-family:var(--font-m);font-size:9px;letter-spacing:.32em;
  color:rgba(20,195,142,.5);text-transform:uppercase;white-space:nowrap;
}
@media(max-width:900px){.edge{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-globe{
  position:absolute;top:52%;right:-4vw;transform:translateY(-50%);
  width:clamp(460px,50vw,940px);pointer-events:none;mix-blend-mode:screen;
  opacity:0;transition:opacity 1.6s var(--ease);
}
.hero-globe.in{opacity:1}
.hero-globe img{width:100%;height:auto;animation:globeFloat 9s ease-in-out infinite}
@keyframes globeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.hero-fade{
  position:absolute;inset:auto 0 0 0;height:34vh;pointer-events:none;
  background:linear-gradient(to top,var(--bg),transparent);
}
.hero-inner{
  position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gutter);padding-bottom:4vh;
}
.kicker{
  font-family:var(--font-m);font-size:11px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--emerald);margin-bottom:2.2vh;
}
.hero-title{
  font-weight:200;text-transform:uppercase;
  font-size:clamp(2.6rem,8.6vw,8.8rem);
  line-height:1;letter-spacing:-.01em;
}
.hero-title .line{display:block;overflow:hidden}
.hero-title em{font-style:normal}
.silver{
  background:linear-gradient(105deg,var(--silver-1) 20%,var(--silver-2) 55%,var(--silver-1) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  margin-top:3.4vh;font-size:clamp(.95rem,1.3vw,1.2rem);
  color:var(--ink-dim);font-weight:300;letter-spacing:.02em;
}
.hero-foot{position:relative;z-index:2;display:flex;align-items:flex-end;gap:24px;padding:0 var(--gutter) 26px}
.hero-line{width:1px;height:14vh;background:linear-gradient(to bottom,transparent,var(--emerald))}
.ticker{flex:1;overflow:hidden;border-top:1px solid var(--line);padding-top:12px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;gap:56px;white-space:nowrap;width:max-content;
  font-family:var(--font-m);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);
  animation:tick 42s linear infinite}
.ticker-track b{color:var(--emerald);font-weight:500}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- generic section ---------- */
.section{
  position:relative;padding:12vh var(--gutter) 10vh;
  border-top:1px solid var(--line);
}
.sec-head{margin-bottom:6vh;max-width:1400px}
.sec-no{
  font-family:var(--font-m);font-size:11px;letter-spacing:.4em;
  color:var(--emerald);display:block;margin-bottom:2.4vh;
}
.sec-no::before{content:"——  ";color:var(--ink-faint)}
.sec-title{
  font-weight:200;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(2rem,5.4vw,5.2rem);line-height:1.02;
}
.sec-title .dim{color:var(--ink-faint)}
.sec-lede{margin-top:3vh;max-width:56ch;color:var(--ink-dim);font-size:clamp(.95rem,1.15vw,1.1rem)}
.mono-label{
  font-family:var(--font-m);font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.4rem;display:block;
}
.body-lg{font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:300;line-height:1.55;color:var(--ink)}
.note{font-family:var(--font-m);font-size:11px;letter-spacing:.12em;color:var(--emerald);margin-top:2rem;text-transform:uppercase}

/* ---------- visual blocks ---------- */
.shift-visual{
  position:relative;margin-bottom:7vh;border:1px solid var(--line);overflow:hidden;
}
.shift-visual img{width:100%;height:clamp(300px,52vh,560px);object-fit:cover;display:block;
  transform:scale(1.06);transition:transform 1.4s var(--ease);filter:saturate(.9)}
.shift-visual:hover img{transform:scale(1)}
.shift-visual-cap{
  position:absolute;left:0;bottom:0;margin:0;padding:14px 20px;
  background:rgba(5,5,5,.72);backdrop-filter:blur(6px);color:var(--emerald);
}

/* ---------- operations ---------- */
.ops-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:start}
@media(max-width:900px){.ops-grid{grid-template-columns:1fr}}
.ops-visual{position:relative;border:1px solid var(--line);overflow:hidden}
.ops-visual img{width:100%;height:100%;min-height:380px;object-fit:cover;display:block;filter:saturate(.9)}
.ops-visual-tag{
  position:absolute;left:0;top:0;margin:0;padding:12px 18px;
  background:rgba(5,5,5,.72);backdrop-filter:blur(6px);color:var(--emerald);
}
.industries-block{margin-top:9vh}

/* ---------- solutions explorer ---------- */
.solutions{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:start}
@media(max-width:900px){.solutions{grid-template-columns:1fr}}
.sol-index{border-top:1px solid var(--line)}
.sol-item{
  width:100%;text-align:left;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  align-items:baseline;column-gap:1.2rem;padding:1.15rem .2rem;
  border-bottom:1px solid var(--line);position:relative;
  transition:padding-left .45s var(--ease);
}
.sol-item i{
  grid-row:1/3;grid-column:2;align-self:center;
  font-family:var(--font-m);font-style:normal;font-size:10px;letter-spacing:.3em;color:var(--ink-faint);
}
.sol-name{
  font-weight:300;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.25rem,2.1vw,1.9rem);line-height:1.05;color:var(--ink-dim);
  transition:color .35s;
}
.sol-name sup{font-size:.45em;letter-spacing:0}
.sol-name .sol-dot{color:var(--emerald)}
.sol-desc{
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.45rem;transition:color .35s;
}
.sol-item::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--emerald);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.sol-item:hover .sol-name{color:var(--ink)}
.sol-item.is-active{padding-left:1.3rem}
.sol-item.is-active .sol-name{color:var(--ink)}
.sol-item.is-active .sol-desc{color:var(--emerald)}
.sol-item.is-active::after{transform:scaleY(1)}

.sol-panel{
  position:relative;border:1px solid var(--line);background:var(--bg-2);
  padding:clamp(1.6rem,3vw,3rem);min-height:430px;
}
.sol-panel.swap .sol-tag,.sol-panel.swap .sol-tagline,.sol-panel.swap .sol-caps,.sol-panel.swap .sol-pop{
  opacity:0;transform:translateY(10px);
}
.sol-tag,.sol-tagline,.sol-caps,.sol-pop{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.sol-tag{
  font-style:normal;font-family:var(--font-m);font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--emerald);display:block;
}
.sol-tagline{
  font-weight:200;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.4rem);
  line-height:1.05;margin:1.1rem 0 2rem;
}
.sol-caps{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1rem,2vw,2rem)}
@media(max-width:520px){.sol-caps{grid-template-columns:1fr}}
.sol-caps li{
  font-size:clamp(.85rem,1vw,.98rem);color:var(--ink-dim);
  padding:.7rem 0 .7rem 1.4rem;border-top:1px solid var(--line);position:relative;
}
.sol-caps li::before{
  content:"";position:absolute;left:0;top:50%;width:10px;height:1px;background:var(--emerald);
  transform:translateY(-50%);
}
.sol-pop-label{margin:2.2rem 0 .6rem;color:var(--emerald)}
.sol-pop{display:flex;flex-wrap:wrap;gap:.55rem}
.sol-pop li{
  font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);border:1px solid var(--line);padding:.55rem .9rem;border-radius:99px;
  transition:.3s;
}
.sol-pop li:hover{border-color:var(--emerald);color:var(--ink)}

/* ---------- credentials ---------- */
.cred-strip{
  margin-top:7vh;display:flex;flex-wrap:wrap;gap:.6rem;
}
.cred-strip span{
  font-family:var(--font-m);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--line);padding:.7rem 1.1rem;border-radius:99px;
  transition:.3s;
}
.cred-strip span:hover{border-color:var(--emerald);color:var(--emerald)}

/* ---------- deployment strip ---------- */
.deploy-strip{
  margin-top:7vh;border-top:1px solid var(--line);padding-top:2rem;
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:baseline;
}
.deploy-strip .mono-label{margin:0;color:var(--emerald)}
.deploy-strip p{color:var(--ink-dim);font-size:clamp(.95rem,1.2vw,1.15rem);max-width:70ch}
@media(max-width:700px){.deploy-strip{grid-template-columns:1fr;gap:.8rem}}

/* ---------- platform rail ---------- */
.rail{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(2rem,5vw,6rem);align-items:stretch}
@media(max-width:900px){.rail{grid-template-columns:1fr}}
.rail-tabs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.rail-tab{
  text-align:left;padding:1.8rem .2rem;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:1.4rem;align-items:baseline;position:relative;
  transition:padding-left .45s var(--ease);
}
.rail-tab em{grid-row:1/3;font-style:normal;font-family:var(--font-m);font-size:11px;letter-spacing:.3em;color:var(--ink-faint)}
.rail-tab strong{
  font-weight:200;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.6rem);
  line-height:1;color:var(--ink-faint);transition:color .35s;
}
.rail-tab span{grid-column:2;font-family:var(--font-m);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint);opacity:0;transform:translateX(-8px);transition:.4s var(--ease)}
.rail-tab::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--emerald);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.rail-tab:hover strong{color:var(--ink)}
.rail-tab.is-active{padding-left:1.4rem}
.rail-tab.is-active strong{color:var(--ink)}
.rail-tab.is-active span{opacity:1;transform:none;color:var(--emerald)}
.rail-tab.is-active::after{transform:scaleY(1)}
.rail-stage{
  position:relative;min-height:420px;border:1px solid var(--line);
  background:var(--bg-2);overflow:hidden;
}
.rail-canvas{position:absolute;inset:0;width:100%;height:100%}
.rail-panel{
  position:absolute;inset:0;padding:clamp(1.4rem,3vw,3rem);
  display:flex;align-items:flex-end;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s;
}
.rail-panel.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .15s,transform .6s var(--ease) .15s,visibility 0s}
.rail-panel ul{width:100%}
.rail-panel li{
  font-family:var(--font-m);font-size:clamp(11px,1vw,13px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);padding:.9rem 0;border-top:1px solid var(--line);
  background:linear-gradient(to right,rgba(5,5,5,.75),transparent);
}

/* ---------- steps ---------- */
.steps{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:140px 1fr 1.2fr;gap:clamp(1rem,3vw,3rem);
  align-items:baseline;padding:2.2rem .2rem;border-bottom:1px solid var(--line);
  transition:background .4s,padding-left .45s var(--ease);
}
.step:hover{background:var(--bg-2);padding-left:1.4rem}
.step em{font-style:normal;font-family:var(--font-m);font-size:11px;letter-spacing:.3em;color:var(--emerald);text-transform:uppercase}
.step strong{font-weight:300;text-transform:uppercase;font-size:clamp(1.2rem,2.2vw,2rem);line-height:1.05}
.step p{color:var(--ink-dim);font-size:clamp(.9rem,1.05vw,1.05rem);max-width:46ch}
@media(max-width:800px){.step{grid-template-columns:1fr;gap:.5rem}}

/* ---------- industries ---------- */
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.industry-grid li{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.6rem 1.2rem;font-size:clamp(.8rem,1vw,1rem);text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-dim);position:relative;overflow:hidden;transition:color .35s;z-index:0;
  min-height:110px;display:flex;align-items:flex-end;
}
.industry-grid li::before{
  content:"";position:absolute;inset:0;background:var(--emerald);
  transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1;
}
.industry-grid li:hover{color:#04110c}
.industry-grid li:hover::before{transform:translateY(0)}
@media(max-width:700px){.industry-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- scenario ---------- */
.scenario{border:1px solid var(--line);background:var(--bg-2);padding:clamp(1.4rem,3.5vw,3.5rem);position:relative}
.sc-progress{position:absolute;top:0;left:0;right:0;height:2px;background:var(--line)}
.sc-progress span{display:block;height:100%;width:25%;background:var(--emerald);transition:width .6s var(--ease)}
.sc-stage{position:relative;min-height:220px}
.sc-card{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
  opacity:0;visibility:hidden;transform:translateX(30px);
  transition:.55s var(--ease);
}
.sc-card.is-active{opacity:1;visibility:visible;transform:none}
.sc-card em{font-style:normal;font-family:var(--font-m);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--emerald)}
.sc-card p{font-size:clamp(1.3rem,2.6vw,2.3rem);font-weight:200;line-height:1.25;max-width:26ch;text-transform:uppercase}
.sc-nav{display:flex;align-items:center;gap:1.6rem;margin-top:2.4rem}
.sc-nav button{
  width:52px;height:52px;border:1px solid var(--line);border-radius:50%;
  font-size:18px;color:var(--ink);transition:.35s;display:grid;place-items:center;
}
.sc-nav button:hover{border-color:var(--emerald);color:var(--emerald);transform:scale(1.08)}
#scCount{margin:0}

/* ---------- contact ---------- */
.contact{min-height:72vh;display:flex;flex-direction:column;justify-content:center}
.contact-title{
  font-weight:200;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(2.4rem,7vw,7.4rem);line-height:1;margin:1.6rem 0 4rem;
}
.contact-links{display:flex;flex-direction:column;border-top:1px solid var(--line);max-width:1100px}
.big-link{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.8rem .2rem;border-bottom:1px solid var(--line);
  font-size:clamp(1rem,2.2vw,1.9rem);font-weight:300;position:relative;overflow:hidden;
}
.big-link .bl-text{transition:transform .5s var(--ease);word-break:break-all}
.big-link .bl-arrow{
  font-size:1.4em;transform:rotate(-45deg);color:var(--emerald);
  transition:transform .5s var(--ease);flex-shrink:0;
}
.big-link::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);z-index:-1;
}
.big-link:hover{color:#0a0a0a}
.big-link:hover::before{transform:scaleX(1)}
.big-link:hover .bl-text{transform:translateX(1.2rem)}
.big-link:hover .bl-arrow{transform:rotate(0)}
.big-link:hover .bl-arrow{color:var(--emerald-deep)}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--line);padding:8vh var(--gutter) 5vh;
  display:flex;flex-direction:column;gap:3rem;
}
.foot-logo{width:min(560px,80vw);opacity:.95;mix-blend-mode:screen}
.foot-meta{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--font-m);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);
}
.foot-meta .mono-label{margin:0;color:var(--emerald)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .ticker-track{animation:none}
}