/* ===============================
   Base
=============================== */
:root{
  --accent: #00ffcc;
  --accent-soft: rgba(0,255,204,.22);
  --bg-0: #000;
  --bg-1: #0a0f0e;
  --bg-2: #121a17;
  --fg: #dff8f0;
  --muted: #9fdac7;
  scrollbar-color: #b5315d rgba(16, 24, 16, 0.6);  /* thumb, track */
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
	*::-webkit-scrollbar-track { background: #0b0b0b; }
	*::-webkit-scrollbar-thumb {
	  background: #b5315d;
	  border-radius: 8px;
	  border: 2px solid #0b0b0b;
	}
	*::-webkit-scrollbar-corner { background: #0b0b0b; }

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; background:var(--bg-0); color:var(--accent); font-family:ui-monospace, Menlo, Consolas, "Courier New", monospace; }
a{ color:inherit; text-decoration:none; }
section{ padding: 24px 20px; }
.container{ max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.container-small{ max-width: 740px; margin: 0 auto; padding: 0 20px; }

/* Matrix background canvas */
#matrixBackground{ position:fixed; inset:0; pointer-events:none; opacity:.28; z-index:0; }
canvas{ display:block; width:100%; height:100%; }

/* Headings */
.section-title{
  font-size: 28px; letter-spacing: 2px; text-transform: uppercase;
  text-align:center; margin: 8px 0 26px;
}

/* ===============================
   3D Carousel (opaque cards)
=============================== */
.df3d{
  --card-w: 320px;   /* adjust if you want different size */
  --card-h: 500px;

  position: relative;
  max-width: 1600px;
  margin: 24px auto 30px;
  padding: 0 28px;
  z-index: 1; /* sits above matrix */
}
.df3d__track{
  list-style:none; margin:0; padding:0;
  height: calc(var(--card-h) + 200px);
  position:relative; perspective: 1400px;
}
.df3d__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:58px; height:58px; border-radius:50%;
  border:1px solid rgba(90,210,170,.45);
  background: rgba(10,16,14,.88);
  cursor:pointer; z-index:2;
}
.df3d__nav--prev{ left: 10px; }
.df3d__nav--next{ right: 10px; }
.df3d__nav span{
  position:absolute; inset:0; margin:auto; width:12px; height:12px;
  border-top:2px solid #bfffe8; border-right:2px solid #bfffe8;
}
.df3d__nav--prev span{ transform: rotate(-135deg); }
.df3d__nav--next span{ transform: rotate(45deg); }

.df3d__dots{ display:flex; justify-content:center; gap:12px; margin-top: 12px; }
.df3d__dots button{
  width:16px; height:10px; border-radius:999px; cursor:pointer;
  background: rgba(16,24,20,.9); border:1px solid rgba(90,210,170,.45);
}
.df3d__dots button[aria-selected="true"]{
  background: linear-gradient(90deg,#6bffb8,#90ffe0);
  border-color: rgba(170,255,230,.9);
}

.df3d__card{
  position:absolute; top:72px; left:50%;
  width: var(--card-w); height: var(--card-h);
  transform-style: preserve-3d;
  /* fully opaque */
  background: var(--bg-2);
  border: 1px solid rgba(120,255,210,.28);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 24px 72px rgba(120,255,210,.10),
    0 10px 30px rgba(0,0,0,.55);
  overflow:hidden;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s, border-color .3s, filter .3s;
}
.df3d__card[data-active="true"]{
  border-color: rgba(170,255,230,.55);
  filter: brightness(1.02);
}
.df3d__link{ display:block; width:100%; height:100%; position:relative; color:#eaf7f1; }
.df3d__head{
  position:absolute; left:14px; top:10px; z-index:1;
  padding:6px 10px; border-radius:12px; font-size:13px; letter-spacing:.3px;
  background: rgba(16,24,20,.95); color:#bfffe8; border:1px solid rgba(90,210,170,.45);
}
.df3d__preview{ position:absolute; inset:0; padding:50px 14px 12px 14px; background: var(--bg-2); }
.df3d__preview > img, .df3d__preview > video, .df3d__preview > iframe{
  width:100%; height:100%; display:block; border-radius:10px; object-fit: cover; object-position:center;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
/* terminal-style text block */
.df3d__term{
  display:grid; grid-template-rows:auto 1fr; height:100%;
  border:1px solid rgba(90,210,170,.35); border-radius:10px; overflow:hidden; background: #0b1110;
}
.df3d__term .bar{ padding:8px 12px; background:#121a17; color:#bfffe8; font:14px ui-monospace,Menlo,Consolas,monospace; }
.df3d__term pre{ margin:0; padding:12px; white-space:pre-wrap; color:#a4d6c4; font:14px ui-monospace,Menlo,Consolas,monospace; }

/* no little corner arrow on cards */
.df3d__arrow{ display:none; }

/* mobile sizing */
@media (max-width: 980px){
  .df3d{ --card-w: 88vw; --card-h: 58vw; }
  .df3d__track{ height: calc(var(--card-h) + 18vw); }
  .df3d__nav{ width:50px; height:50px; }
}

/* ===============================
   Access + Story boxes (unchanged look)
=============================== */
.fragment-box{
  opacity: 0; transform: translateY(30px);
  background: #0b1110; border: 1px solid rgba(0,255,204,.35);
  box-shadow: 0 0 10px rgba(0,255,204,.15);
  padding: 18px; width: 90%; max-width: 680px; min-height: 60px;
  border-radius: 10px; text-align: left; transition: opacity .8s, transform .8s;
  margin: 8px auto;
}
.fragment-nobox{ border:none; box-shadow:none; padding:0; }
.button-wrapper{ text-align:center; }
#access-button{
  padding: 12px 22px; border-radius: 10px; border: none; cursor: pointer;
  color:#00110d; background: linear-gradient(90deg,#00ffea,#00ffe0);
  font-weight: 700; box-shadow: 0 0 14px rgba(0,255,204,.35);
}
#fragment-box-story{ display:none; }

/* ===============================
   PROTOCAL-METRIX (modern)
=============================== */
.proto{ padding: 28px 20px; position: relative; z-index:1; }
.proto__header{ text-align:center; margin-bottom: 18px; }
.proto__header h2{
  margin:0;
  font-size: 26px; letter-spacing: 1.5px; text-transform: uppercase;
}
.proto__header em{ font-style: normal; color: var(--muted); }
#cursor{ animation: blink 1s infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }
.proto__sub{
  margin: 8px auto 0; color: var(--muted); font-size: 14px;
}

.proto__grid{
  display:grid; grid-template-columns: repeat(2, minmax(260px,1fr)); gap: 18px;
}
@media (max-width: 820px){ .proto__grid{ grid-template-columns: 1fr; } }

.proto__card{
  background: #0b1110;
  border: 1px solid rgba(0,255,204,.28);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.proto__card h3{
  margin: 0 0 10px; font-size: 18px; color: #bfffe8; letter-spacing: .6px;
}
.proto__list{
  list-style: none; margin:0; padding:0; display:grid; gap: 10px;
}
.proto__list li{ color: var(--fg); font-size: 15px; display:flex; align-items:center; gap:10px; }
.proto__list .ok{
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(80% 80% at 50% 50%, #6bffb8, #00d7a8);
  box-shadow: 0 0 12px rgba(0,255,204,.5);
  display:inline-block; flex: 0 0 16px;
}

.props{
  margin:0; padding: 6px 0; display:grid; gap: 8px;
}
.props > div{
  display:flex; gap: 10px; align-items: baseline;
  border-bottom: 1px dashed rgba(0,255,204,.18); padding-bottom: 8px;
}
.props > div:last-child{ border-bottom: none; }
dt{ width: 110px; color: #a4e9d4; font-size: 13px; opacity: .9; }
dd{ margin:0; color: var(--fg); font-weight: 600; }
.props a{ color:#bfffe8; text-decoration: underline; text-decoration-color: rgba(0,255,204,.4); }
.props a:hover{ color:#fff; }

.note{ margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* ===============================
   FAQ (kept)
=============================== */
#FAQ{ padding: 20px; }
.faq-box{
  color:var(--accent); background:#0b1110; border:1px solid rgba(0,255,204,.35);
  box-shadow:0 0 10px rgba(0,255,204,.15); padding: 18px; border-radius: 10px;
}
.faq-box h2{ margin: 6px 0 10px; font-size: 22px; }
.faq-item{ margin-bottom: 10px; }
.faq-question{
  width:100%; background:transparent; color:#bfffe8; font-size:16px; text-align:left;
  border:none; outline:none; cursor:pointer; padding:8px 0; border-bottom:1px solid rgba(0,255,204,.2);
}
.faq-answer{ display:none; color:#eaf7f1; padding-top:8px; }
.faq-item.active .faq-answer{ display:block; }

/* ===============================
   Footer (logo bigger)
=============================== */
#kitaFooter{ background:#000; padding: 34px 20px; text-align:center; color:var(--accent); border-top:1px solid rgba(0,255,204,.24); }
.footer-content{ display:flex; flex-direction:column; align-items:center; gap: 10px; }
#footer-logo{
  width: clamp(120px, 18vw, 220px);  /* bigger, responsive */
  height: auto; display:block;
}
.footer-links{ display:flex; gap: 18px; flex-wrap: wrap; justify-content:center; }
.footer-links a{ color:var(--accent); }
.footer-text{ font-size: 13px; color: var(--muted); }

/* ===== WHO IS KITA (Hero) ===== */
.kita-billboard{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;       /* tall? use 16/9; ultra wide? 21/9 */
  min-height: 380px;
  max-height: 80vh;
  overflow: hidden;
  border: 1px solid rgba(0,255,204,.28);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  background:#0b1110;
}
.kita-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover; object-position: center;
  display:block;
}
.kita-billboard__overlay{
  position:absolute; inset:0;
  background: radial-gradient(60% 60% at 70% 40%, rgba(0,0,0,.0), rgba(0,0,0,.45)),
              linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  display:grid; place-items:end start; padding:20px;
}
.kita-billboard__overlay h2{
  margin:0; color:#bfffe8; letter-spacing:1px; font-size: clamp(18px, 3vw, 28px);
}


/* ===== DOSSIER ===== */
.dossier__card{ background:#0b1110; border:1px solid rgba(0,255,204,.3); border-radius:14px; padding:18px; box-shadow:0 10px 34px rgba(0,0,0,.35); }
.dossier__card header h2{ margin:0 0 6px; font-size:22px; color:#bfffe8; }
.dossier__card header p{ margin:0 0 12px; color:#9fdac7; }
.dossier__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.dossier__grid h3{ margin:0 0 6px; font-size:14px; color:#a4e9d4; }
.dossier__ethos{ grid-column: 1 / -1; background:#121a17; border:1px dashed rgba(0,255,204,.22); border-radius:10px; padding:12px; }
.dossier__ethos ul{ margin:6px 0 0; padding-left:16px; }

/* ===== MISSION LOOP ===== */
.loop h2{ text-align:center; margin:0 0 14px; color:#bfffe8; letter-spacing:1.2px; }
.loop__steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); gap:10px; }
.loop__steps li{ background:#0b1110; border:1px solid rgba(0,255,204,.25); border-radius:12px; padding:12px; text-align:center; }
.loop__steps span{ display:block; font-weight:700; color:#00ffcc; }
.loop__steps small{ color:#9fdac7; }

/* ===== PULSE + MINI TERMINAL ===== */
.pulse-term .container{ display:grid; grid-template-columns: 1.2fr 1fr; gap:16px; align-items:start; }
.pulse{ background:#0b1110; border:1px solid rgba(0,255,204,.28); border-radius:12px; padding:14px; }
.pulse h3{ margin:0 0 10px; color:#bfffe8; font-size:16px; }
.pulse__grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; }
.pulse__grid div{ background:#121a17; border:1px solid rgba(0,255,204,.18); border-radius:10px; padding:10px; text-align:center; }
.pulse__grid span{ display:block; font-size:12px; color:#9fdac7; }
.pulse__grid strong{ display:block; font-size:18px; color:#eaf7f1; }
.muted{ color:#86cdb8; font-size:12px; }

.term-mini{ background:#0b1110; border:1px solid rgba(0,255,204,.28); border-radius:12px; padding:14px; }
.term-mini h3{ margin:0 0 10px; color:#bfffe8; font-size:16px; }
.term-mini__screen{ background:#121a17; border:1px solid rgba(0,255,204,.18); border-radius:10px; padding:10px; min-height:68px; color:#eaf7f1; }
.term-mini__input{ display:flex; gap:8px; align-items:center; margin-top:10px; }
.term-mini__input span{ color:#00ffcc; }
.term-mini__input input{ flex:1; background:#121a17; border:1px solid rgba(0,255,204,.28); color:#bfffe8; border-radius:8px; padding:8px 10px; }

@media (max-width: 980px){
  .hero-kita__wrap{ grid-template-columns:1fr; }
  .dossier__grid{ grid-template-columns: 1fr; }
  .loop__steps{ grid-template-columns: repeat(2,1fr); }
  .pulse-term .container{ grid-template-columns: 1fr; }
}
/* ---- 3D carousel visibility fixes ---- */
.df3d,
.df3d__track{
  overflow: visible !important;   /* never clip side cards */
}

/* Never hide neighbor cards just because they’re >2 away */
.df3d__card{
  opacity: 1 !important;
}
/* ===== KITA intro under billboard ===== */
.kita-intro{ padding: 16px 20px 8px; position: relative; z-index: 1; }
.kita-intro__tag{
  margin: 0 0 8px;
  font-size: clamp(16px, 2.2vw, 20px);
  letter-spacing: 1.2px;
  color: #0F6217;
  text-transform: uppercase;
}

.hero-kita__wrap{
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* add a right visual later if you want */
  gap: 18px;
  align-items: center;
}
.hero-kita__copy{ padding: 8px 0; }
.hero-kita__title{
  margin: 0 0 6px;
  font-size: clamp(28px, 6vw, 48px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0F6217;
}
.hero-kita__title span{ color: #00ffcc; }
.hero-kita__sub{
  margin: 4px 0 12px;
  color: #9fdac7;
  font-size: clamp(14px, 2.2vw, 18px);
  min-height: 1.5em;
}

.hero-kita__cta{ display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary{
  padding: 10px 16px; border:1px solid #00ffcc; background:#00ffcc; color:#00231e;
  border-radius: 10px; font-weight: 700;
}
.btn-ghost{
  padding: 10px 16px; border:1px solid rgba(0,255,204,.45); color:#bfffe8;
  border-radius: 10px; background: transparent;
}

.hero-kita__viz{
  border:1px solid rgba(0,255,204,.28);
  border-radius: 14px; overflow: hidden; background:#0b1110;
  aspect-ratio: 4 / 3;
}
.hero-kita__viz img, .hero-kita__viz video{
  width:100%; height:100%; object-fit: cover; display:block;
}

@media (max-width: 980px){
  .hero-kita__wrap{ grid-template-columns: 1fr; }
  .hero-kita__viz{ aspect-ratio: 16 / 9; }
}
/* ===== Bookshelf look: shelf line + spines ===== */
.df3d{ position: relative; }
.df3d::after{
  /* shelf baseline under the cards */
  content:""; position:absolute; left:40px; right:40px;
  top: calc(72px + var(--card-h) + 6px);
  height: 12px; border-radius: 8px;
  background: rgba(0,255,204,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.55) inset;
  z-index: 0;
}

/* visible 3D plane */
.df3d__track{ perspective: 1400px; }

/* fake “spine” for tilted cards only */
.df3d__card{ transform-style: preserve-3d; }
.df3d__card::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:0;
  background: linear-gradient(180deg, rgba(0,255,204,.35), rgba(0,255,204,.12));
  opacity:0; transition:opacity .25s,width .25s;
  pointer-events:none; z-index:1; /* above face border */
}
.df3d__card[data-tilted="true"]::before{
  width: 12px; opacity: .9;           /* spine shows only on tilted */
}
.df3d__card[data-active="true"]{
  filter: brightness(1.05);
  border-color: rgba(170,255,230,.7);
}