/* Fikra · Apple-style skin
   Light, generous whitespace, centered hero typography, calm accent.
   SF-Pro-style sans (Inter as fallback), product-marketing scale.
*/

:root {
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --bg-3: #fbfbfd;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --ink-mute: #6e6e73;
  --ink-faint: #86868b;
  --line: rgba(0,0,0,0.08);
  --line-strong: rgba(0,0,0,0.16);
  --accent: #0066cc;
  --accent-hover: #0077ed;
  --max: 1440px;
  --gutter: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100vw; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* Ambient gradients   give the glass something to refract */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 700px at 12% 8%,  rgba(0,102,204,0.10),  transparent 65%),
    radial-gradient(800px 600px at 92% 18%, rgba(255,90,140,0.08), transparent 65%),
    radial-gradient(900px 700px at 78% 78%, rgba(120,80,220,0.10), transparent 65%),
    radial-gradient(800px 600px at 18% 90%, rgba(0,180,160,0.08), transparent 65%);
}

/* Floating ambient blobs that drift behind everything */
.ambient-blobs {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.ambient-blobs span {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: 0.55;
  will-change: transform;
}
.ambient-blobs span:nth-child(1) {
  width: 520px; height: 520px; left: -120px; top: 8%;
  background: radial-gradient(circle, #5ea6ff 0%, transparent 70%);
  animation: blob-drift-a 24s ease-in-out infinite;
}
.ambient-blobs span:nth-child(2) {
  width: 460px; height: 460px; right: -100px; top: 22%;
  background: radial-gradient(circle, #ff8fb6 0%, transparent 70%);
  animation: blob-drift-b 30s ease-in-out infinite;
}
.ambient-blobs span:nth-child(3) {
  width: 580px; height: 580px; left: 38%; top: 55%;
  background: radial-gradient(circle, #b388ff 0%, transparent 70%);
  animation: blob-drift-c 36s ease-in-out infinite;
}
.ambient-blobs span:nth-child(4) {
  width: 420px; height: 420px; right: 12%; bottom: 4%;
  background: radial-gradient(circle, #6cf2d4 0%, transparent 70%);
  animation: blob-drift-d 28s ease-in-out infinite;
}
@keyframes blob-drift-a {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(120px, 80px) scale(1.1); }
}
@keyframes blob-drift-b {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-100px, 120px) scale(1.15); }
}
@keyframes blob-drift-c {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(80px, -100px) scale(0.92); }
}
@keyframes blob-drift-d {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-140px, -60px) scale(1.1); }
}

/* ─── Fikra Journey Diagram ────────────────────────────────────────
   Six stations on a wavy dotted path: bulb → agent → app → rocket →
   customers → Fikra hub. A glowing traveler dot moves along the path
   and lights each station as it arrives.
*/
.fikra-journey {
  position: relative;
  width: 100%; max-width: 1100px;
  margin: 0 auto;
  height: 260px;
}
.fikra-journey-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.journey-path-track {
  stroke: rgba(0,102,204,0.18);
  stroke-width: 2;
  stroke-dasharray: 2 8;
  fill: none;
}
.journey-path-fill {
  stroke: url(#journeyGrad);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: path-fill 18s linear infinite;
}
@keyframes path-fill {
  0%   { stroke-dashoffset: 1000; }
  90%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
.journey-traveler {
  fill: #fff;
  filter: drop-shadow(0 0 12px rgba(0,122,255,0.95)) drop-shadow(0 0 24px rgba(0,122,255,0.6));
  animation: traveler-move 18s linear infinite;
  offset-rotate: 0deg;
}
@keyframes traveler-move {
  0%   { offset-distance: 0%;   opacity: 0; }
  3%   { opacity: 1; }
  90%  { offset-distance: 100%; opacity: 1; }
  95%  { opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

.journey-station {
  position: absolute;
  width: 84px; height: 84px;
  margin-left: -42px; margin-top: -42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 12px 28px -10px rgba(0,0,0,0.12);
  display: grid; place-items: center;
}
.journey-station svg { width: 48px; height: 48px; }

/* ─── Per-icon 3D animations ──────────────────────────────────
   Each station's icon has its own continuous motion so the row
   feels alive instead of static. All loops are long + eased so
   nothing feels jittery, and a soft drop-shadow gives depth.
*/
.icon-anim { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12)) drop-shadow(0 1px 1px rgba(0,0,0,0.08)); overflow: visible; }

/* Whole-icon gentle bob, staggered per station */
.journey-station.j1 svg { animation: icon-bob 4.2s ease-in-out infinite; }
.journey-station.j2 svg { animation: icon-bob 4.6s ease-in-out -0.7s infinite; }
.journey-station.j3 svg { animation: icon-bob 4.4s ease-in-out -1.4s infinite; }
.journey-station.j4 svg { animation: icon-bob 4.8s ease-in-out -2.1s infinite; }
.journey-station.j5 svg { animation: icon-bob 4.4s ease-in-out -2.8s infinite; }
.journey-station.j6 svg { animation: icon-bob 4.6s ease-in-out -3.5s infinite; }
@keyframes icon-bob {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-3px) rotate(0.5deg); }
}

/* 1 — Lightbulb: glass pulses + halo flickers */
.icon-bulb .bulb-glass { transform-origin: 24px 22px; animation: bulb-pulse 2.4s ease-in-out infinite; }
.icon-bulb .bulb-halo  { animation: bulb-halo 2.4s ease-in-out infinite; transform-origin: 24px 20px; }
@keyframes bulb-pulse {
  0%,100% { transform: scale(1);    filter: brightness(1); }
  45%     { transform: scale(1.06); filter: brightness(1.18); }
  55%     { transform: scale(1.04); filter: brightness(1.05); }
  62%     { transform: scale(1.08); filter: brightness(1.22); }
}
@keyframes bulb-halo {
  0%,100% { opacity: 0.0;  transform: scale(0.85); }
  45%     { opacity: 0.55; transform: scale(1.35); }
  62%     { opacity: 0.7;  transform: scale(1.5); }
}

/* 2 — Crane: jib swings, hook bobs on its cable */
.icon-crane .crane-jib  { animation: crane-swing 5.4s ease-in-out infinite; }
.icon-crane .crane-hook { animation: crane-hook 1.8s ease-in-out infinite; }
@keyframes crane-swing {
  0%,100% { transform: rotate(-8deg); }
  50%     { transform: rotate(8deg); }
}
@keyframes crane-hook {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(2px) rotate(2deg); }
}

/* 3 — Product stack: layers float at different phases (parallax) */
.icon-stack .stack-l3 { transform-origin: 24px 16px; animation: stack-float 3.2s ease-in-out infinite; }
.icon-stack .stack-l2 { transform-origin: 24px 23px; animation: stack-float 3.6s ease-in-out -0.6s infinite; }
.icon-stack .stack-l1 { transform-origin: 24px 30px; animation: stack-float 4.0s ease-in-out -1.2s infinite; }
@keyframes stack-float {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-1.5px) scale(1.02); }
}

/* 4 — Tree: foliage sways like a branch in wind */
.icon-tree .tree-foliage { animation: tree-sway 4.8s ease-in-out infinite; }
@keyframes tree-sway {
  0%,100% { transform: rotate(-3deg) scale(1); }
  50%     { transform: rotate(3deg)  scale(1.03); }
}

/* 5 — Rocket: tilts + thrusts; flame flickers */
.icon-rocket .rocket-body  { animation: rocket-tilt 2.6s ease-in-out infinite; }
.icon-rocket .rocket-flame { animation: rocket-flame 0.18s ease-in-out infinite alternate; }
@keyframes rocket-tilt {
  0%,100% { transform: translateY(0)    rotate(-2deg); }
  50%     { transform: translateY(-2px) rotate(2deg); }
}
@keyframes rocket-flame {
  0%   { transform: scaleY(1) scaleX(1);     opacity: 0.85; }
  100% { transform: scaleY(1.25) scaleX(0.85); opacity: 1; }
}

/* 6 — Cube/package: slow 3D rotation */
.icon-cube .cube-body { animation: cube-spin 6s ease-in-out infinite; }
@keyframes cube-spin {
  0%,100% { transform: rotate(-6deg) scale(1); }
  50%     { transform: rotate(6deg)  scale(1.04); }
}

/* The station card itself breathes a tiny bit, so the whole composition feels alive */
.journey-station {
  animation: station-breathe 6s ease-in-out infinite;
}
.journey-station.j2 { animation-delay: -1s; }
.journey-station.j3 { animation-delay: -2s; }
.journey-station.j4 { animation-delay: -3s; }
.journey-station.j5 { animation-delay: -4s; }
.journey-station.j6 { animation-delay: -5s; }
@keyframes station-breathe {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.04), 0 12px 28px -10px rgba(0,0,0,0.12); }
  50%     { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(0,0,0,0.04), 0 18px 36px -12px rgba(0,0,0,0.16); }
}

/* Hover: nudge forward, accelerate the bob */
.journey-station:hover svg { animation-duration: 1.6s; }
.journey-station:hover { transform: translateY(-4px) scale(1.04); transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1); }

@media (prefers-reduced-motion: reduce) {
  .journey-station svg,
  .icon-bulb .bulb-glass, .icon-bulb .bulb-halo,
  .icon-crane .crane-jib, .icon-crane .crane-hook,
  .icon-stack .stack-l1, .icon-stack .stack-l2, .icon-stack .stack-l3,
  .icon-tree .tree-foliage,
  .icon-rocket .rocket-body, .icon-rocket .rocket-flame,
  .icon-cube .cube-body,
  .journey-station { animation: none !important; }
}
.journey-station-label {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  font-size: 12px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink-mute);
  white-space: nowrap;
}
.journey-station-num {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0,102,204,0.18);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  color: var(--ink-mute);
  font-feature-settings: "tnum";
}

/* Pulse-on-arrival: each station gets a delayed glow that matches
   when the traveler dot passes through it. 18s loop, 6 stations. */
.journey-station::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,122,255,0.5), transparent 70%);
  opacity: 0;
  animation: station-pulse 18s ease-in-out infinite;
}
.journey-station.j1::before { animation-delay: 0s; }
.journey-station.j2::before { animation-delay: 3s; }
.journey-station.j3::before { animation-delay: 6s; }
.journey-station.j4::before { animation-delay: 9s; }
.journey-station.j5::before { animation-delay: 12s; }
.journey-station.j6::before { animation-delay: 15s; }
@keyframes station-pulse {
  0%   { opacity: 0; transform: scale(0.9); }
  2%   { opacity: 1; transform: scale(1.15); }
  10%  { opacity: 0.6; transform: scale(1.05); }
  100% { opacity: 0.6; transform: scale(1.05); }
}

/* Lit-state: persistent color overlay after the traveler arrives */
.journey-station .station-lit {
  position: absolute; inset: 0; border-radius: 50%;
  opacity: 0;
  animation: station-light 18s linear infinite;
}
.journey-station.j1 .station-lit { background: radial-gradient(circle, rgba(255,210,90,0.35), transparent 70%); animation-delay: 0s; }
.journey-station.j2 .station-lit { background: radial-gradient(circle, rgba(140,90,220,0.35), transparent 70%); animation-delay: 3s; }
.journey-station.j3 .station-lit { background: radial-gradient(circle, rgba(0,122,255,0.4),  transparent 70%); animation-delay: 6s; }
.journey-station.j4 .station-lit { background: radial-gradient(circle, rgba(255,90,90,0.35), transparent 70%); animation-delay: 9s; }
.journey-station.j5 .station-lit { background: radial-gradient(circle, rgba(0,180,160,0.4),  transparent 70%); animation-delay: 12s; }
.journey-station.j6 .station-lit { background: radial-gradient(circle, rgba(255,140,80,0.4), transparent 70%); animation-delay: 15s; }
@keyframes station-light {
  0%, 1%   { opacity: 0; }
  3%       { opacity: 1; }
  100%     { opacity: 1; }
}

@media (max-width: 900px) {
  .fikra-journey { height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-traveler, .journey-path-fill, .journey-station::before { animation: none !important; }
  .journey-station .station-lit { opacity: 1 !important; animation: none !important; }
}

/* Legacy morphing styles — kept for completeness, unused on home */
.fikra-stage {
  position: relative;
  width: clamp(280px, 38vw, 460px);
  height: clamp(280px, 38vw, 460px);
  margin: 0 auto;
}
.fikra-halo {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(255,210,90,0.55), rgba(255,180,80,0.18) 35%, transparent 65%);
  filter: blur(8px);
  animation: halo-shift 12s ease-in-out infinite, halo-pulse 3s ease-in-out infinite;
}
@keyframes halo-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}
@keyframes halo-shift {
  0%,16%   { background: radial-gradient(circle at 50% 50%, rgba(255,210,90,0.6),  rgba(255,180,80,0.18) 35%, transparent 65%); }
  20%,36%  { background: radial-gradient(circle at 50% 50%, rgba(255,150,100,0.5), rgba(255,120,80,0.16) 35%, transparent 65%); }
  40%,56%  { background: radial-gradient(circle at 50% 50%, rgba(0,130,255,0.55),  rgba(80,100,255,0.16) 35%, transparent 65%); }
  60%,76%  { background: radial-gradient(circle at 50% 50%, rgba(255,90,90,0.55),  rgba(255,150,80,0.16) 35%, transparent 65%); }
  80%,96%  { background: radial-gradient(circle at 50% 50%, rgba(80,200,140,0.55), rgba(120,220,150,0.16) 35%, transparent 65%); }
}

.fikra-stage svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  filter: drop-shadow(0 24px 32px rgba(0,0,0,0.12));
}

.fikra-shape {
  opacity: 0;
  transform-origin: 50% 60%;
  animation: shape-cycle 12s ease-in-out infinite;
}
.fikra-shape.s1 { animation-delay: 0s; }
.fikra-shape.s2 { animation-delay: -9.6s; }   /* runs in slot 2 */
.fikra-shape.s3 { animation-delay: -7.2s; }   /* slot 3 */
.fikra-shape.s4 { animation-delay: -4.8s; }   /* slot 4 */
.fikra-shape.s5 { animation-delay: -2.4s; }   /* slot 5 */

@keyframes shape-cycle {
  0%   { opacity: 0; transform: scale(0.85) rotate(-4deg); }
  4%   { opacity: 1; transform: scale(1) rotate(0); }
  16%  { opacity: 1; transform: scale(1) rotate(0); }
  20%  { opacity: 0; transform: scale(1.08) rotate(4deg); }
  100% { opacity: 0; transform: scale(0.85) rotate(-4deg); }
}

/* Persistent floating sparks — recolor with each shape */
.fikra-spark {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,210,90,0.9) 40%, transparent 70%);
  filter: blur(0.5px);
  animation: spark-float 5s ease-in-out infinite, spark-color 12s linear infinite;
}
.fikra-spark:nth-child(1) { top: 8%;  left: 22%; animation-delay: 0s,    0s; width: 8px; height: 8px; }
.fikra-spark:nth-child(2) { top: 18%; right: 14%; animation-delay: -1.4s, 0s; width: 12px; height: 12px; }
.fikra-spark:nth-child(3) { top: 40%; right: 6%;  animation-delay: -2.6s, 0s; width: 6px; height: 6px; }
.fikra-spark:nth-child(4) { bottom: 22%; left: 8%; animation-delay: -3.4s, 0s; width: 10px; height: 10px; }
.fikra-spark:nth-child(5) { bottom: 6%; right: 30%; animation-delay: -4s,  0s; width: 7px; height: 7px; }
.fikra-spark:nth-child(6) { top: 56%; left: 4%;   animation-delay: -2s,   0s; width: 9px; height: 9px; }

@keyframes spark-float {
  0%,100% { transform: translate(0,0) scale(1);   opacity: 0.4; }
  50%     { transform: translate(14px,-22px) scale(1.2); opacity: 1; }
}
@keyframes spark-color {
  0%,16%  { background: radial-gradient(circle, #fff, rgba(255,210,90,0.9) 40%,  transparent 70%); }
  20%,36% { background: radial-gradient(circle, #fff, rgba(255,170,90,0.9) 40%,  transparent 70%); }
  40%,56% { background: radial-gradient(circle, #fff, rgba(120,170,255,0.9) 40%, transparent 70%); }
  60%,76% { background: radial-gradient(circle, #fff, rgba(255,150,120,0.9) 40%, transparent 70%); }
  80%,96% { background: radial-gradient(circle, #fff, rgba(140,220,170,0.9) 40%, transparent 70%); }
}

/* Stage caption — labels what the shape currently is */
.fikra-caption {
  position: absolute; left: 50%; bottom: -40px;
  transform: translateX(-50%);
  font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink-mute);
  white-space: nowrap;
}
.fikra-caption span {
  display: inline-block;
  opacity: 0;
  animation: caption-cycle 12s ease-in-out infinite;
  position: absolute; left: 0; top: 0; transform: translateX(-50%);
}
.fikra-caption span.c1 { animation-delay: 0s; }
.fikra-caption span.c2 { animation-delay: -9.6s; }
.fikra-caption span.c3 { animation-delay: -7.2s; }
.fikra-caption span.c4 { animation-delay: -4.8s; }
.fikra-caption span.c5 { animation-delay: -2.4s; }
@keyframes caption-cycle {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
  4%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  16%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  20%  { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(6px); }
}

/* Floating glass shard (tile decoration) */
.shard {
  position: absolute;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.15));
  border: 1px solid rgba(255,255,255,0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 40px -12px rgba(0,102,204,0.25);
  animation: shard-float 7s ease-in-out infinite;
}
@keyframes shard-float {
  0%,100% { transform: translateY(0) rotate(-6deg); }
  50%     { transform: translateY(-14px) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-blobs span,
  .orb, .orb::before, .orb-ring, .orb-ring-2, .orb-particle, .shard {
    animation: none !important;
  }
}
main, .site-header, .site-footer { position: relative; z-index: 1; }
img, svg { display: block; max-width: 100%; }

/* Type families */
.f-mono   { font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.f-arabic { font-family: 'Noto Naskh Arabic', 'Amiri', serif; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.005em; }

/* Apple-style display: large, semi-bold, very tight tracking   slightly smaller */
.display-1 {
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.display-2 {
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 600;
}
.display-3 {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  font-weight: 600;
}
.display-4 {
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.22;
  letter-spacing: -0.012em;
  font-weight: 600;
}

/* Eyebrow */
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--accent);
}
.eyebrow-mono {
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
}

/* Body */
.body-l { font-size: 18px; line-height: 1.45; color: var(--ink-2); font-weight: 400; }
.body-m { font-size: 15px; line-height: 1.5; color: var(--ink-2); font-weight: 400; }
.body-s { font-size: 13px; line-height: 1.45; color: var(--ink-mute); }

.lede {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 60ch;
}

/* Container */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); }

/* Section */
.section { padding: 100px 0; }
.section-tight { padding: 72px 0; }
.section-band { background: var(--bg-2); }
.section-band-soft { background: var(--bg-3); }

/* Liquid-glass primary   tinted glass pill */
.cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(0,122,255,0.95), rgba(0,86,200,0.95));
  color: #fff;
  border-radius: 980px;
  border: 1px solid rgba(255,255,255,0.4);
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 8px 24px -8px rgba(0,102,204,0.4);
  transition: transform .2s, box-shadow .2s;
}
.cta:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 12px 28px -8px rgba(0,102,204,0.5);
}
.cta .arr { font-size: 13px; }

/* Liquid-glass ghost   frosted clear pill */
.cta-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--accent);
  border-radius: 980px;
  border: 1px solid rgba(255,255,255,0.7);
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 4px 16px -6px rgba(0,0,0,0.08);
  transition: transform .2s, background .2s;
}
.cta-ghost:hover { transform: translateY(-1px); background: rgba(255,255,255,0.75); }

.link-arrow {
  color: var(--accent);
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none;
  transition: opacity .2s;
}
.link-arrow:hover { opacity: 0.75; }
.link-arrow:hover .arr { transform: translateX(2px); }
.link-arrow .arr { transition: transform .2s; }

a { color: var(--accent); text-decoration: none; }
a.link { color: var(--accent); }
a.link:hover { text-decoration: underline; }

/* HEADER   Liquid-glass floating bar */
.site-header {
  position: sticky; top: 12px; z-index: 50;
  margin: 12px auto 0;
  max-width: 920px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.05),
    0 12px 32px -10px rgba(0,0,0,0.12);
}
.site-header-inner {
  height: 100%;
  padding: 0 22px;
  display: flex; align-items: center; gap: 0;
}
.brand {
  font-size: 17px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink);
  margin-right: 28px;
}
.brand-arabic { color: var(--ink-faint); margin-left: 6px; font-size: 13px; }
.nav { display: flex; flex: 1; justify-content: center; gap: 0; }
.nav-toggle { display: none; }
.nav a {
  padding: 0 11px;
  font-size: 12px; font-weight: 400; color: var(--ink-2);
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; height: 44px;
  transition: color .2s;
}
.nav a:hover { color: var(--ink); }
.nav a.is-current { color: var(--ink); font-weight: 500; }

/* HERO   Apple product page */
.hero {
  padding: 80px 0 100px;
  text-align: center;
}
.hero-eyebrow { color: var(--accent); font-size: 17px; font-weight: 600; letter-spacing: -0.012em; margin-bottom: 4px; }
.hero h1 {
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 600;
  max-width: 16ch; margin: 0 auto 20px;
}
.hero-tagline {
  font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  font-weight: 500;
  max-width: 36ch; margin: 0 auto 28px;
}
.hero-actions {
  display: flex; gap: 20px; justify-content: center; align-items: center;
  font-size: 14px;
}
.hero-actions a { color: var(--accent); }
.hero-actions a:hover { text-decoration: underline; }

/* Page hero (inner pages)   left aligned variant */
.page-hero { padding: 96px 0 72px; max-width: 1024px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); text-align: center; }
.page-hero .eyebrow { margin-bottom: 8px; display: block; }
.page-hero h1 { margin-bottom: 24px; max-width: 18ch; margin-left: auto; margin-right: auto; }
.page-hero .lede { margin: 0 auto; }

/* Tile (Apple's 2-up product grid)   now liquid glass */
.tile {
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 28px;
  padding: 48px 40px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 18px 48px -16px rgba(0,0,0,0.12);
}
.tile-eyebrow { color: var(--accent); font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.tile h3 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 10px;
}
.tile-tag {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.25;
  color: var(--ink-2);
  margin: 0 0 24px;
  max-width: 30ch; margin-left: auto; margin-right: auto;
}
.tile-actions { display: flex; gap: 18px; justify-content: center; font-size: 14px; }

/* Tag */
.tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: 12px; font-weight: 500; letter-spacing: -0.005em;
  border-radius: 6px;
}
.tag-accent { background: rgba(0, 102, 204, 0.1); color: var(--accent); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(0,0,0,0.04);
  border-radius: 999px;
  font-size: 13px; color: var(--ink-2);
}
.pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.table th {
  font-size: 14px; font-weight: 500;
  color: var(--ink-mute);
  width: 240px;
}

/* FOOTER   Apple style */
.site-footer {
  background: var(--bg-2);
  font-size: 12px;
  color: var(--ink-mute);
  padding: 32px var(--gutter) 24px;
  border-top: 1px solid var(--line);
}
.site-footer-inner {
  max-width: 1024px; margin: 0 auto;
}
.footer-fineprint {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
  max-width: 80ch;
}
.footer-cols {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.footer-col h4 { font-size: 12px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: var(--ink-mute); font-size: 12px; }
.footer-col a:hover { text-decoration: underline; color: var(--ink-2); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; padding-top: 16px;
  flex-wrap: wrap;
}

/* Reveal animation */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Big "F." product hero mark */
.f-hero {
  font-size: clamp(280px, 40vw, 560px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-align: center;
}
.f-hero em { color: var(--accent); font-style: normal; }

/* Liquid-glass feature card   light */
.feature-card {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 24px;
  padding: 44px 32px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 12px 36px -14px rgba(0,0,0,0.1);
}

/* Liquid-glass dark feature card */
.feature-card-dark {
  background: rgba(20,20,22,0.78);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f5f5f7;
  border-radius: 28px;
  padding: 56px 40px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 24px 60px -20px rgba(0,0,0,0.4);
}
.feature-card-dark h3 { color: #fff; }
.feature-card-dark p { color: rgba(245,245,247,0.85); }

/* Glass tag/pill */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 999px;
  font-size: 12px; color: var(--ink-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}


/* ─── Responsive (tablet → phone) ──────────────────────────────────
   The page-level layouts above use inline style="grid-template-columns:..."
   on several sections, so we override them by class + descendant selector.
*/
@media (max-width: 1024px) {
  :root { --gutter: 18px; }
  .section { padding: 80px 0; }
  .page-hero { padding: 72px 0 56px; }
  .feature-card { padding: 32px 24px; }
  .feature-card-dark { padding: 48px 28px; }
  .tile { padding: 36px 28px 32px; }
  .container, .container-narrow { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 820px) {
  /* Header — collapse into a hamburger that toggles via :target on the body */
  .site-header { max-width: calc(100vw - 24px); margin: 10px 12px 0; height: auto; border-radius: 22px; padding: 0; }
  .site-header-inner { padding: 8px 14px; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
  .brand { margin-right: auto; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08);
    cursor: pointer; user-select: none;
    color: var(--ink);
  }
  .nav-toggle svg { width: 18px; height: 18px; }
  .nav {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease, padding .25s ease;
    border-top: 0;
  }
  .nav.is-open {
    max-height: 320px;
    padding: 6px 0 8px;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: 4px;
  }
  .nav a { padding: 10px 8px; height: auto; font-size: 14px; border-radius: 8px; }
  .nav a:hover { background: rgba(0,0,0,0.04); }

  /* Hero typography — already fluid via clamp(), but tighten paddings */
  .hero { padding: 56px 0 72px; }
  .hero-actions { flex-direction: column; gap: 12px; }

  /* Anything laid out as a 2-up or 3-up grid via inline styles → stack */
  main section [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
  main section [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
  main section [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  main section [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Big "F." mark gets unwieldy on narrow screens */
  .f-hero { font-size: clamp(140px, 50vw, 280px); }
  .f-arabic { font-size: clamp(34px, 9vw, 56px) !important; }

  /* Apply form: stack the name/email row */
  .form-row + .form-row { margin-bottom: 16px; }
  main section [style*="grid-template-columns: 1fr 1fr"][style*="gap: 16px"] { grid-template-columns: 1fr !important; }

  /* Footer columns */
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Journey diagram on phone — render as a vertical timeline */
  .fikra-journey { height: auto; min-height: 0; padding: 20px 0; }
  .fikra-journey-svg { display: none; }
  .fikra-journey { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 12px 18px; }
  .journey-station {
    position: static !important;
    left: auto !important; top: auto !important;
    margin: 0 auto !important;
    width: 72px; height: 72px;
    animation: none;
  }
  .journey-station svg { width: 40px; height: 40px; }
  .journey-station-label { position: static; transform: none; margin-top: 10px; text-align: center; display: block; }
  .journey-station-num { font-size: 9px; }
  /* container row + label */
  .journey-station::after { content: ''; }
}

@media (max-width: 560px) {
  .section { padding: 64px 0; }
  .page-hero { padding: 56px 0 40px; }
  .feature-card { padding: 28px 20px; }
  .feature-card-dark { padding: 36px 22px; }
  .tile { padding: 28px 22px 24px; border-radius: 22px; }
  .display-1 { font-size: clamp(34px, 9vw, 48px) !important; }
  .display-2 { font-size: clamp(28px, 7vw, 38px) !important; }
  .hero { padding: 40px 0 56px; }
  .hero h1 { font-size: clamp(34px, 9vw, 48px); }
  .hero-tagline { padding: 0 8px; font-size: 16px; }
  .f-hero { font-size: 22vw; line-height: 0.9; }
  .f-arabic { font-size: 28px !important; }

  /* Memo list: collapse the 80px gutter */
  main ol li[style*="grid-template-columns: 80px"] { grid-template-columns: 1fr !important; gap: 4px !important; }

  /* CTA pair */
  main section [style*="display: flex"][style*="gap: 16px"][style*="justify-content: center"] { flex-direction: column; align-items: stretch; }
  main section [style*="display: flex"][style*="gap: 16px"][style*="justify-content: center"] .cta,
  main section [style*="display: flex"][style*="gap: 16px"][style*="justify-content: center"] .cta-ghost { width: 100%; justify-content: center; }

  /* Footer: single column on small phones */
  .footer-cols { grid-template-columns: 1fr; }

  /* Big stats inside cards shrink */
  main section [style*="font-size: 96px"] { font-size: 64px !important; }
  main section [style*="font-size: 88px"] { font-size: 56px !important; }
  main section [style*="font-size: 64px"] { font-size: 48px !important; }
}

@media (max-width: 380px) {
  .nav a { padding: 0 6px; font-size: 12px; }
  .brand-arabic { display: none; }
}