:root{
  --bg:#0a0908;
  --surface:#14110e;
  --surface-2:#1b1712;
  --border:#2b241c;
  --text:#f2ede7;
  --text-dim:#a89f94;
  --text-mute:#6f675d;
  --accent:#e8651c;
  --accent-hot:#ff7a2f;
  --accent-dim:#2a1408;
  --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}

/* ANIMATED BACKGROUND GLOW */
.glow{position:fixed;width:520px;height:520px;border-radius:50%;filter:blur(140px);opacity:.14;pointer-events:none;z-index:0}
.glow.g1{background:var(--accent);top:-180px;right:-140px;animation:drift 14s ease-in-out infinite alternate}
.glow.g2{background:#ff9a3c;bottom:-220px;left:-160px;animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.15)}}
main,nav,footer{position:relative;z-index:1}

/* NAV */
nav{position:sticky;top:0;z-index:60;background:rgba(10,9,8,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:.3px}
.logo svg{display:block}
.logo span{color:var(--accent)}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:14px;color:var(--text-dim);transition:color .2s;position:relative}
.nav-links a:not(.nav-cta):after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--accent);transition:width .25s}
.nav-links a:hover:after,.nav-links a.active:after{width:100%}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-cta{background:var(--accent);color:#fff!important;padding:9px 18px;border-radius:8px;font-weight:600;font-size:14px;transition:background .2s,transform .2s}
.nav-cta:hover{background:var(--accent-hot);transform:translateY(-1px)}
@media(max-width:720px){.nav-links{gap:16px}.nav-links a:not(.nav-cta){display:none}}

/* BUTTONS */
.btn{padding:13px 26px;border-radius:10px;font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent;transition:all .22s;display:inline-block}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 24px rgba(232,101,28,.28)}
.btn-primary:hover{background:var(--accent-hot);transform:translateY(-2px);box-shadow:0 10px 30px rgba(232,101,28,.38)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-hot)}

/* HERO */
.hero{text-align:center;padding:74px 0 56px}
.eyebrow{font-size:12px;letter-spacing:3px;color:var(--accent);margin-bottom:20px;font-weight:600}
.hero h1{font-size:clamp(34px,6vw,54px);font-weight:700;line-height:1.08;letter-spacing:-1.2px;margin-bottom:16px}
.hero h1 .fire{background:linear-gradient(90deg,var(--accent),#ffb163);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:17px;color:var(--text-dim);max-width:520px;margin:0 auto 30px;line-height:1.65}
.btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* typing dot pulse under hero */
.pulse-line{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:26px;font-size:13px;color:var(--text-mute)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.4}}

/* PAGE HEADER */
.page-head{padding:56px 0 36px;border-bottom:1px solid var(--border)}
.page-head .eyebrow{margin-bottom:12px}
.page-head h1{font-size:clamp(30px,5vw,44px);font-weight:700;letter-spacing:-1px;margin-bottom:12px}
.page-head p{font-size:16px;color:var(--text-dim);max-width:560px;line-height:1.7}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:30px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat{text-align:center;transition:transform .25s}
.stat:hover{transform:translateY(-3px)}
.stat .num{font-size:25px;font-weight:700;color:var(--accent)}
.stat .lbl{font-size:12.5px;color:var(--text-dim);margin-top:3px}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr);gap:22px 14px}}

/* SECTIONS tighter */
section.block{padding:50px 0}
section.block + section.block{border-top:1px solid var(--border)}
.sec-label{font-size:12px;letter-spacing:2px;color:var(--accent);margin-bottom:8px;font-weight:600}
.sec-title{font-size:clamp(23px,4vw,30px);font-weight:700;letter-spacing:-.5px;margin-bottom:26px}

/* CARDS */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:720px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:border-color .25s,transform .25s,box-shadow .25s;cursor:pointer;position:relative;overflow:hidden}
.card:before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(232,101,28,.06),transparent);transition:left .6s}
.card:hover:before{left:130%}
.card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.card .ico{width:44px;height:44px;border-radius:10px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:22px;transition:transform .3s}
.card:hover .ico{transform:scale(1.12) rotate(-4deg)}
.card h3{font-size:17px;font-weight:700;margin-bottom:7px}
.card p{font-size:14px;color:var(--text-dim);line-height:1.6;margin-bottom:12px}
.card .price{font-size:14px;font-weight:700;color:var(--accent)}
.card .more{font-size:12.5px;color:var(--text-mute);margin-top:8px;display:flex;align-items:center;gap:6px}
.card .more b{color:var(--accent-hot);transition:transform .2s;display:inline-block}
.card:hover .more b{transform:translateX(4px)}
.custom{background:linear-gradient(120deg,var(--accent-dim),#1c0f06);border:1px solid var(--accent);border-radius:var(--radius);padding:22px 26px;margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.custom h3{font-size:17px;font-weight:700;margin-bottom:3px}
.custom p{font-size:14px;color:var(--text-dim)}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:720px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border-radius:var(--radius);padding:22px;border:1px solid var(--border);transition:transform .25s,border-color .25s}
.step:hover{transform:translateY(-3px);border-color:var(--accent)}
.step .n{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:8px}
.step h4{font-size:15.5px;font-weight:700;margin-bottom:5px}
.step p{font-size:13.5px;color:var(--text-dim);line-height:1.6}

/* TOOLS MARQUEE */
.marquee-sec{padding:34px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.marquee-label{text-align:center;font-size:12px;letter-spacing:2px;color:var(--text-mute);margin-bottom:18px;font-weight:600}
.marquee{display:flex;gap:14px;width:max-content;animation:scroll 26s linear infinite}
.marquee:hover{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.chip{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;color:var(--text-dim);white-space:nowrap;transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--accent);color:var(--accent-hot)}
.chip i{font-style:normal}

/* ABOUT */
.about-txt{font-size:16px;color:var(--text-dim);line-height:1.8;max-width:660px;margin-bottom:16px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
@media(max-width:720px){.values{grid-template-columns:1fr}}
.value{background:var(--surface);border-radius:var(--radius);padding:22px;border:1px solid var(--border);transition:transform .28s,border-color .28s,box-shadow .28s}
.value:hover{transform:translateY(-5px) scale(1.01);border-color:var(--accent);box-shadow:0 14px 30px rgba(0,0,0,.45)}
.value .ico{font-size:24px;margin-bottom:10px;display:inline-block;transition:transform .3s}
.value:hover .ico{transform:scale(1.2) rotate(6deg)}
.value h4{font-size:15.5px;font-weight:700;margin-bottom:5px}
.value p{font-size:13.5px;color:var(--text-dim);line-height:1.6}

/* CTA STRIP */
.cta-strip{text-align:center;padding:54px 0;border-top:1px solid var(--border)}
.cta-strip h2{font-size:clamp(23px,4vw,30px);font-weight:700;margin-bottom:10px}
.cta-strip p{font-size:15px;color:var(--text-dim);margin-bottom:22px}

/* CONTACT */
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:34px;max-width:600px;margin:0 auto}
.contact-card h2{font-size:24px;font-weight:700;margin-bottom:6px;text-align:center}
.contact-card .lead{font-size:14.5px;color:var(--text-dim);text-align:center;margin-bottom:24px;line-height:1.6}
form{display:flex;flex-direction:column;gap:12px}
input,textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:13px 15px;color:var(--text);font-size:15px;font-family:inherit;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,101,28,.15)}
input::placeholder,textarea::placeholder{color:var(--text-mute)}
textarea{resize:vertical;min-height:92px}
.submit{background:var(--accent);color:#fff;border:none;padding:14px;border-radius:9px;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s}
.submit:hover{background:var(--accent-hot);transform:translateY(-1px)}
.alt-contact{text-align:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--border);font-size:14px;color:var(--text-dim)}
.alt-contact a{color:var(--accent-hot);font-weight:600}

/* FOOTER */
footer{background:var(--surface);border-top:1px solid var(--border)}
.foot-inner{display:flex;justify-content:space-between;align-items:center;padding:26px 0;flex-wrap:wrap;gap:14px}
.foot-inner .fb{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.foot-inner .fb span{color:var(--accent)}
.foot-links{display:flex;gap:20px}
.foot-links a{font-size:13.5px;color:var(--text-dim);transition:color .2s}
.foot-links a:hover{color:var(--accent-hot)}
.foot-copy{text-align:center;padding:15px 0;font-size:12.5px;color:var(--text-mute);border-top:1px solid var(--border)}

/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(5,4,3,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-bg.open{display:flex;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;max-width:560px;width:100%;max-height:86vh;overflow-y:auto;padding:30px;position:relative;animation:popUp .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes popUp{from{transform:scale(.92) translateY(18px);opacity:0}to{transform:none;opacity:1}}
.modal .close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--text-mute);font-size:26px;cursor:pointer;line-height:1;transition:color .2s}
.modal .close:hover{color:var(--accent-hot)}
.modal .m-ico{width:50px;height:50px;border-radius:12px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;font-size:25px;margin-bottom:14px}
.modal h3{font-size:21px;font-weight:700;margin-bottom:8px}
.modal .m-desc{font-size:14.5px;color:var(--text-dim);line-height:1.7;margin-bottom:18px}
.modal h4{font-size:13px;letter-spacing:1.5px;color:var(--accent);font-weight:700;margin:18px 0 10px}
.modal ul{list-style:none}
.modal ul li{font-size:14px;color:var(--text-dim);padding-left:22px;position:relative;margin-bottom:8px;line-height:1.55}
.modal ul li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.modal .m-price{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.modal .m-price .p{font-size:19px;font-weight:700;color:var(--accent)}

/* FLOW DIAGRAM inside modal */
.flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.fstep{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:9px 13px;font-size:12.5px;font-weight:600;color:var(--text-dim);animation:stepGlow 2.4s ease-in-out infinite}
.fstep:nth-child(1){animation-delay:0s}
.fstep:nth-child(3){animation-delay:.6s}
.fstep:nth-child(5){animation-delay:1.2s}
.fstep:nth-child(7){animation-delay:1.8s}
@keyframes stepGlow{0%,100%{border-color:var(--border);color:var(--text-dim)}12%{border-color:var(--accent);color:var(--accent-hot);box-shadow:0 0 14px rgba(232,101,28,.35)}24%{border-color:var(--border);color:var(--text-dim)}}
.farrow{color:var(--accent);font-weight:700;font-size:14px;animation:arrowMove 1.4s ease-in-out infinite}
@keyframes arrowMove{0%,100%{transform:translateX(0);opacity:.6}50%{transform:translateX(4px);opacity:1}}