/* ===== Fonts (self-hosted, no CDN) ===== */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('assets/fonts/inter-800.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/jbmono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/jbmono-500.woff2') format('woff2'); }

/* ===== Base ===== */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:#FFFFFF; color:#0A0A0A; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; }
:focus-visible { outline:3px solid #FF6B35; outline-offset:3px; border-radius:4px; }
.wrap { max-width:1180px; margin:0 auto; padding:0 40px; }
.mono { font-family:'JetBrains Mono', ui-monospace, monospace; }
.eyebrow { font-family:'JetBrains Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:#737373; }
[data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.prow[data-reveal]:nth-child(2){transition-delay:.06s}
.prow[data-reveal]:nth-child(3){transition-delay:.12s}
.prow[data-reveal]:nth-child(4){transition-delay:.18s}

/* ===== Nav ===== */
.nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid #E5E5E5; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:16px; padding-bottom:16px; }
.nav-logo img { height:44px; width:auto; }

/* Hamburger (mobile + desktop) */
.nav-toggle { position:relative; width:46px; height:46px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:transparent; border:1px solid #E5E5E5; border-radius:11px; cursor:pointer; transition:border-color .2s ease, background .2s ease; }
.nav-toggle:hover { border-color:#0A0A0A; }
.nav-toggle-bar { display:block; width:20px; height:2px; background:#0A0A0A; border-radius:2px; transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease; }
.nav-open .nav-toggle-bar:nth-child(1) { transform:translateY(4px) rotate(45deg); }
.nav-open .nav-toggle-bar:nth-child(2) { transform:translateY(-4px) rotate(-45deg); }

/* Overlay menu */
.nav-overlay { position:fixed; inset:0; z-index:60; background:rgba(10,10,10,0.96); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
.nav-overlay.show { opacity:1; visibility:visible; }
.nav-menu-inner { max-width:1180px; margin:0 auto; padding:120px 32px 48px; display:flex; flex-direction:column; gap:4px; }
.nav-menu-link { display:flex; align-items:baseline; gap:16px; color:#fff; font-weight:800; letter-spacing:-0.03em; font-size:clamp(30px,7vw,54px); line-height:1.18; padding:8px 0; border-bottom:1px solid #1f1f1f; opacity:0; transform:translateY(14px); transition:color .2s ease, opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.nav-overlay.show .nav-menu-link { opacity:1; transform:none; }
.nav-menu-link:hover { color:#FF6B35; }
.nav-menu-idx { font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:500; letter-spacing:0.04em; color:#737373; transform:translateY(-0.35em); }
.nav-overlay.show .nav-menu-link:nth-child(1){transition-delay:.06s}
.nav-overlay.show .nav-menu-link:nth-child(2){transition-delay:.12s}
.nav-overlay.show .nav-menu-link:nth-child(3){transition-delay:.18s}
.nav-overlay.show .nav-menu-link:nth-child(4){transition-delay:.24s}
.nav-overlay.show .nav-menu-link:nth-child(5){transition-delay:.30s}
.nav-menu-foot { max-width:1180px; margin:0 auto; padding:0 32px; display:flex; gap:20px; flex-wrap:wrap; }
.nav-menu-foot a { color:#8a8a8a; font-size:14px; transition:color .2s ease; }
.nav-menu-foot a:hover { color:#fff; }
body.nav-open { overflow:hidden; }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:16px; border-radius:11px; white-space:nowrap; cursor:pointer; font-family:inherit; transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease; }
.btn-primary { background:#FF6B35; color:#0A0A0A; border:none; padding:15px 24px; }
.btn-primary:hover { background:#EA5C28; transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,107,53,0.38); }
.btn-outline { background:#fff; color:#0A0A0A; border:1px solid #E5E5E5; padding:15px 24px; }
.btn-outline:hover { border-color:#0A0A0A; transform:translateY(-2px); box-shadow:0 8px 20px rgba(10,10,10,0.08); }
.btn-dark { background:#0A0A0A; color:#fff; border:1px solid #0A0A0A; padding:14px 24px; }
.btn-dark:hover { background:#262626; transform:translateY(-2px); box-shadow:0 10px 24px rgba(10,10,10,0.18); }

/* ===== Sections ===== */
.section { padding-top:clamp(56px,8vw,110px); padding-bottom:clamp(56px,8vw,110px); }
.alt { background:#FAFAFA; border-top:1px solid #E5E5E5; }
.line { border-top:1px solid #E5E5E5; }

/* ===== Hero ===== */
.hero { padding-top:clamp(56px,9vw,120px); padding-bottom:clamp(48px,7vw,96px); }
.hero-row { display:flex; gap:56px; align-items:center; flex-wrap:wrap; }
.hero-text { flex:1; min-width:320px; }
.badge { display:inline-flex; align-items:center; gap:9px; padding:6px 12px 6px 8px; border:1px solid #E5E5E5; border-radius:999px; margin-bottom:28px; }
.badge .dot { width:7px; height:7px; border-radius:50%; background:#FF6B35; }
.badge span.mono { font-size:12px; letter-spacing:0.04em; color:#525252; white-space:nowrap; }
.hero-title { font-size:clamp(40px,6.4vw,80px); font-weight:800; letter-spacing:-0.035em; line-height:1.02; margin:0 0 22px; text-wrap:balance; }
.hero-title-mark { display:none; }
.hero-sub { font-size:clamp(17px,2vw,21px); line-height:1.5; color:#404040; max-width:560px; margin:0 0 36px; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; }
.hero-icon { flex:none; display:flex; justify-content:center; align-items:center; padding:8px; }
.hero-icon img { width:clamp(150px,20vw,264px); height:auto; filter:drop-shadow(0 24px 60px rgba(255,107,53,0.22)); animation:floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

/* ===== Approach ===== */
.two { display:flex; gap:56px; flex-wrap:wrap; }
.two-label { flex:none; width:220px; }
.approach-body { flex:1; min-width:320px; max-width:720px; }
.lead { font-size:clamp(22px,3vw,34px); font-weight:600; letter-spacing:-0.02em; line-height:1.32; margin:0 0 28px; text-wrap:pretty; }
.accent { color:#FF6B35; }
.approach-sub { font-size:clamp(16px,1.8vw,19px); line-height:1.6; color:#525252; margin:0; max-width:600px; }

/* ===== Building (dark) ===== */
.dark { background:#0A0A0A; color:#fff; }
.build-outer { background:#fff; padding-top:clamp(48px,6vw,96px); padding-bottom:clamp(48px,6vw,96px); }
.build-stage { background:#0A0A0A; color:#fff; border-radius:32px; overflow:hidden; transform:scale(0.88); filter:blur(6px); transform-origin:center center; will-change:transform, filter; }
.build-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(36px,5vw,64px); }
.build-title { font-size:clamp(30px,4.6vw,56px); font-weight:800; letter-spacing:-0.03em; margin:0; line-height:1; }
.plist { border-top:1px solid #262626; }
.prow { display:flex; align-items:center; gap:clamp(16px,3vw,32px); padding:clamp(22px,3.4vw,38px) 0; border-bottom:1px solid #262626; transition:padding-left .25s ease, background .25s ease; }
.prow:hover { padding-left:8px; background:#111; }
.prow img { width:clamp(44px,6vw,64px); height:auto; flex:none; }
.pinfo { flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pname { font-weight:800; letter-spacing:-0.035em; font-size:clamp(28px,5vw,52px); line-height:1; }
.pname .muted { color:#8a8a8a; }
.pill { flex:none; font-family:'JetBrains Mono', monospace; font-size:clamp(11px,1.4vw,13px); font-weight:500; letter-spacing:0.02em; padding:7px 14px; border-radius:999px; white-space:nowrap; }
.pill-soon { background:#FF6B35; color:#0A0A0A; }
.pill-muted { background:#171717; color:#8a8a8a; border:1px solid #262626; }
.build-note { font-size:15px; color:#8a8a8a; margin:28px 0 0; max-width:560px; line-height:1.55; }

/* ===== Founder ===== */
.founder-row { display:flex; gap:clamp(36px,5vw,72px); flex-wrap:wrap; align-items:flex-start; }
.founder-photo { flex:none; width:clamp(260px,32vw,380px); max-width:100%; }
.founder-card { position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden; background:#171717; border:1px solid #262626; }
.founder-card .mark { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.founder-card .mark img { width:52%; height:auto; }
.founder-card .cap { position:absolute; left:20px; bottom:20px; right:20px; }
.founder-card .cap .nm { font-weight:800; font-size:22px; letter-spacing:-0.02em; color:#fff; }
.founder-card .cap .loc { font-family:'JetBrains Mono', monospace; font-size:12px; color:#8a8a8a; margin-top:4px; }
.founder-body { flex:1; min-width:320px; max-width:640px; }
.founder-name { font-size:clamp(28px,3.6vw,44px); font-weight:800; letter-spacing:-0.03em; margin:14px 0 4px; line-height:1.05; }
.founder-role { font-size:16px; color:#737373; font-weight:500; margin-bottom:28px; }
.founder-p { font-size:clamp(16px,1.8vw,19px); line-height:1.6; color:#333; margin:0 0 18px; }
.founder-p.last { margin:0 0 30px; }

/* ===== Services (quiet) ===== */
.svc { padding-top:clamp(48px,6vw,84px); padding-bottom:clamp(48px,6vw,84px); }
.svc-row { display:flex; gap:40px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.svc-body { flex:1; min-width:300px; max-width:640px; }
.svc-p { font-size:clamp(16px,1.8vw,19px); line-height:1.6; color:#404040; margin:14px 0 18px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { font-family:'JetBrains Mono', monospace; font-size:12.5px; color:#525252; background:#fff; border:1px solid #E5E5E5; padding:6px 12px; border-radius:8px; white-space:nowrap; }

/* ===== Contact ===== */
.contact-row { display:flex; gap:40px; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; margin-top:16px; }
.email { display:block; font-size:clamp(30px,5vw,60px); font-weight:800; letter-spacing:-0.03em; color:#0A0A0A; line-height:1.05; transition:color .2s ease; }
.email:hover { color:#FF6B35; }
.contact-loc { font-size:16px; color:#737373; margin-top:14px; }
.contact-cta { display:flex; gap:14px; flex-wrap:wrap; }
.btn-primary.lg, .btn-outline.lg { padding:15px 26px; }

/* ===== Footer ===== */
.footer { background:#0A0A0A; color:#fff; }
.footer-inner { display:flex; gap:24px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:44px 28px; max-width:1180px; margin:0 auto; }
.footer-left { display:flex; align-items:center; gap:16px; }
.footer-left img { height:24px; width:auto; }
.footer-left span { font-size:14px; color:#8a8a8a; }
.footer-copy { font-family:'JetBrains Mono', monospace; font-size:12.5px; color:#737373; }

/* ===== Card page (/yazan) ===== */
.theme-dark { background:#0A0A0A; color:#fff; }
.card-stage { min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; }
.card { width:100%; max-width:440px; }
.card-inner { background:#fff; color:#0A0A0A; border-radius:26px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.45); }
.card-band { background:#0A0A0A; padding:26px 28px; display:flex; align-items:center; justify-content:space-between; }
.card-band img { height:22px; width:auto; }
.card-band .mono { font-size:11px; letter-spacing:0.06em; color:#8a8a8a; }
.card-id { padding:32px 28px 8px; }
.card-id-row { display:flex; align-items:center; gap:18px; }
.card-ava { flex:none; width:76px; height:76px; border-radius:18px; background:#171717; border:1px solid #E5E5E5; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card-ava img { width:100%; height:100%; }
.card-name { font-size:26px; font-weight:800; letter-spacing:-0.02em; margin:0; line-height:1.1; }
.card-sub { font-size:14px; color:#525252; font-weight:600; margin-top:4px; }
.card-bio { font-size:15.5px; line-height:1.55; color:#404040; margin:22px 0 0; }
.card-actions { padding:22px 28px 8px; display:flex; flex-direction:column; gap:10px; }
.card-actions .btn { width:100%; padding:16px; font-size:16px; }
.card-actions .row2 { display:flex; gap:10px; }
.card-actions .row2 .btn { padding:15px; font-size:15px; }
.card-rows { padding:20px 28px 30px; }
.card-rows .inner { border-top:1px solid #E5E5E5; }
.card-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 0; border-bottom:1px solid #F0F0F0; transition:color .2s ease; }
.card-row:last-child { border-bottom:none; }
a.card-row:hover { color:#FF6B35; }
.card-row .k { font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:#737373; }
.card-row .v { font-size:14.5px; font-weight:600; text-align:right; }
.card-back { text-align:center; margin-top:20px; }
.card-back a { font-size:13px; color:#8a8a8a; transition:color .2s ease; }
.card-back a:hover { color:#fff; }

/* ===== Responsive ===== */
@media (max-width:768px) {
  .hero-row { gap:12px; }
}

@media (max-width:640px) {
  .wrap { padding:0 22px; }
  .section { padding-top:56px; padding-bottom:56px; }

  /* Nav */
  .nav-logo img { height:30px; }

  /* Hero — mark tied inline to the headline, one tight unit */
  .hero { padding-top:44px; padding-bottom:40px; }
  .hero-row { flex-direction:column; align-items:flex-start; gap:0; }
  .hero-icon { display:none; }
  .badge { margin-bottom:16px; }
  .hero-title { font-size:clamp(40px,12vw,56px); line-height:1.03; margin-bottom:20px; }
  .hero-title-mark { display:inline-block; width:0.82em; height:auto; vertical-align:-0.1em; margin-left:0.16em; filter:drop-shadow(0 8px 20px rgba(255,107,53,0.28)); }
  .hero-sub { font-size:17px; margin-bottom:28px; }
  .hero-cta { flex-direction:column; align-items:stretch; width:100%; gap:12px; }
  .hero-cta .btn { width:100%; }

  /* Approach */
  .two { flex-direction:column; gap:16px; }
  .two-label { width:100%; }
  .lead { font-size:24px; margin-bottom:20px; }
  .approach-sub { font-size:17px; }

  /* Building */
  .build-head { margin-bottom:30px; gap:6px; }
  .build-title { font-size:clamp(32px,9vw,44px); }
  .prow { gap:16px; padding:22px 0; }
  .prow:hover { padding-left:0; background:transparent; }
  .prow img { width:46px; }
  .pinfo { flex-direction:column; align-items:flex-start; gap:11px; }
  .pname { font-size:clamp(28px,8.5vw,40px); }

  /* Founder */
  .founder-row { gap:26px; }
  .founder-photo { width:100%; }
  .founder-p { font-size:17px; }
  .founder-body .btn { width:100%; }

  /* Services */
  .svc { padding-top:48px; padding-bottom:48px; }
  .svc-row { flex-direction:column; align-items:stretch; gap:22px; }
  .svc-p { font-size:17px; }
  .svc-row > .btn { width:100%; }

  /* Contact */
  .contact-row { flex-direction:column; align-items:stretch; gap:26px; }
  .email { font-size:clamp(32px,9vw,46px); word-break:break-word; }
  .contact-cta { width:100%; gap:12px; }
  .contact-cta .btn { flex:1; }

  /* Footer */
  .footer-inner { padding:32px 24px; flex-direction:column; align-items:flex-start; gap:16px; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; animation:none !important; }
  [data-reveal] { opacity:1 !important; transform:none !important; }
}