
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root{
  --ink:#17191c;
  --muted:#686e76;
  --line:#deded8;
  --paper:#f7f6f2;
  --white:#fff;
  --accent:#b8d62f;
  --accent-dark:#6e8012;
  --dark:#101216;
  --dark-2:#17191e;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.site-header{height:78px;background:rgba(247,246,242,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;backdrop-filter:blur(12px)}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.logo-mark{width:38px;height:38px;background:var(--ink);color:var(--accent);display:grid;place-items:center;font:800 12px Manrope;border-radius:5px}
.logo-name{font:800 12px Manrope;letter-spacing:.055em}
.logo-sub{font-size:8px;color:#8b8f95;letter-spacing:.1em;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:27px}
.nav-links a{font:600 11px Manrope;color:#555b63}
.nav-links a:hover{color:#111}
.nav-contact{padding:11px 16px;border:1px solid #bfc0ba;border-radius:4px}
.menu{display:none;background:none;border:0;font-size:24px}
.hero{background:var(--dark);color:#fff;padding:112px 0 96px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:85px;align-items:center}
.eyebrow{font:700 9px Manrope;letter-spacing:.19em;text-transform:uppercase;color:#8e959e}
.eyebrow::before{content:"";display:inline-block;width:7px;height:7px;background:var(--accent);margin-right:9px;vertical-align:1px}
.hero h1{font:800 clamp(50px,6.5vw,82px)/.99 Manrope;letter-spacing:-.065em;margin:22px 0 24px;max-width:800px}
.hero h1 span{color:var(--accent)}
.hero-copy{font-size:16px;line-height:1.85;color:#aeb4bc;max-width:650px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:4px;font:700 10px Manrope;letter-spacing:.01em}
.btn-primary{background:var(--accent);color:#101216}
.btn-dark{border:1px solid #3b3e45;color:#fff}
.hero-card{border:1px solid #30343a;background:#17191e;padding:27px}
.hero-card-top{display:flex;justify-content:space-between;color:#727982;font:700 8px Manrope;letter-spacing:.13em}
.hero-card-status{color:var(--accent)}
.hero-card-main{height:235px;margin:22px 0;display:grid;place-items:center;border:1px solid #292d33;background:#111318}
.sg{font:800 82px Manrope;color:var(--accent);letter-spacing:-.13em}
.hero-info{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #30343a}
.hero-info div{padding:15px 0;border-bottom:1px solid #30343a}
.hero-info div:nth-child(odd){margin-right:14px}
.hero-info div:nth-child(even){padding-left:14px;border-left:1px solid #30343a}
.hero-info small{display:block;color:#6e757e;font:700 8px Manrope;letter-spacing:.12em}
.hero-info strong{display:block;color:#f1f2f3;font:700 12px Manrope;margin-top:5px}
.section{padding:92px 0}
.section-white{background:#fff}
.section-dark{background:var(--dark);color:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:start}
.section h2{font:800 clamp(36px,4.8vw,58px)/1.03 Manrope;letter-spacing:-.055em;margin:12px 0 22px}
.section h2 span{color:var(--accent-dark)}
.lead{font-size:19px;line-height:1.75;color:#41464d}
.body{font-size:14px;line-height:1.9;color:var(--muted)}
.fact-box{border-top:2px solid var(--ink)}
.fact{padding:20px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px}
.fact small{font:700 8px Manrope;letter-spacing:.13em;color:#8a8e94}
.fact strong{font:700 13px Manrope;text-align:right}
.portfolio-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:34px}
.portfolio-head .body{max-width:470px}
.products{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.product{background:#fff;border:1px solid var(--line)}
.product-top{height:210px;background:#12151a;color:var(--accent);display:flex;align-items:end;padding:25px}
.product:nth-child(2) .product-top{background:#1b2630}
.product:nth-child(3) .product-top{background:#e7e5ee;color:#292731}
.product:nth-child(4) .product-top{background:#dce8e0;color:#213329}
.product-code{font:800 56px Manrope;letter-spacing:-.1em}
.product-body{padding:26px}
.product-tag{font:700 8px Manrope;letter-spacing:.15em;color:#8a8e94}
.product h3{font:800 29px Manrope;letter-spacing:-.04em;margin:9px 0}
.product p{font-size:13px;line-height:1.8;color:#71767d;margin:0}
.product-link{display:inline-block;margin-top:19px;font:700 10px Manrope;color:var(--accent-dark)}
.band{background:var(--accent);padding:76px 0}
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.band h2{font:800 clamp(36px,5vw,60px)/1.02 Manrope;letter-spacing:-.055em;margin:0}
.band p{color:#4f5b18;font-size:14px;line-height:1.9}
.band-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}
.band-fact{border:1px solid rgba(20,25,10,.18);padding:18px}
.band-fact b{display:block;font:800 12px Manrope}
.band-fact span{font-size:10px;color:#5f6a1f}
.timeline{border-top:1px solid var(--line);margin-top:20px}
.timeline-row{display:grid;grid-template-columns:85px 1fr;gap:28px;padding:23px 0;border-bottom:1px solid var(--line)}
.timeline-row .year{font:700 11px Manrope;color:#8a8f96}
.timeline-row h3{font:800 17px Manrope;margin:0 0 5px}
.timeline-row p{font-size:12px;color:#737981;line-height:1.7;margin:0}
.cta{background:var(--dark);color:#fff;text-align:center;padding:105px 0}
.cta h2{font:800 clamp(45px,6vw,74px)/1 Manrope;letter-spacing:-.06em;margin:12px 0 17px}
.cta h2 span{color:var(--accent)}
.cta p{color:#959ca5;max-width:560px;margin:0 auto 28px;font-size:14px;line-height:1.8}
.footer{background:#090b0e;color:#fff;padding:40px 0 24px}
.footer-top{display:flex;justify-content:space-between;gap:35px;align-items:start}
.footer-brand p{font-size:10px;color:#727982;line-height:1.7;max-width:360px}
.footer-links{display:flex;gap:30px;flex-wrap:wrap}
.footer-links a{font:600 10px Manrope;color:#9299a2}
.footer-bottom{border-top:1px solid #252930;margin-top:35px;padding-top:18px;color:#626a74;font-size:9px}
.inner-hero{background:var(--dark);color:#fff;padding:92px 0 80px}
.inner-hero h1{font:800 clamp(48px,6vw,76px)/1 Manrope;letter-spacing:-.06em;margin:18px 0}
.inner-hero h1 span{color:var(--accent)}
.inner-hero p{color:#a6adb5;font-size:16px;line-height:1.8;max-width:720px}
.inner-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:75px}
.card-dark{background:#111419;color:#fff;padding:32px;border-radius:3px}
.card-dark h3{font:800 20px Manrope;margin:0 0 18px}
.card-dark p,.card-dark li{color:#9aa1aa;font-size:13px;line-height:1.85}
.card-dark strong{color:var(--accent)}
.page-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.page-list a{border:1px solid var(--line);padding:21px;background:#fff}
.page-list b{font:800 15px Manrope;display:block}.page-list span{font-size:11px;color:#777d85;display:block;margin-top:7px}
.legal h2{font:800 34px Manrope;letter-spacing:-.04em;margin:40px 0 12px}.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:14px;line-height:1.9;color:#686e76}
@media(max-width:850px){
  .container{width:calc(100% - 34px)}
  .nav-links{display:none}.menu{display:block}
  .nav-links.open{display:flex;position:absolute;top:78px;left:0;right:0;background:var(--paper);padding:18px 17px 23px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}
  .hero-grid,.split,.band-grid,.inner-grid{grid-template-columns:1fr;gap:45px}
  .hero{padding:80px 0 70px}.hero h1{font-size:50px}
  .products{grid-template-columns:1fr}
  .portfolio-head{display:block}.portfolio-head .body{margin-top:15px}
  .footer-top{flex-direction:column}
}
@media(max-width:560px){
  .section{padding:68px 0}.inner-hero{padding:68px 0 58px}
  .hero h1{font-size:43px}.hero-copy{font-size:14px}
  .hero-card-main{height:175px}.sg{font-size:65px}
  .hero-info{grid-template-columns:1fr}.hero-info div:nth-child(even){padding-left:0;border-left:0}
  .band-facts,.page-list{grid-template-columns:1fr}
  .timeline-row{grid-template-columns:55px 1fr;gap:14px}
}
