:root {
  --blue:#0b63ce;
  --blue-dark:#06498f;
  --blue-deep:#052f61;
  --blue-soft:#eaf3ff;
  --ink:#0f172a;
  --muted:#526076;
  --line:#dce5ef;
  --surface:#f6f9fc;
  --white:#ffffff;
  --green:#31c78a;
  --shadow:0 26px 80px rgba(15,23,42,.14);
  --radius:24px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:white;
  line-height:1.6;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
.container { width:min(1180px,calc(100% - 40px)); margin:0 auto; }

.site-header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(220,229,239,.85);
}
.nav { min-height:76px; display:flex; align-items:center; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:11px; font-weight:900; letter-spacing:-.04em; }
.wordmark { font-size:1.16rem; }
.logo-mark {
  width:40px;
  height:40px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#1a78e8,#06498f);
  clip-path:polygon(50% 0,100% 100%,72% 100%,61% 73%,36% 73%,27% 100%,0 100%);
}
.logo-mark::after {
  content:"";
  position:absolute;
  inset:11px 14px 0;
  background:white;
  clip-path:polygon(50% 0,100% 100%,71% 100%,50% 54%,29% 100%,0 100%);
}
.road {
  position:absolute;
  z-index:2;
  left:19px;
  top:14px;
  width:3px;
  height:23px;
  background:white;
}
.desktop-nav { margin-left:auto; display:flex; gap:30px; }
.desktop-nav a { font-size:.92rem; font-weight:700; color:#334155; }
.desktop-nav a:hover { color:var(--blue); }
.nav-cta {
  background:var(--ink);
  color:white;
  padding:10px 16px;
  border-radius:999px;
  font-size:.88rem;
  font-weight:800;
}
.menu-toggle { display:none; margin-left:auto; border:0; background:none; padding:8px; }
.menu-toggle span { display:block; width:24px; height:2px; background:var(--ink); margin:5px; }
.mobile-menu { display:none; padding:0 20px 18px; }
.mobile-menu a { display:block; padding:10px 0; font-weight:700; }

.hero {
  position:relative;
  padding:94px 0 86px;
  overflow:hidden;
  background:
    radial-gradient(circle at 79% 25%,rgba(11,99,206,.14),transparent 31%),
    radial-gradient(circle at 14% 90%,rgba(11,99,206,.08),transparent 26%),
    linear-gradient(180deg,#fff 0%,#f5f9ff 100%);
}
.hero-orbit { position:absolute; border:1px solid rgba(11,99,206,.12); border-radius:50%; }
.orbit-one { width:520px; height:520px; right:-120px; top:-190px; }
.orbit-two { width:360px; height:360px; right:20px; top:-110px; }

.hero-grid { display:grid; grid-template-columns:1.03fr .97fr; gap:72px; align-items:center; position:relative; z-index:2; }
.badge,.eyebrow {
  color:var(--blue);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.14em;
}
.badge { display:inline-flex; padding:8px 12px; border-radius:999px; background:rgba(11,99,206,.08); margin-bottom:20px; }
.light { color:#c9e4ff; }

h1,h2,h3 { line-height:1.08; margin-top:0; }
h1 { font-size:clamp(3.15rem,6.2vw,5.75rem); letter-spacing:-.065em; margin-bottom:24px; }
h2 { font-size:clamp(2.2rem,4.2vw,3.75rem); letter-spacing:-.05em; margin-bottom:20px; }
h3 { font-size:1.22rem; }
.hero-lead { max-width:650px; color:var(--muted); font-size:1.17rem; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

.button {
  min-height:50px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-weight:900;
  border:1px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.button:hover { transform:translateY(-2px); }
.primary { background:var(--blue); color:white; box-shadow:0 14px 30px rgba(11,99,206,.24); }
.secondary { background:white; border-color:var(--line); }
.white { background:white; color:var(--ink); }
.full { width:100%; }

.platform-row { display:flex; gap:22px; flex-wrap:wrap; margin-top:25px; color:#66758a; font-size:.85rem; font-weight:700; }

.product-stage { position:relative; min-height:620px; }
.glow { position:absolute; inset:12% 10% 8%; background:rgba(11,99,206,.18); filter:blur(68px); border-radius:50%; }
.phone {
  position:absolute;
  width:260px;
  height:540px;
  border:9px solid #0f1724;
  border-radius:42px;
  background:#0f1724;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.phone-left { left:0; top:60px; transform:rotate(-7deg); }
.phone-right { right:18px; top:0; transform:rotate(5deg); }
.phone-notch { position:absolute; z-index:3; top:0; left:50%; transform:translateX(-50%); width:108px; height:24px; background:#0f1724; border-radius:0 0 15px 15px; }
.phone-screen { height:100%; border-radius:31px; padding:42px 18px 20px; }
.dark-screen { background:#101b2d; color:white; }
.light-screen { background:white; }
.screen-brand { font-size:.7rem; letter-spacing:.17em; font-weight:900; margin-bottom:22px; }
.screen-brand.blue { color:var(--blue); }
.screen-title { font-size:1.18rem; font-weight:900; margin-bottom:18px; }

.history-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);
  border-radius:13px;
}
.history-card div { display:flex; flex-direction:column; }
.history-card small { color:#91a0b3; }
.status { font-size:.6rem; font-weight:800; border-radius:999px; padding:5px 8px; }
.synced { background:rgba(49,199,138,.15); color:#76e4b1; }
.saved { background:rgba(75,143,236,.15); color:#8fc0ff; }
.uploading { background:rgba(255,185,70,.15); color:#ffd27f; }

.phone label { display:block; margin:12px 0 5px; font-size:.67rem; font-weight:800; color:#6b7789; }
.fake-input { height:40px; display:flex; align-items:center; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:#f8fafc; color:#657084; font-size:.72rem; }
.weight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.weight-grid div { display:flex; flex-direction:column; align-items:center; padding:10px 4px; border-radius:9px; background:var(--blue-soft); }
.weight-grid small { color:#58718e; font-size:.62rem; }
.weight-grid strong { color:var(--blue-dark); font-size:.76rem; }
.photo-line { display:flex; gap:12px; align-items:center; padding:10px; margin-top:18px; border-radius:12px; background:#f6f8fb; }
.photo-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:9px; background:#dbeafe; color:var(--blue); font-size:1.4rem; font-weight:900; }
.photo-line div:last-child { display:flex; flex-direction:column; font-size:.68rem; }
.photo-line small { color:#748195; }
.save-record { margin-top:20px; padding:13px; text-align:center; color:white; background:var(--blue); border-radius:10px; font-size:.78rem; font-weight:900; }

.floating-card {
  position:absolute;
  z-index:4;
  width:270px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:17px;
  border:1px solid var(--line);
  border-radius:16px;
  background:white;
  box-shadow:0 18px 50px rgba(15,23,42,.16);
}
.float-top { left:80px; top:10px; }
.float-bottom { left:90px; bottom:6px; }
.floating-card div:last-child { display:flex; flex-direction:column; }
.floating-card span { color:var(--muted); font-size:.78rem; margin-top:4px; }
.tiny-icon { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:#dff8ed; color:#16855d; font-weight:900; }
.blue-bg { background:#e3efff; color:var(--blue); }

.proof-strip { border-block:1px solid var(--line); background:white; }
.proof-grid { display:grid; grid-template-columns:repeat(4,1fr); min-height:82px; }
.proof-grid div { display:flex; flex-direction:column; justify-content:center; padding:14px 20px; border-right:1px solid var(--line); }
.proof-grid div:last-child { border-right:0; }
.proof-grid strong { font-size:.85rem; }
.proof-grid span { color:#718096; font-size:.75rem; }

.section { padding:108px 0; }
.section-heading { max-width:760px; margin-bottom:48px; }
.section-heading p,.workflow-copy>p,.feature-card p,.price-card p { color:var(--muted); }
.centered { text-align:center; margin-left:auto; margin-right:auto; }

.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feature-card { position:relative; min-height:300px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:white; transition:transform .25s ease,box-shadow .25s ease; }
.feature-card:hover { transform:translateY(-6px); box-shadow:0 22px 52px rgba(15,23,42,.09); }
.feature-number { color:var(--blue); font-size:.76rem; font-weight:900; letter-spacing:.14em; margin-bottom:28px; }
.feature-icon { width:48px; height:48px; margin-bottom:26px; border-radius:15px; background:linear-gradient(145deg,#eaf3ff,#d9eaff); position:relative; }
.camera-icon::before { content:""; position:absolute; inset:14px 11px 12px; border:2px solid var(--blue); border-radius:5px; }
.camera-icon::after { content:""; position:absolute; width:7px; height:7px; border:2px solid var(--blue); border-radius:50%; left:19px; top:20px; }
.weight-icon::before { content:""; position:absolute; left:11px; right:11px; bottom:11px; height:16px; border:2px solid var(--blue); border-radius:5px; }
.weight-icon::after { content:""; position:absolute; width:14px; height:2px; left:17px; top:16px; background:var(--blue); box-shadow:0 5px 0 var(--blue); }
.report-icon::before { content:""; position:absolute; inset:10px 13px; border:2px solid var(--blue); border-radius:4px; }
.report-icon::after { content:""; position:absolute; left:18px; right:18px; top:18px; height:2px; background:var(--blue); box-shadow:0 6px 0 var(--blue),0 12px 0 var(--blue); }
.cloud-icon::before { content:""; position:absolute; width:24px; height:13px; border:2px solid var(--blue); border-radius:12px; left:12px; top:19px; }
.cloud-icon::after { content:"↑"; position:absolute; color:var(--blue); left:20px; top:12px; font-weight:900; }
.feature-card p { font-size:.93rem; }

.workflow-section { background:var(--surface); }
.workflow-grid { display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center; }
.workflow-steps { margin-top:34px; }
.workflow-step { display:grid; grid-template-columns:40px 1fr; gap:16px; margin-bottom:22px; }
.workflow-step>span { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:white; font-weight:900; }
.workflow-step p { margin:4px 0 0; color:var(--muted); font-size:.92rem; }

.dashboard { padding:28px; border-radius:30px; color:white; background:#0d1726; box-shadow:var(--shadow); }
.dashboard-head { display:flex; justify-content:space-between; gap:20px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.09); }
.dashboard-head small { color:#7bb7ff; font-size:.66rem; font-weight:900; letter-spacing:.15em; }
.dashboard-head h3 { margin:6px 0 0; font-size:1.65rem; }
.online { align-self:flex-start; padding:8px 10px; border-radius:999px; background:rgba(49,199,138,.13); color:#76e4b1; font-size:.67rem; font-weight:800; }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-top:22px; }
.dashboard-card { min-height:135px; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.05); }
.dashboard-primary { background:linear-gradient(145deg,var(--blue),#0d4d95); }
.dashboard-card span { color:#a9b6c7; font-size:.72rem; margin-top:5px; }
.dashboard-primary span { color:#d8e9ff; }
.dash-symbol { width:30px; height:30px; display:grid; place-items:center; margin-bottom:auto; border-radius:9px; background:rgba(255,255,255,.09); color:#cfe3ff; font-weight:900; }

.experience-section { padding:108px 0; color:white; background:linear-gradient(135deg,#0e1726,#07111f); }
.experience-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:88px; align-items:end; }
.experience-copy>p { color:#c4cfdd; font-size:1.07rem; }
.experience-points { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.experience-points span { padding:8px 10px; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:#cdd8e6; font-size:.72rem; }

.vision-section { overflow:hidden; }
.vision-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }
.vision-panel { position:relative; min-height:470px; display:grid; place-items:center; border-radius:34px; background:radial-gradient(circle,#e8f2ff 0%,#f8fbff 58%,white 100%); border:1px solid var(--line); overflow:hidden; }
.vision-ring { position:absolute; border:1px solid rgba(11,99,206,.2); border-radius:50%; }
.ring-one { width:350px; height:350px; }
.ring-two { width:250px; height:250px; }
.vision-core { position:relative; z-index:2; width:190px; height:190px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border-radius:50%; color:white; background:linear-gradient(145deg,var(--blue),var(--blue-deep)); box-shadow:0 22px 55px rgba(11,99,206,.25); }
.vision-core span { font-size:.66rem; letter-spacing:.15em; font-weight:900; }
.vision-core strong { margin-top:9px; font-size:1.25rem; }
.vision-core small { max-width:135px; margin-top:7px; color:#d5e8ff; }
.vision-copy p { color:var(--muted); }
.vision-note { padding:16px 18px; border-left:3px solid var(--blue); background:#f6f9fc; border-radius:0 12px 12px 0; font-size:.86rem; }

.pricing-section { background:#fbfdff; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.price-card { position:relative; padding:32px; border:1px solid var(--line); border-radius:var(--radius); background:white; }
.price-card.featured { transform:translateY(-9px); border:2px solid var(--blue); box-shadow:0 22px 55px rgba(11,99,206,.12); }
.best-value { position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:6px 12px; border-radius:999px; color:white; background:var(--blue); font-size:.65rem; font-weight:900; letter-spacing:.08em; }
.price { margin:24px 0 18px; font-size:3rem; font-weight:900; letter-spacing:-.05em; }
.price>span { font-size:1rem; vertical-align:top; margin-right:3px; }
.price small { margin-left:4px; color:var(--muted); font-size:.84rem; letter-spacing:0; }

.cta-section { padding-top:30px; }
.cta { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; padding:58px; border-radius:32px; color:white; background:linear-gradient(135deg,var(--blue),#063b78); box-shadow:0 26px 70px rgba(11,99,206,.18); }
.cta p { color:#d8eaff; }
.cta-actions { text-align:center; }
.cta-actions span { display:block; margin-top:12px; color:#c8ddf6; font-size:.8rem; }

footer { padding:72px 0 24px; color:white; background:#08111e; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.footer-brand { margin-bottom:18px; }
.footer-grid p { max-width:440px; color:#94a2b5; }
.footer-links { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.footer-links strong,.footer-links a { display:block; }
.footer-links strong { margin-bottom:12px; }
.footer-links a { margin:8px 0; color:#98a6b8; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:52px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); color:#7d8ca0; font-size:.79rem; }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.22s; }
.delay-3 { transition-delay:.32s; }

@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto!important; }
  .reveal { opacity:1; transform:none; transition:none; }
  .button,.feature-card { transition:none; }
}

@media (max-width:980px) {
  .desktop-nav,.nav-cta { display:none; }
  .menu-toggle { display:block; }
  .mobile-menu.open { display:block; }
  .hero-grid,.workflow-grid,.experience-grid,.vision-grid,.cta { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .pricing-grid { grid-template-columns:1fr; max-width:640px; margin:0 auto; }
  .price-card.featured { transform:none; }
  .product-stage { margin-top:10px; }
  .vision-panel { min-height:400px; }
}

@media (max-width:700px) {
  .container { width:min(100% - 28px,1180px); }
  .hero { padding-top:66px; }
  .product-stage { min-height:505px; }
  .phone { width:210px; height:435px; border-width:7px; border-radius:35px; }
  .phone-screen { padding:35px 14px 16px; border-radius:27px; }
  .phone-left { left:-30px; top:55px; }
  .phone-right { right:-14px; }
  .floating-card { width:220px; padding:13px; }
  .float-top { left:30px; top:2px; }
  .float-bottom { left:50%; transform:translateX(-50%); bottom:0; }
  .proof-grid { grid-template-columns:1fr 1fr; padding:10px 0; }
  .proof-grid div { border-right:0; }
  .feature-grid,.dashboard-grid { grid-template-columns:1fr; }
  .feature-card { min-height:auto; }
  .experience-grid { gap:30px; }
  .cta { padding:36px 24px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
  .section,.experience-section { padding:80px 0; }
}

/* Official launch branding */
.official-dark-brand {
  display:inline-flex;
  align-items:center;
  overflow:hidden;
  background:#000;
  border-radius:10px;
  line-height:0;
  box-shadow:0 8px 24px rgba(15,23,42,.10);
}
.official-dark-brand img {
  display:block;
  width:auto;
  object-fit:contain;
}
.site-header .official-dark-brand {
  height:58px;
  width:195px;
}
.site-header .official-dark-brand img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
}
.footer-brand.official-dark-brand {
  width:250px;
  height:84px;
  border:1px solid rgba(255,255,255,.08);
}
.footer-brand.official-dark-brand img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
}
.hero-brand-badge {
  position:absolute;
  right:8px;
  top:30px;
  width:112px;
  height:112px;
  object-fit:cover;
  border-radius:24px;
  box-shadow:0 18px 50px rgba(15,23,42,.20);
  opacity:.96;
  z-index:5;
}
@media (max-width:700px) {
  .site-header .official-dark-brand {
    width:158px;
    height:48px;
  }
  .footer-brand.official-dark-brand {
    width:220px;
    height:74px;
  }
  .hero-brand-badge {
    width:82px;
    height:82px;
    right:-4px;
    top:42px;
    border-radius:18px;
  }
}