/* Landing page layout + liquid-glass aesthetic, aligned with existing theme */
:root { --glass: rgba(255,255,255,.06); }
.fw-800{ font-weight:800; }

.site-header{ position:sticky; top:0; z-index:10; padding:14px 0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); border-bottom:1px solid rgba(255,255,255,.06); backdrop-filter: blur(10px) saturate(140%); }
.brand-symbol{ width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--success)); }
.brand-word{ color:var(--text); font-size:1.05rem; letter-spacing:.4px; }
.nav-link{ color:var(--muted); text-decoration:none; }
.nav-link:hover{ color:var(--text); }
.btn-outline-light-soft{ border:1px solid rgba(255,255,255,.18); color:var(--text); background:rgba(255,255,255,.02); border-radius:14px; }
.btn-glass{ border-radius:14px; box-shadow:0 8px 24px -8px rgba(0,0,0,.65); }

.hero-section{ padding: clamp(36px, 8vw, 104px) 0; position:relative; }
.hero-grid{ display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(18px,3.5vw,54px); align-items:center; }
.hero-eyebrow{ display:inline-block; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:.5rem; }
.hero-aurora{ position:absolute; right:-8vw; top:-6vw; width:46vw; height:46vw; border-radius:50%; filter: blur(40px); background: radial-gradient(closest-side, color-mix(in oklab, var(--primary) 22%, transparent), transparent 70%); opacity:.4; pointer-events:none; }
.hero-copy .text-gradient{ background:linear-gradient(90deg,var(--primary),var(--success)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-bullets{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.hero-bullets li{ display:flex; align-items:center; gap:.6rem; color:var(--muted); }
.hero-bullets i{ color:var(--primary); display:inline-grid; place-items:center; width:22px; height:22px; border-radius:7px; background: color-mix(in oklab, var(--primary) 18%, transparent); }
.device-frame{ position:relative; border-radius:16px; overflow:hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.screen-glow{ position:absolute; inset:0; background: radial-gradient(120% 80% at 60% 40%, rgba(96,165,250,.2), rgba(34,197,94,.12) 40%, transparent 70%); filter: blur(20px); pointer-events:none; }
.hero-img{ width:100%; display:block; opacity:.9; }

/* Laptop mockup */
.laptop{ display:grid; gap:12px; justify-items:center; position:relative; }
/* MacBook-like screen frame */
.laptop-screen{
  /* explicit paddings: x for left/right, top for top, bottom for bottom */
    --screen-pad-x: clamp(8px, 1.8vw, 8px);  /* x */
    --screen-pad-top: clamp(8px, 1.4vw, 8px); /* y */
    --screen-pad-bottom: clamp(8px, 2.4vw, 8px); /* z (larger chin) */
    --screen-radius: 12px; /* round screen corners */
    /* notch dimensions centered on top of the screen */
    --notch-width: min(22%, 120px);
    --notch-height: 16px;
    --notch-radius: 10px;
  /* camera position relative to the outer frame (independent of screen padding) */
  --camera-top: 6px;
  position:relative; width:100%; aspect-ratio: 16 / 10; border-radius:18px; overflow:hidden;
  background: linear-gradient(180deg, rgba(12,16,28,.9), rgba(10,13,22,.98));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) inset;
}
/* Inner screen area (image) fits inside the bezel */
.laptop-screen > img.hero-img{
  position:absolute;
  left: var(--screen-pad-x);
  top: var(--screen-pad-top);
  width: calc(100% - (2 * var(--screen-pad-x)));
  height: calc(100% - (var(--screen-pad-top) + var(--screen-pad-bottom)));
  border-radius: var(--screen-radius); opacity:.98;
  object-fit: cover; object-position: center;
}
/* Ensure no prior generic .hero-img rules override this */
.laptop-screen > img.hero-img{
  position:absolute !important;
  left: var(--screen-pad-x) !important;
  top: var(--screen-pad-top) !important;
  width: calc(100% - (2 * var(--screen-pad-x))) !important;
  height: calc(100% - (var(--screen-pad-top) + var(--screen-pad-bottom))) !important;
  box-sizing: border-box;
}
/* Adjust decorative glow to the inner screen area */
.laptop-screen .screen-glow{ position:absolute; inset: var(--screen-pad-top) var(--screen-pad-x) var(--screen-pad-bottom) var(--screen-pad-x); border-radius: var(--screen-radius); background: radial-gradient(120% 90% at 60% 40%, rgba(96,165,250,.18), rgba(34,197,94,.10) 40%, transparent 70%); filter: blur(18px); pointer-events:none; }
/* Camera notch/dot */
.laptop-screen::before{
  /* MacBook-style notch intruding into the screen area */
  content:""; position:absolute; top: var(--screen-pad-top); left:50%; transform: translateX(-50%);
  width: var(--notch-width); height: var(--notch-height);
  border-radius: 0 0 var(--notch-radius) var(--notch-radius);
  background: rgba(5,7,12,.96);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
  z-index: 4;
}
/* Inner bevel highlight */
.laptop-screen::after{
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 -8px 24px rgba(0,0,0,.35) inset;
}
/* Aluminum base */
.laptop-base{
  width:104%; height:14px; border-radius:0 0 16px 16px; position:relative;
  background: linear-gradient(180deg, rgba(228,232,240,.35), rgba(180,188,204,.18) 55%, rgba(120,128,148,.14));
  border:1px solid rgba(255,255,255,.14); border-top:0; box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.laptop-base::after{ /* bottom shadow */
  content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  width:66%; height:10px; border-radius:999px; filter: blur(6px);
  background: radial-gradient(80% 100% at 50% 0%, rgba(0,0,0,.6), transparent 70%);
}


.section{ padding: clamp(28px,6vw,72px) 0; }
.section-title{ font-weight:800; letter-spacing:.5px; margin-bottom:1.25rem; }

.grid-3{ display:grid; gap:22px; grid-template-columns: repeat(3, 1fr); }
.feature-card{ background:var(--panel); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:1.2rem 1.3rem; box-shadow: 0 8px 30px rgba(0,0,0,.28); position:relative; overflow:hidden; transition: transform .18s ease, box-shadow .18s ease; }
.feature-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,.34); }
.icon-pill{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background: color-mix(in oklab, var(--primary) 30%, transparent); margin-bottom:.6rem; }
.feature-card h3{ margin:0 0 .4rem; }
.feature-card p{ color:var(--muted); margin:0; }

.how-grid{ display:grid; gap:18px; grid-template-columns: repeat(4,1fr); }
.how-step{ background:var(--panel); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:1rem 1.1rem; position:relative; }
.step-num{ position:absolute; top:.75rem; right:.75rem; width:26px; height:26px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.08); font-weight:700; font-size:.85rem; }

.kpi-grid{ display:grid; gap:18px; grid-template-columns: repeat(4,1fr); align-items:stretch; }
.kpi-tile{ background:var(--panel); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:1rem 1.1rem; text-align:center; }
.kpi-label{ color:var(--muted); font-weight:600; letter-spacing:.4px; text-transform:uppercase; font-size:.72rem; }
.kpi-value{ font-weight:800; font-size:2rem; letter-spacing:.4px; }
.kpi-sub{ color:var(--muted); font-size:.82rem; }

.list-grid{ display:grid; gap: var(--list-gap, 18px); grid-template-columns: repeat(2, 1fr); }
.list-card, .why-card{ background:var(--panel); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:1rem 1.1rem; }
.list-card li, .why-card li{ margin:.4rem 0; color:var(--muted); }
.list-card i, .why-card i{ color:var(--success); }

.logos-card{ background:var(--panel); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:1rem 1.1rem; }
.logos-row{ display:flex; gap:1.8rem; flex-wrap:wrap; margin-top:.6rem; align-items:center; justify-content:center; }
.logo-pill{ padding:.45rem .75rem; border:1px dashed rgba(255,255,255,.18); border-radius:999px; color:var(--muted); }
/* Logo images */
.logo-img{ height:25px; object-fit:contain; filter: brightness(0) invert(1) opacity(.9); mix-blend-mode: screen; opacity:.9; transition: opacity .15s ease; }
.logo-img:hover{ opacity:1; }

/* Reduce gaps around key sections and center partners heading */
#solutions.section{ padding-top: clamp(8px, 2vw, 18px); padding-bottom: clamp(40px, 8vw, 100px); }
.section[aria-label="social proof"]{ padding-top: clamp(8px, 1.5vw, 16px); padding-bottom: clamp(12px, 5vw, 2.5px); }
#product.section{ padding-top: clamp(12px, 5vw, 2.5px); }
#pricing.section{ padding-bottom: clamp(8px, 2vw, 18px); }
.logos-card{ text-align:center; }
.logos-card .text-muted{ display:block; text-align:center; margin-bottom:.6rem; font-size:.92rem; font-weight:600; letter-spacing:.2px; }

.pricing-grid{ display:grid; gap:22px; grid-template-columns: repeat(3,1fr); align-items:stretch; }
.price-card{ background:var(--panel); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:1.2rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.9rem; position:relative; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.price-card .pc-badge{ position:absolute; top:10px; right:12px; font-size:.72rem; font-weight:700; letter-spacing:.2px; padding:.25rem .5rem; border-radius:999px; color:white; background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 80%, transparent), color-mix(in oklab, var(--success) 55%, transparent)); box-shadow: 0 6px 16px -6px var(--primary); }
.price-card .pc-head{ font-weight:800; font-size:1.05rem; }
.price-card .pc-price{ display:flex; align-items:baseline; gap:.35rem; }
.price-card .pc-price .amount{ font-weight:800; font-size:1.8rem; letter-spacing:.3px; }
.price-card .pc-price .per{ color:var(--muted); font-weight:600; }
.price-card .pc-note{ color:var(--muted); font-size:.85rem; }
.pc-list{ list-style:none; padding:0; margin:0; color:var(--muted); }
.pc-list li{ margin:.45rem 0; }
.price-card:hover{ border-color: rgba(255,255,255,.18); box-shadow: 0 14px 34px rgba(0,0,0,.34); }
.price-card.featured{ outline:1px solid color-mix(in oklab, var(--primary) 55%, transparent); box-shadow:0 10px 26px -10px color-mix(in oklab, var(--primary) 70%, transparent); transform: translateY(-8px); z-index: 1; }
.price-card.featured:hover{ transform: translateY(-10px); }
.price-card.featured{ position:relative; }
.price-card.featured::after{
  content:""; position:absolute; left:50%; bottom:-16px; transform:translateX(-50%);
  width:86%; height:22px; filter: blur(16px); border-radius:999px;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in oklab, var(--primary) 65%, transparent), transparent 70%);
}
.price-card .calc{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.6rem .7rem; margin:.4rem 0 .2rem; }
.price-card .calc .tiny{ font-size:.8rem; }
.muted{ color:var(--muted); }
/* Align CTAs to baseline across cards */
.pc-cta{ margin-top:auto; }

.site-footer{ padding:18px 0; border-top:1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08)); }
.site-footer .links a{ color:var(--muted); text-decoration:none; }
.site-footer .links a:hover{ color:var(--text); }
/* Footer center */
.footer-center{ display:flex; align-items:center; justify-content:center; }
.site-footer .copy{ text-align:center; width:100%; color:var(--muted); }

/* Responsive */
@media (max-width: 992px){
  .hero-grid{ grid-template-columns: 1fr; }
  /* Keep pricing cards level on small screens */
  .price-card.featured{ transform:none; }
  .laptop-screen{
    --screen-pad-x: 12px; --screen-pad-top: 12px; --screen-pad-bottom: 22px; --camera-top: 5px;
    --screen-radius: 14px;
    --notch-width: min(26%, 86px); --notch-height: 14px; --notch-radius: 8px;
    border-radius:16px;
  }
  .laptop-screen .hero-img, .laptop-screen .screen-glow{ border-radius:10px; }
  .grid-3{ grid-template-columns: 1fr; }
  .how-grid{ grid-template-columns: 1fr 1fr; }
  .kpi-grid{ grid-template-columns: 1fr 1fr; }
  .list-grid{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
}