:root{
--red:#e63946;
--green:#50c878;
--bg:#0f1317;
--card:#121923;
--soft:#0f1b24;
--text:#eaf0f6;
--muted:rgba(234,240,246,.72);
--line:rgba(234,240,246,.14);
--shadow:0 18px 44px rgba(0,0,0,.35);
--radius:18px;
--radius2:28px;
--max:1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
background:
radial-gradient(900px 500px at 12% 10%, rgba(230,57,70,.35), transparent 60%),
radial-gradient(700px 500px at 90% 18%, rgba(80,200,120,.26), transparent 55%),
linear-gradient(180deg, #0f1317 0%, #0b1015 100%);
color:var(--text);
line-height:1.6;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.small{font-size:.92rem}
.muted{color:var(--muted)}

.siteheader{
position:sticky;top:0;z-index:50;
background:rgba(15,19,23,.72);
backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
}

.navwrap{
display:flex;align-items:center;gap:14px;
padding:14px 0;
}

.brand{display:flex;align-items:center;gap:12px;min-width:180px}
.brandmark{
width:34px;height:34px;border-radius:999px;
background:conic-gradient(from 160deg, var(--red), var(--green), var(--red));
box-shadow:0 0 0 4px rgba(230,57,70,.10), 0 0 0 10px rgba(80,200,120,.08);
position:relative;
}
.brandmark::after{
content:"";
position:absolute;inset:8px;border-radius:999px;
background:linear-gradient(135deg, rgba(234,240,246,.12), rgba(234,240,246,.02));
border:1px solid rgba(234,240,246,.14);
}
.brandtext{
font-family:"Space Grotesk","Manrope",system-ui,sans-serif;
font-weight:700;letter-spacing:.02em;
}

.navtoggle{position:absolute;left:-9999px}
.navbtn{
margin-left:auto;
display:inline-flex;align-items:center;justify-content:center;
padding:10px 12px;border-radius:12px;
border:1px solid var(--line);
background:rgba(18,25,35,.55);
color:var(--text);
}
.navbtn:hover{filter:brightness(1.08)}
.nav{
display:none;
flex-direction:column;
gap:6px;
width:100%;
padding:10px 0 6px 0;
}
.navlink{
padding:10px 12px;border-radius:12px;
border:1px solid transparent;
color:var(--muted);
}
.navlink:hover{border-color:var(--line);color:var(--text)}
.navlink.active{border-color:rgba(80,200,120,.35);color:var(--text);background:rgba(80,200,120,.08)}
.navcta{display:none}

.navtoggle:checked ~ .nav{display:flex}
.navtoggle:checked ~ .navcta{display:flex}

.btn{
display:inline-flex;align-items:center;justify-content:center;
gap:10px;
padding:12px 16px;border-radius:14px;
border:1px solid transparent;
font-weight:800;
letter-spacing:.01em;
}
.btn-primary{
background:linear-gradient(135deg, rgba(230,57,70,.98), rgba(80,200,120,.92));
box-shadow:0 12px 34px rgba(230,57,70,.18);
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{
background:rgba(18,25,35,.45);
border-color:var(--line);
color:var(--text);
}
.btn-ghost:hover{filter:brightness(1.08)}

.hero{
padding:70px 0 46px 0;
border-bottom:1px solid var(--line);
background:
radial-gradient(900px 450px at 50% 0%, rgba(230,57,70,.22), transparent 65%),
radial-gradient(800px 520px at 55% 20%, rgba(80,200,120,.16), transparent 60%);
}
.hero-small{padding:46px 0 34px 0}
.herogrid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.herotext h1{
margin:10px 0 10px 0;
font-family:"Space Grotesk","Manrope",system-ui,sans-serif;
font-size:clamp(2.0rem, 4.2vw, 3.2rem);
line-height:1.08;
letter-spacing:-.02em;
}
.lead{font-size:1.12rem;color:var(--muted);max-width:64ch}
.herocta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.eyebrow{display:flex;gap:10px;align-items:center;color:var(--muted);font-weight:700}
.dot{width:10px;height:10px;border-radius:999px}
.dot-red{background:var(--red);box-shadow:0 0 0 4px rgba(230,57,70,.16)}
.dot-green{background:var(--green);box-shadow:0 0 0 4px rgba(80,200,120,.12)}
.herobadges{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
.badgecard{
padding:14px 14px 14px 14px;
border-radius:var(--radius);
border:1px solid var(--line);
background:rgba(18,25,35,.45);
}
.badgeh{font-weight:800}
.badgep{color:var(--muted);margin-top:6px}

.herodecor{
position:relative;
min-height:240px;
border-radius:var(--radius2);
border:1px solid var(--line);
background:
radial-gradient(180px 180px at 20% 30%, rgba(230,57,70,.24), transparent 60%),
radial-gradient(220px 220px at 80% 60%, rgba(80,200,120,.18), transparent 62%),
linear-gradient(180deg, rgba(18,25,35,.55), rgba(18,25,35,.28));
overflow:hidden;
box-shadow:var(--shadow);
}
.cyclewheel{
width:220px;height:220px;border-radius:999px;
position:absolute;left:18px;top:18px;
background:
conic-gradient(from 140deg, rgba(230,57,70,.95), rgba(80,200,120,.9), rgba(230,57,70,.95));
filter:saturate(1.05);
animation:spin 10s linear infinite;
}
.cyclewheel::after{
content:"";
position:absolute;inset:16px;border-radius:999px;
background:rgba(15,19,23,.75);
border:1px solid rgba(234,240,246,.14);
box-shadow:inset 0 0 0 10px rgba(234,240,246,.05);
}
.cyclewheel.big{width:280px;height:280px;left:auto;right:-60px;top:-40px;opacity:.95}
@keyframes spin{to{transform:rotate(360deg)}}

.currencyflow{
position:absolute;right:18px;bottom:18px;
display:flex;gap:12px;align-items:center;
}
.cur{
width:44px;height:44px;border-radius:14px;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--line);
background:rgba(18,25,35,.45);
font-weight:900;
animation:float 2.8s ease-in-out infinite;
}
.cur:nth-child(2){animation-delay:.2s}
.cur:nth-child(3){animation-delay:.4s}
@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-10px)}
}

.speedo{position:absolute;left:56%;top:58%;transform:translate(-50%,-50%);width:200px;height:200px}
.speedodial{
position:absolute;inset:0;border-radius:999px;
border:1px solid rgba(234,240,246,.14);
background:
radial-gradient(circle at 50% 50%, rgba(234,240,246,.06) 0 40%, transparent 41%),
conic-gradient(from -90deg, rgba(80,200,120,.9), rgba(230,57,70,.9));
opacity:.75;
}
.needle{
position:absolute;left:50%;top:50%;
width:4px;height:74px;border-radius:10px;
transform-origin:bottom;
background:linear-gradient(180deg, rgba(234,240,246,.9), rgba(234,240,246,.2));
transform:translate(-50%,-100%) rotate(32deg);
animation:needle 2.4s ease-in-out infinite;
}
@keyframes needle{
0%,100%{transform:translate(-50%,-100%) rotate(18deg)}
50%{transform:translate(-50%,-100%) rotate(58deg)}
}

.section{padding:66px 0;border-bottom:1px solid var(--line)}
.sectionhead{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.kicker{margin:0;color:var(--muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.84rem}
.section h2{
margin:0;
font-family:"Space Grotesk","Manrope",system-ui,sans-serif;
font-size:clamp(1.7rem, 2.4vw, 2.2rem);
letter-spacing:-.02em;
line-height:1.15;
}
.bg-soft{background:linear-gradient(180deg, rgba(18,25,35,.25), rgba(15,19,23,0))}
.bg-soft2{background:linear-gradient(180deg, rgba(80,200,120,.07), rgba(15,19,23,0))}
.bg-darkish{background:linear-gradient(180deg, rgba(230,57,70,.08), rgba(15,19,23,0))}

.twocol{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.col p{margin:0 0 14px 0;color:var(--muted);max-width:75ch}
.col strong em{color:var(--text);font-style:italic;font-weight:900}
.callout{
border:1px solid rgba(80,200,120,.22);
background:rgba(80,200,120,.06);
border-radius:var(--radius);
padding:16px;
}
.callout h3{margin:0 0 10px 0;font-family:"Space Grotesk","Manrope",system-ui,sans-serif}
.checklist{margin:0;padding-left:18px;color:var(--muted)}
.checklist li{margin:7px 0}

.decorcard{
border-radius:var(--radius2);
border:1px solid var(--line);
background:rgba(18,25,35,.42);
padding:18px;
box-shadow:var(--shadow);
overflow:hidden;
position:relative;
}
.decorcard h3{margin:0 0 8px 0;font-family:"Space Grotesk","Manrope",system-ui,sans-serif}
.ring{
width:120px;height:120px;border-radius:999px;
background:conic-gradient(from 200deg, rgba(230,57,70,.95), rgba(80,200,120,.9), rgba(230,57,70,.95));
position:absolute;right:-24px;top:-24px;
animation:spin 12s linear infinite;
opacity:.95;
}
.ring::after{content:"";position:absolute;inset:12px;border-radius:999px;background:rgba(18,25,35,.9);border:1px solid rgba(234,240,246,.12)}
.ring-fast{animation-duration:8s}

.belt{
height:14px;border-radius:999px;
background:
repeating-linear-gradient(90deg,
rgba(234,240,246,.18) 0 10px,
rgba(234,240,246,.05) 10px 20px);
border:1px solid rgba(234,240,246,.12);
opacity:.9;
margin-top:14px;
overflow:hidden;
position:relative;
}
.belt::after{
content:"";
position:absolute;inset:-10px;
background:linear-gradient(90deg, transparent, rgba(80,200,120,.32), transparent);
transform:translateX(-60%);
animation:sweep 2.3s ease-in-out infinite;
}
.belt.big{height:18px;margin-top:0;margin-bottom:12px}
@keyframes sweep{
0%{transform:translateX(-60%)}
50%{transform:translateX(40%)}
100%{transform:translateX(160%)}
}

.decorstrip{
display:grid;grid-template-columns:110px 1fr;
gap:14px;align-items:center;
border:1px solid var(--line);
background:rgba(18,25,35,.28);
border-radius:var(--radius2);
padding:14px;
}

.pie{
width:96px;height:96px;border-radius:999px;
border:1px solid rgba(234,240,246,.14);
box-shadow:inset 0 0 0 12px rgba(15,19,23,.72);
}
.pie.xl{width:120px;height:120px}
.p1{background:conic-gradient(var(--green) 0 42%, rgba(234,240,246,.10) 42% 100%)}
.p2{background:conic-gradient(var(--red) 0 36%, rgba(234,240,246,.10) 36% 100%)}
.p3{background:conic-gradient(rgba(80,200,120,.95) 0 28%, rgba(230,57,70,.95) 28% 62%, rgba(234,240,246,.10) 62% 100%)}
.minipies{display:flex;gap:10px;align-items:center}

.timelinecard{
border-radius:var(--radius2);
border:1px solid var(--line);
background:rgba(18,25,35,.42);
padding:18px;
box-shadow:var(--shadow);
}
.timelinetop{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.ranges{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
.rangeitem label{display:block;font-weight:800;margin-bottom:6px}
.rangeitem input[type="range"]{
width:100%;
accent-color:var(--green);
}
.rangemeta{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem}
.cccbar{
margin-top:14px;
border-radius:var(--radius);
border:1px solid rgba(230,57,70,.25);
background:rgba(230,57,70,.06);
padding:14px;
display:grid;gap:6px;
}
.ccclabel{color:var(--muted);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.82rem}
.cccv{font-size:1.2rem}
.cccdesc{color:var(--muted)}

.insight{
margin-top:14px;
border-radius:var(--radius2);
border:1px solid rgba(234,240,246,.14);
background:rgba(18,25,35,.28);
padding:14px;
}

.pricinggrid{
display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px
}
.pricecard{
border-radius:var(--radius2);
border:1px solid var(--line);
background:rgba(18,25,35,.40);
padding:16px;
box-shadow:var(--shadow);
}
.pricecard h3{margin:0 0 6px 0;font-family:"Space Grotesk","Manrope",system-ui,sans-serif}
.price{margin:10px 0 10px 0}
.amt{font-size:1.6rem;font-weight:900}
.unit{color:var(--muted)}
.pricecard.featured{
border-color:rgba(80,200,120,.32);
background:
radial-gradient(420px 160px at 20% 0%, rgba(80,200,120,.18), transparent 65%),
rgba(18,25,35,.42);
}

.imgcard{
border-radius:var(--radius2);
border:1px solid var(--line);
background:rgba(18,25,35,.35);
overflow:hidden;
box-shadow:var(--shadow);
}
.imgcap{padding:14px}
.imgcap h3{margin:0 0 6px 0;font-family:"Space Grotesk","Manrope",system-ui,sans-serif}
.imgcap p{margin:0;color:var(--muted)}

.timelinecompact{
border-radius:var(--radius2);
border:1px solid var(--line);
background:rgba(18,25,35,.32);
padding:16px;
}
.timelinecompact h3{margin:0 0 8px 0;font-family:"Space Grotesk","Manrope",system-ui,sans-serif}

.stepgrid{
display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px
}
.step{
border-radius:var(--radius);
border:1px solid rgba(234,240,246,.14);
background:rgba(15,19,23,.35);
padding:12px;
}
.stepn{font-weight:900;color:var(--text)}
.stept{color:var(--muted);margin-top:6px}

.arrowloop{
width:100%;
height:140px;
border-radius:var(--radius2);
border:1px solid rgba(234,240,246,.14);
background:
radial-gradient(220px 120px at 25% 40%, rgba(80,200,120,.20), transparent 60%),
radial-gradient(220px 120px at 75% 60%, rgba(230,57,70,.18), transparent 60%),
linear-gradient(90deg, rgba(234,240,246,.10), rgba(234,240,246,.02));
position:relative;
overflow:hidden;
margin:12px 0;
}
.arrowloop::before{
content:"↻";
position:absolute;left:16px;top:12px;
font-size:48px;font-weight:900;color:rgba(234,240,246,.24);
animation:spin 9s linear infinite;
}
.arrowloop::after{
content:"→";
position:absolute;right:16px;bottom:10px;
font-size:46px;font-weight:900;color:rgba(234,240,246,.22);
animation:slide 2.4s ease-in-out infinite;
}
@keyframes slide{
0%,100%{transform:translateX(0)}
50%{transform:translateX(-12px)}
}

.statgrid{
display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px
}
.stat{
border-radius:var(--radius);
border:1px solid rgba(234,240,246,.14);
background:rgba(18,25,35,.28);
padding:14px;
}
.statn{font-size:1.4rem}
.statt{color:var(--muted);margin-top:8px}

.cyclemetrics{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.metric{
border-radius:var(--radius);
border:1px solid rgba(234,240,246,.14);
background:rgba(18,25,35,.22);
padding:12px;
}
.metrich{color:var(--muted);font-weight:800}
.metricv{margin-top:6px}

.forecastcard{
border-radius:var(--radius2);
border:1px solid var(--line);
background:rgba(18,25,35,.40);
padding:16px;
box-shadow:var(--shadow);
}
.forecastcard h3{margin:0 0 8px 0;font-family:"Space Grotesk","Manrope",system-ui,sans-serif}
.weekgrid{
display:grid;
grid-template-columns:repeat(7, minmax(0, 1fr));
gap:8px;
margin-top:12px;
}
.wk{
border-radius:14px;
border:1px solid rgba(234,240,246,.14);
background:rgba(15,19,23,.35);
padding:8px;
min-height:62px;
position:relative;
overflow:hidden;
}
.wkh{font-weight:900;color:rgba(234,240,246,.88);font-size:.92rem}
.wkb{
position:absolute;left:8px;right:8px;bottom:8px;height:8px;border-radius:999px;
background:linear-gradient(90deg, rgba(80,200,120,.8), rgba(230,57,70,.7));
opacity:.65;
}
.forecastnote{margin-top:10px;color:var(--muted)}

.cta{border-bottom:none}
.bg-cta{
background:
radial-gradient(900px 420px at 30% 20%, rgba(230,57,70,.25), transparent 60%),
radial-gradient(850px 520px at 78% 40%, rgba(80,200,120,.18), transparent 62%),
linear-gradient(180deg, rgba(18,25,35,.35), rgba(15,19,23,0));
}
.ctagrid{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
.ctadecor{position:relative;min-height:260px;border-radius:var(--radius2);border:1px solid var(--line);background:rgba(18,25,35,.35);overflow:hidden;box-shadow:var(--shadow)}
.ctadecor .pie{position:absolute;left:22px;bottom:22px}
.ctadecor .pie:nth-child(2){left:auto;right:26px;top:28px}

.sitefooter{
padding:44px 0 26px 0;
border-top:1px solid var(--line);
background:rgba(10,14,18,.55);
}
.footgrid{display:grid;grid-template-columns:1fr;gap:16px}
.footcol{border:1px solid rgba(234,240,246,.10);background:rgba(18,25,35,.22);border-radius:var(--radius2);padding:16px}
.footbrand{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.footh{margin:0 0 10px 0;font-family:"Space Grotesk","Manrope",system-ui,sans-serif}
.footlink{display:block;padding:8px 0;color:var(--muted)}
.footlink:hover{color:var(--text)}
.footp{margin:0 0 10px 0;color:var(--muted)}
.pill{
display:inline-flex;align-items:center;justify-content:center;
padding:5px 10px;border-radius:999px;
border:1px solid rgba(234,240,246,.14);
background:rgba(15,19,23,.35);
color:rgba(234,240,246,.86);
font-weight:800;
margin-right:8px;
}
.footbottom{margin-top:14px;color:var(--muted);text-align:center}

.legal{padding:44px 0 54px 0}
.legal h1{
margin:0 0 12px 0;
font-family:"Space Grotesk","Manrope",system-ui,sans-serif;
font-size:clamp(1.9rem, 2.8vw, 2.4rem);
}
.legal h2{margin:18px 0 10px 0;font-family:"Space Grotesk","Manrope",system-ui,sans-serif}
.prefs{
margin-top:12px;
border-radius:var(--radius2);
border:1px solid var(--line);
background:rgba(18,25,35,.32);
padding:16px;
}
.prefrow{margin:10px 0}
.checkline{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-weight:700}
.checkline input{margin-top:3px;width:18px;height:18px;accent-color:var(--green)}
.formcard{
border-radius:var(--radius2);
border:1px solid var(--line);
background:rgba(18,25,35,.40);
padding:16px;
box-shadow:var(--shadow);
}
.field{margin-bottom:12px}
.field label{display:block;margin-bottom:6px;font-weight:900}
input,select,textarea{
width:100%;
border-radius:14px;
border:1px solid rgba(234,240,246,.16);
background:rgba(15,19,23,.55);
color:var(--text);
padding:12px 12px;
outline:none;
}
textarea{resize:vertical;min-height:120px}
input:focus,select:focus,textarea:focus{border-color:rgba(80,200,120,.55);box-shadow:0 0 0 4px rgba(80,200,120,.12)}
.contactcard{
border-radius:var(--radius2);
border:1px solid rgba(80,200,120,.20);
background:rgba(80,200,120,.06);
padding:16px;
}

.pricetable{
border-radius:var(--radius2);
border:1px solid var(--line);
background:rgba(18,25,35,.28);
overflow:hidden;
}
.ptrow{
display:grid;
grid-template-columns:1.2fr 2fr .7fr;
gap:12px;
padding:12px 14px;
border-top:1px solid rgba(234,240,246,.10);
color:var(--muted);
}
.ptrow.head{
border-top:none;
background:rgba(15,19,23,.45);
color:rgba(234,240,246,.88);
font-weight:900;
letter-spacing:.02em;
}
.ptrow strong{color:var(--text)}
.imginline{margin-top:14px;border-radius:var(--radius2);overflow:hidden;border:1px solid rgba(234,240,246,.12)}

.notice{
margin-top:12px;
border-radius:var(--radius2);
border:1px solid rgba(234,240,246,.14);
background:rgba(18,25,35,.28);
padding:14px;
color:var(--muted);
}
.notice strong{color:var(--text)}

@media (min-width:860px){
.navbtn{display:none}
.nav{display:flex;flex-direction:row;width:auto;margin-left:auto;padding:0}
.navcta{display:flex}
.herogrid{grid-template-columns:1.25fr .9fr}
.herobadges{grid-template-columns:repeat(3, 1fr)}
.twocol{grid-template-columns:1.08fr 1fr;gap:22px}
.pricinggrid{grid-template-columns:repeat(3, 1fr)}
.stepgrid{grid-template-columns:repeat(2, 1fr)}
.statgrid{grid-template-columns:repeat(3, 1fr)}
.cyclemetrics{grid-template-columns:repeat(3, 1fr)}
.weekgrid{grid-template-columns:repeat(13, minmax(0, 1fr))}
.ctagrid{grid-template-columns:1.15fr .9fr}
.footgrid{grid-template-columns:1.2fr .9fr 1fr}
}