/* ===========================================================
   اهورا — panel.css
   Detail panel overlay + the ask-the-AI experience
   =========================================================== */

.overlay{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:24px;
  background:rgba(5,5,9,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.overlay.active{display:grid}
.overlay.closing{animation:ovOut .4s var(--ease) forwards}
@keyframes ovOut{to{opacity:0}}

.panel{position:relative;width:min(94vw,720px);max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--tile-2),var(--tile));
  border:1px solid var(--line-2);border-radius:24px;overflow:hidden;
  box-shadow:0 50px 140px rgba(0,0,0,.66);
  transform-origin:var(--ox,50%) var(--oy,50%);animation:panelIn .5s var(--ease-out) both}
.overlay.closing .panel{animation:panelOut .38s var(--ease) both}
@keyframes panelIn{from{transform:scale(.88) translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes panelOut{from{transform:none;opacity:1}to{transform:scale(.92);opacity:0}}

/* accent strip + glow keyed to product tint */
.panel .accent{position:absolute;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,transparent,var(--tint,var(--amber)),transparent)}
.panel::before{content:"";position:absolute;top:-40%;inset-inline-end:-20%;width:60%;height:80%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--glow,rgba(244,180,94,.16)),transparent 70%);filter:blur(20px)}

.pc-close{position:absolute;top:15px;inset-inline-end:15px;z-index:4;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--muted);font-size:17px;transition:.25s}
.pc-close:hover{background:rgba(255,255,255,.12);color:var(--ink);transform:rotate(90deg)}

/* flex:1 + min-height:0 is required so the scroller actually scrolls inside the
   max-height:88vh panel — without min-height:0 the content overflows and the
   bottom (e.g. the "Open platform" button) gets clipped under the panel edge. */
.panel .scroller{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:clamp(26px,3.5vw,40px)}

/* header */
.p-head{display:flex;align-items:flex-start;gap:18px;position:relative;z-index:2}
.p-head .medal{width:clamp(56px,7vw,72px);aspect-ratio:1;border-radius:18px;flex:none;display:grid;place-items:center;position:relative;
  color:var(--tint,var(--amber));background:radial-gradient(closest-side,var(--glow,rgba(244,180,94,.3)),rgba(255,255,255,.02));
  border:1px solid var(--line-2)}
.p-head .medal svg{width:46%;height:46%}
.p-head .htext{flex:1;min-width:0}
.p-head .hname{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.p-head .hname h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;line-height:1.2}
.p-head .hname .lat{font-size:14px;color:var(--faint);font-weight:500}
.p-head .hrole{font-size:13.5px;color:var(--tint,var(--amber));margin-top:2px}
.p-head .badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line-2);margin-top:10px}
.p-head .badge i{width:6px;height:6px;border-radius:50%}

.p-desc{font-size:clamp(14px,1.6vw,16.5px);color:var(--muted);line-height:1.85;margin-top:18px;position:relative;z-index:2}

/* ---- extra block: features / confidence legend / categories ---- */
.p-extra{position:relative;z-index:2;margin-top:14px}
.p-extra .px-feats,.p-extra .px-cats,.p-extra .px-conf{display:flex;flex-wrap:wrap;gap:7px}
.p-extra .px-feats{margin-top:10px}
.p-extra .px-feats span,.p-extra .px-cats span{font-size:12px;color:var(--ink);background:rgba(255,255,255,.045);
  border:1px solid var(--line-2);border-radius:999px;padding:5px 11px;white-space:nowrap}
.p-extra .px-cats span{border-color:color-mix(in oklab,var(--tint) 42%,var(--line-2));
  background:color-mix(in oklab,var(--tint) 8%,transparent)}
.p-extra .cf{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.p-extra .cf i{width:9px;height:9px;border-radius:50%;flex:none}
.p-extra .cf.g i{background:#5FD68C;box-shadow:0 0 7px #5FD68C}
.p-extra .cf.y i{background:#F4D24E;box-shadow:0 0 7px #F4D24E}
.p-extra .cf.o i{background:#F39A4E;box-shadow:0 0 7px #F39A4E}
.p-extra .cf.r i{background:#FF6B6B;box-shadow:0 0 7px #FF6B6B}
.p-extra .px-note{margin-top:11px;font-size:12px;line-height:1.7;color:var(--muted);
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.p-extra .px-note.warn{color:#FFC9A8;border-color:rgba(255,138,107,.3);background:rgba(255,138,107,.08)}

/* ask-the-AI block */
.ask{margin-top:24px;border:1px solid var(--line-2);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);position:relative;z-index:2}
.ask .ask-top{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--ink)}
.ask .ask-top .spark{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#1A1206;
  background:var(--grad-primary);flex:none}
.ask .ask-top .spark svg{width:14px;height:14px}
.ask .ask-top .by{margin-inline-start:auto;font-family:'Inter';font-size:10.5px;font-weight:500;color:var(--faint);letter-spacing:.04em}

/* chips */
.ask .chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px 4px}
.ask .chip{font-size:12.5px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  border-radius:999px;padding:7px 14px;transition:.22s}
.ask .chip:hover{color:var(--ink);border-color:var(--tint,var(--amber));background:rgba(255,255,255,.07)}

/* answer area */
.ask .answer{padding:6px 18px 0;min-height:0;font-size:14.5px;color:var(--ink);line-height:1.9}
.ask .answer:empty{display:none}
.ask .answer .a-body{white-space:pre-wrap}
.ask .answer.thinking{display:flex;align-items:center;gap:10px;color:var(--muted);padding-block:14px}
.ask .answer .dots{display:inline-flex;gap:4px}
.ask .answer .dots span{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:tdot 1.2s ease-in-out infinite}
.ask .answer .dots span:nth-child(2){animation-delay:.18s}.ask .answer .dots span:nth-child(3){animation-delay:.36s}
@keyframes tdot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.ask .answer .q-echo{font-size:12.5px;color:var(--tint,var(--amber));font-weight:600;margin-bottom:6px}

/* input row */
.ask .ask-row{display:flex;gap:9px;padding:14px 16px 16px;align-items:flex-end}
.ask textarea{flex:1;resize:none;background:rgba(0,0,0,.25);border:1px solid var(--line-2);border-radius:12px;
  color:var(--ink);font-family:inherit;font-size:14px;line-height:1.6;padding:11px 14px;max-height:96px;transition:border-color .2s}
.ask textarea:focus{outline:none;border-color:var(--tint,var(--amber))}
.ask textarea::placeholder{color:var(--faint)}
.ask .send{flex:none;width:44px;height:44px;border-radius:12px;border:none;display:grid;place-items:center;color:#1A1206;
  background:var(--grad-primary);transition:.25s}
.ask .send:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(244,180,94,.4)}
.ask .send:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.ask .send svg{width:18px;height:18px}

/* prominent "Enter platform" CTA at the top of a live platform panel */
.btn-enter{display:flex;align-items:center;gap:12px;margin-top:18px;position:relative;z-index:2;
  font-weight:800;font-size:clamp(15px,2vw,17px);color:#1A1206;text-decoration:none;
  background:linear-gradient(120deg,var(--tint,var(--amber)),color-mix(in oklab,var(--tint,var(--amber)) 70%,#E8923C));
  border-radius:16px;padding:15px 20px;box-shadow:0 14px 34px color-mix(in oklab,var(--tint,var(--amber)) 36%,transparent);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn-enter:hover{transform:translateY(-2px);box-shadow:0 20px 44px color-mix(in oklab,var(--tint,var(--amber)) 46%,transparent)}
.btn-enter:active{transform:translateY(0)}
.btn-enter .be-go{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(26,18,6,.18)}
.btn-enter .be-go svg{width:18px;height:18px}
.btn-enter .be-sub{margin-inline-start:auto;font-weight:600;font-size:11.5px;opacity:.72;font-family:'Inter'}
[dir="rtl"] .btn-enter .be-go svg{transform:scaleX(-1)}

/* contact form */
.cform{position:relative;z-index:2;margin-top:18px;display:flex;flex-direction:column;gap:13px}
.cform .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.cform .cf{display:flex;flex-direction:column;gap:6px}
.cform .cf>span{font-size:12.5px;color:var(--muted)}
.cform input,.cform textarea{background:rgba(0,0,0,.25);border:1px solid var(--line-2);border-radius:12px;color:var(--ink);
  font-family:inherit;font-size:14px;line-height:1.6;padding:11px 14px;resize:vertical}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--amber)}
.cform input::placeholder,.cform textarea::placeholder{color:var(--faint)}
.cform .cf-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.cform .cf-mail{font-size:13px;color:var(--muted)}
.cform .cf-mail:hover{color:var(--amber)}
.cform .cf-msg{font-size:13px;font-weight:600;color:var(--amber)}
.cform .cf-msg.ok{color:#5FD68C}.cform .cf-msg.err{color:#FF8A6B}
@media(max-width:560px){.cform .cf-row{grid-template-columns:1fr}}

/* "notify me" waitlist form (building platforms + token) */
.notify-form{position:relative;z-index:2;margin-top:18px;padding:14px 16px;border:1px solid var(--line-2);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.notify-form .nf-lbl{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:10px}
.notify-form .nf-row{display:flex;gap:9px}
.notify-form input{flex:1;min-width:0;background:rgba(0,0,0,.25);border:1px solid var(--line-2);border-radius:12px;color:var(--ink);
  font-family:'Inter';font-size:14px;padding:11px 14px}
.notify-form input:focus{outline:none;border-color:var(--amber)}
.notify-form input::placeholder{color:var(--faint)}
.notify-form .nf-btn{flex:none;border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:13.5px;color:#1A1206;
  background:var(--grad-primary);border-radius:12px;padding:0 18px;transition:.2s}
.notify-form .nf-btn:hover{filter:brightness(1.06)}
.notify-form .nf-btn:disabled{opacity:.5;cursor:default;filter:none}
.notify-form .nf-msg{font-size:12.5px;font-weight:600;color:var(--amber);margin-top:9px}
.notify-form .nf-msg.ok{color:#5FD68C}.notify-form .nf-msg.err{color:#FF8A6B}
.token-buy{margin-top:18px;position:relative;z-index:2}
@media(max-width:480px){.notify-form .nf-row{flex-direction:column}.notify-form .nf-btn{padding:11px}}

/* footer actions */
.p-foot{display:flex;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap;position:relative;z-index:2}
.p-foot .note{font-size:12px;color:var(--faint)}
.btn-soon{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--amber);
  background:rgba(244,180,94,.1);border:1px solid rgba(244,180,94,.32);border-radius:12px;padding:11px 20px;cursor:default}
.soon-hint{margin-top:14px;font-size:13px;font-weight:600;color:var(--amber);position:relative;z-index:2}

/* ===========================================================
   MISSION / TOKEN panel specifics
   =========================================================== */
.mission-body{position:relative;z-index:2}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-top:22px}
.trust-grid .tc{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:14px;
  background:rgba(255,255,255,.025);border:1px solid var(--line)}
.trust-grid .tc .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--amber);
  background:rgba(244,180,94,.1);border:1px solid var(--line-gold)}
.trust-grid .tc .ic svg{width:18px;height:18px}
.trust-grid .tc b{font-size:14px;font-weight:600}
.trust-grid .tc span{font-size:12px;color:var(--faint)}

.token-panel-body{position:relative;z-index:2}
.token-panel-body .price-big{display:inline-flex;align-items:baseline;gap:10px;margin:6px 0 14px;font-family:'Inter'}
.token-panel-body .price-big .big{font-size:clamp(26px,4vw,40px);font-weight:800;color:#fff}
.token-panel-body .price-big .small{color:var(--muted);font-size:15px}
.pay-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px}
.chip-pay{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid var(--line-2);font-size:13.5px;color:var(--muted)}
.chip-pay i{width:8px;height:8px;border-radius:2px;background:var(--amber);display:inline-block}
.note-box{margin-top:18px;display:flex;align-items:flex-start;gap:13px;padding:15px 18px;border-radius:14px;
  background:rgba(244,180,94,.06);border:1px solid var(--line-gold)}
.note-box .ic{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--amber);
  background:rgba(244,180,94,.12);border:1px solid var(--line-gold)}
.note-box .ic svg{width:17px;height:17px}
.note-box b{font-size:14px;font-weight:600;color:var(--ink)}
.note-box span{display:block;font-size:12.5px;color:var(--faint)}

@media (max-width:560px){
  .p-head{flex-direction:column}
  .ask .chips{padding-bottom:0}
}
@media (max-width:480px){
  .overlay{padding:12px}
  .panel{max-height:92vh}
  .panel .scroller{padding:18px}
  .btn-enter{padding:13px 15px}
  .btn-enter .be-sub{display:none}
}

.token-note{margin-top:16px;padding:13px 16px;border-radius:13px;font-size:13.5px;line-height:1.8;color:var(--muted);background:rgba(244,180,94,.06);border:1px solid var(--line-gold)}