/* ══════════════ HOME-ONLY SECTIONS ══════════════ */

/* hero */
.hero{position:relative;min-height:795px;display:flex;align-items:center;
  background:#1A0B05;overflow:hidden}
.hero-bg{position:absolute;inset:0;
  background:
    radial-gradient(880px 620px at 76% 46%, rgba(249,174,25,.30), transparent 62%),
    radial-gradient(520px 430px at 90% 16%, rgba(248,232,0,.20), transparent 58%),
    radial-gradient(600px 500px at 60% 92%, rgba(184,8,24,.28), transparent 62%),
    linear-gradient(102deg,#1A0B05 0%,#2A1207 44%,#4A2408 76%,#6B330A 100%)}
/* the logo oval, blown up as a hero motif */
.hero-bg::after{content:"";position:absolute;right:-8%;top:50%;transform:translateY(-50%);
  width:760px;height:560px;border-radius:50%;
  background:radial-gradient(ellipse at 42% 38%, rgba(248,232,0,.30), rgba(240,120,0,.18) 46%, transparent 70%);
  filter:blur(6px)}
.hero-visual{position:absolute;z-index:1;right:1%;top:96px;width:52%;max-width:720px;
  display:flex;flex-direction:column;align-items:center}
.hero-shot{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 46px rgba(0,0,0,.4))}
.hero .wrap{position:relative;z-index:2;padding-top:100px;width:100%}
.hero h1{font-size:var(--t-hero);font-weight:900;line-height:1.14;letter-spacing:-.02em;
  color:var(--white);max-width:660px;margin:22px 0 0;display:flex;flex-direction:column;gap:6px}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero p.sub{font-size:var(--t-def);line-height:31px;color:rgba(255,255,255,.86);
  max-width:600px;margin-top:22px}
.hero .hcta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}

.proof{position:relative;margin-top:20px;width:fit-content;background:var(--white);border-radius:22px;
  padding:14px 24px 14px 14px;display:flex;align-items:center;gap:16px;
  box-shadow:0 12px 34px rgba(0,0,0,.3);border-bottom:4px solid var(--amber)}
.proof .stack{display:flex}
.proof .stack i{width:46px;height:46px;border-radius:50%;border:2px solid var(--white);
  margin-left:-11px;font-style:normal;display:grid;place-items:center;color:var(--white)}
.proof .stack i:first-child{margin-left:0}
.proof .stack i:nth-child(1){background:var(--red)}
.proof .stack i:nth-child(2){background:var(--orange)}
.proof .stack i:nth-child(3){background:var(--amber);color:var(--ink)}
.proof .stack i svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.proof b{display:block;font-size:var(--t-b2);font-weight:700}
.proof .rate{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:var(--t-b3);color:var(--desc)}
.proof .rate strong{color:var(--ink)}
.proof .rate svg{width:17px;height:17px;fill:var(--amber);flex:none}

/* why-choose split */
.why .wrap{display:grid;grid-template-columns:530px 1fr;gap:80px;align-items:center}
.why .copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{border-radius:var(--r-card);padding:32px 28px;min-height:224px;display:flex;
  flex-direction:column;transition:.22s;border:2px solid transparent}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(0,0,0,.12)}
.card .ci{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px}
.card svg{width:28px;height:28px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:var(--t-h4);font-weight:700;line-height:1.25;margin-bottom:9px}
.card p{font-size:var(--t-b2);line-height:25px}
.card.light{background:var(--white);border-color:var(--line)}
.card.light .ci{background:var(--cream-2)}
.card.light svg{stroke:var(--orange)}
.card.light p{color:var(--desc)}
.card.fill{background:var(--red);color:var(--white)}
.card.fill .ci{background:rgba(255,255,255,.15)}
.card.fill svg{stroke:var(--yellow)}
.card.fill p{color:rgba(255,255,255,.9)}
.card.amber{background:var(--amber);color:var(--ink)}
.card.amber .ci{background:rgba(0,0,0,.1)}
.card.amber svg{stroke:var(--ink)}
.card.amber p{color:rgba(0,0,0,.72)}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:80px;margin-top:56px;text-align:center}
.step .art{height:200px;display:grid;place-items:center;margin-bottom:36px}
.step .disc{width:184px;height:184px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream);border:2px dashed var(--amber);position:relative}
.step .disc::after{content:attr(data-n);position:absolute;top:2px;right:2px;width:44px;height:44px;
  border-radius:50%;background:var(--red);color:var(--yellow);display:grid;place-items:center;
  font-weight:900;font-size:19px;border:3px solid var(--white)}
.step .disc svg{width:76px;height:76px;stroke:var(--orange);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.step h3{font-size:var(--t-h3);font-weight:700;line-height:34px;margin-bottom:10px}
.step p{font-size:var(--t-b2);line-height:26px;color:var(--desc)}

/* red CTA band */
.cta{background:var(--red);padding:66px 0;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;left:-6%;top:-40%;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(248,232,0,.18),transparent 66%)}
.cta::after{content:"";position:absolute;right:-6%;bottom:-50%;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(249,174,25,.20),transparent 66%)}
.cta .wrap{position:relative;z-index:2}
.cta h2{font-size:var(--t-h2);font-weight:800;line-height:1.2;color:var(--white);
  margin-bottom:16px;letter-spacing:-.015em}
.cta h2 em{font-style:normal;color:var(--yellow)}
.cta p{font-size:var(--t-def);line-height:31px;color:rgba(255,255,255,.9);max-width:900px;margin:0 auto 32px}

/* testimonial */
.testi .wrap{display:grid;grid-template-columns:600px 1fr;gap:100px;align-items:center}
.figure{position:relative;height:660px;display:grid;place-items:center}
.figure .blob{position:absolute;width:470px;height:440px;bottom:10px;left:50%;
  transform:translateX(-50%);background:var(--amber);border-radius:240px 240px 40px 40px}
.figure .plant{position:relative;z-index:2;width:330px;height:430px;border-radius:20px;
  background:linear-gradient(160deg,#C50D1E 0%,#B80818 58%,#7C0511 100%);display:flex;
  flex-direction:column;justify-content:space-between;padding:34px 30px;
  box-shadow:0 34px 70px rgba(0,0,0,.36);overflow:hidden;transform:rotate(-3deg)}
.figure .plant::before{content:"";position:absolute;left:0;right:0;top:0;height:30%;background:rgba(255,255,255,.09)}
.figure .plant::after{content:"";position:absolute;right:-80px;bottom:-80px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle at 38% 34%,rgba(248,232,0,.34),transparent 64%)}
.figure .plant .oval{width:132px;height:88px;border-radius:50%;background:var(--yellow);
  border:6px solid var(--orange);box-shadow:0 10px 26px rgba(0,0,0,.32);display:grid;place-items:center;position:relative}
.figure .plant .oval span{font-size:26px;font-weight:900;color:var(--red);font-style:italic}
.figure .plant b{font-size:36px;font-weight:900;color:var(--white);line-height:1.1;position:relative}
.figure .plant b em{font-style:normal;color:var(--yellow)}
.figure .plant small{font-size:12px;color:rgba(255,255,255,.8);letter-spacing:.2em;
  text-transform:uppercase;position:relative;font-weight:700}
.figure .dot{position:absolute;border-radius:5px}
.figure .dot.a{width:16px;height:16px;left:14px;bottom:120px;background:var(--red)}
.figure .dot.b{width:19px;height:19px;left:180px;top:80px;background:var(--yellow)}
.figure .dot.c{width:19px;height:19px;right:20px;bottom:190px;background:var(--orange)}
.quote{font-size:var(--t-def);line-height:33px;margin:28px 0 40px;max-width:520px;
  padding-left:26px;border-left:4px solid var(--yellow)}
.who{display:flex;align-items:center;gap:15px}
.who .av{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--red);color:var(--yellow);font-weight:900;font-size:24px}
.who .av svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.who b{font-size:var(--t-def);font-weight:600;display:block}
.who small{font-size:var(--t-b2);color:var(--desc)}
.rating{display:flex;align-items:center;gap:12px;margin-top:16px}
.rating .st{display:flex;gap:9px}
.rating .st svg{width:23px;height:23px;fill:var(--amber)}
.rating .st svg.off{fill:none;stroke:var(--amber);stroke-width:1.6}
.rating span{font-size:15px;font-weight:600}

@media(max-width:1180px){
  .why .wrap,.testi .wrap{grid-template-columns:1fr;gap:56px}
  .steps{gap:48px}
}
@media(max-width:900px){
  .hero{min-height:0;flex-direction:column;padding:100px 0 40px}
  .hero-visual{position:static;order:2;width:60%;max-width:380px;margin:28px auto 0}
  .hero .wrap{order:1;padding-top:0}
  .steps,.cards{grid-template-columns:1fr}
  .figure{height:470px}
  .figure .plant{width:270px;height:350px}
  .figure .blob{width:340px;height:310px}
}
@media(max-width:640px){
  .hero{padding-bottom:56px}
  .hero-visual{width:82%;max-width:320px}
  .proof{width:100%;flex-direction:column;text-align:center;gap:10px;padding:20px 22px}
  .proof .rate{justify-content:center}
  .hero h1{font-size:34px}
  .figure{height:360px}
  .figure .plant{width:210px;height:270px;padding:24px 20px}
  .figure .plant b{font-size:26px}
  .figure .blob{width:250px;height:230px}
  .quote{font-size:16px;line-height:27px}
}