:root{
  --bg:#05080d;
  --bg-soft:#09111b;
  --panel:#0c1521;
  --panel-2:#101c2b;
  --line:rgba(255,255,255,.11);
  --text:#f4f7fb;
  --muted:#9ba8b7;
  --blue:#1988ff;
  --blue-light:#65b2ff;
  --radius:22px;
  --shadow:0 26px 70px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:linear-gradient(180deg,#03060a,#07101a 52%,#04080d);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
}
a{text-decoration:none;color:inherit}
button{font:inherit}
.page-glow{position:fixed;border-radius:50%;filter:blur(130px);pointer-events:none;z-index:-1}
.page-glow-one{width:430px;height:430px;background:rgba(19,105,198,.17);top:150px;right:-190px}
.page-glow-two{width:360px;height:360px;background:rgba(34,137,255,.1);bottom:0;left:-190px}
.site-header{
  position:absolute;z-index:20;top:0;left:0;width:100%;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:28px clamp(22px,4vw,68px)
}
.brand,.footer-brand{display:inline-flex;flex-direction:column;line-height:1;width:max-content}
.brand-main{font-size:clamp(1.6rem,2.4vw,2.35rem);font-weight:800;letter-spacing:.08em}
.brand-sub{font-size:.6rem;font-weight:700;letter-spacing:.43em;color:var(--blue-light);margin-top:7px}
.site-nav{display:flex;gap:36px;font-size:.88rem;font-weight:600}
.site-nav a{color:#d7dee7;transition:.2s}
.site-nav a:hover{color:var(--blue-light)}
.status-pill{
  justify-self:end;padding:10px 16px;border:1px solid rgba(89,160,231,.5);
  background:rgba(4,10,17,.68);backdrop-filter:blur(14px);
  border-radius:999px;font-size:.78rem;color:#dfe9f4
}
.status-pill i{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 15px var(--blue)}
.nav-toggle{display:none}
.hero{
  position:relative;min-height:820px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.62fr);
  align-items:center;gap:50px;padding:140px clamp(24px,4.5vw,74px) 120px;overflow:hidden
}
/* ---------- LOGO ---------- */

.site-logo{

    height:108px;
    width:auto;
    display:block;
    transition:.35s ease;

}

.site-logo:hover{

    transform:translateY(-2px);

}

.footer-logo{

    height:98px;
    width:auto;
    opacity:.95;

}

/* Mobile */

@media(max-width:768px){

.site-logo{

    height:82px;

}

.footer-logo{

    height:76px;

}

}
.hero-image{
  position:absolute;inset:0 0 0 34%;
  background:url("../img/hero-workshop.jpg") center/cover no-repeat
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,#03070b 0%,rgba(3,7,11,.98) 31%,rgba(3,7,11,.78) 50%,rgba(3,7,11,.22) 78%,rgba(3,7,11,.42) 100%),
    linear-gradient(180deg,rgba(2,5,8,.12),rgba(2,5,8,.18) 52%,#05090f 100%)
}
.hero-copy,.hero-panel{position:relative;z-index:2}
.hero-copy{max-width:760px}
.eyebrow{margin:0;color:var(--blue-light);text-transform:uppercase;letter-spacing:.07em;font-size:.77rem;font-weight:700}
.hero h1{
  margin:15px 0 24px;max-width:780px;font-size:clamp(3.3rem,6vw,6rem);
  line-height:.96;letter-spacing:-.055em
}
.hero-lead{max-width:660px;margin:0;color:#c0c9d3;font-size:1.05rem;line-height:1.75}
.hero-actions{display:flex;gap:14px;margin-top:30px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 23px;border-radius:999px;font-size:.88rem;font-weight:700}
.button.primary{background:linear-gradient(135deg,#177ee8,#2b98ff);box-shadow:0 14px 30px rgba(24,132,246,.25)}
.button.ghost{border:1px solid var(--line);background:rgba(7,14,23,.58);backdrop-filter:blur(12px)}
.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);max-width:650px;margin-top:45px;padding-top:25px;border-top:1px solid var(--line)}
.hero-metrics div{display:flex;flex-direction:column;gap:5px}
.hero-metrics strong{font-size:1.25rem}
.hero-metrics span{color:var(--muted);font-size:.76rem}
.glass{
  background:linear-gradient(180deg,rgba(14,25,39,.8),rgba(6,12,20,.86));
  border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(18px);
  box-shadow:var(--shadow)
}
.hero-panel{align-self:end;margin-bottom:34px;padding:24px;border-radius:var(--radius)}
.panel-topline{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:.84rem;font-weight:700}
.live-pill{padding:7px 10px;border-radius:999px;background:rgba(26,135,255,.12);color:var(--blue-light);font-size:.68rem}
.workflow{display:grid;gap:10px;padding:20px 0}
.workflow-step{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;padding:12px;border-radius:12px;background:rgba(255,255,255,.035);color:#98a5b3;font-size:.78rem}
.workflow-step b{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;color:#6e7d8e}
.workflow-step.active{color:#ecf5ff;border:1px solid rgba(30,134,245,.25);background:rgba(23,111,205,.11)}
.workflow-step.active b{border-color:rgba(48,151,255,.55);color:var(--blue-light)}
.panel-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.panel-stats div{padding:13px;border-radius:12px;background:rgba(255,255,255,.04)}
.panel-stats span{display:block;color:var(--muted);font-size:.66rem;margin-bottom:5px}
.panel-stats strong{font-size:1.15rem}
.section-shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.intro{display:grid;grid-template-columns:1.3fr .7fr;gap:70px;align-items:end;padding:105px 0 42px}
.intro h2,.why h2,.vision h2{margin:13px 0 0;font-size:clamp(2.2rem,4.2vw,4rem);line-height:1.03;letter-spacing:-.045em}
.intro>p{margin:0;color:var(--muted);line-height:1.75}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product-card{
  min-height:410px;padding:28px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(15,27,42,.95),rgba(7,14,23,.96));
  border:1px solid var(--line);box-shadow:0 18px 48px rgba(0,0,0,.2)
}
.product-card.featured{background:linear-gradient(180deg,rgba(16,38,64,.97),rgba(8,18,30,.98));border-color:rgba(36,140,251,.38)}
.product-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:13px;background:#0a2039;border:1px solid rgba(37,143,255,.45);color:var(--blue-light);font-weight:800}
.product-kicker{display:block;margin:26px 0 9px;color:var(--blue-light);font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.product-card h3{margin:0 0 14px;font-size:1.4rem}
.product-card p{margin:0;color:#b4bfca;font-size:.87rem;line-height:1.65}
.product-card ul{margin:25px 0 0;padding:0;list-style:none;display:grid;gap:12px;color:#8996a5;font-size:.79rem}
.product-card li:before{content:"";display:inline-block;width:6px;height:6px;margin-right:9px;border-radius:50%;background:var(--blue)}
.why{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:120px 0}
.why-image{position:relative}
.why-image:after{content:"";position:absolute;inset:28px -24px -24px 28px;border:1px solid rgba(42,139,239,.22);border-radius:28px;z-index:-1}
.why-image img{display:block;width:100%;aspect-ratio:1.2/1;object-fit:cover;border-radius:28px;border:1px solid var(--line);box-shadow:var(--shadow)}
.why-copy>p:not(.eyebrow){color:var(--muted);line-height:1.75}
.reason-list{display:grid;gap:14px;margin-top:30px}
.reason-list>div{display:grid;grid-template-columns:48px 1fr;gap:15px;padding:17px;border-radius:15px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.065)}
.reason-list b{color:var(--blue-light);font-size:.75rem}
.reason-list strong,.reason-list small{display:block}
.reason-list small{margin-top:6px;color:var(--muted);line-height:1.45}
.vision{padding-bottom:110px}
.vision-card{
  padding:clamp(35px,6vw,74px);text-align:center;border-radius:30px;
  background:radial-gradient(circle at 50% 0,rgba(31,124,224,.18),transparent 40%),linear-gradient(180deg,#0d1724,#07101a);
  border:1px solid var(--line);box-shadow:var(--shadow)
}
.vision-card h2{max-width:850px;margin:15px auto 22px}
.vision-card>p:not(.eyebrow){max-width:760px;margin:0 auto;color:var(--muted);line-height:1.75}
.roadmap{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:50px}
.roadmap:before{content:"";position:absolute;left:8%;right:8%;top:8px;height:2px;background:#263240}
.roadmap div{position:relative;display:grid;gap:12px;justify-items:center;color:#758291;font-size:.73rem}
.roadmap span{position:relative;z-index:2;width:17px;height:17px;border-radius:50%;background:#1b2633;border:4px solid #0c1622}
.roadmap .done span,.roadmap .current span{background:var(--blue);box-shadow:0 0 14px rgba(25,136,255,.75)}
.roadmap .done,.roadmap .current{color:#dbe8f4}
.site-footer{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:32px clamp(22px,4vw,68px);border-top:1px solid var(--line);color:#7c8997;font-size:.76rem}
.site-footer p{margin:0;line-height:1.55}
.footer-brand .brand-main{font-size:1.85rem;color:#fff}
.copyright{text-align:right}
@media(max-width:1000px){
  .site-header{grid-template-columns:1fr auto}
  .status-pill{display:none}
  .nav-toggle{display:grid;gap:6px;width:42px;height:42px;place-content:center;border:1px solid var(--line);border-radius:12px;background:rgba(8,15,24,.7);color:white}
  .nav-toggle span{width:19px;height:2px;background:white;transition:.2s}
  .site-nav{position:absolute;top:82px;left:22px;right:22px;display:none;flex-direction:column;gap:0;padding:12px;border-radius:16px;background:#0a121d;border:1px solid var(--line);box-shadow:var(--shadow)}
  .site-nav.open{display:flex}
  .site-nav a{padding:14px}
  .hero{grid-template-columns:1fr;min-height:900px;align-items:end}
  .hero-image{inset:0;background-position:62% center}
  .hero-overlay{background:linear-gradient(180deg,rgba(2,5,8,.28),rgba(2,5,8,.64) 38%,#05090f 80%)}
  .hero-copy{padding-top:100px}
  .hero-panel{max-width:580px;width:100%;justify-self:start;margin:0}
  .intro{grid-template-columns:1fr;gap:20px}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:1fr}
}
@media(max-width:650px){
  .site-header{padding:20px}
  .hero{padding:125px 20px 90px;min-height:960px}
  .hero h1{font-size:clamp(3rem,14vw,4.5rem)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-metrics{gap:10px}
  .hero-metrics span{font-size:.67rem}
  .panel-stats{grid-template-columns:1fr}
  .section-shell{width:min(100% - 28px,1180px)}
  .intro{padding-top:85px}
  .product-grid{grid-template-columns:1fr}
  .product-card{min-height:auto}
  .why{padding:90px 0}
  .roadmap{grid-template-columns:1fr;justify-items:start;text-align:left}
  .roadmap:before{left:8px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .roadmap div{grid-template-columns:18px 1fr;justify-items:start;align-items:center}
  .site-footer{grid-template-columns:1fr;text-align:left}
  .copyright{text-align:left}
}