/*
  Tangier Telegraf — Pitch Styles
  Designed for jaw‑drop. Fluid type, neon copper, glass, grain, parallax, tilt.
*/
:root{
  --bg:#070b16;           /* deep dusk */
  --ink:#e7ecff;          /* pale ink */
  --muted:#a8b0c7;        /* slate */
  --copper:#b87333;       /* brand copper */
  --ocean:#0a2540;        /* ocean */
  --glass:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.08);
  --glow:0 0 0 0 rgba(184,115,51,0);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(1200px 800px at 70% -10%, #0f1a37 0%, var(--bg) 60%), var(--bg);
  color:var(--ink); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  line-height:1.6; overflow-x:hidden;
}
.container{width:min(1200px, 92vw); margin-inline:auto}

/* Progress */
.progress{position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg, var(--copper), #ffb877); z-index:9999; box-shadow:0 0 20px rgba(184,115,51,.6)}

/* Hero */
.hero{position:relative; min-height:100svh; display:grid; place-items:stretch; isolation:isolate;}
.hero__overlay{position:absolute; inset:0; background:radial-gradient(1000px 600px at 80% -10%, rgba(184,115,51,.12), transparent 60%), linear-gradient(180deg, rgba(7,11,22,.2), rgba(7,11,22,.8) 65%, #070b16 100%);}
.signal-canvas{position:absolute; inset:0; width:100%; height:100%; filter:contrast(115%) saturate(105%)}

.nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px clamp(16px, 4vw, 32px); backdrop-filter:saturate(120%) blur(8px); background:linear-gradient(180deg, rgba(7,11,22,.6), rgba(7,11,22,.2)); border-bottom:1px solid var(--stroke)}
.nav__brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.brand__glyph{width:26px; height:26px; border-radius:7px; background:conic-gradient(from 210deg, #ffb877, var(--copper), #7bc5ff, #3dd0b4, #ffb877);} 
.brand__name{font-family:Unbounded, Inter, system-ui; font-weight:800}
.nav__links{display:flex; flex-wrap:wrap; gap:14px}
.nav__links a{color:var(--muted); text-decoration:none; font-weight:600; font-size:.95rem; padding:8px 12px; border-radius:12px; transition:all .25s}
.nav__links a:hover{color:var(--ink); background:var(--glass)}
.nav__links .pill{border:1px solid var(--stroke)}

.hero__inner{position:relative; padding-block:10svh 16svh}
.headline{display:grid; gap:10px;}
.headline__kicker{color:#9fb3ff; font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.9rem}
.headline__main{font-family:Unbounded, Inter; font-weight:800; font-size:clamp(2.4rem, 4.5vw + 1rem, 5.2rem); line-height:1.05;}
.headline__main em{color:transparent; background:linear-gradient(90deg, #ffe1c9, #ffb877, var(--copper)); -webkit-background-clip:text; background-clip:text; text-shadow:0 8px 40px rgba(184,115,51,.2)}
.lede{margin-top:14px; color:var(--muted); max-width:58ch; font-size:clamp(1rem, .7rem + 1vw, 1.25rem)}
.hero__cta{display:flex; gap:12px; margin-top:22px}
.btn{--bg:var(--glass); --fg:var(--ink); display:inline-flex; align-items:center; justify-content:center; gap:.6em; border:1px solid var(--stroke); padding:12px 18px; border-radius:16px; text-decoration:none; color:var(--fg); background:var(--bg); font-weight:800; letter-spacing:.2px; transition:transform .15s, background .2s, box-shadow .2s}
.btn.big{font-size:1.1rem; padding:16px 24px; border-radius:18px}
.btn--primary{--bg:linear-gradient(180deg, #ffcf9f, #ffb877); --fg:#1a120a; box-shadow:0 8px 30px rgba(184,115,51,.35)}
.btn--primary:hover{transform:translateY(-2px)}
.btn--ghost:hover{background:rgba(255,255,255,.09)}

.hero__ribbons{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.ribbon{padding:8px 12px; border:1px dashed var(--stroke); border-radius:999px; color:#cfd6f5; font-size:.9rem; background:rgba(255,255,255,.04)}
.scrollcue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; color:#c7d2ff99; font-size:.85rem}
.scrollcue svg{width:22px; height:22px; stroke:#c7d2ff99; fill:none; stroke-width:2; animation:bounce 2.2s infinite}
@keyframes bounce{50%{transform:translateY(6px)}}

/* Sections */
.section{padding-block:clamp(60px, 10svh, 120px); position:relative}
.section__head{display:grid; gap:6px; margin-bottom:26px}
.title{font-family:Unbounded, Inter; font-weight:800; font-size:clamp(1.8rem, 1.5rem + 2.4vw, 3rem)}
.sub{color:var(--muted)}

/* Triad */
.triad{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px}
.card{position:relative; background:radial-gradient(600px 400px at -10% -20%, rgba(184,115,51,.12), transparent 60%), rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius:18px; padding:18px 18px 20px; box-shadow:0 10px 40px rgba(0,0,0,.25)}
.card__icon{font-size:1.6rem; margin-bottom:6px}
.card h3{margin:4px 0 8px; font-size:1.3rem; font-weight:800}
.card p{color:var(--muted)}
.card ul{margin:12px 0 0; padding-left:18px; color:#cdd4ee;}
.card ul li{margin:.3em 0}

/* Bundles */
.section--bundles{background:linear-gradient(180deg, rgba(10,16,30,1), rgba(7,11,22,1))}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px}
.bundle .tag{position:absolute; top:14px; right:14px; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; background:rgba(255,255,255,.08); border:1px solid var(--stroke); padding:6px 8px; border-radius:999px}
.meta{margin-top:10px; color:#aab3d3; font-size:.9rem}
.actions{display:flex; gap:10px; align-items:center; margin-top:12px}
.scope{position:relative}
.scope::after{content:'›'; margin-left:.5em; opacity:.7}

/* Trust */
.section--trust{background:radial-gradient(800px 520px at 110% 10%, rgba(29,242,156,.08), transparent 60%), radial-gradient(800px 520px at -10% 80%, rgba(184,115,51,.08), transparent 60%)}
.trust{display:grid; grid-template-columns:2fr 1fr; gap:18px}
.trust__list{margin:0; padding:0 0 0 18px; color:#dbe2ff}
.legend{display:flex; flex-wrap:wrap; gap:10px; align-content:start}
.legend__item{display:flex; gap:8px; align-items:center; background:rgba(255,255,255,.05); border:1px solid var(--stroke); padding:10px 12px; border-radius:12px}
.dot{display:inline-block; width:10px; height:10px; border-radius:999px}
.dot--green{background:#4ade80}
.dot--amber{background:#fbbf24}
.dot--red{background:#fb7185}

/* Techniques carousel */
.section--tech{background:linear-gradient(180deg, #071226, #070b16)}
.carousel{position:relative}
.carousel__track{display:grid; grid-auto-flow:column; grid-auto-columns:min(80ch, 92vw); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 6px}
.slide{scroll-snap-align:center; background:rgba(255,255,255,.05); border:1px solid var(--stroke); border-radius:18px; padding:18px}
.slide h3{font-weight:800; font-size:1.25rem; margin:0}
.slide .kicker{color:#c7cff1; margin:.35rem 0 .6rem}
.slide ul{color:#d9e0ff}
.carousel__nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.08); border:1px solid var(--stroke); color:#fff; padding:10px 12px; border-radius:12px; cursor:pointer}
.carousel__nav:hover{background:rgba(255,255,255,.14)}
.carousel__nav.prev{left:-8px}
.carousel__nav.next{right:-8px}

/* Timeline */
.section--timeline{background:radial-gradient(900px 600px at 10% -10%, rgba(123,197,255,.09), transparent 60%)}
.timeline{list-style:none; padding:0; margin:0; border-left:2px dashed rgba(255,255,255,.18); margin-left:12px}
.timeline li{position:relative; margin:0 0 18px 0; padding:10px 14px 10px 16px; background:rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius:14px}
.timeline li::before{content:''; position:absolute; left:-10px; top:18px; width:12px; height:12px; border-radius:999px; background:linear-gradient(180deg, #ffcf9f, #ffb877); box-shadow:0 0 0 4px rgba(184,115,51,.15)}
.timeline li span{display:block; color:#a8b0c7; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.78rem}
.timeline li b{display:block; font-size:1.05rem; margin:.15rem 0 .25rem}
.timeline li i{color:#d5dcff}

/* Budget */
.section--budget{background:linear-gradient(180deg, #070b16, #06101f)}
.budget{display:grid; gap:14px}
.budget__switch{display:flex; gap:10px}
.switch{background:rgba(255,255,255,.06); border:1px solid var(--stroke); padding:10px 16px; border-radius:12px; color:#cdd4ee; font-weight:800; cursor:pointer}
.switch.is-active{background:linear-gradient(180deg, #ffcf9f, #ffb877); color:#1a120a}
.budget__cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px}
.budgetcard{background:rgba(255,255,255,.05); border:1px solid var(--stroke); border-radius:18px; padding:16px}
.budgetcard.is-dim{opacity:.6; filter:saturate(.9)}
.budgetcard__sum{display:flex; align-items:end; gap:6px; font-weight:900; font-size:1.6rem}
.budgetcard__sum span{color:#ffb877}
.budgetcard ul{list-style:none; padding:0; margin:12px 0 0 0; color:#d5dcff}
.budgetcard li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; background:rgba(255,255,255,.04); border:1px dashed var(--stroke); border-radius:10px; margin-bottom:8px}
.budget__foot{color:#9aa4c8; font-size:.9rem}

/* CTA */
.section--cta{background:radial-gradient(900px 600px at 80% 10%, rgba(255,184,119,.08), transparent 60%)}
.pills{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 24px}
.pills span{padding:8px 10px; border:1px dashed var(--stroke); border-radius:999px; color:#cfd6f5}

/* Footer */
.footer{border-top:1px solid var(--stroke); padding:24px 0; color:#aab3d3; text-align:center}
.foot__brand{font-weight:800}

/* Effects */
.tilt{transform-style:preserve-3d}
.tilt:hover{box-shadow:0 16px 60px rgba(184,115,51,.16)}
.magnet{position:relative}
.magnet:hover{transform:translateY(-1px)}

/* Grain overlay (subtle texture) */
body::after{content:''; position:fixed; inset:0; pointer-events:none; background-image:url('data:image/svg+xml;utf8,\
  %3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%220.035%22/%3E%3C/svg%3E');}

/* Responsive tweaks */
@media (max-width: 860px){
  .trust{grid-template-columns:1fr}
  .nav__links{display:none}
}