/*! Cart & Broom™ · Copyright © 2026 Angel Tech Corporation Industries L.L.C. (ANGEL TECH™). All rights reserved.
 *  Proprietary software owned by Angel Tech Corporation Industries L.L.C.: no copying, changing, sharing or reuse
 *  without its written permission (see LICENSE). ANGEL TECH and CART & BROOM are trademarks of Angel Tech Corporation
 *  Holding L.C., used under license. */
/* Cart & Broom landing page (/welcome). Builds on pages.css (tokens, buttons, footer). */
.welcome{--wbg:#F3FBF6;--card:#FFFFFFE6;--shadow:0 30px 60px -30px rgba(39,48,77,.35);background:var(--wbg);overflow-x:clip}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .welcome{--wbg:#10172A;--card:#1E2642E6;--shadow:0 30px 60px -30px rgba(0,0,0,.7)} }
:root[data-theme="dark"] .welcome{--wbg:#10172A;--card:#1E2642E6;--shadow:0 30px 60px -30px rgba(0,0,0,.7)}
html:has(.welcome){background:var(--wbg);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html:has(.welcome){scroll-behavior:auto}}

/* soft candy light behind everything */
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.glow i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.glow i:nth-child(1){width:520px;height:520px;left:-160px;top:-140px;background:var(--green)}
.glow i:nth-child(2){width:460px;height:460px;right:-180px;top:120px;background:var(--blue)}
.glow i:nth-child(3){width:420px;height:420px;left:30%;top:70%;background:var(--orange);opacity:.35}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .glow i{opacity:.18} }
:root[data-theme="dark"] .glow i{opacity:.18}

/* nav */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;
  padding:calc(12px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right),calc((100% - 1160px) / 2)) 12px max(20px,env(safe-area-inset-left),calc((100% - 1160px) / 2));
  background:color-mix(in srgb,var(--wbg) 78%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.nav-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 24px/1 var(--font-show);white-space:nowrap}
.nav-brand sup{font-size:.45em}
.nav-links{display:flex;gap:6px;margin-left:auto}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:800;padding:10px 12px;border-radius:999px}
.nav-links a:hover{color:var(--ink);background:var(--soft)}
.nav-cta{min-height:44px;padding:8px 18px;font-size:15px}
@media (max-width:720px){.nav-links{display:none}.nav-cta{margin-left:auto}}

main{max-width:1160px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
.kicker{font:800 13px/1.2 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--green-text)}
.kicker.orange{color:var(--orange-text)}
.kicker.blue{color:var(--blue-text)}
.btn.big{min-height:56px;padding:14px 30px;font-size:18px}
.btn.ghost{background:var(--card)}
.fine{font-size:14px;color:var(--muted);margin-top:14px}
.center{text-align:center}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:56px 0 40px}
.hero h1{font:800 clamp(44px,6.6vw,78px)/1 var(--font-show);letter-spacing:-.02em;margin-top:14px;text-wrap:balance}
.ink-swash{background:linear-gradient(100deg,var(--green-lip),var(--blue-lip) 55%,var(--orange-lip));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(17px,1.8vw,20px);line-height:1.6;color:var(--muted);font-weight:700;margin-top:20px;max-width:34em}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;list-style:none;padding:0;font-size:15px;color:var(--muted);font-weight:700}
.hero-proof b{color:var(--ink)}
.hero-phones{position:relative;height:560px}
.phone{position:absolute;margin:0;width:230px;border-radius:40px;overflow:hidden;background:#111827;padding:8px;box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.08) inset}
.phone img{display:block;width:100%;height:auto;border-radius:32px}
.phone.front{left:50%;top:0;transform:translateX(-50%);z-index:2;width:260px}
.phone.back{top:70px;opacity:.97}
.phone.left{left:2%;transform:rotate(-7deg)}
.phone.right{right:2%;transform:rotate(7deg)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:32px;text-align:left}
  .hero-phones{height:470px;margin-top:8px}
  .phone{width:180px}.phone.front{width:215px}.phone.back{top:60px}
}
@media (max-width:420px){.phone{width:150px}.phone.front{width:196px}.hero-phones{height:430px}}

/* trio */
.section-title{font:800 clamp(32px,4.4vw,52px)/1.06 var(--font-show);text-align:center;letter-spacing:-.01em;text-wrap:balance}
.section-sub{text-align:center;color:var(--muted);font-weight:700;margin:14px auto 0;max-width:40em}
.trio{padding:70px 0 30px}
.trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media (max-width:900px){.trio-grid{grid-template-columns:1fr}}
.trio-card{background:var(--card);border-radius:30px;padding:28px 26px;box-shadow:var(--shadow),inset 0 0 0 1.5px var(--line);backdrop-filter:blur(8px)}
.trio-card h3{font:800 24px/1.15 var(--font-show);margin-top:16px}
.trio-card p{margin-top:8px;color:var(--muted);font-weight:700;line-height:1.55}
.badge{display:grid;place-items:center;width:54px;height:54px;border-radius:18px}
.badge svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.badge.green{background:var(--green);color:var(--green-ink);box-shadow:0 4px 0 var(--green-lip)}
.badge.orange{background:var(--orange);color:var(--orange-ink);box-shadow:0 4px 0 var(--orange-lip)}
.badge.blue{background:var(--blue);color:var(--blue-ink);box-shadow:0 4px 0 var(--blue-lip)}

/* feature rows */
.feature{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:60px 0}
.feature.flip .feature-copy{order:2}
.feature h2{font:800 clamp(30px,4vw,46px)/1.08 var(--font-show);margin-top:10px;letter-spacing:-.01em;text-wrap:balance}
.feature-copy > p:not(.kicker){font-size:18px;line-height:1.65;color:var(--muted);font-weight:700;margin-top:16px;max-width:32em}
.feature-copy .fine{font-size:14px}
.phone.solo{position:relative;justify-self:center;width:280px}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:28px;padding:44px 0}.feature.flip .feature-copy{order:0}.phone.solo{width:240px}}

/* promises */
.promises{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:40px 0;border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}
.promises div{background:var(--ink);color:var(--surface);padding:28px 26px;display:grid;gap:6px}
.promises b{font:800 22px/1.2 var(--font-show)}
.promises span{opacity:.82;font-weight:700;line-height:1.5}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .promises div{background:var(--surface);color:var(--ink)} }
:root[data-theme="dark"] .promises div{background:var(--surface);color:var(--ink)}
@media (max-width:900px){.promises{grid-template-columns:1fr}}

/* plans */
.plans-section{padding:70px 0 30px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;align-items:stretch}
@media (max-width:900px){.plan-grid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}}
.plan-card{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--card);border-radius:32px;padding:30px 26px;box-shadow:var(--shadow),inset 0 0 0 1.5px var(--line)}
.plan-card h3{font:800 28px/1 var(--font-show)}
.plan-card .price{display:flex;align-items:baseline;gap:8px}
.plan-card .price b{font:800 46px/1 var(--font-body);letter-spacing:-.02em}
.plan-card .price small{font-size:16px;font-weight:700;color:var(--muted)}
.plan-line{font-weight:800}
.plan-card ul{list-style:none;padding:0;display:grid;gap:10px;margin:6px 0 10px;flex:1}
.plan-card li{position:relative;padding-left:32px;font-weight:700;color:var(--muted);line-height:1.4}
.plan-card li::before{content:"✓";position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--green-wash);color:var(--green-text);font-size:13px;font-weight:800}
.plan-card .btn{width:100%}
.plan-card.featured{background:linear-gradient(160deg,#FFF6CF,#FFFFFF 55%);box-shadow:0 40px 70px -30px rgba(227,177,0,.55),inset 0 0 0 3px var(--yellow-lip);transform:translateY(-10px)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .plan-card.featured{background:linear-gradient(160deg,#3A3420,var(--surface) 60%)} }
:root[data-theme="dark"] .plan-card.featured{background:linear-gradient(160deg,#3A3420,var(--surface) 60%)}
.ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--yellow);color:var(--yellow-ink);font-weight:800;font-size:14px;padding:6px 16px;border-radius:999px;box-shadow:0 3px 0 var(--yellow-lip);white-space:nowrap}
@media (max-width:900px){.plan-card.featured{transform:none;order:-1}}

/* finale */
.finale{text-align:center;padding:80px 20px 70px;margin:40px 0 0;border-radius:40px;background:linear-gradient(135deg,var(--green),var(--blue));color:var(--green-ink);box-shadow:var(--shadow)}
.finale h2{font:800 clamp(36px,5vw,60px)/1.05 var(--font-show)}
.finale p{font-weight:800;margin:12px auto 26px;max-width:30em;font-size:18px}
.finale .btn.primary{background:var(--ink);color:#fff;box-shadow:0 5px 0 #11162B}
.welcome .foot{padding:40px 20px calc(30px + env(safe-area-inset-bottom))}

/* gentle entrances (only when motion is welcome; content is visible without script) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .plan-card.featured.reveal.in{transform:translateY(-10px)}
@media (max-width:900px){.js .plan-card.featured.reveal.in{transform:none}}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity:1;transform:none;transition:none}}