/* Homepage. Loads after base.css; uses only base tokens. */

/* ---------- 3D background ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:0;transition:opacity 1.2s ease}
#gl.ready{opacity:.85}
.no-gl #gl{display:none}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 50% at 78% 25%,rgba(0,117,74,.28),transparent 70%),radial-gradient(120% 90% at 50% 40%,transparent 35%,rgba(6,17,13,.85) 100%)}

/* Sections sit on a soft ink scrim so text never fights the 3D scene */
.section{isolation:isolate}
.section::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(6,17,13,0),rgba(6,17,13,.78) 14%,rgba(6,17,13,.78) 86%,rgba(6,17,13,0))}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);align-items:center;gap:var(--s-8);max-width:calc(var(--container) + 2 * var(--pad));margin:0 auto;padding:140px var(--pad) var(--s-9)}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--fs-xs);color:var(--mint);background:rgba(30,57,50,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero h1{font-size:var(--fs-display);line-height:.92;max-width:10.5ch;margin:var(--s-5) 0 var(--s-5);text-wrap:initial}
.caret{display:inline-block;width:.07em;height:.76em;background:var(--gold);margin-left:.06em;vertical-align:-.04em;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.rot{display:inline-grid;vertical-align:top;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.rw{grid-area:1/1;display:inline-block;white-space:nowrap;color:var(--gold-2);transform:translateY(112%);transition:transform .6s var(--ease)}
.rw.is-on{transform:none}
.rw.is-off{transform:translateY(-112%)}
.rw.no-t{transition:none}
.hero-sub{max-width:46ch;font-size:var(--fs-lg)}
.hero-ctas{margin-top:var(--s-6)}

/* Live automation feed: a real column, not a floating overlay */
.feed{align-self:center;padding:var(--s-4) var(--s-4) var(--s-1);border-radius:var(--r-lg);background:rgba(11,29,23,.7);border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow-lg)}
.feed-head{display:flex;justify-content:space-between;align-items:center;padding:0 var(--s-1) var(--s-2);font-size:var(--fs-xs);color:var(--text-strong);font-weight:600}
.feed ul{list-style:none;height:262px;overflow:hidden}
.feed li{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-1);border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:1.35;color:var(--mint);overflow:hidden;animation:feedIn .8s var(--ease)}
.feed li small{display:block;color:var(--text-muted);font-size:var(--fs-xs);margin-top:3px}
.tick{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(0,117,74,.4);display:grid;place-items:center;color:var(--gold)}
@keyframes feedIn{from{opacity:0;transform:translateY(-16px);max-height:0}to{opacity:1;transform:none;max-height:90px}}
.scroll-hint,.hint-click{position:absolute;bottom:var(--s-6);display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-xs);color:var(--text-muted)}
.scroll-hint{left:var(--pad)}
.hint-click{right:var(--pad)}
.sh-line{width:44px;height:1px;background:var(--line-strong);position:relative;overflow:hidden}
.sh-line::after{content:"";position:absolute;inset:0;background:var(--gold);animation:shl 2.4s var(--ease) infinite}
@keyframes shl{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- Marquee ---------- */
.marquee{position:relative;z-index:3;border-block:1px solid var(--line);background:rgba(6,17,13,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden;padding:var(--s-5) 0}
.track{display:flex;align-items:center;width:max-content;animation:marq 48s linear infinite}
.marquee:hover .track,.marquee.paused .track{animation-play-state:paused}
.track span{font-family:var(--display);font-size:var(--fs-3xl);font-weight:600;letter-spacing:-.025em;white-space:nowrap;padding:0 var(--s-5);color:var(--text-strong)}
.track span.o{color:transparent;-webkit-text-stroke:1px rgba(212,233,226,.55)}
.track b{color:var(--gold);font-size:1.2rem;font-weight:400}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s-8);align-items:end}
.about-copy p+p{margin-top:var(--s-4)}

/* ---------- Problem: manual vs Bizmate ---------- */
.prob-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-6);flex-wrap:wrap}
.prob-head .lede{margin-top:var(--s-5)}
.switch{display:inline-flex;align-items:center;gap:var(--s-3);min-height:52px;padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);border:1px solid var(--line-strong);background:rgba(11,29,23,.8)}
.switch-track{position:relative;width:64px;height:34px;border-radius:99px;background:rgba(212,233,226,.12);transition:background .5s}
.switch-knob{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:var(--mint);transition:transform .6s cubic-bezier(.5,1.6,.4,1),background .5s}
.switch[aria-checked="true"] .switch-track{background:var(--accent)}
.switch[aria-checked="true"] .switch-knob{transform:translateX(30px);background:var(--gold)}
.switch-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);transition:color .4s}
.switch[aria-checked="false"] .m,.switch[aria-checked="true"] .a{color:var(--text-strong)}
.tasks{margin-top:var(--s-8);padding:var(--s-2) var(--s-6);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.task{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 96px;align-items:center;gap:var(--s-5);padding:var(--s-5) 0;border-top:1px solid var(--line)}
.task:first-child{border-top:0}
.t-name{color:var(--text-strong);font-weight:500;font-size:var(--fs-base);line-height:1.35}
.bar{height:10px;border-radius:99px;background:rgba(212,233,226,.07);overflow:hidden}
.bar i{display:block;height:100%;border-radius:inherit;transform:scaleX(0);transform-origin:left;background:repeating-linear-gradient(-45deg,rgba(212,233,226,.55) 0 6px,rgba(212,233,226,.28) 6px 12px);transition:transform .8s var(--ease),background .5s}
.task:nth-child(2) .bar i{transition-delay:.08s}.task:nth-child(3) .bar i{transition-delay:.16s}.task:nth-child(4) .bar i{transition-delay:.24s}.task:nth-child(5) .bar i{transition-delay:.32s}
.problem.is-auto .bar i{background:linear-gradient(90deg,var(--accent),var(--gold))}
.val{text-align:right;font-family:var(--display);color:var(--text-strong);font-weight:600;font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.total{display:flex;align-items:flex-end;gap:var(--s-3) var(--s-6);margin-top:var(--s-7);flex-wrap:wrap}
.total-num{font-family:var(--display);font-weight:800;font-size:clamp(4rem,12vw,10rem);line-height:.82;letter-spacing:-.055em;color:var(--text-strong);font-variant-numeric:tabular-nums;transition:color .7s}
.problem.is-auto .total-num{color:var(--gold)}
.total p{max-width:30ch;padding-bottom:var(--s-2);font-size:var(--fs-lg)}
.total .cap-auto{display:none}
.problem.is-auto .total .cap-auto{display:inline}
.problem.is-auto .total .cap-manual{display:none}
.total small{display:block;margin-top:var(--s-2);font-size:var(--fs-xs);color:var(--text-muted)}

/* What we plug in: 2x2 service cards */
.caps{margin-top:var(--s-10);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.caps>h3{grid-column:1/-1;font-size:var(--fs-4xl);letter-spacing:var(--track-heading);margin-bottom:var(--s-3)}
.cap{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6)}
.cap h4{font-size:var(--fs-2xl);letter-spacing:var(--track-heading);transition:color var(--dur)}
.cap:hover h4{color:var(--gold-2)}

/* ---------- Pricing ---------- */
.price-head{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s-6);align-items:end}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-top:var(--s-8);align-items:stretch}
.plan-wrap{display:flex}
.plan{flex:1;display:flex;flex-direction:column;padding:var(--s-6) var(--s-6) var(--s-6);background:var(--surface-hi)}
.plan:hover{border-color:var(--line-gold)}
.plan.featured{border-color:var(--gold);background:linear-gradient(160deg,rgba(0,98,65,.62),rgba(8,22,17,.94));box-shadow:0 0 0 1px var(--gold),var(--shadow-lg)}
.badge{position:absolute;top:var(--s-5);right:var(--s-5);padding:5px 12px;border-radius:99px;background:var(--gold);color:var(--ink);font-size:var(--fs-xs);font-weight:700}
.plan h3{font-size:var(--fs-2xl)}
.plan-desc{margin-top:var(--s-2);font-size:var(--fs-sm);min-height:3.2em}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:var(--s-5);padding-bottom:var(--s-5);border-bottom:1px solid var(--line)}
.amt{font-family:var(--display);font-size:var(--fs-5xl);font-weight:700;color:var(--text-strong);letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.per{font-size:var(--fs-sm)}
.plan ul{list-style:none;display:grid;gap:var(--s-3);margin:var(--s-5) 0 var(--s-6);flex:1;align-content:start}
.plan .btn{width:100%}
.price-note{margin-top:var(--s-6);font-size:var(--fs-sm);color:var(--text-muted)}

/* ---------- Results ---------- */
.results .lede{margin-top:var(--s-5)}
.case{margin-top:var(--s-7);padding:clamp(28px,4vw,48px);border-radius:var(--r-lg);background:var(--surface-feature);border:1px solid var(--line-gold)}
.case-grid{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:var(--s-6);margin-top:var(--s-6);align-items:start}
.case-stat .big{font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,7vw,6rem);line-height:.85;letter-spacing:-.055em;color:var(--gold);font-variant-numeric:tabular-nums}
.case-stat .unit{font-family:var(--display);font-weight:700;font-size:var(--fs-xl);color:var(--gold-2);margin-left:6px}
.case-stat p{margin-top:var(--s-3);max-width:22ch}
.case-copy p{margin-bottom:var(--s-5)}
.case-note{margin-top:var(--s-5);font-size:var(--fs-sm);color:var(--text-muted)}
.link-btn{display:inline-flex;align-items:center;min-height:44px;color:var(--gold);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transition:color var(--dur-fast)}
.link-btn:hover{color:var(--gold-2)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s-8);align-items:start}
.contact-copy .lede{margin-top:var(--s-5)}
.contact-lines{display:grid;gap:var(--s-2);margin-top:var(--s-6)}
.contact-lines a{font-family:var(--display);font-size:var(--fs-2xl);font-weight:600;color:var(--text-strong);letter-spacing:-.025em;justify-self:start;background:linear-gradient(var(--gold),var(--gold)) left bottom/0 1px no-repeat;transition:background-size .6s var(--ease)}
.contact-lines a:hover{background-size:100% 1px}
.form{position:relative;padding:clamp(24px,4vw,44px);border-radius:var(--r-lg);background:rgba(11,29,23,.8);border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow-lg)}
.form-body{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.field{position:relative;margin-bottom:var(--s-4)}
.field input,.field textarea,.field select{width:100%;min-height:58px;padding:25px 16px 9px;border-radius:var(--r-sm);background:rgba(6,17,13,.65);border:1px solid var(--line-strong);color:var(--text-strong);font:inherit;font-size:1rem;transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none}
.field textarea{resize:vertical;min-height:120px;display:block}
.field select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23CBA258' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.field select option{background:var(--ink);color:var(--white)}
.field label{position:absolute;left:17px;top:17px;color:var(--text-muted);pointer-events:none;transform-origin:left top;transition:transform .35s var(--ease),color .35s}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,.field.static label{transform:translateY(-10px) scale(.78);color:var(--gold)}
.field :is(input,textarea,select):focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px var(--wash-gold)}
.field.invalid :is(input,textarea){border-color:var(--danger)}
.err{display:block;font-size:var(--fs-xs);color:var(--danger-text)}
.err:not(:empty){margin-top:6px}
.chips{border:0;margin:var(--s-2) 0 var(--s-5)}
.chips legend{color:var(--text-strong);font-weight:500;margin-bottom:var(--s-3);font-size:var(--fs-sm)}
.chip-list{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip-list .chip{position:relative;padding:0;background:none;border:0}
.chip-list .chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip-list .chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s-4);border-radius:99px;border:1px solid var(--line-strong);font-size:var(--fs-sm);color:var(--mint);cursor:pointer;user-select:none;transition:background .3s var(--ease),color .3s,border-color .3s}
.chip-list .chip span:hover{border-color:var(--gold)}
.chip-list .chip input:checked+span{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.chip-list .chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.form .btn{width:100%;margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-success{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);text-align:center;padding:var(--s-6);opacity:0;pointer-events:none;transition:opacity .6s var(--ease) .2s}
.form.sent .form-body{opacity:0;transform:scale(.97);pointer-events:none}
.form.sent .form-success{opacity:1;pointer-events:auto}
.form-success h3{font-size:var(--fs-3xl)}
.form-success p{max-width:32ch}
.check{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:rgba(0,117,74,.35);border:1px solid var(--gold);color:var(--gold)}
.check path{stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .8s var(--ease) .5s}
.form.sent .check path{stroke-dashoffset:0}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr;min-height:0;gap:var(--s-7);padding-top:132px;padding-bottom:var(--s-8)}
  .feed{max-width:460px;width:100%}
  .scroll-hint,.hint-click{display:none}
  .case-grid{grid-template-columns:1fr 1fr}.case-copy{grid-column:1/-1}
}
@media (max-width:900px){
  .about-grid,.price-head,.contact-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .plans{grid-template-columns:1fr;max-width:520px}
  .caps{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero{padding-top:112px}
  .tasks{padding:var(--s-1) var(--s-4)}
  .task{grid-template-columns:1fr auto;gap:var(--s-3) var(--s-4);padding:var(--s-4) 0}
  .bar{grid-column:1/-1;grid-row:2}
  .row2{grid-template-columns:1fr}
  .switch{width:100%;justify-content:space-between}
  .plan-desc{min-height:0}
  .case-grid{grid-template-columns:1fr;gap:var(--s-5)}
}
@media (prefers-reduced-motion:reduce){.track{animation:none}}