:root{
  --ink:#0B1420;
  --ink-2:#111D2E;
  --sand:#C9A24A;
  --sand-soft:#E4C877;
  --signal:#4FD1C5;
  --signal-dim:#2B6E68;
  --fog:#8B93A7;
  --paper:#F4EFE3;
  --paper-line:#DCD3BC;
  --ink-on-paper:#14213D;
  --line:rgba(255,255,255,0.08);
  --danger:#E4785A;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--ink);
  color:#EDEFF3;
  font-family:'IBM Plex Sans Arabic', sans-serif;
  line-height:1.75;
  overflow-x:hidden;
}

h1,h2,h3,.display{ font-family:'Cairo', sans-serif; font-weight:800; }
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.04em; }
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
@media(max-width:640px){ .wrap{padding:0 20px;} }

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,20,32,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.logo{ display:flex; flex-direction:column; line-height:1.15; }
.logo .word{ font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:19px; letter-spacing:0.06em; color:#fff; }
.logo .word span{color:var(--signal);}
.logo .tag{ font-size:11.5px; color:var(--fog); margin-top:2px; }
nav.links{display:flex;gap:36px;}
nav.links a{ font-size:15px; color:var(--fog); transition:color .2s; }
nav.links a:hover{color:#fff;}
.nav-cta{ background:var(--signal); color:#062421; padding:9px 20px; border-radius:999px; font-size:14px; font-weight:600; }
.burger{display:none;font-size:22px;color:#fff;background:none;border:none;}
@media(max-width:860px){ nav.links{display:none;} .burger{display:block;} }
.mobile-menu{ display:none; flex-direction:column; gap:2px; padding:8px 0 18px; border-top:1px solid var(--line); }
.mobile-menu.open{display:flex;}
.mobile-menu a{ padding:10px 0; color:var(--fog); font-size:15px; }

/* Hero */
.hero{ position:relative; padding:96px 0 60px; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 75% 0%, rgba(79,209,197,0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(201,162,74,0.08), transparent 60%);
  pointer-events:none;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--signal);
  border:1px solid var(--signal-dim); background:rgba(79,209,197,0.06);
  padding:7px 14px; border-radius:999px; margin-bottom:28px;
}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%; background:var(--signal);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(79,209,197,0.5);}
  70%{box-shadow:0 0 0 10px rgba(79,209,197,0);}
  100%{box-shadow:0 0 0 0 rgba(79,209,197,0);}
}

.hero h1{ font-size:clamp(38px, 6vw, 68px); line-height:1.2; max-width:820px; color:#fff; }
.hero h1 .accent{ color:var(--sand-soft); }
.hero p.sub{ max-width:620px; margin-top:26px; font-size:18px; color:var(--fog); }

.hero-ctas{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }
.btn-primary{
  display:inline-block; background:var(--sand); color:#241a05; padding:14px 32px;
  border:none; border-radius:10px; font-weight:700; font-size:16px;
  transition:transform .15s, background .2s;
}
.btn-primary:hover{background:var(--sand-soft); transform:translateY(-2px);}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.btn-secondary{
  display:inline-block; border:1px solid var(--line); background:transparent; color:#fff; padding:14px 26px;
  border-radius:10px; font-size:15.5px; transition:border-color .2s, background .2s;
}
.btn-secondary:hover{background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.25);}

.signal-box{
  margin-top:64px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  overflow:hidden;
}
svg#signalSvg{display:block;width:100%;height:auto;}
.signal-caption{
  display:flex; justify-content:space-between; padding:18px 22px 22px;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--fog);
}
.signal-caption b{color:#EDEFF3;font-weight:500;}
@media(prefers-reduced-motion: reduce){ .path-anim, .pulse-dot{animation:none !important;} }

/* Framework / Idea */
.framework{ background:var(--paper); color:var(--ink-on-paper); padding:100px 0; }
.framework .kicker{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:#8a6b1f; margin-bottom:18px; }
.framework h2{ font-size:clamp(28px, 4vw, 42px); max-width:700px; color:var(--ink-on-paper); margin-bottom:24px; }
.framework .lead{ max-width:640px; font-size:17.5px; color:#4A4536; }

.fw-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:56px; }
@media(max-width:900px){ .fw-grid{grid-template-columns:1fr;} }

.fw-card{ background:#fff; border:1px solid var(--paper-line); border-radius:14px; padding:28px; }
.fw-card .tag{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--signal-dim);
  background:rgba(79,209,197,0.10); display:inline-block; padding:4px 12px;
  border-radius:6px; margin-bottom:14px;
}
.fw-card h3{ font-size:19px; margin-bottom:10px; color:var(--ink-on-paper); }
.fw-card p{ font-size:15px; color:#5c5745; }

.fw-cta{
  margin-top:48px; padding:24px 28px; background:#fff;
  border:1px solid var(--paper-line); border-radius:14px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.fw-cta p{font-size:16px;color:var(--ink-on-paper);max-width:520px;}
.fw-cta a{
  background:var(--ink); color:#fff; padding:12px 24px; border-radius:10px;
  font-size:14.5px; font-weight:600; white-space:nowrap;
}

/* Lenses / Applications */
.lenses{ padding:110px 0; }
.lenses .head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:56px; }
.lenses .kicker{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--signal); margin-bottom:16px; }
.lenses h2{ font-size:clamp(28px,4vw,40px); color:#fff; max-width:560px; }
.lenses .head p{ color:var(--fog); max-width:340px; font-size:15px; }

.lens-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
@media(max-width:960px){ .lens-grid{grid-template-columns:1fr;} }

.lens-card{
  border:1px solid var(--line); border-radius:16px; padding:30px 26px 26px;
  background:linear-gradient(160deg, rgba(255,255,255,0.03), transparent 60%);
  transition:border-color .25s;
}
.lens-card:hover{ border-color:rgba(255,255,255,0.22); }
.lens-icon{margin-bottom:22px;}
.lens-card h3{ font-size:20px; color:#fff; line-height:1.55; margin-bottom:12px; }
.lens-card p{ font-size:14.5px; color:var(--fog); margin-bottom:22px; }
.lens-more{ font-size:14px; color:var(--signal); display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0; }
.lens-more .arrow{ transition:transform .2s; display:inline-block; }
.lens-card.open .lens-more .arrow{ transform:rotate(90deg); }

.lens-detail{
  display:none; margin-top:24px; padding-top:24px; border-top:1px solid var(--line);
  font-size:14.5px; color:#c9cdda;
}
.lens-card.open .lens-detail{ display:block; }
.lens-detail p{ margin-bottom:16px; color:#c9cdda; }
.lens-detail .detail-label{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--sand-soft); margin-bottom:8px; display:block; }
.lens-detail ol{ margin:0 0 16px; padding-inline-start:20px; }
.lens-detail li{ margin-bottom:10px; }
.lens-detail .closing{ font-style:normal; color:#fff; border-inline-start:2px solid var(--signal); padding-inline-start:14px; }

/* Tool */
.tool-preview{ padding:0 0 110px; }
.tool-card{
  border:1px solid var(--line); border-radius:20px; padding:48px;
  background:linear-gradient(135deg, rgba(79,209,197,0.06), rgba(201,162,74,0.04));
}
.tool-card.centered{text-align:center;}
.tool-card .kicker{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--signal); margin-bottom:16px; }
.tool-card h2{ font-size:clamp(26px,3.6vw,36px); color:#fff; margin-bottom:14px; }
.tool-card p{ color:var(--fog); font-size:16px; max-width:520px; margin:0 auto 30px; }
.tool-meta{ display:flex; justify-content:center; gap:28px; margin-top:32px; flex-wrap:wrap; }
.tool-meta div{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--fog); }
.tool-meta b{ display:block; font-size:20px; color:#fff; font-family:'Cairo',sans-serif; margin-bottom:4px; }

.tool-body{ max-width:640px; margin:0 auto; text-align:right; }
.tool-progress{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--fog); }
.tool-progress-bar{ flex:1; height:4px; background:rgba(255,255,255,0.08); border-radius:99px; margin:0 16px; overflow:hidden; }
.tool-progress-fill{ height:100%; background:var(--signal); width:0%; transition:width .3s ease; }

.q-text{ font-size:19px; color:#fff; margin-bottom:24px; font-weight:600; line-height:1.6; }
.choices{ display:flex; flex-direction:column; gap:12px; }
.choice-btn{
  text-align:right; background:rgba(255,255,255,0.03); border:1px solid var(--line);
  color:#EDEFF3; padding:16px 18px; border-radius:12px; font-size:15px; line-height:1.6;
  transition:border-color .15s, background .15s;
}
.choice-btn:hover{ border-color:var(--signal-dim); background:rgba(79,209,197,0.06); }
.choice-btn.selected{ border-color:var(--signal); background:rgba(79,209,197,0.12); }

.result-card{ text-align:right; }
.result-title{ font-size:26px; color:#fff; margin-bottom:8px; text-align:center; }
.result-sub{ text-align:center; color:var(--fog); margin-bottom:32px; }
.result-row{
  display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);
}
.result-row:last-of-type{border-bottom:none;}
.result-badge{
  flex-shrink:0; font-family:'IBM Plex Mono', monospace; font-size:11px; padding:5px 12px;
  border-radius:999px; white-space:nowrap; margin-top:2px;
}
.result-badge.strong{ color:#062421; background:var(--signal); }
.result-badge.medium{ color:#241a05; background:var(--sand-soft); }
.result-badge.weak{ color:#fff; background:var(--danger); }
.result-row h4{ color:#fff; font-size:15.5px; margin-bottom:6px; }
.result-row p{ color:var(--fog); font-size:14.5px; }

.contradiction-note{
  margin-top:18px; padding:14px 16px; border-radius:10px; border:1px solid rgba(228,120,90,0.35);
  background:rgba(228,120,90,0.08); color:#f0b7a6; font-size:13.5px;
}

.recommendation{
  margin-top:28px; padding:22px 24px; border-radius:14px; background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
}
.recommendation .detail-label{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--sand-soft); margin-bottom:10px; display:block; }
.recommendation p{ color:#EDEFF3; font-size:15px; }

.email-optin{ margin-top:36px; padding-top:32px; border-top:1px solid var(--line); }
.email-optin h4{ color:#fff; font-size:17px; margin-bottom:8px; }
.email-optin p.hint{ color:var(--fog); font-size:14px; margin-bottom:18px; }
.email-form{ display:flex; gap:10px; flex-wrap:wrap; }
.email-form input[type="email"]{
  flex:1; min-width:220px; background:rgba(255,255,255,0.04); border:1px solid var(--line);
  color:#fff; padding:13px 16px; border-radius:10px; font-size:14.5px; font-family:inherit;
}
.email-form input::placeholder{color:var(--fog);}
.email-note{ font-size:12.5px; color:var(--fog); margin-top:12px; }
.form-status{ margin-top:14px; font-size:14px; }
.form-status.ok{color:var(--signal);}
.form-status.err{color:var(--danger);}

.tool-restart{ text-align:center; margin-top:32px; }
.tool-restart button{ background:none; border:1px solid var(--line); color:var(--fog); padding:10px 20px; border-radius:999px; font-size:13.5px; }
.tool-restart button:hover{ color:#fff; border-color:rgba(255,255,255,0.25); }

.tool-step{display:none;}
.tool-step.active{display:block;}

/* Contribute */
.contribute{ padding:0 0 110px; }
.contribute .head{ margin-bottom:48px; max-width:640px; }
.contribute .kicker{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--sand-soft); margin-bottom:16px; }
.contribute h2{ font-size:clamp(26px,3.6vw,36px); color:#fff; margin-bottom:14px; }
.contribute .head p{ color:var(--fog); font-size:16px; }

.criteria-toggle{
  display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid var(--line);
  color:var(--fog); padding:11px 18px; border-radius:10px; font-size:14px; margin-bottom:28px;
}
.criteria-toggle:hover{ color:#fff; border-color:rgba(255,255,255,0.25); }
.criteria-grid{ display:none; grid-template-columns:repeat(2, 1fr); gap:18px; margin-bottom:40px; }
.criteria-grid.open{display:grid;}
@media(max-width:800px){ .criteria-grid{grid-template-columns:1fr;} }
.criteria-card{ border:1px solid var(--line); border-radius:14px; padding:22px; background:rgba(255,255,255,0.02); }
.criteria-card h4{ color:#fff; font-size:15.5px; margin-bottom:10px; }
.criteria-card .def{ color:var(--fog); font-size:13.5px; margin-bottom:12px; }
.criteria-card .ex{ font-size:13px; padding:10px 12px; border-radius:8px; margin-bottom:8px; }
.criteria-card .ex.good{ background:rgba(79,209,197,0.08); color:#a9e8e1; border-inline-start:2px solid var(--signal); }
.criteria-card .ex.bad{ background:rgba(228,120,90,0.08); color:#f0b7a6; border-inline-start:2px solid var(--danger); }

.contribute-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:start; }
@media(max-width:960px){ .contribute-grid{grid-template-columns:1fr;} }

.signal-form{ border:1px solid var(--line); border-radius:16px; padding:32px; background:rgba(255,255,255,0.02); }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:13.5px; color:#c9cdda; margin-bottom:8px; }
.field .opt{ color:var(--fog); font-size:12px; }
.field input[type="text"], .field input[type="url"], .field textarea, .field select{
  width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--line);
  color:#fff; padding:12px 14px; border-radius:10px; font-size:14.5px; font-family:inherit;
}
.field textarea{resize:vertical;min-height:80px;}
.field input::placeholder, .field textarea::placeholder{color:var(--fog);}
.field-hint{ font-size:12px; color:var(--fog); margin-top:6px; }

.signals-preview-list{ display:flex; flex-direction:column; gap:14px; }
.signal-card{ border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:linear-gradient(160deg, rgba(255,255,255,0.03), transparent 60%); }
.signal-card .cat{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--signal);
  background:rgba(79,209,197,0.1); padding:3px 10px; border-radius:6px; margin-bottom:10px;
}
.signal-card h4{ color:#fff; font-size:15.5px; margin-bottom:8px; }
.signal-card p{ color:var(--fog); font-size:13.5px; margin-bottom:10px; }
.signal-card .meta{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--fog); }
.signals-empty{ color:var(--fog); font-size:14px; }
.signals-archive-link{ margin-top:20px; display:inline-flex; gap:6px; color:var(--signal); font-size:14px; }

/* About */
.about{ padding:100px 0 120px; border-top:1px solid var(--line); }
.about-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
@media(max-width:900px){ .about-grid{grid-template-columns:1fr; }}
.about .kicker{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--sand-soft); margin-bottom:16px; }
.about h2{ font-size:clamp(24px,3.2vw,32px); color:#fff; margin-bottom:20px; line-height:1.5; }
.about p{ color:var(--fog); font-size:15.5px; max-width:520px; margin-bottom:16px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.chip{ border:1px solid var(--line); padding:8px 16px; border-radius:999px; font-size:13px; color:#d8dbe4; }
.about-photo{
  aspect-ratio:1; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:var(--fog); font-family:'IBM Plex Mono',monospace; font-size:13px;
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-photo .fallback-text{ display:none; padding:0 24px; text-align:center; }
.about-photo.no-photo .fallback-text{ display:block; }
.about-linkedin{ margin-top:26px; display:inline-flex; align-items:center; gap:8px; color:var(--signal); font-size:14.5px; }

/* Footer */
footer{ border-top:1px solid var(--line); padding:44px 0; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
footer .word{ font-family:'IBM Plex Mono', monospace; color:var(--fog); font-size:13px; }
footer nav{display:flex;gap:24px;flex-wrap:wrap;}
footer nav a{color:var(--fog); font-size:14px;}
footer nav a:hover{color:#fff;}

/* Archive page */
.archive-hero{ padding:80px 0 40px; }
.archive-hero h1{ font-size:clamp(30px,4vw,44px); color:#fff; margin-bottom:16px; }
.archive-hero p{ color:var(--fog); font-size:16px; max-width:560px; }
.archive-filters{ display:flex; gap:10px; flex-wrap:wrap; padding:0 0 40px; }
.filter-btn{
  background:none; border:1px solid var(--line); color:var(--fog); padding:9px 18px;
  border-radius:999px; font-size:13.5px;
}
.filter-btn.active{ color:#062421; background:var(--signal); border-color:var(--signal); }
.archive-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; padding-bottom:120px; }
@media(max-width:800px){ .archive-list{grid-template-columns:1fr;} }
.back-home{ display:inline-flex; gap:6px; color:var(--fog); font-size:14px; margin-bottom:24px; }
.back-home:hover{color:#fff;}

.skeleton{ opacity:.5; }