/* ---------- tokens ---------- */
:root{
  --bg:#ffffff;
  --navy:#1c2340;
  --navy-soft:#4d5b78;
  --navy-faint:#8792a3;
  --line:rgba(28,35,64,0.10);
  --line-strong:rgba(28,35,64,0.18);
  --grad-a:#5ec3d9;   /* sampled from the app's Continue button, left stop */
  --grad-b:#47a6bc;   /* sampled from the app's Continue button, right stop */
  --accent:#2f8aa0;   /* darker readable teal, for text/links */
  --glass-1:rgba(255,255,255,0.65);
  --glass-2:rgba(94,195,217,0.14);
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --font-display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --wrap:1160px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--navy);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  letter-spacing:-0.01em;
}
h1,h2,h3,.eyebrow,.section-title{font-family:var(--font-display);}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}

a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:opacity, transform;
}
.reveal.is-visible{opacity:1; transform:none;}

/* ---------- logo lockup (matches in-app wordmark) ---------- */
.logo-stack{display:inline-flex;flex-direction:column;align-items:center;line-height:1;}
.logo-stack .merhaba{
  font-family:var(--font-display);
  font-weight:800;
  color:var(--navy);
  white-space:nowrap;
}
.logo-stack .istanbul{
  font-family:var(--font-display);
  font-weight:600;
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  white-space:nowrap;
  display:inline-block;
}
.logo-stack--sm .merhaba{font-size:21px;}
.logo-stack--sm .istanbul{font-size:13px;margin-top:3px;}
.logo-stack--lg .merhaba{font-size:clamp(34px,5vw,52px);}
.logo-stack--lg .istanbul{font-size:clamp(15px,2vw,20px);margin-top:6px;}

/* ---------- header ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:20;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:82px;
}
.header-nav{display:flex;gap:32px;font-size:14px;font-weight:500;color:var(--navy-soft);}
.header-nav a{position:relative;padding-bottom:4px;transition:color .2s var(--ease);}
.header-nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}
.header-nav a:hover{color:var(--navy);}
.header-nav a:hover::after{transform:scaleX(1);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(56px,9vw,88px) 0 clamp(64px,9vw,96px);
  background:linear-gradient(180deg,#ffffff 0%, rgba(94,195,217,0.08) 100%);
  text-align:center;
}
.hero-copy{max-width:620px;margin:0 auto;}
.eyebrow{
  display:inline-flex;
  align-items:center;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 18px;
}
.hero h1{margin:0 0 20px;display:flex;justify-content:center;}
.tagline{
  font-size:17px;
  color:var(--navy-soft);
  max-width:440px;
  margin:0 auto 32px;
  line-height:1.55;
}

.cta-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}

/* official store badges — used unmodified, per Apple/Google brand guidelines.
   Google's PNG carries built-in transparent padding, so it's scaled up slightly
   to make its visible button match the App Store badge height. */
.store-badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;}
.store-badges a{display:inline-block;line-height:0;transition:opacity .2s var(--ease), transform .2s var(--ease);}
.store-badges a:hover{opacity:0.82;transform:translateY(-2px);}
.badge-apple img{height:52px;width:auto;display:block;}
.badge-google img{height:76px;width:auto;display:block;margin:-12px 0;}

/* ---------- phone showcase ---------- */
.phones-row{
  display:flex;
  gap:clamp(28px,5vw,56px);
  justify-content:center;
  margin-top:48px;
  flex-wrap:wrap;
}
.phone-frame{
  width:210px;
  aspect-ratio:9/19.5;
  border-radius:34px;
  border:2px solid var(--navy);
  padding:8px;
  background:linear-gradient(160deg,var(--glass-1),var(--glass-2));
  backdrop-filter:blur(14px);
  position:relative;
  transition:transform .3s var(--ease);
}
.phone-frame:hover{transform:translateY(-6px);}
.phone-frame::before{
  content:"";
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:46px;
  height:6px;
  border-radius:4px;
  background:var(--navy);
  opacity:0.5;
  z-index:2;
}
.phone-screen{
  width:100%;
  height:100%;
  border-radius:26px;
  overflow:hidden;
  position:relative;
  background:linear-gradient(150deg,var(--grad-a),var(--grad-b));
  display:flex;
  align-items:center;
  justify-content:center;
}
.phone-screen img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.phone-screen .placeholder-label{
  position:relative;
  z-index:1;
  color:#fff;
  font-size:13px;
  font-weight:600;
  text-align:center;
  padding:0 16px;
  opacity:0.9;
}

/* ---------- section head (shared) ---------- */
.section-head{text-align:center;max-width:560px;margin:0 auto 56px;}
.section-title{
  font-size:clamp(26px,3.4vw,36px);
  font-weight:800;
  margin:0;
  color:var(--navy);
  letter-spacing:-0.015em;
}

.how-it-works .section-head{margin-bottom:clamp(32px,5vw,48px);}
.how-it-works{padding:clamp(56px,8vw,88px) 0 clamp(40px,6vw,64px);background:#ffffff;}
.steps-stack{
  display:flex;
  flex-direction:column;
  gap:clamp(40px,6vw,72px);
  max-width:1000px;
  margin:0 auto;
}
.step-row{
  display:grid;
  align-items:center;
  gap:clamp(28px,5vw,64px);
}
/* stagger each row to make a descending staircase, and vary photo size */
.step-row:nth-child(1){grid-template-columns:1.1fr 1fr;  margin-left:0;   margin-right:14%;}
.step-row:nth-child(2){grid-template-columns:1.6fr 1fr;  margin-left:6%;  margin-right:0;}
.step-row:nth-child(3){grid-template-columns:1.35fr 1fr; margin-left:14%; margin-right:0;}
/* alternate which side the photo sits on; text stays left-aligned for natural reading */
.step-row:nth-child(even) .step-photo{order:2;}
.step-row:nth-child(even) .step-text{order:1;text-align:left;}

.step-photo{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:16/9;
}
.step-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.step-row:hover .step-photo img{transform:scale(1.04);}
.step-number{
  position:absolute;
  top:16px;
  left:16px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:17px;
  font-family:var(--font-display);
}
.step-eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 10px;
}
.step-text h3{
  margin:0 0 12px;
  font-size:clamp(20px,2.4vw,26px);
  font-weight:800;
  color:var(--navy);
  letter-spacing:-0.01em;
  line-height:1.2;
}
.step-text p{margin:0;font-size:15.5px;color:var(--navy-soft);line-height:1.6;}

/* ---------- features ---------- */
.features{padding:clamp(64px,9vw,96px) 0 clamp(80px,11vw,112px);}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.feature-card{
  padding:28px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:linear-gradient(150deg,var(--glass-1),var(--glass-2));
  backdrop-filter:blur(14px);
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(94,195,217,0.5);
}
.feature-icon{
  width:42px;height:42px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  margin-bottom:16px;
}
.feature-icon svg{stroke:#fff;}
.feature-card h3{
  font-size:17px;
  font-weight:700;
  margin:0 0 8px;
  color:var(--navy);
}
.feature-card p{
  font-size:14.5px;
  color:var(--navy-soft);
  margin:0;
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff, rgba(94,195,217,0.06));
  padding:48px 0 32px;
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.footer-links{display:flex;gap:24px;font-size:14px;font-weight:600;}
.footer-links a{
  color:var(--navy);
  transition:color .2s var(--ease);
}
.footer-links a:hover{
  color:var(--accent);
}

.footer-socials{display:flex;gap:10px;}
.footer-socials a{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--navy-soft);
  transition:color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.footer-socials a:hover{
  color:var(--accent);
  border-color:var(--accent);
  transform:translateY(-2px);
}
.footer-socials svg{width:18px;height:18px;fill:currentColor;}
.copyright{
  width:100%;
  margin:28px 0 0;
  font-size:12.5px;
  color:var(--navy-faint);
  border-top:1px solid var(--line);
  padding-top:20px;
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .step-row,
  .step-row:nth-child(1),
  .step-row:nth-child(2),
  .step-row:nth-child(3){
    grid-template-columns:1fr;
    margin-left:0;
    margin-right:0;
    gap:20px;
  }
  .step-row:nth-child(even) .step-photo{order:0;}
  .step-row:nth-child(even) .step-text{order:0;text-align:left;}
  .feature-grid{grid-template-columns:1fr;}
  .header-nav{display:none;}
}
@media (max-width:520px){
  .wrap{padding:0 20px;}
  .phone-frame{width:150px;}
}