:root{
--bg:#060a12;--panel:#0b1220;--muted:#94a3b8;--text:#e2e8f0;--primary:#22c55e;--primary-700:#16a34a;--accent:#2dd4bf;--ring:#1f2a44;
--container:1120px;--radius:14px;--shadow:0 10px 30px rgba(0,0,0,.35);
--text-inverse:#ffffff;--brand-emerald:#22c55e;--brand-indigo:#6366f1;--brand-accent:#2dd4bf;
}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*{box-sizing:border-box}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.2}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button{background:none;border:none;padding:0;cursor:pointer}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.lead{font-size:1.15rem;line-height:1.6}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:12px;padding:10px 16px;font-weight:600;transition:.2s ease;gap:10px}
.btn{position:relative;isolation:isolate}
.btn::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from 0deg at 50% 50%,var(--primary),var(--accent),#60a5fa,var(--primary));filter:blur(10px);opacity:.0;transition:opacity .25s ease;z-index:-1}
.btn:hover::before{opacity:.6}
.btn--sm{padding:8px 12px;font-size:.9rem}
.btn--lg{padding:12px 18px;font-size:1rem}
.btn--xl{padding:14px 22px;font-size:1.1rem}
.btn--primary{background:var(--primary);color:#03160d}
.btn--primary:hover{background:var(--primary-700)}
.btn--primary{box-shadow:0 0 0 0 rgba(34,197,94,.5)}
.btn--primary:hover{box-shadow:0 0 24px 2px rgba(34,197,94,.35)}
.btn--ghost{background:transparent;border-color:#243045;color:var(--text)}
.btn--ghost:hover{background:#10151b;border-color:#1f2a44}
.header{padding:20px 0;position:relative;z-index:10}
.header__inner{display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:8px;font-size:1.2rem;font-weight:700;color:var(--text)}
.logo__icon{width:32px;height:32px;background:var(--primary);border-radius:8px;display:grid;place-items:center;color:#03160d}
.nav__list{display:flex;gap:24px}
.nav__link{color:var(--muted);font-weight:500;transition:.2s ease}
.nav__link:hover{color:var(--text)}
.brand__link{display:inline-flex;align-items:center}
.brand__img{display:block;height:100px;width:auto;object-fit:contain}
.footer .brand__img{height:90px}
.hero{padding:64px 0}
.hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.hero__content .lead{color:var(--muted);font-size:1.05rem}
.hero__actions{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.hero__visual{display:flex;justify-content:center}
.phone{width:280px;filter:drop-shadow(var(--shadow));position:relative}
.phone-screen{width:100%;aspect-ratio:9/21;background:#000;border-radius:24px;padding:8px;position:relative;overflow:hidden}
.phone-screen::before{content:'';position:absolute;top:0;left:0;right:0;height:20px;background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,transparent 100%);z-index:10}
.phone-screen-content{width:100%;height:100%;background:#0F172A;border-radius:16px;padding:50px 16px;overflow:hidden;position:relative;display:grid;gap:14px}
.phone-title{color:rgba(255,255,255,0.95);font-weight:700;font-size:26px;letter-spacing:.2px;margin:0;text-align:center}
.phone-widget{background:#1E293B;border-radius:12px;padding:16px}
.pw-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.pw-dot{width:8px;height:8px;background:#22C55E;border-radius:50%}
.pw-title{color:#E5E7EB;font-size:14px;font-weight:600}
.pw-list{list-style:none;padding:0;margin:0}
.pw-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pw-label{color:#94A3B8;font-size:12px;font-weight:500;min-width:60px}
.pw-bar{flex:1;height:6px;background:#374151;border-radius:3px;overflow:hidden;position:relative}
.pw-fill{height:100%;background:linear-gradient(90deg,#22C55E,#16A34A);border-radius:3px;width:0!important}
@keyframes fillBar{to{width:var(--target,0%)}}
.pw-value{color:#E5E7EB;font-size:12px;font-weight:600;min-width:30px;text-align:right}
.phone-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpi-card{border-radius:14px;min-height:88px;padding:10px 12px;display:grid;align-content:center;gap:2px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 18px rgba(0,0,0,0.35);opacity:0;transform:translateY(20px)}
.kpi-green{background:linear-gradient(180deg, #24c36b, #0ea65a)}
.kpi-purple{background:linear-gradient(180deg, #8b5cf6, #7c3aed)}
.kpi-value{font-weight:800;font-size:20px;line-height:1}
.kpi-sub{text-transform:uppercase;letter-spacing:.08em;opacity:.9;font-size:10px}
.kpi-label{font-size:12px;opacity:.95;word-break:break-word}
.kpi-card:nth-child(1){animation:slideInUp .6s ease-out .8s both}
.kpi-card:nth-child(2){animation:slideInUp .6s ease-out 1s both}
.kpi-card:nth-child(3){animation:slideInUp .6s ease-out 1.2s both}
.kpi-card:nth-child(4){animation:slideInUp .6s ease-out 1.4s both}
@keyframes slideInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero__trust-mini{margin-top:10px;color:var(--muted);font-size:.95rem}

.section{padding:36px 0}
.alt{background:linear-gradient(180deg,transparent,rgba(15,23,42,.35) 30%,transparent)}
.feature__inner{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.feature__content h2{margin:0 0 6px}
.feature__content p{margin:0 0 10px;color:var(--muted)}
.bullets{margin:0;padding-left:18px}
.bullets li{margin:6px 0}
.card{width:100%;border-radius:var(--radius);filter:drop-shadow(var(--shadow))}

.trust{padding:28px 0}
.trust__inner{display:grid;gap:20px}
.ratings .stars{font-weight:800;color:#fde68a}
.muted{color:var(--muted)}
.testimonial{margin:0;padding:18px;border:1px solid var(--ring);border-radius:12px;background:var(--panel);color:#cbd5e1}
.testimonial footer{margin-top:8px;color:var(--muted)}

.cta{padding:40px 0}
.cta__inner{text-align:center}
.small{font-size:.9rem}

.footer{border-top:1px solid #0e1726;padding:22px 0;background:#070c16}
.footer__inner{display:grid;gap:10px;align-items:center;justify-content:space-between}
.footer__links{display:flex;gap:14px;flex-wrap:wrap}
.footer__copy{color:#7c8aa0}

/* Animations */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* Micro animations for inline SVGs */
@keyframes dashFlow{0%{stroke-dashoffset:240}100%{stroke-dashoffset:0}}
@keyframes pulseMetric{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
@keyframes playerDriftA{0%{transform:translate(0,0)}50%{transform:translate(6px,-4px)}100%{transform:translate(0,0)}}
@keyframes playerDriftB{0%{transform:translate(0,0)}50%{transform:translate(-6px,5px)}100%{transform:translate(0,0)}}
@keyframes playerDriftC{0%{transform:translate(0,0)}50%{transform:translate(4px,6px)}100%{transform:translate(0,0)}}
@keyframes barPop{0%{transform:translateY(0);height:0;opacity:.6}60%{opacity:1}100%{transform:translateY(calc(-1 * var(--h)));height:var(--h)}}

/* SVG selectors bound in HTML */
.anim-line{stroke-dasharray:240;stroke-linecap:round;animation:dashFlow 4s ease-in-out infinite}
.metric-pulse{animation:pulseMetric 3.2s ease-in-out infinite}
.player-a,.player-b,.player-c{transform-box:fill-box;transform-origin:center}
.player-a{animation:playerDriftA 4.5s ease-in-out infinite}
.player-b{animation:playerDriftB 5.2s ease-in-out infinite}
.player-c{animation:playerDriftC 6s ease-in-out infinite}
/* Histogram bars */
.histogram .bar{--h:60px;transform-box:fill-box;transform-origin:bottom;animation:barPop 1s cubic-bezier(.2,.8,.2,1) forwards}
.histogram .b1{--h:80px;animation-delay:.05s}
.histogram .b2{--h:56px;animation-delay:.15s}
.histogram .b3{--h:100px;animation-delay:.25s}
.histogram .b4{--h:68px;animation-delay:.35s}
.hist-label{font-size:10px;fill:#9fb3c8}
.hist-title{font-size:12px;fill:#cbd5e1;font-weight:600;letter-spacing:.3px}
.pos-label{font-size:10px;fill:#9fb3c8;font-weight:500}

/* Responsive */
@media(min-width:780px){
  .hero{padding:84px 0}
  .hero__inner{grid-template-columns:1.1fr .9fr}
  .phone{width:320px}
  .section{padding:56px 0}
  .feature__inner{grid-template-columns:1fr 1fr}
  .feature--b .feature__inner{grid-template-columns:1fr 1fr}
}

@media(min-width:1040px){
  .phone{width:360px}
  .hero__content h1{font-size:2.6rem;line-height:1.15}
}


/* The phone content card housing the skills */
.phone-skill-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--text-inverse);
  box-shadow: 0 8px 24px rgba(0,0,0,.35) inset;
}
.phone-skill-card__header{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:600;
  margin-bottom:10px;
  opacity:.95;
}
.phone-skill-card__header .dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(34,211,238,.15);
}

/* SKILL ROWS */
.skill-row{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label value"
    "bar bar";
  gap:6px 12px;
  align-items:center;
  margin: 8px 0;
}
.skill-row__label{ grid-area:label; font-size:12px; color:rgba(255,255,255,.85); }
.skill-row__value{ grid-area:value; font-size:12px; color:rgba(255,255,255,.85); }
.skill-row__bar{
  grid-area:bar;
  height:8px;
  width:100%;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  overflow:hidden;
  position:relative;
}
.skill-row__fill{
  position:absolute; inset:0 auto 0 0;
  width:0%;
  background: linear-gradient(90deg, var(--brand-emerald), var(--brand-indigo));
  border-radius:999px;
  transform-origin:left;
  transition: width .8s cubic-bezier(.22,.75,.17,1);
}
/* subtle shimmering while animating */
.skill-row.animating .skill-row__fill{
  animation: shimmer 1.4s linear infinite;
  background-size: 200% 100%;
}
@keyframes shimmer{
  0%{ background-position: 0% 0; }
  100%{ background-position: 200% 0; }
}

/* NAVBAR - Scoped to homepage only */
header.nav .nav__inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

header.nav .nav__links{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: clamp(16px, 3vw, 28px);
}

header.nav .nav__links a{
  font-size: clamp(14px, 1.05vw, 16px);
  opacity:.95;
}
header.nav .nav__links a:hover{ opacity:1; }

@media (max-width: 768px){
  header.nav .nav__links{ 
    margin-left:0;
  }
}

@media (max-width: 600px){
  header.nav .nav__links{
    gap:12px;
  }
  header.nav .nav__links a{
    font-size:0.85rem;
  }
  .btn--sm{
    padding:6px 10px;
    font-size:0.85rem;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 48px 0 40px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 32px;
  }

  .hero__content {
    order: 1;
  }

  .hero__visual {
    order: 2;
    width: 100%;
  }

  .hero__actions {
    justify-content: center;
  }

  .phone {
    width: min(280px, 80vw);
  }
}