:root{
  --navy:#003da5;
  --navy-dark:#023a51;
  --green:#2cbc63;
  --text:#353535;
  --muted:#666666;
  --line:#e8ebef;
  --bg:#ffffff;
  --bg-soft:#f9fafb;
  --app-ink:#0f2a44;
  --font-head:"Montserrat",system-ui,sans-serif;
  --font-body:"Roboto",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.6;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy);margin:0;line-height:1.2}
h2{font-size:34px;font-weight:700;margin-bottom:40px}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Header: white, sticky, logo left, uppercase nav right with separators */
.site-header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:112px}
.logo img{width:124px;height:auto}
.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.topbar{font-family:var(--font-head);font-size:11px;letter-spacing:.06em;padding-bottom:10px;border-bottom:2px solid var(--navy);width:680px;text-align:right}
.topbar a{color:var(--navy-dark)}
.nav{display:flex}
.nav a{font-family:var(--font-head);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--navy);padding:0 16px;border-left:1px solid var(--line);transition:color .2s}
.nav a:first-child{border-left:0}
.nav a:hover,.nav a.active{color:var(--green)}
.burger{display:none;background:0;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:26px;height:2px;background:var(--navy);margin:5px 0}

/* Hero */
.hero{padding:72px 0 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.eyebrow{font-family:var(--font-head);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--green)}
h1{font-size:60px;font-weight:800;margin:14px 0 20px}
h1 em{font-style:normal;color:var(--green)}
.hero-text p{font-size:18px;color:var(--muted);max-width:520px;margin:0 0 32px}
.store-row{display:flex;gap:14px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:12px;background:var(--navy);color:#fff;padding:12px 22px 12px 16px;border-radius:6px;font-family:var(--font-head);font-weight:600;font-size:16px;line-height:1.1;transition:background .2s}
.store:hover{background:var(--green)}
.store svg{width:26px;height:26px;fill:#fff}
.store small{display:block;font-size:10px;font-weight:500;letter-spacing:.1em;opacity:.8;margin-bottom:3px}

/* Phone frame */
.phone{width:300px;aspect-ratio:369/725;border-radius:38px;padding:10px;background:#0b1220;box-shadow:0 30px 60px -20px rgba(0,61,165,.45),0 0 0 1px rgba(0,0,0,.08);overflow:hidden}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:30px}
.phone.sm{width:220px;border-radius:30px;padding:7px}
.phone.sm img{border-radius:24px}
.hero-phone{position:relative;height:640px}
.hero-phone .phone{position:absolute;top:0;left:50%;transform:translateX(-30%)}
.hero-phone .phone-back{transform:translateX(-95%) translateY(60px) scale(.88) rotate(-6deg);opacity:.9;z-index:-1}

/* Stats: big navy numbers, like miateknoloji.com */
.stats{padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stats strong{display:block;font-family:var(--font-head);font-size:64px;font-weight:700;color:var(--navy);line-height:1}
.stats strong span{font-size:28px;margin-left:4px}
.stats .word{font-size:44px;letter-spacing:-.01em}
.stats p{margin:16px 0 0;font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--text)}

/* Features: image cards with uppercase title, dark overlay, like Çözümler grid */
.features{padding:80px 0}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.fcard{position:relative;min-height:300px;border-radius:4px;overflow:hidden;background:var(--navy-dark);display:flex;align-items:flex-end;isolation:isolate}
.fcard::before{content:"";position:absolute;inset:0;background:var(--img) center 18%/cover no-repeat;transform:scale(1.02);filter:saturate(.9);transition:transform .6s}
.fcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,58,81,.55) 0%,rgba(2,58,81,.9) 100%)}
.fcard:hover::before{transform:scale(1.08)}
.fcard-body{position:relative;z-index:1;padding:28px 32px;color:#fff}
.fcard h3{color:#fff;font-size:17px;font-weight:700;letter-spacing:.04em;margin-bottom:8px}
.fcard h3::after{content:"";display:block;width:4px;height:4px;background:#fff;border-radius:50%;margin-top:10px}
.fcard p{margin:0;font-size:15px;opacity:.92;max-width:420px}

/* Screens strip */
.screens{padding:80px 0;background:var(--bg-soft)}
.screens .lead{max-width:640px;color:var(--muted);font-size:17px;margin:-24px 0 40px}
.screen-strip{display:flex;gap:28px;justify-content:center;padding:8px 24px 16px;overflow-x:auto;scroll-snap-type:x mandatory}
.screen-strip figure{margin:0;flex:0 0 auto;text-align:center;scroll-snap-align:center}
.screen-strip figcaption{font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--navy);margin-top:14px;letter-spacing:.03em}

/* How */
.how{padding:80px 0}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.steps li{border-top:3px solid var(--navy);padding-top:24px}
.steps span{font-family:var(--font-head);font-size:44px;font-weight:700;color:var(--green);line-height:1}
.steps h3{font-size:20px;margin:14px 0 10px}
.steps p{margin:0;color:var(--muted)}

/* CTA */
.cta{background:var(--navy-dark);color:#fff;padding:64px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.cta h2{color:#fff;margin-bottom:10px}
.cta p{margin:0;max-width:600px;opacity:.85}
.btn{flex:0 0 auto;font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.06em;background:var(--green);color:#fff;padding:16px 32px;border-radius:4px;transition:background .2s}
.btn:hover{background:#fff;color:var(--navy-dark)}

/* Footer: navy, three columns, gray copyright bar */
.site-footer{background:var(--navy);color:#fff;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:48px;padding:64px 24px}
.footer-logo{width:160px;filter:brightness(0) invert(1);margin-bottom:28px}
.site-footer h4{color:#fff;font-size:16px;font-weight:700;margin:0 0 16px}
.site-footer h4+p+h4{margin-top:32px}
.site-footer p{margin:0 0 14px;opacity:.85;line-height:1.7}
.site-footer a{color:#fff}
.site-footer a:hover{color:var(--green)}
.social{display:flex;gap:18px;margin-top:20px}
.social svg{width:18px;height:18px;fill:#fff;opacity:.8}
.social a:hover svg{opacity:1;fill:var(--green)}
.copyright{background:#444;color:#ddd;text-align:center;padding:14px;font-size:13px}

/* Responsive */
@media (max-width:1024px){
  .topbar{width:auto;min-width:420px}
  h1{font-size:48px}
  .hero-phone{height:560px}
  .hero-phone .phone{width:260px}
}
@media (max-width:820px){
  .header-inner{height:72px}
  .logo img{width:96px}
  .header-right{position:fixed;top:72px;left:0;right:0;background:#fff;align-items:stretch;padding:0 24px 24px;transform:translateY(-120%);transition:transform .3s;box-shadow:0 10px 30px rgba(0,0,0,.08)}
  body.nav-open .header-right{transform:none}
  .topbar{width:auto;min-width:0;text-align:left;padding-top:12px}
  .nav{flex-direction:column}
  .nav a{padding:12px 0;border:0;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .hero{padding-top:48px}
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-text p{margin-left:auto;margin-right:auto}
  .store-row{justify-content:center}
  .hero-phone{height:auto;display:flex;justify-content:center}
  .hero-phone .phone{position:static;transform:none}
  .hero-phone .phone-back{display:none}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stats strong{font-size:48px}
  .feature-grid,.steps{grid-template-columns:1fr}
  .screen-strip{justify-content:flex-start}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .footer-grid{grid-template-columns:1fr;gap:32px}
}