/* ── Reset & Base ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,-apple-system,sans-serif;color:#e2e8f0;line-height:1.6;background:#0a0a0a;overflow-x:hidden;position:relative;min-height:100vh;background:linear-gradient(180deg,#0a0a0a 0%,#1a1008 10%,#2a180c 25%,#3d2510 40%,#4e3015 55%,#5e3a18 70%,#6e441c 85%,#7a4e20 100%);background-attachment:fixed}

/* ── Container ────────────────────────────────────────── */
.container{max-width:1140px;margin:0 auto;padding:0 28px}

/* ── Gradient text ────────────────────────────────────── */
.gradient-text{background:linear-gradient(135deg,#FF6B35 0%,#ffad85 50%,#FF6B35 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── Nav ──────────────────────────────────────────────── */
.nav{position:fixed;top:0;width:100%;background:transparent;z-index:100;transition:all .3s ease;transform:translateY(0)}
.nav--hidden{transform:translateY(-100%)}
.nav--scrolled{background:rgba(10,10,10,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav__inner{display:flex;justify-content:space-between;align-items:center;height:72px}
.nav__logo{display:flex;align-items:center;gap:6px;font-size:1.5rem;font-weight:800;color:#fff;text-decoration:none;letter-spacing:-0.5px}
.nav__logo-img{width:36px;height:36px;border-radius:8px}
.nav__links{display:flex;align-items:center;gap:32px}
.nav__link{font-size:.9rem;font-weight:500;color:rgba(255,255,255,.85);text-decoration:none;transition:color .2s}
.nav__link:hover{color:#FF6B35}

/* ── Buttons ──────────────────────────────────────────── */
.btn{display:inline-block;padding:12px 28px;border-radius:50px;font-weight:600;font-size:.95rem;text-decoration:none;transition:all .3s ease;cursor:pointer}
.btn--sm{padding:10px 24px;font-size:.85rem}
.btn--lg{padding:16px 40px;font-size:1.05rem}
.btn--primary{background:#FF6B35;color:#fff;box-shadow:0 0 30px rgba(255,107,53,.25)}
.btn--primary:hover{background:#ff7d4d;transform:translateY(-2px);box-shadow:0 0 40px rgba(255,107,53,.4)}
.btn--ghost{border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);background:transparent}
.btn--ghost:hover{border-color:rgba(255,255,255,.3);color:#fff;background:rgba(255,255,255,.05)}
.btn--white{background:#fff;color:#0a0a0a;font-weight:700;box-shadow:0 0 30px rgba(255,255,255,.1)}
.btn--white:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(255,255,255,.2)}

/* ── Hero ─────────────────────────────────────────────── */
.hero{position:relative;padding:160px 0 100px;text-align:center;overflow:hidden;background:transparent}
.hero__bg{position:absolute;inset:0;pointer-events:none}

.hero__title{font-size:clamp(2.8rem,6vw,4.5rem);font-weight:900;line-height:1.05;letter-spacing:-2.5px;color:#fff}
.hero__sub{margin-top:24px;font-size:1.2rem;color:rgba(255,255,255,.75);max-width:560px;margin-left:auto;margin-right:auto;line-height:1.7}
.hero__cta{margin-top:48px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero__stats{display:flex;justify-content:center;align-items:center;gap:48px;margin-top:72px;padding-top:48px;border-top:1px solid rgba(255,255,255,.08)}
.stat{text-align:center}
.stat__number{display:block;font-size:2.2rem;font-weight:800;color:#fff;letter-spacing:-1px}
.stat__label{font-size:.85rem;color:rgba(255,255,255,.7);margin-top:4px}
.stat__divider{width:1px;height:40px;background:rgba(255,255,255,.1)}

/* ── Sections ─────────────────────────────────────────── */
.section{padding:100px 0;background:transparent}
.section--alt{background:transparent}
.section--cta{padding:100px 0;background:transparent;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.06)}
.section--cta::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(255,107,53,.1) 0%,transparent 70%);pointer-events:none}
.section__header{margin-bottom:16px}

.section__title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;text-align:center;letter-spacing:-1px;line-height:1.2;color:#fff}
.section__title--white{color:#fff}
.section__sub{text-align:center;color:rgba(255,255,255,.75);margin-top:16px;font-size:1.1rem;max-width:520px;margin-left:auto;margin-right:auto}
.section__sub--white{color:rgba(255,255,255,.8)}

/* ── Grid ─────────────────────────────────────────────── */
.grid{display:grid;gap:24px;margin-top:56px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* ── Cards ────────────────────────────────────────────── */
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:36px 32px;transition:all .3s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.3);border-color:rgba(255,107,53,.25);background:rgba(255,255,255,.05)}
.card__icon-wrap{width:48px;height:48px;border-radius:12px;background:rgba(255,107,53,.1);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:#FF6B35;font-size:1.4rem}
.card__icon-wrap ion-icon{font-size:1.4rem;color:#FF6B35}
.card h3{font-size:1.15rem;font-weight:700;margin-bottom:10px;color:#fff}
.card p{font-size:.93rem;color:rgba(255,255,255,.75);line-height:1.7}
.card--benefit{border-left:4px solid #FF6B35;background:rgba(255,255,255,.03)}
.card--benefit:hover{border-left-color:#ff7d4d}
.card__benefit-icon{font-size:1.8rem;color:#FF6B35;margin-bottom:16px;display:flex;align-items:center}
.card__benefit-icon ion-icon{font-size:1.8rem}

/* ── Showcase (inspection) ─────────────────────────────── */
.section--dark{background:transparent;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.showcase__title{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;line-height:1.2;letter-spacing:-1px;color:#fff;text-align:left}
.showcase__desc{margin-top:20px;font-size:1rem;color:rgba(255,255,255,.75);line-height:1.8;text-align:left}
.showcase__list{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:14px}
.showcase__list li{display:flex;align-items:center;gap:12px;font-size:.95rem;color:rgba(255,255,255,.85);font-weight:500}
.showcase__list ion-icon{font-size:1.2rem;color:#FF6B35}
.showcase__image{position:relative;display:flex;justify-content:center}
.showcase__image img{width:100%;max-width:480px;border-radius:20px;box-shadow:0 30px 60px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08)}
.showcase__image::before{content:'';position:absolute;width:300px;height:300px;background:radial-gradient(circle,rgba(255,107,53,.2) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;filter:blur(60px);pointer-events:none}

/* ── Steps ────────────────────────────────────────────── */
.steps{max-width:640px;margin:56px auto 0;display:flex;flex-direction:column;gap:0;position:relative}
.steps::before{content:'';position:absolute;left:28px;top:28px;bottom:28px;width:2px;background:linear-gradient(to bottom,#FF6B35,rgba(255,107,53,.1))}
.step{display:flex;align-items:flex-start;gap:24px;padding:24px 0;position:relative}
.step__number{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#FF6B35,#ff8f66);color:#fff;font-size:1.2rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;box-shadow:0 4px 15px rgba(255,107,53,.3)}
.step__content h3{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:6px}
.step__content p{font-size:.93rem;color:rgba(255,255,255,.75);line-height:1.7}

/* ── Footer ───────────────────────────────────────────── */
.footer{padding:48px 0 32px;border-top:1px solid rgba(255,255,255,.06);background:transparent}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:24px}
.footer__brand{display:flex;align-items:center;gap:6px}
.footer__logo-img{width:32px;height:32px;border-radius:8px}
.footer__logo{font-weight:800;font-size:1.2rem;color:#fff}
.footer__links{display:flex;gap:28px}
.footer__link{font-size:.9rem;color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s}
.footer__link:hover{color:#FF6B35}
.footer__copy{font-size:.8rem;color:rgba(255,255,255,.5)}

/* ── Scroll reveal animations ─────────────────────────── */
.reveal{opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.16,1,.3,1)}
.reveal.revealed{opacity:1;transform:translateY(0)}
.grid .reveal:nth-child(1){transition-delay:.05s}
.grid .reveal:nth-child(2){transition-delay:.1s}
.grid .reveal:nth-child(3){transition-delay:.15s}
.grid .reveal:nth-child(4){transition-delay:.2s}
.grid .reveal:nth-child(5){transition-delay:.25s}
.grid .reveal:nth-child(6){transition-delay:.3s}
.steps .reveal:nth-child(1){transition-delay:.05s}
.steps .reveal:nth-child(2){transition-delay:.15s}
.steps .reveal:nth-child(3){transition-delay:.25s}
.steps .reveal:nth-child(4){transition-delay:.35s}

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:768px){
  .grid--3,.grid--2{grid-template-columns:1fr}
  .hero{padding:130px 0 72px}
  .hero__title{letter-spacing:-1px}
  .hero__stats{flex-direction:column;gap:20px}
  .stat__divider{width:40px;height:1px}
  .section{padding:72px 0}
  .nav__links{gap:16px}
  .nav__link{display:none}
  .steps::before{left:20px}
  .step__number{width:40px;height:40px;font-size:.95rem}
  .showcase{grid-template-columns:1fr;gap:40px;text-align:center}
  .showcase__title,.showcase__desc{text-align:center}
  .showcase__list{align-items:center}
  .showcase__image{order:-1}
  .showcase__image img{max-width:320px}
}