:root{
  --bg:#0d1712; --surface:#16241c; --text:#f4f1e4; --text-dim:#c7cbbe; --muted:#8a9089;
  --accent:#f0c419; --accent-hover:#d1a80f; --accent-active:#b8930d;
  --line:rgba(244,241,228,0.15); --line-strong:rgba(244,241,228,0.25);
  --red:#c9564a; --green:#5fbf8f;
  --font-heading:'Barlow Condensed',system-ui,sans-serif;
  --font-body:'Barlow',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); overflow-x:hidden;}
img{display:block; max-width:100%;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:#ffdf6b;}
::selection{background:var(--accent); color:var(--bg);}
h1,h2,h3{font-family:var(--font-heading); font-weight:600; margin:0;}
.wrap{max-width:1180px; margin:0 auto; padding:0 40px;}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  padding:15px 28px; border:1px solid transparent; border-radius:0;}
.btn-primary{background:var(--accent); color:var(--bg); border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-hover);}
.btn-primary:active{background:var(--accent-active);}
.btn-secondary{border-color:var(--text); color:var(--text); padding:15px 26px;}
.btn-secondary:hover{background:rgba(244,241,228,0.08);}
.btn-nav{padding:10px 20px; font-size:12px;}

/* tags */
.tag{display:inline-flex; align-items:center; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 12px; border:1px solid var(--accent); color:var(--accent); white-space:nowrap;}

/* blueprint frame */
.blueprint{position:relative; border:1px solid var(--line);}
.blueprint > .corner{position:absolute; width:11px; height:11px; color:rgba(244,241,228,0.55);}
.blueprint > .corner::before, .blueprint > .corner::after{content:""; position:absolute; background:currentColor;}
.blueprint > .corner::before{left:5px; top:0; width:1px; height:100%;}
.blueprint > .corner::after{top:5px; left:0; width:100%; height:1px;}
.blueprint > .corner.tl{top:-6px; left:-6px;}
.blueprint > .corner.tr{top:-6px; right:-6px;}
.blueprint > .corner.bl{bottom:-6px; left:-6px;}
.blueprint > .corner.br{bottom:-6px; right:-6px;}

/* nav */
nav{position:sticky; top:0; z-index:50; background:rgba(13,23,18,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:74px;}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--font-heading); font-weight:600; font-size:19px; letter-spacing:0.03em; text-transform:uppercase;}
.brand span{color:var(--accent);}
.navlinks{display:flex; gap:32px; align-items:center;}
.navlinks a{font-size:13px; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-dim);}
.navlinks a:hover{color:var(--accent);}

/* hero */
.hero{position:relative; overflow:hidden;}
.hero-bg{position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; opacity:0.1; pointer-events:none; z-index:0;}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"head graph" "desc graph"; gap:24px 56px; align-items:start; position:relative; z-index:1;}
.hero-head{grid-area:head;}
.hero-desc{grid-area:desc; align-self:end;}
.hero-graph{grid-area:graph;}
.badge-row{display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap;}
h1.hero-title{font-size:clamp(38px,5vw,62px); line-height:1.04; text-transform:uppercase;}
h1.hero-title .accent{color:var(--accent);}
.hero-sub{font-size:17px; line-height:1.65; color:var(--text-dim); max-width:46ch; margin:0 0 34px;}
.cta-row{display:flex; gap:16px; flex-wrap:wrap;}
.chart-card{padding:22px 22px 18px;}
.chart-card-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.chart-label{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);}
.chart-status{font-size:11px; letter-spacing:0.06em; color:var(--muted); display:flex; align-items:center; gap:6px;}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--green); display:inline-block;}
.chart-legend-row{display:flex; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.legend-item{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-dim);}
.legend-swatch{width:16px; height:2px; display:inline-block;}
.legend-red{background:var(--red);} .legend-green{background:var(--green);}

/* sections */
section{padding:100px 0;}
.feature-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px;}
.sticky-visual{position:sticky; top:110px; height:fit-content; display:flex; flex-direction:column; align-items:center; gap:22px;}
.imgstack{position:relative; width:100%; max-width:420px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.imgstack img{position:absolute; width:82%; transition:opacity .5s ease, transform .5s ease;}
.sticky-caption{font-size:12px; color:var(--muted); text-align:center; letter-spacing:0.06em; text-transform:uppercase;}
.feature-list{display:flex; flex-direction:column; gap:2px;}
.feature-item{border-top:1px solid var(--line); padding:34px 0; opacity:0.25; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.feature-num{font-size:12px; color:var(--accent); margin-bottom:10px; display:block; letter-spacing:0.04em;}
.feature-item h3{font-size:24px; margin:0 0 10px; text-transform:uppercase;}
.feature-item p{color:var(--text-dim); font-size:15px; line-height:1.65; max-width:52ch; margin:0;}

.field-photo-frame{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; display:flex; flex-direction:column; align-items:center; gap:16px; padding:40px;}
.field-placeholder{width:100%; max-width:640px; aspect-ratio:16/9; border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; text-align:center; padding:20px;}

.data-section{background:var(--surface);}
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease;}
.data-head{max-width:640px; margin-bottom:56px;}
.eyebrow{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);}
.data-head h2{font-size:clamp(28px,4vw,42px); margin:14px 0 16px; text-transform:uppercase;}
.data-head p{color:var(--text-dim); font-size:16px; line-height:1.7; margin:0;}
.chart-panel{padding:36px; display:grid; grid-template-columns:1fr 260px; gap:36px; align-items:center; margin-bottom:64px;}
.chart-legend{display:flex; flex-direction:column; gap:18px;}
.chart-legend .legend-item{font-size:12px; color:var(--text); gap:10px;}
.chart-legend .legend-swatch{width:22px; height:3px;}
.chart-legend p{color:var(--text-dim); font-size:11.5px; line-height:1.5; margin:0;}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.stat-card{background:var(--surface); padding:30px 26px;}
.stat-value{font-size:clamp(28px,3.2vw,40px); color:var(--accent); display:flex; align-items:baseline; gap:4px; font-weight:600;}
.stat-arrow{font-size:0.5em;}
.stat-label{font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text); margin:10px 0 6px;}
.stat-detail{font-size:12.5px; color:var(--text-dim); line-height:1.5;}

.meaning-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.meaning-card{background:var(--bg); padding:34px 28px; display:flex; flex-direction:column; gap:14px;}
.meaning-icon{width:38px; height:38px; border:1px solid var(--accent); display:flex; align-items:center; justify-content:center;}
.meaning-icon svg{width:18px; height:18px; stroke:var(--accent);}
.meaning-card h3{font-family:var(--font-body); font-weight:600; font-size:16px; text-transform:none; line-height:1.3;}
.meaning-card p{font-size:13.5px; color:var(--text-dim); line-height:1.55; margin:0;}

.specs-strip{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:0;}
.specs-strip .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px;}
.spec-item{padding:26px 24px; display:flex; gap:14px; align-items:center; border-left:1px solid var(--line);}
.spec-item .num{color:var(--accent); font-size:13px; font-weight:600;}
.spec-item p{font-size:13px; line-height:1.4; color:var(--text-dim); margin:0;}

.offer-panel{border:1px solid var(--accent); position:relative; padding:56px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center;}
.offer-ribbon{position:absolute; top:-1px; left:32px; background:var(--accent); color:var(--bg); padding:6px 16px; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;}
.offer-panel h2{font-size:clamp(24px,3.2vw,34px); margin:22px 0 0; text-transform:uppercase;}
.price-row{display:flex; align-items:baseline; gap:12px; margin:20px 0 10px;}
.price{font-size:60px; color:var(--accent);}
.price-sub{font-size:13px; color:var(--text-dim);}
.offer-note{font-size:13px; color:var(--text-dim); margin:0 0 26px;}
.offer-facts{display:flex; flex-direction:column; gap:16px;}
.offer-fact{display:flex; gap:12px; align-items:flex-start; font-size:14px;}
.offer-fact svg{width:18px; height:18px; stroke:var(--accent); flex-shrink:0; margin-top:2px;}

footer{border-top:1px solid var(--line); padding:44px 0;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;}
.footer-row p{font-size:12.5px; color:var(--text-dim); margin:0;}

@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr; grid-template-areas:"head" "graph" "desc";}
  .feature-grid, .chart-panel, .offer-panel{grid-template-columns:1fr;}
  .sticky-visual{position:static;}
  .wrap{padding:0 22px;}
}