:root {
  --ink: #0f171c;
  --ink-soft: #16232a;
  --steel: #a7b4b8;
  --muted: #6e7b80;
  --line: #dce4e6;
  --paper: #f4f6f4;
  --white: #fff;
  --yellow: #f4b41b;
  --yellow-deep: #d88c00;
  --blue: #173b50;
  --shadow: 0 24px 60px rgba(15, 23, 28, .12);
  --radius: 18px;
  --display: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(15, 23, 28, .94);
  color: var(--white);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.nav-wrap { height: 76px; display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.brand { display:flex; align-items:center; gap: 12px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { width: 38px; height: 38px; display:grid; place-items:center; background: var(--yellow); color: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 76%, 76% 100%, 0 100%); font-weight: 900; }
.brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.brand-copy small { color: #aebbc0; font-size: 10px; letter-spacing: .12em; text-transform:uppercase; margin-top: 4px; }
.nav-links { display:flex; align-items:center; gap: 25px; font-size: 13px; color: #dce4e6; }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--yellow); }
.nav-cta { background: var(--yellow); color: var(--ink); padding: 11px 17px; border-radius: 999px; font-weight: 800; }
.menu-toggle { display:none; background:none; border:0; color:var(--white); font-size: 25px; }

.hero { min-height: 690px; position:relative; overflow:hidden; background: var(--ink); color:var(--white); display:flex; align-items:center; }
.hero::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(15,23,28,.98) 0%, rgba(15,23,28,.78) 40%, rgba(15,23,28,.18) 100%); z-index:1; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.78; }
.hero-content { position:relative; z-index:2; padding: 110px 0 90px; max-width: 640px; }
.kicker { display:inline-flex; align-items:center; gap: 9px; color:var(--yellow); font-size: 12px; letter-spacing:.15em; text-transform:uppercase; font-weight:800; }
.kicker::before { content:""; width: 28px; height: 2px; background:var(--yellow); }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.055em; line-height: 1.04; }
h1 { font-size: clamp(48px, 7vw, 94px); margin: 22px 0; }
h2 { font-size: clamp(34px, 4.5vw, 60px); }
h3 { font-size: 25px; }
.hero p { max-width: 560px; font-size: 18px; color:#c7d3d5; margin: 0 0 32px; }
.hero-actions { display:flex; gap: 13px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding: 14px 21px; border-radius: 999px; border:1px solid transparent; font-weight:800; font-size: 14px; cursor:pointer; transition: transform .2s ease, background .2s ease, border .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background:var(--yellow); color:var(--ink); }
.btn-secondary { background:rgba(255,255,255,.08); color:var(--white); border-color:rgba(255,255,255,.26); }
.btn-dark { background:var(--ink); color:var(--white); }

.section { padding: 110px 0; }
.section-tight { padding: 72px 0; }
.section-head { display:flex; justify-content:space-between; gap: 30px; align-items:end; margin-bottom: 42px; }
.section-head p { max-width: 480px; color: var(--muted); margin: 0; }
.eyebrow { color: var(--yellow-deep); font-size:12px; text-transform:uppercase; letter-spacing:.16em; font-weight:800; margin-bottom:14px; }
.text-link { color: var(--blue); font-weight:800; border-bottom: 1px solid var(--yellow); }

.stats { background:var(--yellow); }
.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:30px; }
.stat strong { font-size:clamp(34px, 4vw, 58px); font-family:var(--display); letter-spacing:-.06em; display:block; }
.stat span { color:#49340b; font-weight:700; font-size:13px; }

.product-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.product-card { position:relative; min-height: 390px; overflow:hidden; border-radius: var(--radius); background:var(--ink); color:var(--white); box-shadow: var(--shadow); }
.product-card img { width:100%; height:100%; object-fit:cover; opacity:.76; transition: transform .6s ease; }
.product-card:hover img { transform:scale(1.04); }
.product-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,23,28,.94), rgba(15,23,28,.04) 72%); }
.product-card-content { position:absolute; z-index:1; inset:auto 26px 25px; }
.product-card-content p { margin: 10px 0 0; color:#cbd5d7; max-width: 420px; }
.tag { display:inline-block; border:1px solid rgba(255,255,255,.28); color:var(--yellow); border-radius:999px; padding:5px 10px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }

.split { display:grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items:center; }
.split-image { border-radius: var(--radius); overflow:hidden; min-height: 450px; background:var(--ink); }
.split-image img { width:100%; height:100%; object-fit:cover; }
.check-list { display:grid; gap: 14px; margin: 30px 0; padding:0; list-style:none; }
.check-list li { display:flex; gap: 12px; align-items:flex-start; color: var(--ink-soft); }
.check-list li::before { content:"↗"; flex:0 0 24px; height:24px; display:grid; place-items:center; background:var(--yellow); color:var(--ink); border-radius:50%; font-weight:900; }

.dark-band { background:var(--ink); color:var(--white); position:relative; overflow:hidden; }
.dark-band::after { content:""; position:absolute; width:480px; height:480px; border:1px solid rgba(244,180,27,.25); border-radius:50%; right:-170px; top:-180px; box-shadow:0 0 0 60px rgba(244,180,27,.04), 0 0 0 120px rgba(244,180,27,.025); }
.dark-band .section-head p { color:#aebbc0; }
.capability-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position:relative; z-index:1; }
.capability { padding: 28px; min-height: 230px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); border-radius:var(--radius); }
.capability-number { color:var(--yellow); font-size:12px; font-weight:800; letter-spacing:.1em; }
.capability h3 { margin: 35px 0 12px; }
.capability p { color:#adbdc0; margin:0; font-size:14px; }

.process { display:grid; grid-template-columns:repeat(4,1fr); gap: 16px; }
.process-step { padding: 24px 0; border-top: 1px solid var(--ink); }
.process-step strong { font-size: 13px; color:var(--yellow-deep); }
.process-step h3 { margin: 25px 0 10px; font-size:22px; }
.process-step p { color:var(--muted); margin:0; font-size:14px; }

.cta { background: var(--yellow); padding: 80px 0; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.cta p { margin: 14px 0 0; color:#58420f; max-width:560px; }

.page-hero { padding: 90px 0; background:var(--ink); color:var(--white); position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; width:420px; height:420px; border-radius:50%; border:1px solid rgba(244,180,27,.26); right:-100px; top:-180px; box-shadow:0 0 0 50px rgba(244,180,27,.05); }
.page-hero h1 { font-size: clamp(48px, 7vw, 84px); max-width:850px; }
.page-hero p { color:#b9c6c8; max-width:640px; font-size:18px; }

.product-detail-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 38px; align-items:start; }
.product-detail-image { border-radius:var(--radius); overflow:hidden; background:var(--ink); }
.product-detail-image img { width:100%; aspect-ratio: 4/3; object-fit:cover; }
.detail-panel { padding: 32px; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); position:sticky; top: 105px; }
.detail-panel p { color:var(--muted); }
.detail-panel ul { margin: 25px 0; padding-left: 20px; color:var(--ink-soft); }
.product-table { width:100%; border-collapse:collapse; margin-top:30px; background:var(--white); border-radius:var(--radius); overflow:hidden; }
.product-table th, .product-table td { padding:17px 20px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.product-table th { width:30%; background:#edf1ef; color:var(--ink-soft); font-size:13px; text-transform:uppercase; letter-spacing:.07em; }
.product-table td { color:var(--muted); }

.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:start; }
.contact-list { display:grid; gap: 15px; margin-top:28px; }
.contact-item { display:flex; gap:14px; align-items:flex-start; padding:18px; background:var(--white); border-radius:14px; border:1px solid var(--line); }
.contact-icon { width:34px; height:34px; display:grid; place-items:center; background:var(--yellow); color:var(--ink); border-radius:10px; font-weight:900; }
.contact-item small { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.contact-item strong { display:block; margin-top:2px; }
.form { background:var(--white); border-radius:var(--radius); padding: 32px; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); }
.field input, .field textarea, .field select { width:100%; padding:14px 15px; border:1px solid var(--line); border-radius:10px; background:#fbfcfb; color:var(--ink); font:inherit; }
.field textarea { min-height:135px; resize:vertical; }
.form-note { color:var(--muted); font-size:12px; margin: 13px 0 0; }

.faq-list { max-width: 850px; display:grid; gap:12px; }
details { background:var(--white); border:1px solid var(--line); border-radius:14px; padding: 20px 22px; }
summary { cursor:pointer; font-weight:800; }
details p { color:var(--muted); margin-bottom:0; }
.policy { max-width:880px; }
.policy h2 { font-size:32px; margin: 42px 0 12px; }
.policy p, .policy li { color:var(--muted); }

.site-footer { padding: 42px 0; background:var(--ink); color:#b9c6c8; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; }
.footer-grid h3 { font-size:17px; color:var(--white); margin-bottom:13px; letter-spacing:-.02em; }
.footer-grid p { margin:0; max-width:330px; font-size:13px; }
.footer-links { display:grid; gap:8px; font-size:13px; }
.footer-links a:hover { color:var(--yellow); }
.footer-bottom { display:flex; justify-content:space-between; gap: 20px; border-top:1px solid rgba(255,255,255,.13); margin-top:35px; padding-top:20px; font-size:12px; }

.reveal { opacity:0; transform:translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
.language-switcher { display:flex; gap:4px; align-items:center; }
.language-switcher button { background:transparent; border:0; color:#aebbc0; font-size:11px; cursor:pointer; padding:4px; }
.language-switcher button.active, .language-switcher button:hover { color:var(--yellow); }

@media (max-width: 900px) {
  .nav-links { display:none; position:absolute; left:20px; right:20px; top:70px; padding:18px; background:var(--ink); border:1px solid rgba(255,255,255,.13); border-radius:15px; flex-direction:column; align-items:flex-start; }
  .nav-links.open { display:flex; }
  .menu-toggle { display:block; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .split, .contact-grid, .product-detail-grid { grid-template-columns:1fr; gap:30px; }
  .detail-panel { position:static; }
  .capability-grid { grid-template-columns:1fr; }
  .process { grid-template-columns:repeat(2,1fr); }
  .cta-inner { flex-direction:column; align-items:flex-start; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 580px) {
  .container { width:min(100% - 28px, 1180px); }
  .nav-wrap { height:68px; }
  .brand-copy span { font-size:13px; }
  .brand-mark { width:34px; height:34px; }
  .hero { min-height: 650px; }
  .hero-content { padding:90px 0 70px; }
  .hero p { font-size:16px; }
  .section { padding:75px 0; }
  .section-head { display:block; }
  .section-head p { margin-top:18px; }
  .stats-grid, .product-grid, .process, .footer-grid, .form-grid { grid-template-columns:1fr; }
  .product-card { min-height:330px; }
  .split-image { min-height:300px; }
  .footer-bottom { display:block; }
  .footer-bottom span { display:block; margin-top:8px; }
}
