/* Vaibes — Landing (redesigned) — Outfit + Inter, grain, hover states, cinematic hero */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@600;700;800&display=swap');

:root{
  --lb:#071d22;
  --lb-deep:#041318;
  --lt:#f2fffb;
  --lm:#a8c4bf;
  --lf:#7fa49e;
  --ltl:#55d8c0;
  --ly:#f7c957;
  --ll:rgba(188,239,226,.18);
  --ll-strong:rgba(188,239,226,.34);
  --shadow-ink:0 18px 50px rgba(2,14,16,.55);
  --shadow-teal:0 12px 34px rgba(85,216,192,.14);
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--lb-deep);color:var(--lt);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}

.landing-skip{
  position:absolute;
  left:16px;
  top:-48px;
  z-index:10;
  padding:10px 16px;
  border-radius:10px;
  background:var(--ly);
  color:#092a2c;
  font:600 .85rem Inter,sans-serif;
  text-decoration:none;
  transition:top .2s var(--ease);
}
.landing-skip:focus{top:16px}

/* grain overlay */
.landing-body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* layout containers */
.landing-body{overflow-x:hidden;background:radial-gradient(circle at 78% 8%,rgba(44,137,126,.28),transparent 28rem),radial-gradient(60rem 40rem at 8% 92%,rgba(85,216,192,.07),transparent 60%),linear-gradient(145deg,#071d22 0%,#06161c 55%,#102b2e 100%)}
.landing-header,.landing-hero,.landing-intro,.landing-features,.landing-install,.landing-final-cta,.landing-signature,.landing-footer{width:min(1180px,calc(100% - 48px));margin:auto}

/* header */
.landing-header{display:flex;align-items:center;justify-content:space-between;padding:26px 0}
.landing-brand img{width:104px;height:auto;display:block;transition:transform .25s var(--ease);filter:brightness(1.18) drop-shadow(0 2px 14px rgba(85,216,192,.28))}
.landing-brand:hover img{transform:translateY(-1px) scale(1.02)}
.landing-header nav{display:flex;align-items:center;gap:30px;color:var(--lm);font-size:.88rem}
.landing-header nav a{text-decoration:none;transition:color .2s var(--ease)}
.landing-header nav a:hover{color:var(--lt)}
.landing-nav-cta{padding:11px 18px;border:1px solid var(--ll);border-radius:999px;color:var(--lt)!important;transition:border-color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease)}
.landing-nav-cta:hover{border-color:var(--ll-strong);background:rgba(188,239,226,.06)}
.landing-nav-cta:active{transform:scale(.97)}
:is(.landing-body a,.landing-body button):focus-visible{outline:2px solid var(--ltl);outline-offset:3px;border-radius:6px}

/* hero — cinematic, centered, ghost wordmark backdrop */
.landing-hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:min(720px,96svh);padding:90px 0 130px;background:radial-gradient(46rem 30rem at 50% 40%,rgba(85,216,192,.09),transparent 70%)}
.landing-hero::before{content:"vaibes" / "";position:absolute;left:50%;top:50%;z-index:0;transform:translate(-50%,-54%);font-family:Outfit,sans-serif;font-weight:800;font-size:clamp(10rem,26vw,23rem);line-height:1;letter-spacing:-.04em;color:rgba(85,216,192,.04);-webkit-text-stroke:1px rgba(85,216,192,.14);pointer-events:none;white-space:nowrap;user-select:none;animation:lbDrift 16s ease-in-out infinite}
.landing-hero-copy{position:relative;z-index:1;max-width:62rem}
@keyframes lbDrift{0%,100%{transform:translate(-50%,-54%)}50%{transform:translate(-48.6%,-51.5%)}}
.landing-kicker{color:var(--ltl);font:500 .72rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase}
.landing-hero h1{margin:18px 0 25px;font-family:Outfit,sans-serif;font-weight:800;font-size:clamp(3.4rem,7.4vw,7rem);line-height:.92;letter-spacing:-.065em;text-wrap:balance}
.landing-hero h1 span{color:var(--ly)}
.landing-lede{max-width:34rem;color:var(--lm);font-size:1.13rem;line-height:1.65;text-wrap:pretty}
.landing-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.landing-button{display:inline-flex;align-items:center;gap:12px;padding:15px 22px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.98rem;transition:transform .18s var(--ease),box-shadow .25s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.landing-button--primary{background:var(--ly);color:#092a2c;box-shadow:0 10px 30px rgba(247,201,87,.22)}
.landing-button--primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(247,201,87,.32);background:#ffd66e}
.landing-button--primary:active{transform:translateY(0) scale(.98);box-shadow:0 6px 18px rgba(247,201,87,.2)}
.landing-button--quiet{border:1px solid var(--ll);color:var(--lm)}
.landing-button--quiet:hover{color:var(--lt);border-color:var(--ll-strong);background:rgba(188,239,226,.06);transform:translateY(-2px)}
.landing-button--quiet:active{transform:translateY(0) scale(.98)}

/* about */
.landing-intro{padding:110px 0 65px}
.landing-intro h2,.landing-install h2{margin:16px 0;font-family:Outfit,sans-serif;font-weight:700;font-size:clamp(2.2rem,5vw,4.4rem);line-height:.98;letter-spacing:-.05em;text-wrap:balance}
.landing-intro h2 em{color:var(--ly);font-style:normal}
.landing-about-copy{max-width:620px;color:var(--lm);font-size:1.06rem;line-height:1.75}

/* features - asymmetric staggered */
.landing-features{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:25px 0 130px}
.landing-features article{padding:26px 26px 30px;border-top:1px solid var(--ll);min-height:210px;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.landing-features article:hover{border-color:var(--ll-strong);transform:translateY(-4px)}
.landing-features article:nth-child(2){transform:translateY(22px)}
.landing-features article:nth-child(2):hover{transform:translateY(18px)}
.landing-features article:nth-child(3){transform:translateY(44px)}
.landing-features article:nth-child(3):hover{transform:translateY(40px)}
.feature-number{color:var(--ly);font:500 .72rem ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:.12em}
.landing-features h3{margin:45px 0 10px;font-family:Outfit,sans-serif;font-weight:700;font-size:2rem;letter-spacing:-.02em}
.landing-features p{margin:0;color:var(--lm);line-height:1.6;max-width:24rem}

/* install */
.landing-install{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;padding:85px 0;border-top:1px solid var(--ll);border-bottom:1px solid var(--ll)}
.landing-install-steps{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.landing-install-steps article{padding:26px;border:1px solid var(--ll);border-radius:16px;background:rgba(255,255,255,.03);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.landing-install-steps article:hover{border-color:var(--ll-strong);transform:translateY(-3px)}
.landing-install-steps strong{color:var(--ly);font:600 1.15rem Outfit,sans-serif}
.landing-install ol{padding-left:19px;font-size:.9rem}
.landing-install li{margin:6px 0}
.landing-install li::marker{color:var(--ltl);font-variant-numeric:tabular-nums}

/* final cta (was unstyled) */
.landing-final-cta{width:min(1180px,calc(100% - 48px));margin:auto;padding:110px 0}
.landing-final-cta-box{padding:56px 8vw;border:1px solid var(--ll);border-radius:28px;background:radial-gradient(40rem 24rem at 85% 0%,rgba(247,201,87,.1),transparent 60%),rgba(188,239,226,.045)}
.landing-final-cta-box h2{margin:0 0 12px;font-family:Outfit,sans-serif;font-weight:700;font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.04em;text-wrap:balance}
.landing-final-cta-box p{margin:0 0 28px;color:var(--lm);font-size:1.05rem}

/* signature */
.landing-signature{width:min(1180px,calc(100% - 48px));margin:auto;padding:130px 0 105px;font-family:Outfit,sans-serif;font-weight:600;font-size:clamp(2.5rem,7vw,6.2rem);line-height:.94;letter-spacing:-.055em;text-wrap:balance}
.landing-signature span{color:var(--ltl)}
.landing-signature strong{color:var(--ly)}

/* footer */
.landing-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0 34px;color:var(--lf);font-size:.75rem;border-top:1px solid var(--ll)}
.landing-footer a{color:var(--lt);text-decoration:none;transition:color .2s var(--ease)}
.landing-footer a:hover{color:var(--ltl)}
.landing-footer-legal{display:flex;gap:18px}

/* entry animations */
@keyframes lbRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.landing-hero-copy>*{animation:lbRise .7s var(--ease) backwards}
.landing-hero-copy>:nth-child(1){animation-delay:.05s}
.landing-hero-copy>:nth-child(2){animation-delay:.1s}
.landing-hero-copy>:nth-child(3){animation-delay:.15s}
.landing-hero-copy>:nth-child(4){animation-delay:.2s}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .landing-body *,.landing-body *::before,.landing-body *::after{animation:none!important;transition:none!important}
  .landing-features article:nth-child(n){transform:none}
}

/* mobile */
@media(max-width:760px){
  .landing-header,.landing-hero,.landing-intro,.landing-features,.landing-install,.landing-final-cta,.landing-signature,.landing-footer{width:min(100% - 32px,580px)}
  .landing-header nav a:not(.landing-nav-cta){display:none}
  .landing-header{padding:20px 0}
  .landing-hero{gap:0;min-height:0;padding:64px 0 90px}
  .landing-hero::before{font-size:clamp(5rem,20vw,8rem)}
  .landing-hero h1{font-size:clamp(3.2rem,16vw,5.4rem)}
  .landing-lede{font-size:1rem}
  .landing-intro{padding:80px 0 50px}
  .landing-features{grid-template-columns:1fr;gap:0;padding-bottom:90px}
  .landing-features article{padding:24px 0 6px}
  .landing-features article:nth-child(1),.landing-features article:nth-child(2),.landing-features article:nth-child(3){grid-column:auto;margin-top:0}
  .landing-features h3{margin-top:24px}
  .landing-install{grid-template-columns:1fr;gap:48px;padding:70px 0}
  .landing-install-steps{grid-template-columns:1fr;gap:14px}
  .landing-final-cta{padding:90px 0 30px}
  .landing-final-cta-box{padding:36px 24px;border-radius:22px}
  .landing-signature{padding:90px 0 70px}
  .landing-footer{flex-wrap:wrap}
  .landing-footer>span:nth-child(2){order:3;width:100%}
}

/* polish */
.landing-body ::selection{background:rgba(247,201,87,.35);color:#fff}