:root{
  --bg:#f7f9fc;
  --paper:#ffffff;
  --ink:#0b1220;
  --muted:#415067;
  --line:rgba(10,18,32,.12);

  --blue:#2e6dff;
  --teal:#14b8a6;
  --pink:#ff4d6d;

  /* CYRA */
  --cyraAccent:#ff2f6d;
  --cyraAccent2:#ff6aa6;
  --cyraFont:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial;

  --px:"Press Start 2P", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --term:"VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --ui:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial;

  --shadow: 0 28px 90px rgba(12, 20, 35, .12);
  --shadow2: 0 14px 42px rgba(12, 20, 35, .10);

  --radius: 22px;
  --gutter: clamp(16px, 3.2vw, 52px);

  --fade: 1200ms;
  --fade2: 1400ms;
  --float: 8px;

  --typeSpeedBoot: 48;
  --typeSpeedScene: 22;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  overflow:hidden;
  font-family: var(--ui);
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ====== WORLD BACKGROUND ====== */
.world{
  position:relative;
  height:100%;
  width:100%;
  background:
    radial-gradient(1100px 620px at 10% 0%, rgba(46,109,255,.16), transparent 60%),
    radial-gradient(900px 520px at 90% 10%, rgba(20,184,166,.14), transparent 60%),
    radial-gradient(800px 520px at 55% 105%, rgba(20,40,120,.10), transparent 60%),
    linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,0)),
    var(--bg);
  overflow:hidden;
}
.world:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(to right, rgba(11,18,32,.035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(to bottom, rgba(11,18,32,.030) 0 1px, transparent 1px 56px);
  opacity:.78;
  mix-blend-mode:multiply;
}
.world:after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.06) 0 1px, transparent 1px 7px);
  opacity:.10;
}

.traces{
  position:absolute; inset:-60px;
  pointer-events:none;
  opacity:.24;
  background:
    repeating-linear-gradient(120deg,
      rgba(16, 34, 90, 0.00) 0 68px,
      rgba(46,109,255,.18) 68px 70px,
      rgba(16, 34, 90, 0.00) 70px 140px,
      rgba(25, 90, 160,.16) 140px 142px,
      rgba(16, 34, 90, 0.00) 142px 220px
    );
  transform: translateX(-80px);
  animation: slideTraces 16s linear infinite;
  mix-blend-mode:multiply;
  filter: blur(.2px);
}
@keyframes slideTraces{
  from{ transform: translateX(-160px); }
  to{ transform: translateX(160px); }
}

.codebg{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.22;
  mix-blend-mode:multiply;
  font-family: var(--term);
  color: rgba(6, 22, 60, .95);
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .2px;
  filter: blur(.15px);

  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  height:100%;
  padding: 86px 10px 22px;
}
.codebg .lane{
  white-space:nowrap;
  overflow:hidden;
  transform: translateX(var(--x, 0px));
  animation: codedrift var(--dur, 18s) linear infinite;
  opacity: var(--op, .9);
  will-change: transform;
}
@keyframes codedrift{
  from{ transform: translateX(0); }
  to{ transform: translateX(-520px); }
}

/* ====== HUD ====== */
.hud{
  position:absolute;
  top:0; left:0; right:0;
  padding: 14px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  z-index: 50;
  background: rgba(247,249,252,.65);
  backdrop-filter: blur(10px);
  border-bottom: 1px dashed var(--line);
}
.brand{
  display:flex;
  align-items:baseline;
  gap: 10px;
  min-width: 240px;
}
.brand .name{
  font-family: var(--px);
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.brand .tag{
  font-family: var(--term);
  font-size: 18px;
  color: var(--muted);
  transform: translateY(2px);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}
.hudRight{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.kbd{
  font-family: var(--px);
  font-size: 10px;
  color: var(--muted);
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: 10px 12px;
  display:flex; gap:10px; align-items:center;
  box-shadow: var(--shadow2);
}
.kbd b{
  font-family: var(--px);
  color: var(--ink);
  font-weight: 700;
  border: 1px solid rgba(11,18,32,.16);
  background: rgba(255,255,255,.9);
  padding: 6px 8px;
  border-radius: 10px;
}
.navIcons{
  display:flex; gap:8px; align-items:center;
  border-left: 1px dashed var(--line);
  padding-left: 10px;
  margin-left: 2px;
}
.iconPill{
  cursor:pointer;
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(46,109,255,.08);
  border-radius: 999px;
  padding: 10px 12px;
  display:inline-flex; gap:10px; align-items:center;
  box-shadow: var(--shadow2);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  font-family: var(--px);
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.iconPill:hover{ transform: translateY(-2px); border-color: rgba(46,109,255,.35); background: rgba(46,109,255,.12); }
.iconPill i{ width:16px; height:16px; }

.lang{
  display:flex; gap:8px; align-items:center;
  border-left: 1px dashed var(--line);
  padding-left: 10px;
  margin-left: 2px;
}
.pill{
  cursor:pointer;
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: 10px 12px;
  display:inline-flex; gap:10px; align-items:center;
  box-shadow: var(--shadow2);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  font-family: var(--px);
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.pill:hover{ transform: translateY(-2px); border-color: rgba(46,109,255,.35); background: rgba(255,255,255,.92); }
.pill i{ width:16px; height:16px; }

/* ====== SCENE SYSTEM ====== */
.stage{
  position:absolute; inset:0;
  padding-top: 62px;
}
.scene{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  padding: clamp(18px, 3.2vw, 56px) var(--gutter);
  opacity:0;
  transform: translateY(18px) scale(.992);
  transition: opacity var(--fade) ease, transform var(--fade) ease;
  pointer-events:none;
}
.scene.active{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}
.scene.fadingOut{
  opacity:0;
  transform: translateY(-14px) scale(.994);
  pointer-events:none;
}

.frame{
  width: min(1480px, 100%);
  min-height: min(78vh, 860px);
  border-radius: var(--radius);
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  display:grid;
  align-items:stretch;
  backdrop-filter: blur(8px);
}
.frame:before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(820px 360px at 0% 0%, rgba(46,109,255,.12), transparent 58%),
    radial-gradient(720px 320px at 100% 100%, rgba(20,184,166,.11), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.0), rgba(255,255,255,.20));
}
.frame:after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(46,109,255,.06) 0 1px, transparent 1px 10px);
  opacity:.08;
  mix-blend-mode:multiply;
}

.frameInner{
  position:relative;
  padding: clamp(18px, 2.6vw, 34px);
  display:grid;
  gap: 16px;
  min-height: min(78vh, 860px);
}

.headline{
  font-family: var(--px);
  font-size: clamp(14px, 2vw, 22px);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin:0;
  line-height: 1.35;
}
.subline{
  font-family: var(--term);
  font-size: clamp(18px, 2.2vw, 28px);
  color: var(--muted);
  margin: 0;
  line-height: 1.15;
}

.btnRow{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  margin-top: 8px;
}
.btn{
  display:inline-flex;
  gap:10px; align-items:center;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  font-family: var(--px);
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  user-select:none;
  cursor:pointer;
}
.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(46,109,255,.35);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
}
.btn i{ width:16px; height:16px; }
.btn.red{
  border-color: rgba(255,77,109,.45);
  background: linear-gradient(0deg, rgba(255,77,109,.10), rgba(255,255,255,.92));
}

.btnBig{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width: min(520px, 100%);
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px dashed rgba(11,18,32,.22);
  background: linear-gradient(90deg, rgba(255,47,109,.90), rgba(255,106,166,.80));
  color: rgba(255,255,255,.98);
  box-shadow: 0 22px 70px rgba(255,47,109,.20);
  font-family: var(--px);
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor:pointer;
  transition: transform .16s ease, filter .16s ease;
  user-select:none;
}
.btnBig:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.btnBig i{ width:18px; height:18px; }

/* ====== NAV HINT ====== */
.navHint{
  position:absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow2);
  z-index: 5;
  user-select:none;
  opacity:.92;
  backdrop-filter: blur(8px);
}
.navHint span{
  font-family: var(--px);
  font-size: 9px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: var(--muted);
  white-space:nowrap;
}
.chev{
  width: 18px; height: 18px;
  display:grid; place-items:center;
  border-radius: 10px;
  border: 1px dashed rgba(11,18,32,.16);
  background: rgba(255,255,255,.88);
}
.chev i{ width:16px; height:16px; }
.navAnim{
  display:flex; gap:6px; align-items:center;
  animation: nudge 1.2s ease-in-out infinite;
}
@keyframes nudge{
  0%,100%{ transform: translateX(0); opacity:.9; }
  50%{ transform: translateX(8px); opacity:1; }
}

/* ====== BOOT ====== */
.bootFrame{
  width: min(1480px, 100%);
  min-height: min(78vh, 860px);
  border-radius: var(--radius);
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  display:grid;
  align-items:center;
  backdrop-filter: blur(8px);
}
.bootFrame:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(46,109,255,.14), transparent 60%),
    radial-gradient(700px 380px at 80% 80%, rgba(20,184,166,.12), transparent 60%),
    repeating-linear-gradient(to right, rgba(11,18,32,.035) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(11,18,32,.030) 0 1px, transparent 1px 24px);
  opacity:.85;
  pointer-events:none;
  mix-blend-mode:multiply;
}
.bootInner{
  position:relative;
  padding: clamp(18px, 3vw, 52px);
  display:grid;
  gap: 18px;
}
.terminal{
  border-radius: 18px;
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow2);
  padding: 16px 16px 18px;
  position:relative;
  overflow:hidden;
}
.terminalTop{
  display:flex;
  gap:10px;
  align-items:center;
  border-bottom: 1px dashed rgba(11,18,32,.14);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.led{ width:10px; height:10px; border-radius: 999px; background: var(--blue); box-shadow: 0 0 0 5px rgba(46,109,255,.10); }
.led.teal{ background: var(--teal); box-shadow: 0 0 0 5px rgba(20,184,166,.12); }
.led.pink{ background: var(--pink); box-shadow: 0 0 0 5px rgba(255,77,109,.10); }
.termTitle{
  font-family: var(--px);
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 6px;
  white-space: nowrap;
}
.typeWrap{
  font-family: var(--term);
  font-size: clamp(24px, 4vw, 54px);
  color: var(--ink);
  line-height: 1.05;
}
.cursor{
  display:inline-block;
  width: 12px;
  height: 1.05em;
  border-left: 3px solid rgba(11,18,32,.65);
  transform: translateY(3px);
  animation: blink 1s steps(2,end) infinite;
  margin-left: 6px;
}
@keyframes blink{ 50%{ opacity:0; } }

.bootHint{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  color: var(--muted);
  font-family: var(--px);
  font-size: 10px;
  letter-spacing:.6px;
  text-transform: uppercase;
}
.progressDots{
  margin-left:auto;
  display:flex; gap:8px; align-items:center;
}
.dot{
  width: 12px; height: 12px;
  border-radius: 999px;
  border: 1px dashed rgba(11,18,32,.22);
  background: rgba(255,255,255,.85);
  box-shadow: var(--shadow2);
  cursor:pointer;
  transition: transform .16s ease, border-color .16s ease;
}
.dot:hover{ transform: translateY(-1px); border-color: rgba(46,109,255,.35); }
.dot.on{
  background: linear-gradient(90deg, rgba(46,109,255,.55), rgba(20,184,166,.45));
  border-color: rgba(20,184,166,.45);
}

/* ====== HERO ====== */
.heroGrid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(16px, 3vw, 42px);
  align-items:center;
  min-height: min(78vh, 860px);
}
@media (max-width: 980px){
  .heroGrid{ grid-template-columns: 1fr; }
  .frame{ min-height:auto; }
  .frameInner{ min-height:auto; }
}
.photoWrap{
  display:grid;
  place-items:center;
  position:relative;
  min-height: min(520px, 55vh);
}
.ring{
  position:absolute;
  width: min(620px, 78vw);
  height: min(620px, 78vw);
  border-radius: 999px;
  border: 2px dashed rgba(46,109,255,.32);
  transform: rotate(9deg);
  pointer-events:none;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.08));
  animation: floaty 5.6s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform: rotate(9deg) translateY(0); }
  50%{ transform: rotate(10deg) translateY(calc(var(--float) * -1)); }
}
.photoCircle{
  width: min(520px, 72vw);
  aspect-ratio: 1/1;
  border-radius: 999px;
  overflow:hidden;
  border: 2px solid rgba(11,18,32,.16);
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadow);
  transform: rotate(-1.5deg);
  position:relative;
}
.photoCircle img{
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.02);
  filter: contrast(1.03) saturate(1.06);
}
.stamp{
  position:absolute;
  bottom: -14px;
  right: clamp(10px, 2vw, 22px);
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadow2);
  transform: rotate(2deg);
  max-width: 92%;
  font-family: var(--px);
  font-size: 10px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: var(--muted);
  backdrop-filter: blur(8px);
}
.stamp .mini{
  width: 10px; height: 10px; border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  box-shadow: 0 0 0 4px rgba(46,109,255,.10);
  transform: rotate(15deg);
}
.introCard{
  border-radius: var(--radius);
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
  backdrop-filter: blur(8px);
}
.introCard:before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(720px 320px at 0% 0%, rgba(46,109,255,.12), transparent 58%),
    radial-gradient(660px 280px at 100% 100%, rgba(20,184,166,.10), transparent 58%);
}
.introInner{
  position:relative;
  padding: clamp(16px, 2.2vw, 28px);
  display:grid;
  gap: 10px;
}
.kicker{
  font-family: var(--px);
  font-size: 10px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--muted);
  display:flex;
  gap:10px;
  align-items:center;
}
.kicker .spark{
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(20,184,166,.12);
  transform: rotate(15deg);
}
.bigTitle{
  font-family: var(--term);
  font-size: clamp(30px, 4.2vw, 56px);
  margin: 0;
  line-height: 1.02;
  letter-spacing: .2px;
  color: var(--ink);
}
.bigTitle .grad{
  background: linear-gradient(90deg, var(--blue), var(--teal));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  font-weight: 700;
}
.bio{
  font-family: var(--ui);
  color: var(--ink);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.55;
  margin: 0;
  max-width: 75ch;
}
.bio b{
  font-family: var(--px);
  font-size: 10px;
  letter-spacing:.6px;
  text-transform: uppercase;
  border-bottom: 1px dashed rgba(46,109,255,.35);
  padding-bottom: 2px;
}
.quickStack{
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed rgba(11,18,32,.14);
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.chip{
  font-family: var(--px);
  font-size: 10px;
  letter-spacing:.6px;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.88);
  color: var(--muted);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
  backdrop-filter: blur(8px);
}
.chip:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(240px 80px at 0% 0%, rgba(46,109,255,.12), transparent 60%);
  pointer-events:none;
}

/* ====== PROJECTS ====== */
.projGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .projGrid{ grid-template-columns: 1fr; }
}
.projCard{
  border-radius: 18px;
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow2);
  overflow:hidden;
  display:grid;
  grid-template-columns: 190px 1fr;
  min-height: 150px;
  cursor:pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  position:relative;
  backdrop-filter: blur(8px);
}
.projCard:hover{
  transform: translateY(-3px);
  border-color: rgba(46,109,255,.35);
  box-shadow: var(--shadow);
}
.thumb{
  position:relative;
  border-right: 1px dashed rgba(11,18,32,.14);
  background: linear-gradient(180deg, rgba(46,109,255,.08), rgba(20,184,166,.06));
  overflow:hidden;
}
.thumb:after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(to right, rgba(11,18,32,.040) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(11,18,32,.030) 0 1px, transparent 1px 24px);
  opacity:.7;
  mix-blend-mode:multiply;
}
.thumb img{
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.02);
  transition: transform .2s ease;
  position:relative;
  z-index:1;
  filter: contrast(1.02) saturate(1.06);
}
.projCard:hover .thumb img{ transform: scale(1.06); }
.projBody{
  padding: 14px 14px 16px;
  position:relative;
  z-index:1;
  display:grid;
  gap: 8px;
  min-width:0;
}
.projHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.projName{
  font-family: var(--term);
  font-size: 28px;
  line-height:1;
  margin:0;
  color: var(--ink);
  letter-spacing:.2px;
}
.projStatus{
  font-family: var(--px);
  font-size: 9px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.84);
  padding: 8px 10px;
  border-radius: 999px;
  white-space:nowrap;
  backdrop-filter: blur(8px);
}
.projDesc{
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
  margin:0;
  max-width: 80ch;
}
.projTags{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 6px;
}
.tag{
  font-family: var(--px);
  font-size: 9px;
  letter-spacing:.6px;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(11,18,32,.14);
  background: rgba(255,255,255,.90);
  color: var(--muted);
  white-space:nowrap;
  backdrop-filter: blur(8px);
}
@media (max-width: 560px){
  .projCard{ grid-template-columns: 1fr; }
  .thumb{ border-right:none; border-bottom: 1px dashed rgba(11,18,32,.14); height: 170px; }
}

/* ====== TOOLS / XP / CERTS ====== */
.proofShell{
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  position:relative;
  min-height: min(78vh, 860px);
  backdrop-filter: none;
}
.proofShell:before{ content:none; }

.proofInner{
  position:relative;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 12px;
  height: 100%;
}
.proofTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
  border-bottom: 1px dashed rgba(11,18,32,.14);
  padding-bottom: 12px;
}
.proofTop h2{
  margin:0;
  font-family: var(--px);
  font-size: 12px;
  letter-spacing:.8px;
  text-transform: uppercase;
  line-height: 1.4;
}
.proofTop .hint{
  font-family: var(--term);
  font-size: 18px;
  color: var(--muted);
  text-align:right;
  max-width: 52ch;
  line-height:1.05;
}

.proofGrid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items:stretch;
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 980px){
  .proofGrid3{ grid-template-columns: 1fr; }
  .proofShell{ min-height:auto; }
}

.board{
  border-radius: 18px;
  border: 1px dashed rgba(11,18,32,.16);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  min-height: 0;
  backdrop-filter: blur(8px);
}
.board.tools:before,
.board.xp:before,
.board.certs:before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  opacity:.95;
}
.board.tools:before{ background: radial-gradient(520px 160px at 0% 0%, rgba(46,109,255,.12), transparent 60%); }
.board.xp:before{ background: radial-gradient(520px 160px at 0% 0%, rgba(20,184,166,.12), transparent 60%); }
.board.certs:before{ background: radial-gradient(520px 160px at 0% 0%, rgba(255,77,109,.10), transparent 60%); }

.boardHead{
  position:relative;
  padding: 12px 14px;
  border-bottom: 1px dashed rgba(11,18,32,.14);
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:flex-end;
}
.boardHead .ttl{
  font-family: var(--px);
  font-size: 10px;
  letter-spacing:.7px;
  text-transform: uppercase;
  color: var(--muted);
  margin:0;
}
.boardHead .sub{
  font-family: var(--term);
  font-size: 18px;
  color: var(--muted);
  margin:0;
  line-height:1.05;
  text-align:right;
}
.boardBody{
  position: relative;
  padding: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}


.itemCard{
  border-radius: 16px;
  border: 1px dashed rgba(11,18,32,.16);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  backdrop-filter: blur(8px);
}
.itemCard:hover{
  transform: translateY(-2px);
  border-color: rgba(46,109,255,.35);
  box-shadow: var(--shadow);
}
.itemCard:before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  background: radial-gradient(420px 140px at 0% 0%, rgba(20,184,166,.08), transparent 60%);
  opacity:.9;
}
.logo{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.88);
  flex: 0 0 auto;
  z-index:1;
  display:grid;
  place-items:center;
  font-family: var(--px);
  font-size: 10px;
  color: var(--muted);
  backdrop-filter: blur(8px);
}
.logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.itemBody{ z-index:1; min-width:0; }
.itemTitle{
  font-family: var(--term);
  font-size: 22px;
  line-height:1.05;
  margin: 2px 0 0;
  color: var(--ink);
}
.itemMeta{
  margin-top: 6px;
  font-family: var(--px);
  font-size: 9px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}
.itemDesc{
  margin-top: 8px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
}

/* tiles retangulares (tools) */
.toolTile{
  border-radius: 16px;
  border: 1px dashed rgba(11,18,32,.16);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 12px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  backdrop-filter: blur(8px);
}
.toolTile:hover{
  transform: translateY(-2px);
  border-color: rgba(46,109,255,.35);
  box-shadow: var(--shadow);
}
.toolTile:before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  opacity:.95;
  background: radial-gradient(520px 160px at 0% 0%, rgba(46,109,255,.10), transparent 62%);
}
.toolIcon{
  width: 44px; height: 44px;
  border-radius: 14px;
  flex: 0 0 auto;
  display:grid;
  place-items:center;
  border: 1px dashed rgba(11,18,32,.16);
  box-shadow: 0 10px 26px rgba(12,20,35,.10);
  position:relative;
  z-index:1;
}
.toolIcon i{ width:18px; height:18px; }

.toolTile[data-tone="blue"] .toolIcon{
  background: linear-gradient(180deg, rgba(46,109,255,.20), rgba(255,255,255,.75));
}
.toolTile[data-tone="teal"] .toolIcon{
  background: linear-gradient(180deg, rgba(20,184,166,.20), rgba(255,255,255,.75));
}
.toolTile[data-tone="pink"] .toolIcon{
  background: linear-gradient(180deg, rgba(255,77,109,.18), rgba(255,255,255,.75));
}
.toolTile[data-tone="violet"] .toolIcon{
  background: linear-gradient(180deg, rgba(124,58,237,.16), rgba(255,255,255,.75));
}
.toolTile[data-tone="amber"] .toolIcon{
  background: linear-gradient(180deg, rgba(245,158,11,.18), rgba(255,255,255,.75));
}
.toolTile[data-tone="slate"] .toolIcon{
  background: linear-gradient(180deg, rgba(100,116,139,.18), rgba(255,255,255,.75));
}

.toolMain{ min-width:0; position:relative; z-index:1; flex:1 1 auto; }
.toolTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.toolName{
  font-family: var(--term);
  font-size: 22px;
  line-height:1.05;
  margin:0;
  color: var(--ink);
}
.toolCount{
  font-family: var(--px);
  font-size: 9px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.88);
  padding: 8px 10px;
  border-radius: 999px;
  white-space:nowrap;
}
.toolDesc{
  margin-top: 6px;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.toolPreview{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ====== CYRA ====== */
.cyraHero{
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  position:relative;
  min-height: auto;
  display:grid;
  padding: clamp(24px, 4vh, 64px) 0;
  place-items:center;
  backdrop-filter: none;
}
.cyraHero:before{ content:none; }

.cyraInner{
  position:relative;
  width: min(1100px, 100%);
  padding: 0;
  display:grid;
  align-items:center;
}
.cyraGrid{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(18px, 3vw, 44px);
  align-items:center;
}
@media (max-width: 980px){
  .cyraGrid{ grid-template-columns: 1fr; }
}

.cyraLeft{
  display:grid;
  place-items:center start;
}
@media (max-width: 980px){
  .cyraLeft{ place-items:center; }
}

.cyraLogoBig{
  width: min(520px, 46vw);
  max-width: 520px;
  height: auto;
  object-fit: contain;
  display:block;
  filter:
    drop-shadow(0 22px 60px rgba(255,47,109,.18))
    saturate(1.08) contrast(1.04);
}

.cyraRight{
  display:grid;
  gap: 14px;
  justify-items:start;
}
@media (max-width: 980px){
  .cyraRight{ justify-items:center; text-align:center; }
}

.cyraName{
  margin:0;
  font-family: var(--cyraFont);
  font-size: clamp(46px, 5.4vw, 78px);
  letter-spacing: .2px;
  line-height: .95;
  color: var(--ink);
}
.cyraName .grad{
  background: linear-gradient(90deg, var(--cyraAccent), var(--cyraAccent2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  font-weight: 700;
}
.cyraRole{
  margin-top: 2px;
  font-family: var(--px);
  font-size: 10px;
  letter-spacing:.8px;
  text-transform: uppercase;
  color: var(--muted);
}
.cyraPitch{
  margin:0;
  font-family: var(--cyraFont);
  font-weight: 600;
  font-size: clamp(22px, 2.7vw, 34px);
  line-height: 1.10;
  color: var(--ink);
  max-width: 44ch;
}
.cyraCopy{
  margin:0;
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 72ch;
}
.cyraCopy b{
  font-family: var(--px);
  font-size: 10px;
  letter-spacing:.6px;
  text-transform: uppercase;
  border-bottom: 1px dashed rgba(255,47,109,.40);
  padding-bottom: 2px;
}
.cyraBadges{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  margin-top: 6px;
}
@media (max-width: 980px){
  .cyraBadges{ justify-content:center; }
}
.cyraBadge{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(11,18,32,.16);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  font-family: var(--px);
  font-size: 10px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.cyraActions{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
}
@media (max-width: 980px){
  .cyraActions{ justify-content:center; }
}

/* ====== MODALS ====== */
.modal{
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  background: rgba(10, 15, 18, .30);
  backdrop-filter: blur(12px);
  padding: clamp(14px, 3vw, 28px);
  z-index: 80;
}
.modal.show{ display:grid; }

.sheet{
  width: min(1100px, 100%);
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  border: 1px dashed rgba(11,18,32,.22);
  box-shadow: 0 28px 90px rgba(0,0,0,.18);
  overflow:hidden;
  transform: translateY(10px);
  opacity:0;
  transition: .18s ease;
  position:relative;
}
.modal.show .sheet{ transform: translateY(0); opacity:1; }
.sheetTop{
  padding: 16px 18px;
  border-bottom: 1px dashed rgba(11,18,32,.18);
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:flex-start;
}
.sheetTitle{
  font-family: var(--term);
  font-size: 38px;
  line-height:1;
  margin:0;
}
.sheetSub{
  margin-top: 8px;
  font-family: var(--ui);
  color: var(--muted);
  line-height:1.45;
  max-width: 90ch;
}
.xbtn{
  cursor:pointer;
  border: 1px dashed rgba(11,18,32,.22);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 10px 12px;
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-family: var(--px);
  font-size: 10px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: var(--muted);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  white-space:nowrap;
}
.xbtn:hover{ transform: translateY(-1px); border-color: rgba(255,77,109,.35); box-shadow: var(--shadow2); }
.xbtn i{ width:16px; height:16px; }

.sheetBody{
  padding: 16px 18px 18px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
}
@media (max-width: 960px){
  .sheetBody{ grid-template-columns: 1fr; }
}
.box{
  border: 1px dashed rgba(11,18,32,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  padding: 14px;
}
.box h4{
  margin:0;
  font-family: var(--px);
  font-size: 10px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.box ul{
  margin: 10px 0 0;
  padding-left: 18px;
  font-family: var(--ui);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.box li{ margin: 7px 0; }
.sheetActions{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.mutedNote{
  font-family: var(--px);
  font-size: 9px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

.wipe{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  z-index: 70;
  background:
    radial-gradient(1200px 640px at 0% 0%, rgba(46,109,255,.18), transparent 62%),
    radial-gradient(1200px 640px at 100% 100%, rgba(20,184,166,.16), transparent 62%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.10) 0 1px, transparent 1px 8px);
  mix-blend-mode:multiply;
  transition: opacity var(--fade2) ease;
}
.wipe.on{ opacity:1; }

.modalCard{
  width: min(980px, 100%);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  border: 1px dashed rgba(11,18,32,.22);
  box-shadow: 0 28px 90px rgba(0,0,0,.18);
  overflow:hidden;
  transform: translateY(10px);
  opacity:0;
  transition: .18s ease;
  position:relative;
}
.modal.show .modalCard{ transform: translateY(0); opacity:1; }
.modalHead{
  padding: 16px 18px;
  border-bottom: 1px dashed rgba(11,18,32,.18);
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:flex-start;
}
.modalTitle{
  font-family: var(--term);
  font-size: 40px;
  line-height: 1;
  margin:0;
}
.modalSub{
  margin-top: 8px;
  font-family: var(--ui);
  color: var(--muted);
  line-height:1.45;
  max-width: 92ch;
}
.mClose{
  cursor:pointer;
  border: 1px dashed rgba(11,18,32,.22);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 10px 12px;
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-family: var(--px);
  font-size: 10px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: var(--muted);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  white-space:nowrap;
}
.mClose:hover{ transform: translateY(-1px); border-color: rgba(255,77,109,.35); box-shadow: var(--shadow2); }
.mClose i{ width:16px; height:16px; }
.modalBody{
  padding: 16px 18px 18px;
  max-height: min(62vh, 620px);
  overflow:auto;
}
.modalFoot{
  padding: 14px 18px;
  border-top: 1px dashed rgba(11,18,32,.18);
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:center;
  flex-wrap:wrap;
}

.chipsGrid{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.srOnly{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); border:0;
}
/* ===== Scroll geral só em mobile ===== */
@media (max-width: 820px), (max-height: 720px) {
  body { overflow: auto; }
  .world { overflow: auto; }   /* garante que o background não “prenda” */
  .stage { height: auto; }     /* deixa a página crescer */
  .scene { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
  .scene:not(.active){ display:none; } /* mantém a lógica de “1 cena por vez” */
}

/* ========================
/* ===== Compactar cena de Ferramentas (Scene 3) ===== */

/* menos “respiro” dentro do frame nessa cena */
.scene[data-scene="3"] .frameInner{
  padding: clamp(12px, 1.6vw, 22px);
  gap: 10px;
}

/* topo mais baixo */
.scene[data-scene="3"] .proofTop{
  padding-bottom: 8px;
}
.scene[data-scene="3"] .proofTop h2{
  font-size: 10px;
}
.scene[data-scene="3"] .proofTop .hint{
  font-size: 16px;
  line-height: 1.05;
}

/* grid mais “apertado” */
.scene[data-scene="3"] .proofGrid3{
  gap: 10px;
}

/* cabeçalho dos boards menor */
.scene[data-scene="3"] .boardHead{
  padding: 10px 12px;
}
.scene[data-scene="3"] .boardHead .ttl{
  font-size: 9px;
}
.scene[data-scene="3"] .boardHead .sub{
  font-size: 16px;
}

/* corpo com menos padding */
.scene[data-scene="3"] .boardBody{
  padding: 10px;
}

/* Tool tiles menores */
.scene[data-scene="3"] .toolTile{
  padding: 10px;
  gap: 10px;
}
.scene[data-scene="3"] .toolIcon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
.scene[data-scene="3"] .toolIcon i{ width: 16px; height: 16px; }

.scene[data-scene="3"] .toolName{
  font-size: 19px;
}
.scene[data-scene="3"] .toolDesc{
  font-size: 11px;
}
.scene[data-scene="3"] .toolPreview .tag{
  padding: 7px 9px;
  font-size: 8px;
}

/* XP / Certs cards menores */
.scene[data-scene="3"] .itemCard{
  padding: 9px;
  gap: 9px;
}
.scene[data-scene="3"] .logo{
  width: 40px;
  height: 40px;
  border-radius: 14px;
}
.scene[data-scene="3"] .itemTitle{
  font-size: 19px;
}
.scene[data-scene="3"] .itemDesc{
  font-size: 12px;
}

/* ===== Ajustes finais: Scene 3 mais “one-screen” (sem scroll interno) ===== */
.scene[data-scene="3"] .boardBody{
  overflow: hidden;          /* sem scroll dentro dos cards */
}

/* deixa chips mais compactos no modal também */
.scene[data-scene="3"] .chipsGrid{
  gap: 8px;
}

/* reduz um pouco a “altura percebida” dos cards de XP/CERT */
.scene[data-scene="3"] .itemDesc{
  line-height: 1.38;
}

/* tags mais compactas (já tinha, mas garante consistência) */
.scene[data-scene="3"] .tag{
  padding: 6px 9px;
}

/* ====== TOOLS / XP / CERTS ====== */
.proofShell{
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  position:relative;
  min-height: min(78vh, 860px);
  backdrop-filter: none;
}
.proofShell:before{ content:none; }

.proofInner{
  position:relative;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 12px;
  height: 100%;
}
.proofTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
  border-bottom: 1px dashed rgba(11,18,32,.14);
  padding-bottom: 12px;
}
.proofTop h2{
  margin:0;
  font-family: var(--px);
  font-size: 12px;
  letter-spacing:.8px;
  text-transform: uppercase;
  line-height: 1.4;
}
.proofTop .hint{
  font-family: var(--term);
  font-size: 18px;
  color: var(--muted);
  text-align:right;
  max-width: 52ch;
  line-height:1.05;
}

.proofGrid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items:stretch;
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 980px){
  .proofGrid3{ grid-template-columns: 1fr; }
  .proofShell{ min-height:auto; }
}

.board{
  border-radius: 18px;
  border: 1px dashed rgba(11,18,32,.16);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  min-height: 0;
  backdrop-filter: blur(8px);
}
.board.tools:before,
.board.xp:before,
.board.certs:before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  opacity:.95;
}
.board.tools:before{ background: radial-gradient(520px 160px at 0% 0%, rgba(46,109,255,.12), transparent 60%); }
.board.xp:before{ background: radial-gradient(520px 160px at 0% 0%, rgba(20,184,166,.12), transparent 60%); }
.board.certs:before{ background: radial-gradient(520px 160px at 0% 0%, rgba(255,77,109,.10), transparent 60%); }

.boardHead{
  position:relative;
  padding: 12px 14px;
  border-bottom: 1px dashed rgba(11,18,32,.14);
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:flex-end;
}
.boardHead .ttl{
  font-family: var(--px);
  font-size: 10px;
  letter-spacing:.7px;
  text-transform: uppercase;
  color: var(--muted);
  margin:0;
}
.boardHead .sub{
  font-family: var(--term);
  font-size: 18px;
  color: var(--muted);
  margin:0;
  line-height:1.05;
  text-align:right;
}
.boardBody{
  position: relative;
  padding: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto; /* padrão geral (scene 3 vamos travar abaixo) */
}

/* Cards XP/CERT */
.itemCard{
  border-radius: 16px;
  border: 1px dashed rgba(11,18,32,.16);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  backdrop-filter: blur(8px);
}
.itemCard:hover{
  transform: translateY(-2px);
  border-color: rgba(46,109,255,.35);
  box-shadow: var(--shadow);
}
.itemCard:before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  background: radial-gradient(420px 140px at 0% 0%, rgba(20,184,166,.08), transparent 60%);
  opacity:.9;
}
.logo{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px dashed rgba(11,18,32,.18);
  background: rgba(255,255,255,.88);
  flex: 0 0 auto;
  z-index:1;
  display:grid;
  place-items:center;
  font-family: var(--px);
  font-size: 10px;
  color: var(--muted);
  backdrop-filter: blur(8px);
}
.logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.itemBody{ z-index:1; min-width:0; }
.itemTitle{
  font-family: var(--term);
  font-size: 22px;
  line-height:1.05;
  margin: 2px 0 0;
  color: var(--ink);
}
.itemMeta{
  margin-top: 6px;
  font-family: var(--px);
  font-size: 9px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}
.itemDesc{
  margin-top: 8px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
}

/* ===== Ferramentas: tiles mais altos, cores vivas, animados, ícones mais fortes ===== */
@keyframes tileFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes neonSweep {
  0% { transform: translateX(-30%); opacity: .0; }
  18% { opacity: .55; }
  55% { opacity: .0; }
  100% { transform: translateX(130%); opacity: 0; }
}

.toolTile{
  border-radius: 18px;
  border: 1px dashed rgba(11,18,32,.16);
  background: rgba(255,255,255,.90);
  box-shadow: var(--shadow2);
  padding: 16px 14px;         /* ✅ mais alto */
  min-height: 110px;          /* ✅ mais alto */
  display:flex;
  gap: 14px;
  align-items:flex-start;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
  backdrop-filter: blur(8px);
  animation: tileFloat 4.6s ease-in-out infinite;
}
.toolTile:hover{
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(46,109,255,.42);
  box-shadow: var(--shadow);
  filter: brightness(1.03) saturate(1.08);
}

/* brilho “arcade” passando */
.toolTile:after{
  content:"";
  position:absolute;
  inset:-30%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: translateX(-30%);
  opacity:0;
  pointer-events:none;
}
.toolTile:hover:after{
  animation: neonSweep 1.15s ease-out;
}

/* base overlay por categoria (vivo) */
.toolTile:before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  opacity:.95;
  background: radial-gradient(520px 160px at 0% 0%, rgba(46,109,255,.10), transparent 62%);
}

/* “badge”/ícone mais forte */
.toolIcon{
  width: 52px; height: 52px;        /* ✅ maior */
  border-radius: 16px;
  flex: 0 0 auto;
  display:grid;
  place-items:center;
  border: 1px dashed rgba(11,18,32,.18);
  box-shadow: 0 12px 30px rgba(12,20,35,.14);
  position:relative;
  z-index:1;
}
.toolIcon i{ width:22px; height:22px; }

/* quando o lucide injetar o SVG */
.toolIcon svg{
  width: 24px;
  height: 24px;
  stroke-width: 2.6;              /* ✅ “SVG mais forte” */
}

/* cores vivas por tone */
.toolTile[data-tone="blue"]{
  background: linear-gradient(180deg, rgba(46,109,255,.16), rgba(255,255,255,.90));
}
.toolTile[data-tone="blue"] .toolIcon{
  background: linear-gradient(180deg, rgba(46,109,255,.55), rgba(255,255,255,.75));
}

.toolTile[data-tone="teal"]{
  background: linear-gradient(180deg, rgba(20,184,166,.16), rgba(255,255,255,.90));
}
.toolTile[data-tone="teal"] .toolIcon{
  background: linear-gradient(180deg, rgba(20,184,166,.60), rgba(255,255,255,.75));
}

.toolTile[data-tone="pink"]{
  background: linear-gradient(180deg, rgba(255,77,109,.16), rgba(255,255,255,.90));
}
.toolTile[data-tone="pink"] .toolIcon{
  background: linear-gradient(180deg, rgba(255,77,109,.60), rgba(255,255,255,.76));
}

.toolTile[data-tone="violet"]{
  background: linear-gradient(180deg, rgba(124,58,237,.16), rgba(255,255,255,.90));
}
.toolTile[data-tone="violet"] .toolIcon{
  background: linear-gradient(180deg, rgba(124,58,237,.62), rgba(255,255,255,.76));
}

.toolTile[data-tone="amber"]{
  background: linear-gradient(180deg, rgba(245,158,11,.16), rgba(255,255,255,.90));
}
.toolTile[data-tone="amber"] .toolIcon{
  background: linear-gradient(180deg, rgba(245,158,11,.62), rgba(255,255,255,.76));
}

.toolMain{ min-width:0; position:relative; z-index:1; flex:1 1 auto; }
.toolTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.toolName{
  font-family: var(--term);
  font-size: 24px;          /* ✅ maior */
  line-height:1.05;
  margin:0;
  color: var(--ink);
}
.toolDesc{
  margin-top: 6px;
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}
.toolPreview{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ====== Scene 3 compact / sem scroll interno ====== */
/* menos “respiro” dentro do frame nessa cena */
.scene[data-scene="3"] .frameInner{
  padding: clamp(12px, 1.6vw, 22px);
  gap: 10px;
}

/* topo mais baixo */
.scene[data-scene="3"] .proofTop{
  padding-bottom: 8px;
}
.scene[data-scene="3"] .proofTop h2{
  font-size: 10px;
}
.scene[data-scene="3"] .proofTop .hint{
  font-size: 16px;
  line-height: 1.05;
}

/* grid mais “apertado” */
.scene[data-scene="3"] .proofGrid3{
  gap: 10px;
}

/* cabeçalho dos boards menor */
.scene[data-scene="3"] .boardHead{
  padding: 10px 12px;
}
.scene[data-scene="3"] .boardHead .ttl{
  font-size: 9px;
}
.scene[data-scene="3"] .boardHead .sub{
  font-size: 16px;
}

/* corpo com menos padding e SEM SCROLL dentro */
.scene[data-scene="3"] .boardBody{
  padding: 10px;
  overflow: hidden;     /* ✅ “uma tela” */
}

/* Tool tiles na cena 3: ainda maiores verticalmente mas compactos no texto */
.scene[data-scene="3"] .toolTile{
  padding: 14px 12px;
  min-height: 112px;
  gap: 12px;
}
.scene[data-scene="3"] .toolIcon{
  width: 50px;
  height: 50px;
  border-radius: 16px;
}
.scene[data-scene="3"] .toolIcon svg{
  width: 24px;
  height: 24px;
  stroke-width: 2.7;
}
.scene[data-scene="3"] .toolName{
  font-size: 22px;
}
.scene[data-scene="3"] .toolDesc{
  font-size: 11.5px;
}
.scene[data-scene="3"] .toolPreview .tag{
  padding: 7px 9px;
  font-size: 8px;
}

/* XP / Certs cards menores */
.scene[data-scene="3"] .itemCard{
  padding: 9px;
  gap: 9px;
}
.scene[data-scene="3"] .logo{
  width: 40px;
  height: 40px;
  border-radius: 14px;
}
.scene[data-scene="3"] .itemTitle{
  font-size: 19px;
}
.scene[data-scene="3"] .itemDesc{
  font-size: 12px;
  line-height: 1.38;
}