.ios-hero { position: relative; overflow: hidden; background: var(--bg); }
.ios-hero-blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.ios-hero-blob--a { top: -60px; right: -40px; width: 440px; height: 400px; filter: blur(64px); background: radial-gradient(circle, rgba(0,122,255,.12), transparent 65%); animation: svc-drift 22s ease-in-out infinite; }
.ios-hero-blob--b { bottom: 0; left: -40px; width: 360px; height: 320px; filter: blur(60px); background: radial-gradient(circle, rgba(88,86,214,.1), transparent 65%); animation: svc-drift 26s ease-in-out infinite reverse; }

.ios-hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 130px;
  padding-bottom: 80px;
}
.ios-hero-copy h1 {
  font-size: clamp(30px, 3.6vw, 52px);
  letter-spacing: -.04em;
  line-height: 1.06;
  margin-bottom: 16px;
}
.ios-hero-sub { font-size: clamp(15px, 1.3vw, 17px); color: var(--ink-soft); line-height: 1.65; max-width: 460px; margin-bottom: 10px; }
.ios-hero-note { font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 440px; margin-bottom: 24px; font-style: italic; }
.ios-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.ios-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* iPhone + code card layout */
.ios-hero-visual { position: relative; }
.ios-visual-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  justify-content: center;
}
.ios-phone { flex-shrink: 0; }
.ios-phone-svg {
  width: 152px;
  filter: drop-shadow(0 20px 40px rgba(0,122,255,.12)) drop-shadow(0 4px 12px rgba(0,0,0,.08));
  animation: svc-float 5s ease-in-out infinite;
}
.ios-code-card {
  flex: 1;
  max-width: 240px;
  background: #1a1a2e;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #2a2a3e;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.4);
  animation: svc-float 5s ease-in-out infinite;
  animation-delay: -2.5s;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}
/* Swift syntax colors */
.sk { color: #fc5fa3; }   /* keyword */
.sc { color: #5dd8ff; }   /* class/type */
.sf { color: #a167e6; }   /* function */
.sm { color: #a8d0a0; }   /* method modifier */
.st { color: #a6accd; }   /* text/punctuation */
.ss { color: #fc6a5d; }   /* string */
.sn { color: #d9c97c; }   /* number */
.sv { color: #cdd3e0; }   /* variable */

.ios-badge {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 1px solid rgba(0,122,255,.25);
  border-radius: 10px;
  padding: 7px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.1);
  white-space: nowrap;
}
.ios-badge span { font-family: var(--font-heading); font-size: 12px; font-weight: 600; color: var(--ink-soft); }

/* Why iOS grid */
.ios-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ios-why-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  transition: .35s cubic-bezier(.2,.7,.2,1);
}
.ios-why-card:hover { transform: translateY(-4px); border-color: rgba(0,122,255,.25); box-shadow: 0 20px 40px -20px rgba(0,122,255,.15); }
.ios-why-num { font-family: var(--font-heading); font-size: 11px; font-weight: 700; color: #007AFF; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.ios-why-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.02em; }
.ios-why-card p { font-size: 14.5px; color: var(--muted); line-height: 1.7; margin: 0; }

/* Swift section */
.ios-swift-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.ios-swift-copy p { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 14px; }
.ios-swift-features { display: flex; flex-direction: column; gap: 20px; }
.ios-swift-feat { display: flex; gap: 14px; align-items: flex-start; }
.ios-swift-icon { width: 38px; height: 38px; border-radius: 11px; background: rgba(0,122,255,.08); border: 1px solid rgba(0,122,255,.15); display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; }
.ios-swift-icon svg { width: 18px; height: 18px; stroke: #007AFF; stroke-width: 1.5; fill: none; }
.ios-swift-feat h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; letter-spacing: -.015em; }
.ios-swift-feat p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }

/* App Store section */
.ios-store-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.ios-store-copy p { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 14px; }
.ios-store-steps { display: flex; flex-direction: column; gap: 0; }
.ios-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.ios-step:last-child { border-bottom: none; }
.ios-step-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-2);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.ios-step-num--done { background: linear-gradient(135deg, #007AFF, #5856D6); border-color: transparent; color: white; }
.ios-step h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; letter-spacing: -.015em; }
.ios-step p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }

.ios-eco-wrap { }
/* ===== iOS ECOSYSTEM TILES ===== */
.ios-eco-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
}
.ios-eco-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ios-eco-tile {
  background: var(--eco-color, rgba(109,93,252,.06));
  border: 1px solid var(--eco-border, rgba(109,93,252,.2));
  border-radius: 12px;
  padding: 14px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  transition: .25s ease;
}
.ios-eco-tile:hover { transform: translateY(-2px); }
.ios-eco-ico {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ios-eco-ico svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.ios-eco-tile > div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ios-eco-tile b {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  display: block;
}
.ios-eco-tile span {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  display: block;
}

/* --- iOS responsive --- */
@media (max-width: 1024px) {
  .ios-hero-in      { grid-template-columns: 1fr; padding-top: 116px; }
  .ios-hero-visual  { display: none; }
  .ios-why-grid     { grid-template-columns: 1fr; }
  .ios-swift-grid   { grid-template-columns: 1fr; gap: 40px; }
  .ios-store-grid   { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .ios-hero-in { padding-top: 104px; padding-bottom: 56px; }
}

/* ============================================
   REACT DEVELOPMENT PAGE
   ============================================ */

/* fl-app-* shared with ios page */
.fl-apps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
}
.fl-app-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  transition: .35s cubic-bezier(.2,.7,.2,1);
}
.fl-app-card:hover {
  transform: translateY(-4px);
  border-color: rgba(71,197,251,.3);
  box-shadow: 0 22px 44px -22px rgba(71,197,251,.2);
}
.fl-app-platforms {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
.fl-app-platforms svg {
  stroke: var(--muted);
  stroke-width: 1.5;
  fill: none;
  width: 14px; height: 14px;
}
.fl-app-platform-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-left: 2px;
}
.fl-app-thumb {
  width: 70px; height: 70px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.fl-app-thumb--sazcars { background: linear-gradient(135deg, #fef3f2, #fce7f3); }
.fl-app-thumb--wow     { background: linear-gradient(135deg, #f0fdf4, #e8f8ff); }
.fl-app-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.02em; }
.fl-app-card > p { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
.fl-app-detail {
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fl-app-detail-item b {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v1);
  margin-bottom: 3px;
}
.fl-app-detail-item span {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.fl-app-links { display: flex; gap: 16px; flex-wrap: wrap; }

/* Flutter vs native comparison cards */