/* CHIRP sky edition • design by JRamos */
:root{
  --ink:#12335f;
  --ink-dim:#355a83;
  --ink-faint:#58799d;
  --sky:#176dce;
  --sky-deep:#1255ae;
  --gold:#148acc;
  --gold-bright:#1462b8;
  --bg-0:#eaf7ff;
  --bg-1:#ffffff;
  --bg-2:#dff2ff;
  --line:rgba(41,126,209,.22);
  --line-soft:rgba(48,122,192,.16);
  --mint:#14cfa8;
  --purple:#8955e9;
  --radius:22px;
}
html{scroll-padding-top:84px}
body{
  background:
    radial-gradient(900px 600px at 98% 2%,rgba(97,214,255,.47),transparent 70%),
    radial-gradient(780px 520px at 0% 32%,rgba(185,163,255,.17),transparent 70%),
    linear-gradient(180deg,#e7f7ff 0%,#f6fcff 44%,#e9f6ff 100%);
}
header{
  background:rgba(242,251,255,.87);
  box-shadow:0 7px 25px rgba(25,90,159,.06);
}
.wrap{max-width:1180px}
.nav{padding:12px 0}
.brand img{border-radius:50%;border:2px solid #fff;box-shadow:0 3px 12px rgba(28,119,207,.16)}
.brand .gold{color:var(--purple)}
.navlinks{gap:18px}
.navlinks a{font-weight:600;color:#315d8b}
.navlinks a:hover,.foot-links a:hover{color:#6650d9}
.navlinks a[href="#cleaner"]{color:#744bd4}
.nav-cta,.btn-primary{
  color:#fff;
  background:linear-gradient(115deg,#1b7be0 0%,#2470d7 48%,#7656df 100%);
  box-shadow:0 12px 26px rgba(35,111,215,.23);
}
.nav-cta:hover{filter:brightness(1.08)}
.skip-link{background:#1b66c7;color:#fff}
.hero{
  isolation:isolate;
  padding:90px 0 95px;
  background:
    radial-gradient(circle at 84% 17%,rgba(20,241,149,.26),transparent 16%),
    radial-gradient(circle at 16% 80%,rgba(140,88,255,.12),transparent 28%),
    linear-gradient(120deg,#f5fbff 8%,#def3ff 58%,#b9e7ff 100%);
}
.hero::before,.hero::after{
  content:"";position:absolute;z-index:-1;border:1px solid rgba(255,255,255,.65);
  border-radius:50%;pointer-events:none;
}
.hero::before{width:500px;height:500px;right:-160px;top:-180px;box-shadow:0 0 0 65px rgba(255,255,255,.06)}
.hero::after{width:260px;height:260px;left:-115px;bottom:-130px;box-shadow:0 0 0 50px rgba(255,255,255,.11)}
.hero-grid{grid-template-columns:1fr .94fr;gap:68px}
.hero h1{font-size:clamp(3rem,6vw,5.35rem);line-height:1.02;letter-spacing:-.035em}
.hero h1 em{
  background:linear-gradient(100deg,#186ed1 12%,#7152d9 68%,#07aa9a 110%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lede{font-size:1.13rem;line-height:1.68;margin-top:26px}
.eyebrow{color:#245f9b;background:rgba(255,255,255,.75);border-color:rgba(49,129,208,.2);font-weight:700}
.eyebrow .dot{background:var(--mint);box-shadow:0 0 0 4px rgba(20,207,168,.15)}
.btn{border-radius:14px}
.btn-primary:hover{box-shadow:0 16px 32px rgba(35,111,215,.30)}
.btn-ghost{color:#20568c;background:rgba(255,255,255,.7);border-color:rgba(42,111,190,.22)}
.btn-ghost:hover{background:#fff;color:#145db5;border-color:#258de3}
.ca-row{background:rgba(255,255,255,.83);border-color:rgba(62,142,215,.22);box-shadow:0 12px 30px rgba(28,120,212,.09)}
.ca-label{color:#3c75aa;font-weight:700}
.ca-value{color:#244c77}
.copy-btn{color:#1164b8;border-color:#8bc6f2;background:#ebf8ff;font-weight:700}
.copy-btn:hover{background:#d7eeff}
.hero-art{max-width:535px;justify-self:center;animation:floatArt 7s ease-in-out infinite}
.hero-art .frame{
  border:8px solid rgba(255,255,255,.9);
  border-radius:32px;
  box-shadow:0 28px 65px rgba(35,105,184,.24),0 0 0 1px rgba(39,106,182,.11);
  transform:rotate(2deg);
}
.hero-art img{aspect-ratio:1/1;object-fit:cover}
.hero-art .glow{background:radial-gradient(circle at 50% 50%,rgba(20,241,149,.28),rgba(153,69,255,.12) 42%,transparent 70%)}
.flight-tag{
  position:absolute;left:-18px;bottom:30px;padding:12px 18px;
  border-radius:999px;background:#fff;color:#205180;font-size:.84rem;font-weight:800;
  box-shadow:0 12px 30px rgba(19,75,140,.21);transform:rotate(-4deg);
}
.flight-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint);margin-right:6px;box-shadow:0 0 0 4px rgba(20,207,168,.15)}
.sky-spark{position:absolute;color:#fff;font-size:2.2rem;text-shadow:0 5px 20px #3884d8;animation:twinkle 4s ease-in-out infinite}
.spark-one{right:-25px;top:0}.spark-two{left:-40px;top:23%;animation-delay:1.6s}
@keyframes floatArt{50%{transform:translateY(-13px)}}
@keyframes twinkle{50%{opacity:.35;transform:scale(.7) rotate(30deg)}}
.marquee-wrap{background:linear-gradient(90deg,#2277d4,#7052de 52%,#0db99f);border:0;padding:17px 0}
.marquee span,.marquee span b{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.08)}
.cleaner-section{padding:38px 0 10px}
.cleaner-card{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;
  padding:24px 30px;border-radius:23px;
  background:linear-gradient(112deg,#fff 5%,#effaff 58%,#ebf8ff 100%);
  border:1px solid #b7ddf5;box-shadow:0 15px 40px rgba(44,124,198,.11);
  position:relative;overflow:hidden;
}
.cleaner-card::after{content:"";position:absolute;right:0;top:0;width:145px;height:5px;background:linear-gradient(90deg,var(--mint),var(--purple));border-radius:0 0 0 8px}
.cleaner-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:19px;background:linear-gradient(135deg,#25cbbb,#7383ed);color:#fff;font-size:2rem;box-shadow:0 10px 22px rgba(39,152,189,.25)}
.cleaner-kicker{color:#6550bd;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.cleaner-copy h2{font-size:1.5rem;margin:2px 0 3px}
.cleaner-copy p{margin:0;color:#496a88;font-size:.9rem}
.cleaner-link{white-space:nowrap;border-radius:13px;padding:13px 19px;background:#146ec9;color:#fff;font-weight:700;box-shadow:0 8px 20px rgba(21,100,185,.18)}
.cleaner-link:hover{background:#6452d5}
section{padding:82px 0}
.section-head h2{font-size:clamp(2rem,3.4vw,3.1rem)}
.section-head p{line-height:1.65}
.chart-panel{background:#fff;border-color:#b4dcf4;box-shadow:0 18px 46px rgba(30,107,185,.11);padding:20px}
.chart-meta a{color:#195fb5}
.chart-frame{background:#0a1834}
#about{background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(226,246,255,.7))}
.story{gap:52px}
.story-copy p{line-height:1.75}
.story-visual{margin:0;position:relative;border-radius:24px;overflow:hidden;box-shadow:0 22px 46px rgba(34,107,181,.2);border:7px solid white}
.story-visual img{width:100%;height:340px;object-fit:cover;object-position:center 37%}
.story-visual figcaption{position:absolute;bottom:14px;right:14px;background:rgba(255,255,255,.92);color:#194b80;border-radius:999px;padding:7px 13px;font-size:.75rem;font-weight:700}
.step,.link-card{background:rgba(255,255,255,.92);border-color:#c4e3f7;box-shadow:0 10px 30px rgba(23,106,185,.08)}
.step{border-top:4px solid #40aaf2}
.step:nth-child(2){border-top-color:#14cfa8}.step:nth-child(3){border-top-color:#8955e9}.step:nth-child(4){border-top-color:#4ca6eb}
.step .mark{font-weight:700;color:#265eca}
.link-card{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.link-card:hover{border-color:#60b8ef;transform:translateY(-5px);box-shadow:0 17px 38px rgba(32,111,193,.16)}
.link-card .icon{background:linear-gradient(140deg,#e2f4ff,#ece5ff);color:#3a69c8}
.link-card .go{color:#135fae;font-weight:700}
.note{background:rgba(255,255,255,.7);border-color:#c4e3f7;color:#4b6988}
footer{background:linear-gradient(110deg,#d8f2ff 0%,#e8f8ff 55%,#e9e5ff 100%);border-color:#c5e2f4}
.foot-links a{color:#315b83;font-weight:600}
.foot-extra a{color:#155fae}
.foot-legal{color:#587493}
.reveal-ready{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.reveal-ready.revealed{opacity:1;transform:translateY(0)}
@media(max-width:1120px){
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:#f1faff;border-bottom:1px solid #badff5;padding:18px 24px;flex-direction:column;align-items:stretch;gap:16px;box-shadow:0 20px 30px rgba(20,80,140,.14)}
  .navlinks.open{display:flex}
  .menu-btn{display:inline-flex;margin-left:auto;margin-right:12px}
}
@media(max-width:920px){
  .hero-grid{gap:55px}.hero-art{width:min(100%,570px)}
  .cleaner-card{grid-template-columns:auto 1fr}.cleaner-link{grid-column:2;justify-self:start}
  .story-visual img{height:360px}
}
@media(max-width:600px){
  .hero{padding:54px 0 70px}
  .hero h1{font-size:clamp(2.85rem,11vw,4rem)}
  .hero p.lede{font-size:1rem}
  .hero-actions .btn{padding:12px 16px;font-size:.85rem}
  .hero-art{width:calc(100% - 22px)}
  .flight-tag{left:-10px;bottom:18px;font-size:.72rem;padding:9px 12px}
  .sky-spark{display:none}
  .cleaner-section{padding:26px 0 0}
  .cleaner-card{display:block;padding:22px}
  .cleaner-icon{margin-bottom:14px;width:48px;height:48px}
  .cleaner-link{display:inline-flex;margin-top:17px;white-space:normal}
  .story-visual img{height:250px}
  .chart-panel{padding:10px}
  .foot-links{gap:13px 20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-art,.sky-spark,.marquee{animation:none!important}
  .reveal-ready{opacity:1;transform:none;transition:none}
  .link-card,.btn{transition:none}
}
