:root{
  --accent:#2980b9;
  --accent-2:#2471a3;
  --navy:#061a2b;
}
*{box-sizing:border-box}
body{margin:0; background:#e8eced; color:#28323c; font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;}
html{scroll-behavior:smooth}
a{color:inherit}
img{max-width:100%}

.wrap{max-width:1280px; margin:0 auto; padding-left:64px; padding-right:64px;}

#site-header{position:sticky; top:0; z-index:40; background:rgba(232,236,237,.92); backdrop-filter:blur(6px); transition:box-shadow .25s ease;}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 0; flex-wrap:wrap;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none;}
.logo span{font-weight:800; font-size:22px; color:var(--navy);}
.nav-links{display:flex; gap:32px;}
.nav-links a{color:#566372; text-decoration:none; font-size:15px; transition:color .15s ease;}
.nav-links a:hover{color:var(--navy);}
.nav-links a.active{color:var(--navy); font-weight:600;}

.cta-primary{background:var(--accent); color:#fff; font-weight:700; font-size:16px; padding:14px 28px; border-radius:10px; text-decoration:none; display:inline-block; border:none; cursor:pointer; transition:background .15s ease, transform .12s ease; font-family:inherit;}
.cta-primary:hover{background:var(--accent-2);}
.cta-primary:active{transform:scale(.97);}
.cta-primary.small{font-weight:600; font-size:14px; padding:10px 20px;}
.cta-secondary{color:var(--navy); font-weight:600; font-size:16px; padding:14px 28px; border-radius:10px; text-decoration:none; border:1px solid #d3dae1; display:inline-block; transition:border-color .15s ease, background .15s ease;}
.cta-secondary:hover{border-color:#b7c2cb; background:#f6f8f9;}
.cta-ghost-dark{border:1px solid rgba(255,255,255,.35); color:#fff; font-weight:600; font-size:15px; padding:13px 26px; border-radius:10px; text-decoration:none; display:inline-block; transition:border-color .15s ease, background .15s ease;}
.cta-ghost-dark:hover{border-color:#fff; background:rgba(255,255,255,.08);}

.section{padding:0 0 80px;}
.card{background:#fff; border:1px solid #e2e7ec; border-radius:20px; padding:40px; box-shadow:0 1px 3px rgba(6,26,43,.08);}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); display:block;}
h1,h2,h3{color:var(--navy); margin:0;}
p{color:#566372; line-height:1.7; margin:0;}

.hero{display:flex; align-items:center; gap:48px; flex-wrap:wrap; padding:56px 0 80px;}
.hero-text{flex:1 1 480px; display:flex; flex-direction:column; gap:24px; min-width:0;}
.hero-text h1{font-size:48px; line-height:1.12; font-weight:800;}
.hero-text p{font-size:18px;}
.hero-visual{flex:1 1 420px; min-width:280px;}
.browser-frame{border-radius:14px; overflow:hidden; border:1px solid #d3dae1; box-shadow:0 20px 50px rgba(6,26,43,.16); display:block; text-decoration:none;}
.browser-bar{background:#e2e7ec; padding:9px 12px; display:flex; gap:6px;}
.browser-bar span{width:10px; height:10px; border-radius:50%; display:inline-block;}

.benefits-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;}
.products-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
.shots-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}

.benefit-card, .product-card{background:#fff; border:1px solid #e2e7ec; border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:12px; box-shadow:0 1px 3px rgba(6,26,43,.06); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.benefit-card:hover, .product-card:hover, .shot-fig img:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(6,26,43,.12); border-color:#c7d2da;}
.product-card{padding:30px;}
.icon-box{width:40px; height:40px; border-radius:10px; background:#e7f0f7; display:flex; align-items:center; justify-content:center;}
.benefit-card h3, .product-card h3{font-size:16px;}
.product-card h3{font-size:18px;}
.benefit-card p, .product-card p{font-size:14px;}

.ia-band{background:var(--navy); border-radius:20px; padding:44px; display:flex; align-items:center; gap:44px; flex-wrap:wrap;}
.ia-band .eyebrow{color:#6fb4e0;}
.ia-band h2{color:#fff; font-size:26px;}
.ia-band p{color:#a9bccb; font-size:15px;}
.ia-band a.more{font-size:14px; font-weight:600; color:#6fb4e0; text-decoration:none; margin-top:4px; display:inline-block;}

.shot-fig{margin:0; display:flex; flex-direction:column; gap:10px;}
.shot-fig img{border-radius:12px; border:1px solid #d3dae1; box-shadow:0 6px 20px rgba(6,26,43,.10); width:100%; display:block; cursor:zoom-in; transition:transform .22s ease, box-shadow .22s ease;}
.shot-fig img:hover{transform:translateY(-5px); box-shadow:0 16px 36px rgba(6,26,43,.18);}
.shot-fig figcaption{font-size:14px; color:#566372;}

.mobile-card{margin-top:24px; background:#fff; border:1px solid #e2e7ec; border-radius:20px; padding:40px; display:flex; align-items:center; gap:40px; flex-wrap:wrap; box-shadow:0 1px 3px rgba(6,26,43,.08);}
.mobile-card img{width:220px; border-radius:20px; cursor:zoom-in;}

.close-cta{background:var(--navy); padding:56px 28px; text-align:center;}
.close-cta h2{color:#fff; font-size:24px; margin-bottom:12px;}
.close-cta p{color:#a9bccb; font-size:15px; margin-bottom:28px;}
.close-cta .btn-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

footer{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:36px 0;}
footer .brand{font-weight:800; font-size:16px; color:var(--navy);}
footer p{margin:0; font-size:13px; color:#7e8b98;}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}
@keyframes fadeInUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}
.hero-anim{opacity:0; animation:fadeInUp .7s ease forwards;}
.page-anim{opacity:0; animation:fadeInUp .5s ease forwards;}

.lightbox-backdrop{position:fixed; inset:0; background:rgba(6,26,43,.82); display:none; align-items:center; justify-content:center; z-index:100; padding:40px; box-sizing:border-box; cursor:zoom-out;}
.lightbox-backdrop.open{display:flex; animation:fadeInUp .2s ease forwards;}
.lightbox-backdrop img{max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 24px 64px rgba(0,0,0,.45); cursor:default;}

.page-intro{padding:48px 0 8px;}
.page-intro h1{font-size:38px; margin-top:8px;}
.page-intro .sub{margin-top:12px; font-size:15px; color:#7e8b98;}

.contact-wrap{min-height:60vh; display:flex; align-items:center; justify-content:center; padding:64px 28px;}
.contact-card{max-width:560px; width:100%; background:var(--navy); border-radius:20px; padding:56px 48px; text-align:center;}
.contact-card .eyebrow{color:#6fb4e0;}
.contact-card h1{color:#fff; font-size:28px; margin-top:10px;}
.contact-card p{color:#a9bccb; margin:16px 0 28px;}
.form-field{text-align:left; margin-bottom:16px;}
.form-field label{display:block; font-size:13px; font-weight:600; color:#a9bccb; margin-bottom:6px;}
.form-field input, .form-field textarea{width:100%; padding:11px 12px; border:1px solid #27394f; background:#0d2335; color:#fff; border-radius:8px; font-family:inherit; font-size:14px;}
.form-field textarea{min-height:90px; resize:vertical;}
.form-field input:focus, .form-field textarea:focus{outline:none; border-color:var(--accent);}
.form-msg{font-size:14px; margin-top:14px; min-height:20px;}
.form-msg.ok{color:#85d19a;}
.form-msg.err{color:#e07a77;}

@media (max-width:860px){
  .wrap{padding-left:28px; padding-right:28px;}
  .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .products-grid{grid-template-columns:1fr;}
  .shots-grid{grid-template-columns:1fr;}
  .hero-text h1{font-size:38px;}
  .nav-links{display:none;}
}
@media (max-width:560px){
  .benefits-grid{grid-template-columns:1fr;}
}