*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000}
body{margin:0;background:#000;color:#fff;font-family:'Barlow',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,a{-webkit-tap-highlight-color:transparent}
::selection{background:rgba(166,255,77,.22);color:#fff}
.nav{position:fixed;top:16px;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}
.brand{height:48px;border-radius:999px;padding:8px 14px;display:flex;align-items:center}
.brand img{height:28px;width:auto;filter:none}
.navlinks{display:flex;align-items:center;gap:2px;border-radius:999px;padding:6px}
.navlinks a{padding:10px 12px;font-size:14px;color:rgba(255,255,255,.84)}
.navlinks .navcta{background:#fff;color:#000;border-radius:999px;font-weight:600;padding:10px 16px}
.navspacer{width:48px;height:48px}
.glass,.strong{position:relative;overflow:hidden;background:rgba(10,12,14,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 1px rgba(255,255,255,.1)}
.glass:before,.strong:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.3px;background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.15) 20%,transparent 40%,transparent 60%,rgba(255,255,255,.15) 80%,rgba(255,255,255,.45));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.strong{background:rgba(8,10,12,.58);backdrop-filter:blur(44px);-webkit-backdrop-filter:blur(42px);box-shadow:4px 4px 10px rgba(0,0,0,.08),inset 0 1px 1px rgba(255,255,255,.14)}
.hero,.care{min-height:100vh;position:relative;overflow:hidden;background:#000}
.bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .bgvideo{width:120%;height:120%;left:50%;transform:translateX(-50%);object-position:top}
.overlay{
position:absolute;inset:0;z-index:1;
background:
radial-gradient(circle at 74% 54%,rgba(34,80,57,.10),transparent 30%),
linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.44) 64%,rgba(0,0,0,.72) 100%)
}
.overlay.second{
background:
linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.48) 18%,rgba(0,0,0,.50) 82%,rgba(0,0,0,.70) 100%)
}
.signals{position:absolute;inset:0;z-index:2;opacity:.55;background:radial-gradient(circle at 18% 36%,rgba(86,201,0,.18) 0 1px,transparent 2px),radial-gradient(circle at 26% 68%,rgba(87,200,255,.18) 0 1px,transparent 2px),radial-gradient(circle at 79% 24%,rgba(239,18,52,.16) 0 1px,transparent 2px),radial-gradient(circle at 74% 72%,rgba(115,103,255,.16) 0 1px,transparent 2px);background-size:90px 90px,120px 120px,150px 150px,130px 130px;animation:drift 22s linear infinite}
@keyframes drift{50%{transform:translate3d(-28px,18px,0)}}
.hero-inner,.care-inner{position:relative;z-index:10;max-width:1600px;margin:auto;padding:110px 5vw 40px}
.hero-inner{min-height:calc(100vh - 170px);display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-bottom:40px}
.hero-copy{text-align:left}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 13px;font-size:12px;color:rgba(255,255,255,.78)}
.eyebrow span{width:8px;height:8px;background:#56C900;border-radius:50%;box-shadow:0 0 16px #56C900}
h1,h2,h3{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
h1{font-size:clamp(58px,7vw,104px);line-height:.88;letter-spacing:-4px;margin:26px 0 0;max-width:950px}
.lead{font-size:18px;line-height:1.5;color:rgba(255,255,255,.76);max-width:760px;margin:28px 0 0}
.sublead{font-size:14px;line-height:1.55;color:rgba(255,255,255,.52);max-width:700px;margin:10px 0 0}
.actions{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap}
.button{padding:12px 20px;border-radius:999px;font-size:14px}
.button.strong{background:rgba(255,255,255,.04)}
.button.ghost{color:rgba(255,255,255,.78)}
.button.white{background:#fff;color:#000;font-weight:600}
.actions.center{justify-content:center}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px}
.metric{border-radius:22px;padding:18px;min-height:150px}
.metric small{font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.5)}
.metric b{display:block;font-family:'Instrument Serif';font-style:italic;font-size:38px;font-weight:400;margin-top:20px}
.metric span{font-size:13px;color:rgba(255,255,255,.65)}
.metric i{display:block;height:3px;border-radius:3px;background:var(--accent);margin-top:20px;width:68%;box-shadow:0 0 16px color-mix(in srgb,var(--accent),transparent 60%)}
.hero-device{position:relative;height:720px}
.phone-glow{position:absolute;left:50%;top:50%;width:450px;height:450px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(86,201,0,.10);filter:blur(100px)}
.phone{position:absolute;z-index:2;width:min(350px,62%);left:56%;top:25px;transform:translateX(-50%) rotate(2deg);border-radius:42px;filter:drop-shadow(0 35px 70px rgba(0,0,0,.78));animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateX(-50%) translateY(-8px) rotate(2deg)}}
.floater{position:absolute;z-index:3;padding:9px 14px;border-radius:999px;font-size:12px;color:rgba(255,255,255,.72)}
.f1{left:2%;top:25%}.f2{right:2%;top:36%}.f3{left:5%;bottom:25%}.f4{right:1%;bottom:18%}
.trust{position:relative;left:auto;right:auto;bottom:auto;z-index:11;text-align:center;padding:0 5vw 36px;margin-top:0}
.trust-pill{display:inline-block;border-radius:999px;padding:8px 14px;font-size:12px;color:rgba(255,255,255,.6)}
.trust-list{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;margin-top:18px;font-family:'Instrument Serif';font-style:italic;font-size:26px;color:rgba(255,255,255,.68)}
.care-inner{padding-top:100px;padding-bottom:64px}
.section-label{font-size:14px;color:rgba(255,255,255,.52)}
.care h2{font-size:clamp(52px,6vw,94px);line-height:.9;letter-spacing:-3px;max-width:1120px;margin:20px 0 0}
.care-lead{max-width:850px;font-size:18px;line-height:1.55;color:rgba(255,255,255,.64)}
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:58px}
.product{border-radius:24px;padding:28px}
.product-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.product small{font-size:11px;letter-spacing:.18em;color:#56C900}
.product small.blue{color:#57C8FF}
.product h3{font-size:48px;margin:4px 0 0}
.tag{padding:8px 12px;border-radius:999px;font-size:11px;color:rgba(255,255,255,.58)}
.product h4{font-size:24px;margin:26px 0 0}
.product>p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.58);max-width:680px}
.phones-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px;height:310px;overflow:hidden;align-items:start}
.phones-row img{border-radius:18px;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 50px rgba(0,0,0,.58)}
.phones-row img:first-child{transform:translateY(24px)}.phones-row img:last-child{transform:translateY(42px)}
.laptop{margin-top:28px;border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;background:#090b0d;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.browserbar{height:28px;display:flex;gap:6px;align-items:center;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.browserbar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.chips,.cap-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.chips span,.cap-tags span{padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);font-size:11px;color:rgba(255,255,255,.62)}
.data-link{margin:54px auto;max-width:1000px;height:60px;display:flex;align-items:center;justify-content:space-around;position:relative}
.data-link:before{content:"";position:absolute;left:4%;right:4%;height:1px;background:linear-gradient(90deg,transparent,rgba(87,200,255,.55),transparent)}
.data-link span{position:relative;z-index:2;padding:7px 11px;border-radius:999px;background:#090b0d;border:1px solid rgba(255,255,255,.08);font-size:10px;color:rgba(255,255,255,.62)}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cap{min-height:330px;border-radius:22px;padding:24px;display:flex;flex-direction:column}
.cap-icon{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:24px}
.cap-tags{margin:-44px 0 0 58px;justify-content:flex-end}
.cap-bottom{margin-top:auto}
.cap-bottom h3{font-size:36px;margin:0}
.cap-bottom p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.6);max-width:36ch}
.journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.step{border-radius:18px;padding:20px}
.step small{color:rgba(255,255,255,.3)}
.step h3{font-size:30px;margin:18px 0 4px}
.step p{font-size:13px;color:rgba(255,255,255,.55);margin:0}
.final-cta{margin-top:50px;border-radius:30px;padding:44px;text-align:center}
.final-cta img{height:34px;width:auto;margin:auto;filter:none}
.final-cta h2{font-size:clamp(42px,5vw,70px);line-height:.95;max-width:1000px;margin:20px auto 0}
.final-cta p{color:rgba(255,255,255,.55)}
.reveal{opacity:0;filter:blur(10px);transform:translateY(24px);transition:opacity .8s ease,filter .8s ease,transform .8s ease}
.reveal.visible{opacity:1;filter:blur(0);transform:none}

@media(max-width:980px){
  .navlinks{display:none}
  .hero-inner{grid-template-columns:1fr;padding-top:120px;padding-bottom:140px}
  .hero-copy{text-align:center}
  .eyebrow{margin:auto}
  .lead,.sublead{margin-left:auto;margin-right:auto}
  .actions{justify-content:center}
  .hero-device{height:600px}
  .phone{left:50%;width:300px}
  .metrics{max-width:760px;margin-left:auto;margin-right:auto}
  .product-grid{grid-template-columns:1fr}
  .cap-grid{grid-template-columns:1fr}
  .journey-grid{grid-template-columns:repeat(2,1fr)}
  .trust{padding-bottom:30px}
}
@media(max-width:640px){
  .nav{padding:0 16px}
  .brand{height:44px}
  .hero-inner,.care-inner{padding-left:18px;padding-right:18px}
  h1{font-size:52px;letter-spacing:-2.5px}
  .metrics{grid-template-columns:1fr}
  .hero-device{height:510px}
  .phone{width:260px}
  .floater{display:none}
  .trust-list{font-size:21px;gap:18px}
  .care h2{font-size:48px;letter-spacing:-2px}
  .product{padding:20px}
  .product h3{font-size:42px}
  .phones-row{height:220px}
  .journey-grid{grid-template-columns:1fr}
  .final-cta{padding:30px 20px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;filter:none!important;transform:none!important}
}

/* Consultant Workspace — real product screen composition */
.workspace-showcase{margin-top:28px;display:grid;gap:12px}
.workspace-main{position:relative}
.workspace-main img,.workspace-shot img{width:100%;height:auto;display:block}
.workspace-secondary{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.workspace-shot{min-width:0}
.browserbar span{margin-left:6px;font-size:9px;color:rgba(255,255,255,.36);letter-spacing:.04em}
.workspace-main{box-shadow:0 34px 80px rgba(0,0,0,.62),0 0 65px rgba(87,200,255,.07)}
.workspace-shot{box-shadow:0 22px 50px rgba(0,0,0,.52)}
@media(max-width:640px){
  .workspace-secondary{grid-template-columns:1fr}
}

/* Hero overlap correction */
.hero{display:flex;flex-direction:column}
.hero-inner{width:100%}
.trust{width:100%;clear:both}
.trust-pill{margin-top:8px}
.trust-list{padding-top:2px}
@media (min-width:981px){
  .hero-device{align-self:center}
}

/* Increased content-surface opacity for improved readability over brighter cinematic video */
.metric,
.product,
.cap,
.step,
.final-cta,
.laptop,
.workspace-main,
.workspace-shot {
  background-color: rgba(5, 7, 9, 0.62);
}

.metric,
.product,
.cap,
.step {
  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    inset 0 1px 1px rgba(255,255,255,.08);
}

.final-cta {
  background-color: rgba(5,7,9,.70);
}

/* New white Zestiva logo should be used as supplied — no inversion/filter */
.brand img,
.final-cta img {
  filter: none !important;
  opacity: 1;
}