/* =========================
   Flexion Universe — Unified Styles
   ========================= */

/* ---- Theme ---- */
:root{
    --bg1:#111827;
    --bg2:#020617;
    --fg:#f4f6ff;
    --muted2:#c7cbe3;
    --accent:#7dd3fc;
    --shadow: 0 24px 80px rgba(0,0,0,0.45);
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  
  body:not(.intro):not(.orbit){
    margin:0;
    font-family:"Sora", system-ui, sans-serif;
    color:var(--fg);
    background: radial-gradient(circle at top left, var(--bg1) 0, var(--bg2) 45%, #000 100%);
    overflow-x:hidden;
  }
  
  a{ color:inherit; text-decoration:none; }
  
  .container{
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 28px 90px;
  }
  
  /* =========================
     Space background (shared)
     ========================= */
  .bg{
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
  }
  .bg::before,
  .bg::after{
    content:"";
    position:absolute;
    inset:-20%;
    background-repeat: repeat;
    opacity: .55;
    transform: translateZ(0);
  }
  .bg::before{
    background-image:
      radial-gradient(circle, rgba(244,246,255,.55) 0 1px, transparent 2px),
      radial-gradient(circle, rgba(125,211,252,.35) 0 1px, transparent 2px),
      radial-gradient(circle, rgba(168,85,247,.25) 0 1px, transparent 2px);
    background-size: 160px 160px, 220px 220px, 320px 320px;
    animation: driftA 140s linear infinite;
  }
  .bg::after{
    background-image:
      radial-gradient(circle, rgba(244,246,255,.35) 0 1px, transparent 2px),
      radial-gradient(circle, rgba(74,222,128,.18) 0 1px, transparent 2px);
    background-size: 120px 120px, 260px 260px;
    opacity: .35;
    animation: driftB 220s linear infinite;
  }
  .nebula{
    position:absolute;
    inset:-20%;
    background:
      radial-gradient(circle at 20% 15%, rgba(125,211,252,.12), transparent 55%),
      radial-gradient(circle at 80% 30%, rgba(168,85,247,.10), transparent 58%),
      radial-gradient(circle at 55% 85%, rgba(74,222,128,.08), transparent 60%),
      radial-gradient(circle at 30% 75%, rgba(251,146,60,.08), transparent 62%);
    filter: blur(14px);
    opacity: .9;
  }
  .rings{
    position:absolute;
    inset:-10%;
    opacity: .35;
    background:
      radial-gradient(circle at 50% 55%, transparent 0 36%, rgba(125,211,252,.22) 36.2% 36.6%, transparent 36.8%),
      radial-gradient(circle at 40% 35%, transparent 0 22%, rgba(168,85,247,.18) 22.2% 22.6%, transparent 22.8%),
      radial-gradient(circle at 70% 25%, transparent 0 18%, rgba(74,222,128,.14) 18.2% 18.6%, transparent 18.8%);
    filter: blur(0.2px);
    animation: slowSpin 240s linear infinite;
    transform-origin: 50% 50%;
  }
  
  @keyframes driftA{ from{ transform: translate3d(0,0,0);} to{ transform: translate3d(-120px, 140px, 0);} }
  @keyframes driftB{ from{ transform: translate3d(0,0,0);} to{ transform: translate3d(160px, -120px, 0);} }
  @keyframes slowSpin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
  
  /* =========================
     Top nav (shared)
     ========================= */
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom: 26px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand-dot{
    width:10px; height:10px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 45%),
                radial-gradient(circle at 50% 50%, rgba(125,211,252,.9), rgba(2,6,23,1));
    box-shadow: 0 0 18px rgba(125,211,252,.25);
  }
  .brand span{
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:12px;
    color: rgba(244,246,255,.86);
  }
  .navlinks{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }
  .pill{
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:10px 12px;
    border-radius: 999px;
    background: rgba(2,6,23,0.30);
    border: 1px solid rgba(244,246,255,0.12);
    color: rgba(244,246,255,0.86);
  }
  .pill:hover{ border-color: rgba(125,211,252,0.35); }
  
  /* =========================
     Page headers (shared)
     ========================= */
  h1{
    margin: 8px 0 10px;
    font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.05;
  }
  .sub{
    margin: 0 0 18px;
    max-width: 920px;
    color: var(--muted2);
    line-height: 1.65;
    font-size: 16px;
  }
  .counter{
    margin: 0 0 18px;
    font-size: 12px;
    color: rgba(244,246,255,0.72);
    letter-spacing: .10em;
    text-transform: uppercase;
  }
  
  /* =========================
     Framework / Research cards (pubs)
     ========================= */
  .pubs-wrap{ position: relative; }
  
  @media (min-width: 821px){
    .pubs-wrap::before{
      content:"";
      position:absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 1px;
      transform: translateX(-0.5px);
      background: linear-gradient(
        180deg,
        transparent,
        rgba(125,211,252,0.22),
        rgba(168,85,247,0.18),
        rgba(74,222,128,0.14),
        transparent
      );
      opacity: .75;
      pointer-events:none;
    }
    .pubs-wrap::after{
      content:"";
      position:absolute;
      top: -30px;
      bottom: -30px;
      left: 50%;
      width: 90px;
      transform: translateX(-45px);
      background:
        radial-gradient(circle at 50% 20%, rgba(125,211,252,.12), transparent 60%),
        radial-gradient(circle at 50% 55%, rgba(168,85,247,.10), transparent 62%),
        radial-gradient(circle at 50% 85%, rgba(74,222,128,.08), transparent 64%);
      filter: blur(10px);
      opacity: .70;
      pointer-events:none;
    }
  }
  
  .pubs{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:14px;
    position: relative;
    z-index: 0;
  }
  
  @media (max-width: 820px){
    .pubs{ grid-template-columns: 1fr; }
  }
  
  .pub{
    position:relative;
    background: rgba(2,6,23,0.34);
    border-radius: 18px;
    padding: 18px;
    overflow:hidden;
    box-shadow: 0 20px 70px rgba(0,0,0,0.45);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .pub::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius: 18px;
    background: linear-gradient(135deg,
      rgba(125,211,252,.35),
      rgba(168,85,247,.25),
      rgba(74,222,128,.18),
      rgba(244,246,255,.12)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:.70;
    pointer-events:none;
  }
  .pub::after{
    content:"";
    position:absolute;
    inset:-1px;
    background:
      radial-gradient(circle at 18% 10%, rgba(125,211,252,.18), transparent 45%),
      radial-gradient(circle at 82% 70%, rgba(168,85,247,.12), transparent 52%);
    opacity:.85;
    pointer-events:none;
  }
  .pub:hover{
    transform: translateY(-3px);
    box-shadow: 0 28px 110px rgba(0,0,0,0.55);
  }
  
  .title-row{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 10px;
  }
  
  .idx{
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(244,246,255,0.58);
    background: rgba(2,6,23,0.35);
    border: 1px solid rgba(244,246,255,0.12);
    padding: 6px 8px;
    border-radius: 999px;
    flex: 0 0 auto;
  }
  
  .title{
    font-size:14px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color: rgba(244,246,255,0.92);
    line-height:1.25;
    min-width:0;
  }
  
  .text{
    margin:0;
    color: rgba(244,246,255,0.78);
    line-height: 1.65;
    font-size: 14px;
  }
  
  .doi{
    position:relative;
    font-size:12px;
    letter-spacing:.08em;
    color: rgba(244,246,255,0.72);
    border-top:1px solid rgba(244,246,255,0.10);
    padding-top:10px;
  }
  .doi b{ color: rgba(244,246,255,0.90); }
  
  /* state block (framework equation card) */
  .state{
    margin-top: 10px;
    padding: 14px 14px;
    border-radius: 16px;
    background: rgba(2,6,23,0.30);
    border: 1px solid rgba(244,246,255,0.10);
  }
  .formula{
    font-size: 18px;
    letter-spacing: .12em;
    color: var(--accent);
  }
  .defs{
    margin-top: 10px;
    display:grid;
    grid-template-columns: 1fr;
    gap:8px;
  }
  .def{
    color: rgba(244,246,255,0.78);
    font-size: 13px;
    line-height: 1.55;
  }
  .def b{ color: rgba(244,246,255,0.92); }
  
  /* =========================
     Projects page (arc list)
     ========================= */
  .arc-wrap{
    position: relative;
    padding: 12px 0 6px;
  }
  
  /* decorative arm line (svg) */
  .arm{
    position:absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 260px;
    pointer-events:none;
    opacity:.65;
    filter: drop-shadow(0 0 18px rgba(125,211,252,.12));
  }
  @media (max-width: 820px){
    .arm{ display:none; }
  }
  
  .list{
    position: relative;
    display:grid;
    grid-template-columns: 1fr;
    gap:14px;
    z-index:1;
  }
  
  /* arc shifts */
  .item{ --shift: 0px; transform: translateX(var(--shift)); }
  .list .item:nth-child(1){ --shift: -60px; }
  .list .item:nth-child(2){ --shift:  10px; }
  .list .item:nth-child(3){ --shift:  85px; }
  .list .item:nth-child(4){ --shift:  30px; }
  .list .item:nth-child(5){ --shift: -35px; }
  
  @media (max-width: 820px){
    .item{ transform:none; }
  }
  
  .item{
    position:relative;
    background: rgba(2,6,23,0.34);
    border-radius: 18px;
    padding: 18px;
    overflow:hidden;
    box-shadow: 0 20px 70px rgba(0,0,0,0.45);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .item::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius: 18px;
    background: linear-gradient(135deg,
      rgba(125,211,252,.35),
      rgba(168,85,247,.25),
      rgba(74,222,128,.18),
      rgba(244,246,255,.12)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:.70;
    pointer-events:none;
  }
  .item::after{
    content:"";
    position:absolute;
    inset:-1px;
    background:
      radial-gradient(circle at 18% 10%, rgba(125,211,252,.18), transparent 45%),
      radial-gradient(circle at 82% 70%, rgba(168,85,247,.12), transparent 52%);
    opacity:.85;
    pointer-events:none;
  }
  .item:hover{
    transform: translateX(var(--shift)) translateY(-3px);
    box-shadow: 0 28px 110px rgba(0,0,0,0.55);
  }
  
  .left-head{
    display:flex;
    gap:10px;
    align-items:flex-start;
    min-width:0;
  }
  
  /* galaxy badge */
  .galaxy{
    width: 42px;
    height: 42px;
    border-radius: 999px;
    position: relative;
    flex: 0 0 auto;
    border: 1px solid rgba(244,246,255,0.14);
    background:
      radial-gradient(circle at 35% 30%, rgba(255,255,255,.30), transparent 45%),
      radial-gradient(circle at 55% 65%, rgba(0,0,0,.30), transparent 62%),
      radial-gradient(circle at 50% 50%, rgba(15,23,42,.95), rgba(2,6,23,.98));
    box-shadow:
      0 14px 30px rgba(2,6,23,.65),
      inset 0 0 0 1px rgba(255,255,255,.05);
    overflow:hidden;
  }
  .galaxy::before{
    content:"";
    position:absolute;
    inset:-18px;
    border-radius: 999px;
    background:
      conic-gradient(from 40deg,
        rgba(125,211,252,.00),
        rgba(125,211,252,.24),
        rgba(168,85,247,.16),
        rgba(74,222,128,.12),
        rgba(125,211,252,.00));
    filter: blur(0.2px);
    opacity:.8;
    animation: galaxySpin 18s linear infinite;
  }
  .galaxy::after{
    content:"";
    position:absolute;
    inset:-12px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(125,211,252,.22), transparent 62%);
    filter: blur(8px);
    opacity:.55;
  }
  @keyframes galaxySpin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
  
  .g1::after{ background: radial-gradient(circle, rgba(125,211,252,.28), transparent 62%); }
  .g2::after{ background: radial-gradient(circle, rgba(74,222,128,.22), transparent 62%); }
  .g3::after{ background: radial-gradient(circle, rgba(168,85,247,.22), transparent 62%); }
  .g4::after{ background: radial-gradient(circle, rgba(59,130,246,.24), transparent 62%); }
  .g5::after{ background: radial-gradient(circle, rgba(251,146,60,.16), transparent 62%); }
  
  .small{
    color: rgba(244,246,255,0.66);
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
  }
  
  /* =========================
     Index main (iframes layout)
     ========================= */
  .main{
    max-width:1200px;
    margin:0 auto;
    padding:80px 64px 120px 32px; /* more on right like you had */
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap:56px;
    align-items:start;
  }
  
  .left iframe,
  .right iframe{
    width:100%;
    border:none;
    display:block;
    border-radius:18px;
    overflow:hidden;
    background: rgba(2,6,23,0.25);
    box-shadow: 0 20px 70px rgba(0,0,0,0.45);
  }
  
  .left iframe{ height:620px; }
  
  .right{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .right iframe{ height:520px; }
  
  .frame{ position:relative; }
  .frame::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius:18px;
    background: linear-gradient(135deg,
      rgba(125,211,252,.35),
      rgba(168,85,247,.25),
      rgba(74,222,128,.18),
      rgba(244,246,255,.12)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:.65;
    pointer-events:none;
  }
  
  @media (max-width: 900px){
    .main{
      grid-template-columns: 1fr;
      padding:56px 20px 100px;
      gap:36px;
    }
    .left iframe{ height:560px; }
    .right iframe{ height:420px; }
  }
  
  /* =========================
     Mini planet (optional decorative)
     ========================= */
  .planet{
    width: 14px;
    height: 14px;
    border-radius: 999px;
    display:inline-block;
    position: relative;
    flex: 0 0 auto;
    background:
      radial-gradient(circle at 30% 24%, rgba(255,255,255,.36), transparent 38%),
      radial-gradient(circle at 50% 70%, rgba(0,0,0,.25), transparent 56%),
      radial-gradient(circle at 50% 50%, rgba(15,23,42,.95), rgba(2,6,23,.98));
    border: 1px solid rgba(244,246,255,0.16);
    box-shadow:
      0 10px 24px rgba(2,6,23,.65),
      inset 0 0 0 1px rgba(255,255,255,.06);
  }
  .planet::after{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:999px;
    background: radial-gradient(circle, rgba(125,211,252,.45), transparent 62%);
    filter: blur(7px);
    opacity: .55;
    z-index:-1;
    pointer-events:none;
  }
  .planet.v2::after{ background: radial-gradient(circle, rgba(168,85,247,.40), transparent 62%); }
  .planet.v3::after{ background: radial-gradient(circle, rgba(74,222,128,.40), transparent 62%); }
  .planet.v4::after{ background: radial-gradient(circle, rgba(251,146,60,.40), transparent 62%); }
  
  .planet.ring::before{
    content:"";
    position:absolute;
    width: 22px; height: 8px;
    left:50%; top:50%;
    transform: translate(-50%,-50%) rotate(-18deg);
    border-radius: 999px;
    border: 1px solid rgba(244,246,255,.18);
    box-shadow: 0 0 16px rgba(125,211,252,.18);
    opacity:.75;
  }
  .planet.band::before{
    content:"";
    position:absolute;
    inset: 4px 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(244,246,255,.18), transparent);
    opacity:.8;
  }
  .planet.moon::before{
    content:"";
    position:absolute;
    width:6px; height:6px;
    right:-2px; top:2px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(15,23,42,.95));
    border: 1px solid rgba(244,246,255,.14);
    box-shadow: 0 0 16px rgba(168,85,247,.18);
  }

  /* =========================
   CONTACT PAGE (additions)
   ========================= */

/* hero block */
.hero{
    margin-top: 8px;
    margin-bottom: 18px;
    max-width: 980px;
  }
  
  .kicker{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color: rgba(244,246,255,0.70);
    margin-bottom: 10px;
  }
  
  .kicker .dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 45%),
                radial-gradient(circle at 50% 50%, rgba(125,211,252,.9), rgba(2,6,23,1));
    box-shadow: 0 0 18px rgba(125,211,252,.20);
    flex: 0 0 auto;
  }
  
  .grad{
    background: linear-gradient(90deg,
      rgba(125,211,252,.95),
      rgba(168,85,247,.85),
      rgba(74,222,128,.75)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  .lead{
    margin: 0;
    color: rgba(244,246,255,0.78);
    line-height: 1.65;
    font-size: 16px;
    max-width: 920px;
  }
  
  /* section layout */
  .section{
    margin-top: 18px;
  }
  
  .grid2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
    align-items:start;
  }
  
  @media (max-width: 900px){
    .grid2{ grid-template-columns: 1fr; }
  }
  
  /* CONTACT cards (scoped so it won't fight other pages) */
  .section.grid2 > .card{
    position:relative;
    background: rgba(2,6,23,0.34);
    border-radius: 18px;
    padding: 18px;
    overflow:hidden;
    box-shadow: 0 20px 70px rgba(0,0,0,0.45);
  }
  
  .section.grid2 > .card::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius: 18px;
    background: linear-gradient(135deg,
      rgba(125,211,252,.35),
      rgba(168,85,247,.25),
      rgba(74,222,128,.18),
      rgba(244,246,255,.12)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:.70;
    pointer-events:none;
  }
  
  .section.grid2 > .card::after{
    content:"";
    position:absolute;
    inset:-1px;
    background:
      radial-gradient(circle at 18% 10%, rgba(125,211,252,.18), transparent 45%),
      radial-gradient(circle at 82% 70%, rgba(168,85,247,.12), transparent 52%);
    opacity:.85;
    pointer-events:none;
  }
  
  .section.grid2 > .card h2{
    margin: 0 0 14px;
    font-size: 14px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color: rgba(244,246,255,0.92);
  }
  
  /* registry block */
  .registry{
    border-radius: 16px;
    background: rgba(2,6,23,0.30);
    border: 1px solid rgba(244,246,255,0.10);
    overflow:hidden;
  }
  
  .registry-head{
    padding: 14px 14px;
    border-bottom: 1px solid rgba(244,246,255,0.08);
    background: rgba(2,6,23,0.22);
  }
  
  .registry-title .name{
    font-size: 14px;
    letter-spacing:.10em;
    text-transform:uppercase;
    color: rgba(244,246,255,0.92);
    line-height: 1.25;
  }
  
  .registry-title .meta{
    margin-top: 6px;
    font-size: 12px;
    color: rgba(244,246,255,0.66);
    letter-spacing:.06em;
  }
  
  .registry-body{
    padding: 14px 14px;
  }
  
  .dl{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  
  .dt{
    font-size: 12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color: rgba(244,246,255,0.62);
  }
  
  .dd{
    margin-top: -4px;
    font-size: 14px;
    color: rgba(244,246,255,0.86);
    line-height: 1.55;
  }
  
  .mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: .02em;
  }
  
  .registry .sep{
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(244,246,255,0.10), transparent);
    border:none;
  }
  
  /* support comet button (simple + same vibe) */
  .support-comet{
    margin-top: 14px;
    display:flex;
    justify-content:flex-end;
  }
  
  .comet-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(244,246,255,0.12);
    background: rgba(2,6,23,0.28);
    color: rgba(244,246,255,0.90);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    overflow:hidden;
  }
  
  .comet-btn:hover{
    border-color: rgba(125,211,252,0.35);
  }
  
  .comet-btn .core{
    width:10px;
    height:10px;
    border-radius:999px;
    background: rgba(125,211,252,.85);
    box-shadow: 0 0 20px rgba(125,211,252,.22);
  }
  
  .comet-btn .tail{
    width:26px;
    height:2px;
    border-radius:999px;
    background: linear-gradient(90deg, rgba(125,211,252,.0), rgba(125,211,252,.55));
    opacity:.9;
  }
  
  /* links list */
  .links{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  
  .link{
    position:relative;
    display:flex;
    gap:12px;
    align-items:center;
    padding: 12px 12px;
    border-radius: 16px;
    background: rgba(2,6,23,0.30);
    border: 1px solid rgba(244,246,255,0.10);
  }
  
  .link:hover{
    border-color: rgba(125,211,252,0.30);
  }
  
  .link .ico{
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display:grid;
    place-items:center;
    border: 1px solid rgba(244,246,255,0.10);
    background:
      radial-gradient(circle at 35% 30%, rgba(255,255,255,.10), transparent 55%),
      rgba(2,6,23,0.22);
    color: rgba(244,246,255,0.86);
    flex: 0 0 auto;
  }
  
  .link .ico svg{
    width: 20px;
    height: 20px;
  }
  
  .link .txt{
    min-width:0;
  }
  
  .link .t{
    font-size: 12px;
    letter-spacing:.12em;
    text-transform: uppercase;
    color: rgba(244,246,255,0.78);
  }
  
  .link .v{
    margin-top: 6px;
    font-size: 14px;
    color: rgba(244,246,255,0.92);
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
  }
  
  /* hr + footer */
  .hr{
    margin: 18px 0 14px;
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(244,246,255,0.12), transparent);
  }
  
  .footer{
    color: rgba(244,246,255,0.62);
    font-size: 12px;
    line-height: 1.6;
  }

  /* =========================
   SUPPORT PAGE (Claim UI)
   ========================= */

/* decorative arc line behind cards */
.arc-line{
    position:absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 240px;
    pointer-events:none;
    opacity:.55;
    filter: drop-shadow(0 0 18px rgba(125,211,252,.12));
  }
  @media (max-width: 820px){
    .arc-line{ display:none; }
  }
  
  /* cards layout */
  .arc{
    position: relative;
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:14px;
    z-index:1;
  }
  @media (max-width: 900px){
    .arc{ grid-template-columns: 1fr; }
  }
  
  /* card look (same language as .pub / .item) */
  .card{
    position:relative;
    background: rgba(2,6,23,0.34);
    border-radius: 18px;
    padding: 18px;
    overflow:hidden;
    box-shadow: 0 20px 70px rgba(0,0,0,0.45);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .card::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius: 18px;
    background: linear-gradient(135deg,
      rgba(125,211,252,.35),
      rgba(168,85,247,.25),
      rgba(74,222,128,.18),
      rgba(244,246,255,.12)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:.70;
    pointer-events:none;
  }
  .card::after{
    content:"";
    position:absolute;
    inset:-1px;
    background:
      radial-gradient(circle at 18% 10%, rgba(125,211,252,.18), transparent 45%),
      radial-gradient(circle at 82% 70%, rgba(168,85,247,.12), transparent 52%);
    opacity:.85;
    pointer-events:none;
  }
  .card:hover{
    transform: translateY(-3px);
    box-shadow: 0 28px 110px rgba(0,0,0,0.55);
  }
  
  .row{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 10px;
  }
  
  .badge{
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(244,246,255,0.58);
    background: rgba(2,6,23,0.35);
    border: 1px solid rgba(244,246,255,0.12);
    padding: 6px 8px;
    border-radius: 999px;
    flex: 0 0 auto;
  }
  
  /* wallet block */
  .wallet{
    position:relative;
    margin-top: 8px;
    padding: 14px 14px;
    border-radius: 16px;
    background: rgba(2,6,23,0.30);
    border: 1px solid rgba(244,246,255,0.10);
  }
  
  .addr{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
    letter-spacing: .02em;
    line-height:1.5;
    color: rgba(244,246,255,0.92);
    word-break: break-all;
  }
  
  .actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top: 12px;
  }
  
  .btn{
    appearance:none;
    border: 1px solid rgba(244,246,255,0.12);
    background: rgba(2,6,23,0.28);
    color: rgba(244,246,255,0.90);
    padding: 10px 12px;
    border-radius: 999px;
    cursor:pointer;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .btn:hover{ border-color: rgba(125,211,252,0.35); }
  
  .btn.primary{
    border-color: rgba(125,211,252,0.40);
    background: rgba(125,211,252,0.10);
  }
  .btn.primary:hover{
    border-color: rgba(125,211,252,0.60);
    background: rgba(125,211,252,0.14);
  }
  
  /* divider used in support cards */
  .sep{
    margin-top: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(244,246,255,0.10), transparent);
    border:none;
  }

  /* =========================
   Support polish (small fixes)
   ========================= */

h1{
    text-shadow: 0 12px 40px rgba(0,0,0,.35);
  }
  
  .arc .card{
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .arc .card::after{
    opacity: .95; 
  }
  
  .arc .addr{
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(244,246,255,0.08);
    font-size: 12.5px;
  }
  
  .arc .btn{
    height: 38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .arc .btn.primary{
    box-shadow: 0 0 0 1px rgba(125,211,252,0.10), 0 14px 30px rgba(0,0,0,0.35);
  }
  
  @media (max-width: 520px){
    .arc .actions{ gap:8px; }
    .arc .btn{ width:100%; }
  }

  /* =========================
   INTRO TEXT IFRAME (intro-text.html)
   ========================= */

html,
body.intro{
  height: 100%;
  margin: 0;
  overflow: hidden; /* убираем вертикальный скроллбар */
}

body.intro{
  background: transparent;
  color: var(--fg);
  font-family: "Space Grotesk", system-ui, sans-serif;

  display: flex;           /* центрируем без .wrap-хаков */
  align-items: center;
}

body.intro .wrap{
  width: 100%;
  padding: 0 6px;          /* безопасный внутренний отступ */
}

body.intro .hero{
  width: 100%;
}

body.intro h1{
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.05;
  margin: 0 0 18px;
}

body.intro .grad{
  background: linear-gradient(90deg, #e5f0ff, #7dd3fc, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.intro .lead{
  font-size: 18px;
  line-height: 1.65;
  color: #d1d5f0;
  max-width: 760px;
  margin: 0 0 14px;
}

body.intro .small{
  font-size: 16px;
  line-height: 1.65;
  color: #b7bdd6;
  max-width: 760px;
  margin: 0 0 14px;
}

body.intro .formula{
  margin-top: 18px;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--accent);
}

body.intro .formula-note{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(244,246,255,0.60);
}

  /* =========================
   ORBIT IFRAME (universe-orbit.html)
   ========================= */

body.orbit{
    background: transparent;
    font-family:"Sora",system-ui,sans-serif;
    color: var(--fg);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    margin:0;
  }
  
  html, body.orbit{ width:100%; height:100%; }
  
  body.orbit{
    --ring: rgba(125,211,252,.18);
  }
  
  /* ===== SYSTEM ===== */
  body.orbit .system{
    position:relative;
    width:400px;
    height:400px;
  }
  
  body.orbit .system::before{
    content:"";
    position:absolute;
    inset:-20px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(56,189,248,0.14), transparent 62%);
    filter:blur(10px);
    opacity:.95;
    pointer-events:none;
  }
  
  body.orbit .system::after{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:1px solid var(--ring);
    box-shadow:0 0 26px rgba(125,211,252,0.10);
    pointer-events:none;
  }
  
  /* ===== CENTER (LOGO PLANET) ===== */
  body.orbit .center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:182px;
    height:182px;
    border-radius:50%;
    overflow:hidden;
    isolation:isolate;
    background:#0b1220;
  
    box-shadow:
      0 44px 140px rgba(0,0,0,.92),
      0 0 90px rgba(56,189,248,.22),
      0 0 0 1px rgba(255,255,255,.10);
  
    text-decoration:none;
    display:block;
    cursor:pointer;
  }
  
  body.orbit .center img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform: scale(1.12);
    filter: contrast(1.06) saturate(1.08) brightness(0.96);
  }
  
  body.orbit .center::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    z-index:2;
    pointer-events:none;
    box-shadow:
      inset 0 0 0 2px rgba(244,246,255,.22),
      inset 0 0 0 12px rgba(2,6,23,.20),
      inset 0 -26px 34px rgba(0,0,0,.45),
      inset 0 18px 22px rgba(255,255,255,.14);
  }
  
  body.orbit .center::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:50%;
    z-index:3;
    pointer-events:none;
    background:
      radial-gradient(circle at 28% 20%, rgba(255,255,255,.75), transparent 33%),
      radial-gradient(circle at 36% 30%, rgba(255,255,255,.28), transparent 42%),
      radial-gradient(circle at 50% 50%, transparent 58%, rgba(125,211,252,.22) 72%, transparent 82%),
      radial-gradient(circle at 70% 82%, rgba(0,0,0,.48), transparent 46%),
      linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%);
    mix-blend-mode: screen;
    opacity: .92;
  }
  
  /* ===== ORBIT ===== */
  body.orbit .orbit{
    position:absolute;
    inset:0;
    border-radius:50%;
    animation: orbitSpin 56s linear infinite;
  }
  
  @keyframes orbitSpin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
  }
  
  /* ===== PLANETS ===== */
  body.orbit .node{
    position:absolute;
    width:92px;
    height:92px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:var(--fg);
    cursor:pointer;
  
    background:
      radial-gradient(circle at 30% 24%, rgba(255,255,255,.30), transparent 36%),
      radial-gradient(circle at 50% 70%, rgba(0,0,0,.25), transparent 54%),
      radial-gradient(circle at 50% 50%, rgba(15,23,42,.95), rgba(2,6,23,.98));
  
    border:1px solid rgba(148,163,184,.22);
    box-shadow:
      0 18px 54px rgba(2,6,23,.88),
      inset 0 0 0 1px rgba(255,255,255,.06);
  
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  
  /* контрвращение текста */
  body.orbit .orbit .node{
    animation: orbitCounter 56s linear infinite;
  }
  
  @keyframes orbitCounter{
    from{ transform:rotate(360deg); }
    to{ transform:rotate(0deg); }
  }
  
  body.orbit .node span{
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(244,246,255,.82);
    text-shadow:0 1px 0 rgba(0,0,0,.65);
  }
  
  body.orbit .node::after{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;
    background: radial-gradient(circle, var(--glow), transparent 62%);
    filter: blur(6px);
    opacity: .55;
    z-index:-1;
    pointer-events:none;
  }
  
  body.orbit .node:hover{
    transform:scale(1.08);
    border-color: rgba(255,255,255,.26);
    box-shadow:
      0 22px 70px rgba(2,6,23,.92),
      0 0 30px rgba(255,255,255,.08),
      inset 0 0 0 1px rgba(255,255,255,.08);
  }
  
  body.orbit .system:hover .orbit{
    animation-play-state: paused;
  }
  body.orbit .system:hover .orbit .node{
    animation-play-state: paused;
  }
  
  /* positions */
  body.orbit .framework{ top:-10px; left:50%; margin-left:-46px; }
  body.orbit .research { right:-10px; top:50%; margin-top:-46px; }
  body.orbit .projects { bottom:-10px; left:50%; margin-left:-46px; }
  body.orbit .contact  { left:-10px; top:50%; margin-top:-46px; }
  
  /* colors */
  body.orbit .framework{ --glow: rgba(168,85,247,.40); }
  body.orbit .research { --glow: rgba(34,211,238,.38); }
  body.orbit .projects { --glow: rgba(74,222,128,.38); }
  body.orbit .contact  { --glow: rgba(251,146,60,.38); }