/* =========================================================
   Rariveil — Public Identity Shell v3.1
   Enterprise security-console aesthetic (mock only)
   System fonts only — zero external requests.
   ========================================================= */

:root{
  /* surfaces */
  --deep:      #05070f;
  --navy:      #070b18;
  --navy-2:    #0a1126;
  --panel:     #0c1430;
  --panel-2:   #0e1838;
  --line:      rgba(120,150,225,.12);
  --line-soft: rgba(120,150,225,.07);

  /* blues */
  --royal:     #2563eb;
  --royal-lo:  #1d4ed8;
  --bright:    #3b82f6;
  --cyan:      #22d3ee;
  --sky:       #7aa2ff;

  /* text */
  --text:      #eef3ff;
  --text-2:    #aebbda;
  --text-3:    #6f7fa6;

  /* status */
  --green:     #34d399;
  --amber:     #f59e0b;
  --red:       #f0556b;

  --glow:      0 0 40px rgba(59,130,246,.35);
  --radius:    18px;
  --radius-sm: 12px;
  --maxw:      1200px;

  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--deep);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.08; letter-spacing:-.02em; }
.mono{ font-family:var(--font-mono); }

.shell{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,4vw,40px); }

/* ============ AMBIENT BACKGROUND ============ */
.bg-field{ position:fixed; inset:0; z-index:-1; background:
  radial-gradient(1200px 700px at 80% -10%, #0c1838 0%, transparent 60%),
  radial-gradient(900px 600px at 5% 10%, #0a1330 0%, transparent 55%),
  linear-gradient(180deg, #05070f 0%, #060a16 40%, #04060d 100%);
}
.bg-grid{ position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(120,150,225,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,150,225,.05) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
}
.bg-glow{ position:absolute; border-radius:50%; filter:blur(110px); opacity:.5; }
.bg-glow--a{ width:520px; height:520px; top:-120px; right:-80px;
  background:radial-gradient(circle, rgba(37,99,235,.55), transparent 70%); }
.bg-glow--b{ width:460px; height:460px; bottom:-160px; left:-120px;
  background:radial-gradient(circle, rgba(34,211,238,.28), transparent 70%); }
.bg-vignette{ position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 30%, transparent 55%, rgba(0,0,0,.6) 100%); }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:14.5px;
  padding:11px 20px; border-radius:12px; border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s;
  white-space:nowrap; line-height:1;
}
.btn--lg{ padding:15px 28px; font-size:15.5px; border-radius:14px; }
.btn--block{ width:100%; }
.btn--primary{
  color:#fff;
  background:linear-gradient(135deg, var(--royal), var(--bright) 60%, #2bb6e6);
  box-shadow:0 10px 30px -8px rgba(37,99,235,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -10px rgba(37,99,235,.85); }
.btn--ghost{
  color:var(--text); background:rgba(120,150,225,.06);
  border-color:var(--line); backdrop-filter:blur(8px);
}
.btn--ghost:hover{ border-color:rgba(120,150,225,.32); background:rgba(120,150,225,.1); }
.btn.is-locked{ color:var(--text-2); }
.btn--locked{
  color:var(--text-3); background:rgba(120,150,225,.05);
  border-color:var(--line); cursor:not-allowed;
}
.lock-dot{ width:7px; height:7px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 10px var(--amber); display:inline-block; }

/* ============ NAV ============ */
.nav{ position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(6,9,18,.92), rgba(6,9,18,.55));
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav__inner{ display:flex; align-items:center; gap:24px; height:72px; }
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand__mark{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:radial-gradient(circle at 30% 25%, rgba(37,99,235,.35), rgba(8,13,30,.6));
  border:1px solid rgba(120,150,225,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px -8px rgba(37,99,235,.6);
}
.brand__type{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{ font-family:var(--font-display); font-weight:800; font-size:21px; letter-spacing:-.01em;
  background:linear-gradient(90deg, #fff, #cfe0ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand__sub{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-3); font-weight:500; }

.nav__links{ display:flex; gap:30px; }
.nav__links a{ font-size:14px; color:var(--text-2); font-weight:500; position:relative; padding:6px 0; transition:color .2s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--bright),var(--cyan)); transition:width .25s; border-radius:2px; }
.nav__links a:hover{ color:var(--text); } .nav__links a:hover::after{ width:100%; }
.nav__actions{ display:flex; gap:10px; align-items:center; }

.nav__toggle{ display:none; flex-direction:column; gap:5px; width:42px; height:42px;
  border:1px solid var(--line); border-radius:11px; background:rgba(120,150,225,.05); cursor:pointer; }
.nav__toggle span{ width:18px; height:2px; background:var(--text-2); margin-inline:auto; border-radius:2px; transition:.25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__mobile{ display:none; flex-direction:column; padding:14px clamp(18px,4vw,40px) 22px; gap:4px;
  border-bottom:1px solid var(--line); background:rgba(7,11,24,.96); }
.nav__mobile a{ padding:13px 6px; color:var(--text-2); font-weight:500; border-bottom:1px solid var(--line-soft); }
.nav__mobile-cta{ margin-top:10px; text-align:center; color:#fff !important; border:none !important;
  background:linear-gradient(135deg,var(--royal),var(--bright)); border-radius:12px; font-weight:600; }

/* ============ SECTION HEADERS ============ */
.section-kicker{ display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan); padding:5px 12px; border:1px solid rgba(34,211,238,.25);
  border-radius:999px; background:rgba(34,211,238,.06); margin-bottom:18px; }
.section-title{ font-size:clamp(26px,3.6vw,40px); max-width:18ch; }
.section-sub{ color:var(--text-2); margin-top:14px; max-width:56ch; font-size:16px; }
.section-head{ margin-bottom:38px; }

/* ============ HERO ============ */
.hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:46px; align-items:center;
  padding-top:clamp(48px,8vw,96px); padding-bottom:clamp(40px,6vw,80px); }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono);
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2);
  border:1px solid var(--line); border-radius:999px; padding:7px 15px;
  background:rgba(120,150,225,.05); margin-bottom:24px; }
.pulse{ width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 rgba(245,158,11,.6);
  animation:pulse 2.2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(245,158,11,.55)} 70%{box-shadow:0 0 0 9px rgba(245,158,11,0)} 100%{box-shadow:0 0 0 0 rgba(245,158,11,0)} }

.hero__title{ font-size:clamp(40px,6.2vw,72px); font-weight:800; }
.hero__title-lead{ display:block; color:var(--text); }
.hero__title-grad{ display:block;
  background:linear-gradient(100deg,#fff 0%, var(--sky) 40%, var(--cyan) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__lede{ color:var(--text-2); font-size:clamp(16px,1.5vw,18.5px); max-width:50ch; margin-top:24px; }
.hero__lede strong{ color:var(--text); font-weight:600; }

.hero__badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.badge{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-family:var(--font-mono);
  letter-spacing:.02em; color:var(--text-2); background:rgba(12,20,48,.7); border:1px solid var(--line);
  border-radius:10px; padding:8px 13px; }
.badge__dot{ width:8px; height:8px; border-radius:50%; }
.badge__dot--amber{ background:var(--amber); box-shadow:0 0 8px var(--amber); }
.badge__dot--red{ background:var(--red); box-shadow:0 0 8px var(--red); }
.badge__dot--cyan{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.badge__dot--blue{ background:var(--bright); box-shadow:0 0 8px var(--bright); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* hero visual */
.hero__visual{ position:relative; display:grid; place-items:center; min-height:380px; }
.beacon{ position:relative; width:330px; height:330px; display:grid; place-items:center; }
.beacon__ring{ position:absolute; border-radius:50%; border:1px solid rgba(120,150,225,.18);
  inset:0; }
.beacon__ring--1{ inset:0; box-shadow:inset 0 0 60px rgba(37,99,235,.12); }
.beacon__ring--2{ inset:44px; border-color:rgba(120,150,225,.22); }
.beacon__ring--3{ inset:92px; border-color:rgba(34,211,238,.22);
  animation:spin 16s linear infinite; border-top-color:rgba(34,211,238,.6); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.beacon__sweep{ position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(59,130,246,.28) 40deg, transparent 80deg);
  animation:spin 6s linear infinite; -webkit-mask:radial-gradient(circle, transparent 38%, #000 39%);
          mask:radial-gradient(circle, transparent 38%, #000 39%); }
.beacon__core{ position:relative; z-index:2; width:130px; height:130px; border-radius:30px;
  display:grid; place-items:center;
  background:radial-gradient(circle at 32% 28%, rgba(37,99,235,.4), rgba(8,13,30,.85));
  border:1px solid rgba(120,150,225,.3);
  box-shadow:0 0 60px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.18); }
.beacon__node{ position:absolute; width:11px; height:11px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.beacon__node--a{ top:14px; left:48%; }
.beacon__node--b{ bottom:40px; left:18px; background:var(--bright); box-shadow:0 0 14px var(--bright); }
.beacon__node--c{ bottom:60px; right:24px; }
.hero__chip{ position:absolute; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--text); background:rgba(12,20,48,.85); border:1px solid var(--line);
  border-radius:10px; padding:8px 13px; backdrop-filter:blur(8px);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7); }
.hero__chip--1{ top:18%; right:-4%; }
.hero__chip--2{ bottom:14%; left:-6%; }

/* v3.1 Candidate Hero Magnet: rare signals pulled from asset noise */
.beacon--magnet{ isolation:isolate; }
.magnet__field{ position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:1; }
.magnet__dot,
.magnet__rare{
  position:absolute; display:block; border-radius:999px;
  transform:translate(-50%,-50%);
}
.magnet__dot{
  width:5px; height:5px; background:rgba(148,163,184,.38);
  box-shadow:0 0 10px rgba(148,163,184,.12);
}
.magnet__rare{
  width:9px; height:9px; background:var(--cyan);
  box-shadow:0 0 18px rgba(34,211,238,.78), 0 0 34px rgba(59,130,246,.28);
}
.magnet__dot--1{ left:14%; top:22%; opacity:.45; }
.magnet__dot--2{ left:24%; top:66%; opacity:.36; }
.magnet__dot--3{ left:36%; top:16%; opacity:.42; }
.magnet__dot--4{ left:72%; top:21%; opacity:.36; }
.magnet__dot--5{ left:83%; top:58%; opacity:.32; }
.magnet__dot--6{ left:62%; top:78%; opacity:.38; }
.magnet__dot--7{ left:18%; top:48%; opacity:.26; }
.magnet__dot--8{ left:77%; top:40%; opacity:.28; }
.magnet__rare--1{ left:27%; top:35%; animation:rarePull1 5.8s ease-in-out infinite; }
.magnet__rare--2{ left:69%; top:30%; animation:rarePull2 6.4s ease-in-out infinite; }
.magnet__rare--3{ left:70%; top:70%; animation:rarePull3 7s ease-in-out infinite; }
.magnet__pull{
  position:absolute; height:1px; width:116px; transform-origin:right center;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.55), rgba(122,162,255,.05));
  filter:drop-shadow(0 0 8px rgba(34,211,238,.35));
  opacity:.72;
}
.magnet__pull--1{ left:28%; top:38%; transform:rotate(18deg); }
.magnet__pull--2{ right:28%; top:34%; transform:rotate(160deg); }
.magnet__pull--3{ right:27%; bottom:31%; transform:rotate(204deg); }
.beacon__core--magnet{
  border-radius:34px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.16), transparent 28%),
    radial-gradient(circle at 50% 52%, rgba(34,211,238,.18), rgba(8,13,30,.88));
}
@keyframes rarePull1{ 0%,100%{ transform:translate(-50%,-50%); } 50%{ transform:translate(22px,10px); } }
@keyframes rarePull2{ 0%,100%{ transform:translate(-50%,-50%); } 50%{ transform:translate(-24px,16px); } }
@keyframes rarePull3{ 0%,100%{ transform:translate(-50%,-50%); } 50%{ transform:translate(-24px,-24px); } }


/* ============ COMMAND CENTER ============ */
.command{ padding-block:clamp(50px,7vw,90px); }
.cc{ border-radius:22px; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(12,20,48,.9), rgba(7,11,24,.92));
  box-shadow:0 40px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(120,150,225,.04),
             inset 0 1px 0 rgba(255,255,255,.05); }
.cc__chrome{ display:flex; align-items:center; gap:14px; padding:13px 18px;
  border-bottom:1px solid var(--line); background:rgba(6,9,18,.6); }
.cc__dots{ display:flex; gap:7px; }
.cc__dots i{ width:11px; height:11px; border-radius:50%; background:rgba(120,150,225,.25); }
.cc__dots i:first-child{ background:var(--red); } 
.cc__dots i:nth-child(2){ background:var(--amber); }
.cc__dots i:last-child{ background:var(--green); }
.cc__title{ font-family:var(--font-mono); font-size:13px; color:var(--text-2); }
.cc__title span{ color:var(--text-3); }
.cc__env{ margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--cyan);
  border:1px solid rgba(34,211,238,.25); border-radius:999px; padding:4px 11px; background:rgba(34,211,238,.06); }

.cc__body{ display:grid; grid-template-columns:212px 1fr 240px; min-height:560px; }

/* sidebar */
.cc__side{ border-right:1px solid var(--line); padding:18px 14px; display:flex; flex-direction:column;
  background:rgba(6,9,18,.35); }
.cc__side-brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-weight:700; font-size:15px; padding:6px 8px 16px; color:var(--text); }
.cc__nav{ display:flex; flex-direction:column; gap:3px; }
.cc__nav-item{ display:flex; align-items:center; gap:11px; font-size:13px; color:var(--text-2);
  padding:10px 11px; border-radius:10px; cursor:default; transition:background .2s; }
.cc__nav-item i{ width:7px; height:7px; border-radius:2px; background:rgba(120,150,225,.4); }
.cc__nav-item.is-active{ background:rgba(37,99,235,.16); color:var(--text);
  box-shadow:inset 2px 0 0 var(--bright); }
.cc__nav-item.is-active i{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.cc__side-foot{ margin-top:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--text-3);
  display:flex; align-items:center; gap:8px; padding:12px 8px 4px; border-top:1px solid var(--line-soft); }

/* main */
.cc__main{ padding:18px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.cc__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.stat{ background:linear-gradient(160deg, rgba(14,24,56,.9), rgba(9,15,36,.7));
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:15px 15px 16px;
  display:flex; flex-direction:column; gap:7px; position:relative; overflow:hidden; }
.stat::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(59,130,246,.6), transparent); }
.stat__label{ font-size:11.5px; letter-spacing:.05em; color:var(--text-3); text-transform:uppercase; font-weight:600; }
.stat__value{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--text); line-height:1; }
.stat__value--ok{ color:var(--green); font-size:23px; }
.stat__meta{ font-size:11.5px; color:var(--text-3); display:flex; align-items:center; gap:7px; }
.stat__bar{ height:5px; border-radius:6px; background:rgba(120,150,225,.12); overflow:hidden; margin-top:2px; }
.stat__bar i{ display:block; height:100%; width:var(--w);
  background:linear-gradient(90deg, var(--royal), var(--cyan));
  border-radius:6px; box-shadow:0 0 12px rgba(59,130,246,.6); }

.panel{ background:linear-gradient(180deg, rgba(12,20,48,.7), rgba(8,13,30,.55));
  border:1px solid var(--line); border-radius:var(--radius); }
.panel__head{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px;
  border-bottom:1px solid var(--line); }
.panel__head h3{ font-size:15px; font-weight:600; }
.panel__tag{ font-family:var(--font-mono); font-size:11px; color:var(--cyan);
  border:1px solid rgba(34,211,238,.22); border-radius:999px; padding:3px 10px; background:rgba(34,211,238,.05); }

/* topology */
.cc__topo{ }
.topo{ padding:14px 16px 18px; }
.topo__svg{ width:100%; height:auto; }
.topo__link{ fill:none; stroke:url(#flow); stroke-width:2; stroke-dasharray:7 9; opacity:.85;
  animation:dash 2.4s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-32; } }
.topo__node rect{ fill:rgba(14,24,56,.95); stroke:rgba(120,150,225,.3); stroke-width:1.4; }
.topo__node text{ fill:var(--text-2); font-family:var(--font-mono); font-size:12px; text-anchor:middle; }
.topo__node--enclave rect{ stroke:var(--bright); fill:rgba(37,99,235,.16);
  filter:drop-shadow(0 0 14px rgba(59,130,246,.45)); }
.topo__node--vault rect{ stroke:var(--cyan); fill:rgba(34,211,238,.12); }
.topo__node--out rect{ stroke:rgba(34,211,238,.45); fill:rgba(12,20,48,.95); }
.topo__legend{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:6px;
  font-size:12.5px; color:var(--text-2); font-family:var(--font-mono); }
.topo__legend b{ color:var(--text); font-weight:500; }
.topo__arrow{ color:var(--bright); }
.topo__split b{ color:var(--cyan); }

/* table */
.tbl{ padding:6px 8px 10px; }
.tbl__row{ display:grid; grid-template-columns:2.2fr 1.3fr .8fr .9fr; gap:10px; align-items:center;
  padding:11px 12px; border-radius:9px; font-size:13px; color:var(--text-2); }
.tbl__row:nth-child(even){ background:rgba(120,150,225,.035); }
.tbl__row--head{ color:var(--text-3); font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; background:none !important; }
.tbl__row span:first-child{ color:var(--text); }
.tag{ font-family:var(--font-mono); font-size:11px; padding:3px 9px; border-radius:7px; justify-self:start; }
.tag--ok{ color:var(--green); background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.25); }
.tag--review{ color:var(--sky); background:rgba(122,162,255,.12); border:1px solid rgba(122,162,255,.25); }
.tag--hold{ color:var(--amber); background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.25); }

/* right rail */
.cc__rail{ border-left:1px solid var(--line); padding:18px 14px; display:flex; flex-direction:column; gap:13px;
  background:rgba(6,9,18,.3); }
.rail__panel{ padding:15px; display:flex; flex-direction:column; gap:6px; }
.rail__label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); font-weight:600; }
.rail__big{ font-family:var(--font-display); font-weight:700; font-size:21px; display:flex; align-items:center; gap:9px; }
.rail__big--closed{ color:var(--red); }
.rail__big--ok{ color:var(--green); }
.rail__meta{ font-size:11.5px; color:var(--text-3); }
.rail__list{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.rail__list li{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-2); }
.rail__list .mono{ color:var(--green); font-size:11.5px; }

.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot--green{ background:var(--green); box-shadow:0 0 8px var(--green); }
.dot--cyan{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.cc__disclaimer{ text-align:center; margin-top:18px; font-family:var(--font-mono);
  font-size:12px; color:var(--text-3); }

/* ============ IDENTITY ============ */
.identity{ padding-block:clamp(40px,6vw,80px); }
.identity__card{ border:1px solid var(--line); border-radius:22px; padding:clamp(34px,5vw,64px);
  text-align:center; position:relative; overflow:hidden;
  background:radial-gradient(700px 300px at 50% 0%, rgba(37,99,235,.18), transparent 70%),
             linear-gradient(180deg, rgba(12,20,48,.6), rgba(7,11,24,.5)); }
.identity__line{ font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3.6vw,42px);
  line-height:1.2; max-width:22ch; margin-inline:auto; letter-spacing:-.02em; }
.identity__line strong{ font-weight:800; }
.grad{ background:linear-gradient(100deg, var(--sky), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.identity__note{ color:var(--text-2); margin-top:18px; font-family:var(--font-mono); font-size:13.5px; letter-spacing:.03em; }

/* ============ PRINCIPLES ============ */
.principles{ padding-block:clamp(40px,6vw,80px); }
.principles__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.prin{ border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px;
  background:linear-gradient(180deg, rgba(12,20,48,.55), rgba(8,13,30,.4));
  transition:transform .25s, border-color .25s, box-shadow .25s; position:relative; overflow:hidden; }
.prin:hover{ transform:translateY(-4px); border-color:rgba(120,150,225,.32);
  box-shadow:0 24px 50px -24px rgba(37,99,235,.5); }
.prin__num{ font-family:var(--font-mono); font-size:13px; color:var(--cyan); }
.prin h3{ font-size:18px; margin:14px 0 9px; }
.prin p{ color:var(--text-2); font-size:14px; }

/* ============ ACCESS ============ */
.access{ padding-block:clamp(40px,6vw,80px); }
.access__grid{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; }
.access__points{ list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:13px; }
.access__points li{ display:flex; align-items:center; gap:11px; color:var(--text-2); font-size:14.5px; }
.access__form{ border:1px solid var(--line); border-radius:22px; padding:clamp(22px,3vw,32px);
  background:linear-gradient(180deg, rgba(12,20,48,.7), rgba(8,13,30,.55));
  box-shadow:0 30px 70px -40px rgba(0,0,0,.8); }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:15px; }
.field label{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); font-weight:600; }
.field input, .field textarea{ font-family:var(--font-body); font-size:14.5px; color:var(--text);
  background:rgba(6,9,18,.7); border:1px solid var(--line); border-radius:11px; padding:12px 14px;
  outline:none; transition:border-color .2s, box-shadow .2s; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:var(--text-3); }
.field input:focus, .field textarea:focus{ border-color:rgba(59,130,246,.6);
  box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.field--disabled input{ opacity:.55; cursor:not-allowed; }
.access__hint{ margin-top:12px; font-family:var(--font-mono); font-size:12.5px; color:var(--cyan);
  min-height:18px; text-align:center; }

/* ============ LOGIN ============ */
.login{ padding-block:clamp(30px,5vw,70px); display:flex; justify-content:center; }
.login__card{ width:100%; max-width:430px; border:1px solid var(--line); border-radius:22px;
  padding:clamp(26px,4vw,38px); text-align:center;
  background:linear-gradient(180deg, rgba(12,20,48,.7), rgba(8,13,30,.55));
  box-shadow:0 30px 70px -40px rgba(0,0,0,.8); }
.login__lockbar{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono);
  font-size:11.5px; letter-spacing:.04em; color:var(--amber); border:1px solid rgba(245,158,11,.28);
  background:rgba(245,158,11,.07); border-radius:999px; padding:6px 14px; margin-bottom:20px; }
.login__title{ font-size:24px; margin-bottom:22px; }
.login .field{ text-align:left; }
.login__msg{ margin-top:16px; font-family:var(--font-mono); font-size:12.5px; color:var(--amber); }

/* ============ FOOTER ============ */
.footer{ border-top:1px solid var(--line); margin-top:clamp(40px,6vw,80px);
  background:linear-gradient(180deg, rgba(6,9,18,.4), rgba(4,6,13,.9)); }
.footer__inner{ display:grid; grid-template-columns:1.2fr 2fr; gap:40px; padding-block:48px 30px; }
.footer__brand{ display:flex; align-items:flex-start; gap:13px; }
.footer__name{ display:block; font-family:var(--font-display); font-weight:800; font-size:22px;
  background:linear-gradient(90deg,#fff,#cfe0ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer__tag{ color:var(--text-3); font-size:13px; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer__col{ display:flex; flex-direction:column; gap:10px; }
.footer__h{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.footer__col a{ color:var(--text-2); font-size:13.5px; transition:color .2s; }
.footer__col a:hover{ color:var(--text); }
.footer__muted{ color:var(--text-3); font-size:12.5px; }
.footer__bar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding-block:18px; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--text-2); }

/* ============ REVEAL ANIMATION ============ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .cc__body{ grid-template-columns:180px 1fr; }
  .cc__rail{ grid-column:1 / -1; border-left:none; border-top:1px solid var(--line);
    flex-direction:row; flex-wrap:wrap; }
  .rail__panel{ flex:1 1 200px; }
  .cc__stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__actions{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__mobile{ display:flex; }
  .hero{ grid-template-columns:1fr; gap:36px; }
  .hero__visual{ order:-1; min-height:300px; }
  .beacon{ width:270px; height:270px; }
  .hero__chip--1{ right:0; } .hero__chip--2{ left:0; }
  .principles__grid{ grid-template-columns:repeat(2,1fr); }
  .access__grid{ grid-template-columns:1fr; gap:32px; }
  .footer__inner{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:680px){
  .cc__body{ grid-template-columns:1fr; }
  .cc__side{ flex-direction:row; align-items:center; gap:10px; overflow-x:auto;
    border-right:none; border-bottom:1px solid var(--line); padding:12px 14px; }
  .cc__side-brand{ padding:0; flex-shrink:0; }
  .cc__nav{ flex-direction:row; gap:6px; }
  .cc__nav-item{ white-space:nowrap; padding:8px 11px; font-size:12px; }
  .cc__nav-item.is-active{ box-shadow:inset 0 -2px 0 var(--bright); }
  .cc__side-foot{ display:none; }
  .topo__svg{ min-width:560px; }
  .topo{ overflow-x:auto; }
  .tbl__row{ grid-template-columns:1.6fr .8fr; }
  .tbl__row span:nth-child(2), .tbl__row span:nth-child(3){ display:none; }
  .tbl__row--head span:nth-child(2), .tbl__row--head span:nth-child(3){ display:none; }
}
@media (max-width:480px){
  .cc__stats{ grid-template-columns:1fr 1fr; }
  .principles__grid{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .footer__bar{ flex-direction:column; align-items:flex-start; }
  .hero__chip{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ===== RARIVEIL BRAND SIZE PATCH v3.1-a ===== */
/* تكبير اسم المنصة والشعار في أعلى الصفحة */

.nav__inner {
  height: 86px !important;
}

.brand {
  gap: 16px !important;
}

.brand__mark {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
}

.brand__mark svg {
  width: 44px !important;
  height: 44px !important;
}

.brand__name {
  font-size: 34px !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}

.brand__sub {
  font-size: 11px !important;
  letter-spacing: .24em !important;
  margin-top: 5px !important;
}

/* في الهاتف: اجعل الاسم واضحًا لكن لا يكسر الشريط */
@media (max-width: 860px) {
  .nav__inner {
    height: 92px !important;
  }

  .brand__mark {
    width: 60px !important;
    height: 60px !important;
  }

  .brand__mark svg {
    width: 46px !important;
    height: 46px !important;
  }

  .brand__name {
    font-size: 36px !important;
  }

  .brand__sub {
    font-size: 10px !important;
    letter-spacing: .18em !important;
  }

  .nav__toggle {
    width: 56px !important;
    height: 56px !important;
  }

  .nav__toggle span {
    width: 28px !important;
    height: 3px !important;
  }
}

@media (max-width: 420px) {
  .brand__name {
    font-size: 31px !important;
  }

  .brand__sub {
    font-size: 8.5px !important;
  }

  .brand__mark {
    width: 54px !important;
    height: 54px !important;
  }

  .brand__mark svg {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ===== RARIVEIL MOBILE/TABLET HEADER IDENTITY PATCH v3.1-b ===== */
/* يجعل الهوية في الأعلى أقوى، ويمنع تزاحم الروابط مع اسم المنصة */

@media (max-width: 1180px) {
  .nav__links,
  .nav__actions {
    display: none !important;
  }

  .nav__toggle {
    display: flex !important;
    margin-left: auto !important;
  }

  .nav__mobile {
    display: flex !important;
  }

  .nav__inner {
    height: 96px !important;
  }

  .brand {
    gap: 18px !important;
    min-width: 0 !important;
  }

  .brand__mark {
    width: 68px !important;
    height: 68px !important;
    border-radius: 18px !important;
  }

  .brand__mark svg {
    width: 50px !important;
    height: 50px !important;
  }

  .brand__name {
    font-size: 42px !important;
    line-height: .95 !important;
    letter-spacing: -0.045em !important;
  }

  .brand__sub {
    font-size: 10px !important;
    letter-spacing: .22em !important;
    margin-top: 7px !important;
    color: rgba(174,187,218,.88) !important;
  }

  .nav__toggle {
    width: 64px !important;
    height: 64px !important;
    border-radius: 16px !important;
  }

  .nav__toggle span {
    width: 34px !important;
    height: 3px !important;
  }
}

@media (max-width: 520px) {
  .nav__inner {
    height: 92px !important;
  }

  .brand__mark {
    width: 60px !important;
    height: 60px !important;
  }

  .brand__mark svg {
    width: 44px !important;
    height: 44px !important;
  }

  .brand__name {
    font-size: 35px !important;
  }

  .brand__sub {
    font-size: 8.5px !important;
    letter-spacing: .18em !important;
  }

  .nav__toggle {
    width: 56px !important;
    height: 56px !important;
  }

  .nav__toggle span {
    width: 30px !important;
  }
}

/* ===== RARIVEIL MOBILE MENU VISIBILITY FIX v3.1-c ===== */
/* إصلاح ظهور القائمة دائمًا */

.nav__mobile[hidden] {
  display: none !important;
}

@media (max-width: 1180px) {
  .nav__mobile[hidden] {
    display: none !important;
  }

  .nav__mobile:not([hidden]) {
    display: flex !important;
    position: fixed !important;
    top: 92px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 60 !important;
    background: rgba(5, 7, 15, .98) !important;
    border-bottom: 1px solid rgba(120,150,225,.16) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.45) !important;
  }
}

@media (max-width: 520px) {
  .nav__mobile:not([hidden]) {
    top: 92px !important;
  }
}

/* =========================================================
   RARIVEIL v3.1-d — Premium mobile/tablet identity improvement
   الهدف:
   - تقوية اسم Rariveil في الأعلى
   - جعل أول شاشة أهدأ وأفخم
   - منع شكل "سطح مكتب مصغّر" على الهاتف
   - إبقاء الطابع الأزرق الداكن الفخم
   ========================================================= */

/* هوية أعلى الصفحة */
@media (max-width: 1180px) {
  .nav__inner {
    height: 104px !important;
    padding-inline: 22px !important;
  }

  .brand {
    gap: 18px !important;
  }

  .brand__mark {
    width: 72px !important;
    height: 72px !important;
    border-radius: 20px !important;
    box-shadow:
      0 0 34px rgba(37,99,235,.34),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }

  .brand__mark svg {
    width: 52px !important;
    height: 52px !important;
  }

  .brand__name {
    font-size: 44px !important;
    line-height: .92 !important;
    font-weight: 900 !important;
    letter-spacing: -0.055em !important;
    background: linear-gradient(90deg, #ffffff 0%, #dbeafe 45%, #7dd3fc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
  }

  .brand__sub {
    font-size: 10.5px !important;
    letter-spacing: .23em !important;
    margin-top: 8px !important;
    color: rgba(174,187,218,.78) !important;
  }

  .nav__toggle {
    width: 66px !important;
    height: 66px !important;
    border-radius: 18px !important;
    background: rgba(120,150,225,.07) !important;
    border-color: rgba(120,150,225,.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  .nav__toggle span {
    width: 34px !important;
    height: 3px !important;
  }
}

/* أول شاشة: اجعلها أقوى وأقل ازدحامًا على الهاتف/العرض الضيق */
@media (max-width: 1180px) {
  .hero {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-top: 54px !important;
    padding-bottom: 76px !important;
  }

  .hero__copy {
    max-width: 760px !important;
  }

  .hero__title {
    font-size: clamp(54px, 11vw, 86px) !important;
    line-height: .96 !important;
    letter-spacing: -0.065em !important;
  }

  .hero__lede {
    max-width: 58ch !important;
    font-size: 18px !important;
    line-height: 1.72 !important;
    color: rgba(238,243,255,.82) !important;
  }

  .hero__badges {
    max-width: 760px !important;
    gap: 12px !important;
  }

  .badge {
    font-size: 13px !important;
    padding: 10px 15px !important;
    border-radius: 13px !important;
  }

  .hero__cta {
    margin-top: 30px !important;
  }

  .hero__cta .btn {
    min-height: 58px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
  }

  .hero__visual {
    position: absolute !important;
    right: 3% !important;
    top: 210px !important;
    width: 360px !important;
    height: 360px !important;
    min-height: 0 !important;
    opacity: .58 !important;
    pointer-events: none !important;
    z-index: -0 !important;
  }

  .beacon {
    width: 330px !important;
    height: 330px !important;
  }

  .hero__chip {
    font-size: 11px !important;
    opacity: .88 !important;
  }
}

/* في الهاتف الضيق: نخفي الزخرفة الكبيرة ونترك النص يسيطر */
@media (max-width: 640px) {
  .nav__inner {
    height: 98px !important;
    padding-inline: 20px !important;
  }

  .brand__mark {
    width: 64px !important;
    height: 64px !important;
  }

  .brand__mark svg {
    width: 46px !important;
    height: 46px !important;
  }

  .brand__name {
    font-size: 39px !important;
  }

  .brand__sub {
    font-size: 9px !important;
    letter-spacing: .20em !important;
  }

  .nav__toggle {
    width: 58px !important;
    height: 58px !important;
  }

  .nav__toggle span {
    width: 31px !important;
  }

  .hero {
    padding-top: 42px !important;
    padding-bottom: 64px !important;
  }

  .hero__visual {
    opacity: .22 !important;
    right: -90px !important;
    top: 180px !important;
    transform: scale(.9) !important;
  }

  .hero__title {
    font-size: clamp(48px, 13vw, 68px) !important;
  }

  .hero__lede {
    font-size: 17px !important;
    line-height: 1.75 !important;
  }

  .hero__badges {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-width: 460px !important;
  }

  .hero__cta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-width: 460px !important;
  }
}

/* لوحة التحكم: لا تجعلها تبدو كأنها شاشة كمبيوتر مصغرة جدًا */
@media (max-width: 1180px) {
  .command {
    padding-top: 76px !important;
  }

  .section-title {
    max-width: 22ch !important;
    font-size: clamp(34px, 6vw, 56px) !important;
  }

  .section-sub {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }

  .cc {
    border-radius: 26px !important;
    box-shadow:
      0 42px 110px -46px rgba(0,0,0,.92),
      0 0 0 1px rgba(120,150,225,.06),
      inset 0 1px 0 rgba(255,255,255,.07) !important;
  }

  .cc__body {
    grid-template-columns: 1fr !important;
  }

  .cc__side {
    display: none !important;
  }

  .cc__rail {
    border-left: none !important;
    border-top: 1px solid var(--line) !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .cc__stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .stat {
    min-height: 132px !important;
    padding: 22px !important;
  }

  .stat__value {
    font-size: 34px !important;
  }

  .panel__head h3 {
    font-size: 19px !important;
  }

  .tbl__row {
    font-size: 14px !important;
    padding: 14px 14px !important;
  }
}

@media (max-width: 640px) {
  .cc__stats {
    grid-template-columns: 1fr !important;
  }

  .cc__rail {
    grid-template-columns: 1fr !important;
  }

  .cc__chrome {
    padding: 14px !important;
  }

  .cc__title {
    font-size: 12px !important;
  }

  .cc__env {
    display: none !important;
  }

  .topo__svg {
    min-width: 620px !important;
  }

  .tbl__row {
    grid-template-columns: 1.5fr .8fr !important;
  }
}

/* مبادئ الهوية: أكبر وأفخم */
@media (max-width: 1180px) {
  .identity__line {
    font-size: clamp(34px, 6vw, 58px) !important;
    max-width: 24ch !important;
  }

  .principles__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .prin {
    padding: 34px 30px !important;
    border-radius: 24px !important;
  }

  .prin h3 {
    font-size: 24px !important;
  }

  .prin p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
}

@media (max-width: 640px) {
  .principles__grid {
    grid-template-columns: 1fr !important;
  }
}

/* v3.1 Candidate Hero Magnet visibility refinement */
@media (max-width: 760px){
  .beacon--magnet{
    transform:translateY(-8px) scale(1.08);
    opacity:.96;
  }

  .beacon__core--magnet{
    box-shadow:
      0 0 46px rgba(34,211,238,.34),
      0 0 92px rgba(59,130,246,.26),
      inset 0 1px 0 rgba(255,255,255,.20);
  }

  .magnet__dot{
    width:6px;
    height:6px;
    background:rgba(148,163,184,.46);
  }

  .magnet__rare{
    width:11px;
    height:11px;
    background:#22d3ee;
    box-shadow:
      0 0 20px rgba(34,211,238,.90),
      0 0 42px rgba(59,130,246,.45);
  }

  .magnet__pull{
    height:2px;
    opacity:.88;
    width:126px;
  }

  .hero__chip--1{
    top:12%;
    right:0;
  }

  .hero__chip--2{
    bottom:8%;
    left:0;
  }
}

/* v3.1 Candidate Hero Magnet final clarity pass */
@media (max-width: 760px){
  .hero__visual{
    min-height:260px;
    margin-top:-10px;
    margin-bottom:8px;
  }

  .beacon--magnet{
    transform:translateY(4px) scale(1.18);
    opacity:1;
  }

  .beacon__ring--1,
  .beacon__ring--2,
  .beacon__ring--3{
    border-color:rgba(122,162,255,.30);
  }

  .beacon__core--magnet{
    width:138px;
    height:138px;
    opacity:.96;
  }

  .beacon__core--magnet svg{
    transform:scale(1.12);
  }

  .magnet__pull{
    opacity:.95;
    height:2px;
  }

  .magnet__rare{
    width:12px;
    height:12px;
  }

  .hero__chip--1{
    top:auto;
    right:50%;
    bottom:-2px;
    transform:translateX(50%);
    white-space:nowrap;
    font-size:10.8px;
    background:rgba(8,16,38,.92);
  }

  .hero__chip--2{
    display:none;
  }
}

/* ===== Rariveil v3.2 mobile readability polish ===== */
@media (max-width: 680px) {
  .identity__card {
    padding: 34px 22px;
  }

  .identity__line {
    font-size: clamp(30px, 9.2vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.045em;
  }

  .identity__note {
    font-size: 14.5px;
    line-height: 1.75;
    letter-spacing: 0.01em;
    max-width: 34ch;
    margin-inline: auto;
  }

  #product {
    padding-bottom: 34px;
  }

  #fit {
    padding-top: 34px;
  }
}

@media (max-width: 420px) {
  .identity__line {
    font-size: clamp(28px, 9vw, 40px);
  }

  .identity__note {
    font-size: 14px;
    line-height: 1.72;
  }
}

/* ===== Rariveil v3.2 mobile readability polish ===== */
@media (max-width: 680px) {
  .identity__card {
    padding: 34px 22px;
  }

  .identity__line {
    font-size: clamp(30px, 9.2vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.045em;
  }

  .identity__note {
    font-size: 14.5px;
    line-height: 1.75;
    letter-spacing: 0.01em;
    max-width: 34ch;
    margin-inline: auto;
  }

  #product {
    padding-bottom: 34px;
  }

  #fit {
    padding-top: 34px;
  }
}

@media (max-width: 420px) {
  .identity__line {
    font-size: clamp(28px, 9vw, 40px);
  }

  .identity__note {
    font-size: 14px;
    line-height: 1.72;
  }
}

/* ===== Rariveil v3.2 mobile anchor/header overlap fix ===== */
#product,
#fit,
#identity,
#principles,
#access,
#login {
  scroll-margin-top: 110px;
}

@media (max-width: 680px) {
  #product,
  #fit,
  #identity,
  #principles,
  #access,
  #login {
    scroll-margin-top: 132px;
  }

  #product .identity__card {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  #product .identity__line {
    font-size: clamp(27px, 8.2vw, 38px);
    line-height: 1.14;
    letter-spacing: -0.04em;
  }

  #product .identity__note {
    margin-top: 24px;
    font-size: 13.8px;
    line-height: 1.68;
    letter-spacing: 0;
  }
}

@media (max-width: 420px) {
  #product .identity__line {
    font-size: clamp(25px, 7.8vw, 35px);
  }

  #product .identity__note {
    font-size: 13.5px;
    line-height: 1.65;
  }
}

/* ===== Rariveil v3.3 functional clarity sections ===== */
.job {
  padding-block: clamp(42px, 6vw, 86px);
}

.job__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.job__grid--four {
  grid-template-columns: repeat(4, 1fr);
}

.job__card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    rgba(10, 18, 42, .46);
  box-shadow: var(--shadow-soft);
}

.job__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}

.job__card h3 {
  font-size: 19px;
  margin-bottom: 10px;
}

.job__card p {
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.7;
}

@media (max-width: 980px) {
  .job__grid,
  .job__grid--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .job {
    padding-block: 38px;
  }

  .job__grid,
  .job__grid--four {
    grid-template-columns: 1fr;
  }

  .job__card {
    padding: 22px 20px;
  }

  .job__card h3 {
    font-size: 18px;
  }

  .job__card p {
    font-size: 14px;
  }
}

/* ===== Rariveil v3.4 two-start positioning ===== */
.job__card--accent {
  position: relative;
  overflow: hidden;
}

.job__card--accent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bright), var(--cyan));
  opacity: .9;
}

#two-starts .section-title {
  max-width: 20ch;
}

#two-starts .job__card h3 {
  min-height: 2.2em;
}

@media (max-width: 640px) {
  #two-starts .section-title {
    max-width: 12ch;
  }

  #two-starts .job__card h3 {
    min-height: auto;
  }
}

/* ===== Rariveil v3.4-fix1 mobile spacing refinement ===== */
#two-starts {
  padding-top: clamp(24px, 4vw, 52px);
}

#two-starts .section-head {
  margin-bottom: 26px;
}

#two-starts .section-sub {
  max-width: 50ch;
}

@media (max-width: 640px) {
  #two-starts {
    padding-top: 22px;
  }

  #two-starts .section-head {
    margin-bottom: 22px;
  }

  #two-starts .section-title {
    max-width: 13ch;
  }

  #two-starts .section-sub {
    font-size: 15.5px;
    line-height: 1.65;
  }
}