*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:#000;
  color:#fff;
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
img{max-width:100%;display:block;}
::selection{background:#ff2a2a;color:#fff;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

.wrap{max-width:1280px; margin:0 auto; padding:0 24px;}
@media (min-width:768px){ .wrap{padding:0 48px;} }

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid #ff2a2a;
  outline-offset:3px;
}

[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity 0.8s ease, transform 0.8s ease; }
[data-reveal].in{ opacity:1; transform:translateY(0); }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="left"].in{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="right"].in{ transform:translateX(0); }
[data-reveal="zoom"]{ transform:scale(0.85); }
[data-reveal="zoom"].in{ transform:scale(1); }
[data-reveal="drop"]{ transform:translateY(-200px); }
[data-reveal="drop"].in{ transform:translateY(0); transition:opacity 1s cubic-bezier(.28,.84,.42,1), transform 1.1s cubic-bezier(.28,.84,.42,1); }

@keyframes pulse-soft{ 0%,100%{opacity:.3;} 50%{opacity:.6;} }
@keyframes bounce-y{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }
@keyframes blink-caret{ 50%{opacity:0;} }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }

/* ===== Preloader ===== */
#preloader{
  position:fixed; inset:0;
  background:#ff2a2a;
  z-index:100000;
  display:flex; align-items:center; justify-content:center;
  transition:transform 1.2s cubic-bezier(.76,0,.24,1);
}
#preloader.hide{ transform:translateY(-100%); }
.preload-logo{
  position:relative;
  font-size:clamp(40px,7vw,72px);
  font-weight:900;
  letter-spacing:-0.03em;
}
.preload-bg{ color:rgba(127,0,0,0.3); }
.preload-fg{
  position:absolute; top:0; left:0;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  clip-path:inset(100% 0 0 0);
  animation:fillUp 1.6s ease-in-out 0.2s forwards;
}
.preload-fg .dot{color:#000;}
@keyframes fillUp{ to{ clip-path:inset(0% 0 0 0); } }

/* ===== Navbar ===== */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:9000;
  padding:24px 0;
  transition:background 0.3s, padding 0.3s;
}
.nav.menu-open{ background:#ff2a2a; padding:16px 0; }
.nav.scrolled{ background:rgba(0,0,0,0.7); backdrop-filter:blur(10px); padding:16px 0; }
.nav.scrolled.menu-open{ background:#ff2a2a; }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
}
.nav-brand{ font-size:24px; font-weight:900; letter-spacing:-0.02em; }
.nav-brand .dot{ color:#ef4444; }
.nav-links{ display:none; gap:32px; }
@media (min-width:768px){ .nav-links{ display:flex; } }
.nav-links a{
  color:rgba(255,255,255,0.8);
  font-weight:500;
  position:relative;
  transition:color 0.3s;
}
.nav-links a:hover{ color:#fff; }
.nav-links a::after{
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px;
  background:#ef4444; transition:width 0.3s;
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  display:none;
  padding:10px 24px;
  border-radius:999px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  font-weight:600;
  backdrop-filter:blur(8px);
  transition:all 0.3s;
}
@media (min-width:768px){ .nav-cta{ display:inline-block; } }
.nav-cta:hover{ background:rgba(255,255,255,0.2); box-shadow:0 0 15px rgba(255,255,255,0.2); }
.nav-burger{ display:flex; align-items:center; padding:8px; }
@media (min-width:768px){ .nav-burger{ display:none; } }
.nav-burger svg{ width:24px; height:24px; }
.nav-mobile{
  display:none;
  max-height:0; opacity:0; overflow:hidden;
  transition:all 0.3s;
  background:transparent;
}
@media (min-width:768px){ .nav-mobile{ display:none !important; } }
.nav-mobile.open{ display:block; max-height:480px; opacity:1; padding:16px 0; background:#ff2a2a; box-shadow:0 20px 40px rgba(0,0,0,0.3); }
.nav-mobile-inner{ display:flex; flex-direction:column; padding:0 24px; gap:16px; }
.nav-mobile a{
  color:#fff; font-weight:700; font-size:18px;
  border-bottom:1px solid rgba(255,255,255,0.2);
  padding-bottom:8px;
}
.nav-mobile .nav-mobile-cta{
  display:block; text-align:center;
  padding:12px 24px; border-radius:999px;
  background:#fff; color:#ff2a2a; font-weight:900;
  margin-top:8px;
}

/* ===== Hero (no video — canvas background) ===== */
.hero{
  position:relative; width:100%; height:100vh; min-height:560px;
  overflow:hidden; background:#000;
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,42,42,0.18), transparent 70%);
  z-index:1; pointer-events:none;
}
.hero-content{
  position:absolute; inset:0; z-index:2;
  padding:24px 24px 80px;
  max-width:1280px; margin:0 auto;
  display:flex; flex-direction:column; justify-content:flex-end;
  align-items:flex-start;
}
@media (min-width:768px){
  .hero-content{ flex-direction:row; justify-content:space-between; align-items:flex-end; padding:48px 48px 8%; }
}
.hero-text{ display:flex; flex-direction:column; align-items:flex-start; max-width:640px; width:100%; }
.hero-text h1{
  color:#fff; font-size:clamp(32px,6vw,56px); font-weight:800; margin-bottom:16px; letter-spacing:-0.02em; line-height:1.05;
}
.hero-text h1 .stroke{ color:transparent; -webkit-text-stroke:1.5px #fff; }
.hero-rotator{
  position:relative;
  display:inline-block;
  min-height:1.1em;
  vertical-align:bottom;
}
.hero-rotator-word{
  display:inline-block;
  color:#ff5b5b;
  -webkit-text-stroke:0;
}
.hero-rotator-cursor{
  display:inline-block;
  width:3px;
  margin-left:4px;
  background:#fff;
  animation:blink-caret 0.9s step-end infinite;
  vertical-align:-2px;
}
.hero-text p{
  color:#fff; font-size:clamp(14px,1.6vw,18px); font-weight:600; margin-bottom:32px; max-width:440px;
  text-shadow:0 1px 6px rgba(0,0,0,0.4);
}
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; width:100%; }
.btn-solid{
  padding:12px 24px; border-radius:999px; background:#fff; color:#000; font-weight:700; font-size:14px;
  transition:all 0.3s; box-shadow:0 4px 14px rgba(0,0,0,0.2);
}
.btn-solid:hover{ background:#e5e5e5; transform:scale(1.05); }
.btn-glass{
  padding:12px 24px; border-radius:999px; background:rgba(0,0,0,0.4); border:1px solid #fff; color:#fff; font-weight:700; font-size:14px;
  backdrop-filter:blur(8px); transition:all 0.3s;
}
.btn-glass:hover{ background:rgba(0,0,0,0.6); }

.hero-badge{
  margin-top:32px; display:flex; flex-direction:row; align-items:center; gap:12px; align-self:flex-start;
}
@media (min-width:768px){ .hero-badge{ margin-top:0; flex-direction:column; gap:10px; align-self:auto; } }
.hero-badge-ring{
  width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,0.3);
  background:rgba(0,0,0,0.25); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 30px rgba(255,255,255,0.08);
  font-family:'Inter',sans-serif; font-weight:800; font-size:11px; color:#fff;
}
@media (min-width:768px){ .hero-badge-ring{ width:80px; height:80px; font-size:14px; } }
.hero-badge-label{
  color:#fff; font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; opacity:0.7;
}
.hero-scroll{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:2;
}
@media (max-width:767px){ .hero-scroll{ display:none; } }
.hero-scroll svg{
  width:24px; height:24px; color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.6));
  animation:bounce-y 1.6s infinite;
}

/* ===== Stats Section ===== */
.stats{
  background:#0a0a0a; padding:72px 0; position:relative; border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06);
}
.stats-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:32px; max-width:1100px; margin:0 auto;
}
@media (min-width:640px){ .stats-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .stats-grid{ grid-template-columns:repeat(6,1fr); } }
.stat-item{
  text-align:center; padding:16px 8px;
}
.stat-num{
  font-size:clamp(28px,4vw,40px); font-weight:900; letter-spacing:-0.02em; color:#fff; line-height:1;
  display:flex; align-items:center; justify-content:center; gap:2px;
}
.stat-num .plus{ color:#ff2a2a; }
.stat-label{
  margin-top:10px; font-size:12px; font-weight:700; letter-spacing:0.04em; color:rgba(255,255,255,0.55); line-height:1.4;
}

/* ===== About ===== */
.about{
  background:#ff2a2a; padding:140px 0 160px; position:relative; overflow:hidden;
}
.about-inner{
  display:flex; flex-direction:column; gap:64px; align-items:flex-start; max-width:1100px; margin:0 auto;
}
@media (min-width:900px){ .about-inner{ flex-direction:row; } }
.about-badge-col{
  display:flex; flex-direction:column; align-items:center; width:100%; flex-shrink:0; margin-top:48px;
}
@media (min-width:900px){ .about-badge-col{ width:350px; margin-top:0; } }
.badge-rig{ position:relative; display:flex; justify-content:center; width:100%; }
.lanyard-string{
  position:absolute; top:-128px; left:50%; width:12px; height:160px; background:#000; transform:translateX(-50%);
  box-shadow:inset 0 0 8px rgba(0,0,0,0.5); z-index:0;
}
.lanyard-clip{
  position:absolute; top:-24px; left:50%; width:24px; height:48px; background:#d1d5db; border-radius:4px; border:1px solid #9ca3af;
  transform:translateX(-50%); z-index:1; box-shadow:0 2px 10px rgba(0,0,0,0.3);
}
.badge-card{
  background:#111827; width:100%; max-width:280px; border-radius:18px; padding:12px;
  box-shadow:0 20px 40px rgba(0,0,0,0.4); position:relative; z-index:2;
  transform:rotate(-3deg); transition:transform 0.5s;
}
.badge-card:hover{ transform:rotate(0deg); }
.badge-cutout{
  position:absolute; top:-10px; left:50%; width:64px; height:24px; background:#111827; border-radius:10px 10px 0 0;
  transform:translateX(-50%); display:flex; align-items:center; justify-content:center;
}
.badge-cutout-hole{ width:32px; height:8px; background:rgba(0,0,0,0.3); border-radius:4px; }
.badge-photo{
  width:100%; aspect-ratio:3/4; overflow:hidden; border-radius:12px;
  background:linear-gradient(145deg,#1f2937,#0b1220);
  display:flex; align-items:center; justify-content:center;
}
.badge-photo .mono{
  font-size:64px; font-weight:900; color:#ff2a2a; letter-spacing:-0.02em;
}
.badge-meta{ padding:14px 6px 4px; color:#9ca3af; font-size:11px; font-weight:600; text-align:center; letter-spacing:0.04em; }
.badge-meta b{ color:#fff; display:block; font-size:14px; margin-bottom:2px;}

.about-info{ flex:1; color:#fff; position:relative; z-index:2; }
.about-info h2{ font-size:clamp(34px,5vw,48px); font-weight:900; color:#000; margin-bottom:16px; }
.about-info p{
  font-size:18px; font-weight:700; margin-bottom:48px; line-height:1.7; max-width:640px; color:#fff0f0;
}
.about-info p .name{ color:#000; font-size:20px; font-weight:900; margin:0 4px; letter-spacing:0.02em; text-transform:uppercase; }
.skill-row{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:32px; }
.skill-icon{
  width:80px; height:80px; border-radius:50%; background:rgba(0,0,0,0.15);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px;
  cursor:pointer; transition:transform 0.3s; filter:drop-shadow(0 10px 14px rgba(0,0,0,0.2));
  text-align:center; padding:6px;
}
.skill-icon:hover{ transform:scale(1.1); }
.skill-icon span{ font-family:'Inter',sans-serif; font-weight:900; font-size:10.5px; color:#fff; letter-spacing:0.02em; }

.torn-divider{ position:absolute; bottom:0; left:0; width:100%; pointer-events:none; z-index:5; transform:translateY(1px); }
.torn-divider svg{ width:100%; height:60px; display:block; fill:#fff; }
@media (min-width:768px){ .torn-divider svg{ height:90px; } }

.star{ position:absolute; color:#000; opacity:0.3; animation:pulse-soft 3s infinite; }
.star.s1{ top:40px; right:40px; width:64px; height:64px; }
.star.s2{ bottom:128px; left:16px; width:80px; height:80px; animation-delay:1s; }
@media (min-width:768px){ .star.s1{right:80px;} .star.s2{left:80px;} }

/* ===== Process ===== */
.process{
  background:#fff; padding:96px 0 128px; position:relative; overflow:hidden;
  background-image:linear-gradient(to right, rgba(128,128,128,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(128,128,128,0.04) 1px, transparent 1px);
  background-size:80px 80px;
}
.process-stage{ max-width:1100px; margin:0 auto; position:relative; }
@media (min-width:900px){ .process-stage{ height:1350px; } }
.process-head{ max-width:460px; margin-bottom:64px; position:relative; z-index:20; }
@media (min-width:900px){ .process-head{ position:absolute; top:10px; left:0; margin-bottom:0; } }
.process-eyebrow{
  display:inline-block; border:1px solid #d1d5db; border-radius:999px; padding:6px 20px;
  font-size:14px; color:#4b5563; font-weight:700; margin-bottom:32px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.process-head h2{ font-size:clamp(32px,5vw,52px); font-weight:900; color:#111827; line-height:1.1; margin-bottom:24px; letter-spacing:-0.02em; position:relative;}
.process-head .hand-arrow{ position:absolute; bottom:-40px; right:30px; width:48px; height:48px; color:#1f2937; }
.process-head p{ color:#6b7280; font-size:17px; font-weight:500; max-width:380px; line-height:1.7; }

.process-path-svg{ position:absolute; top:0; left:0; width:100%; pointer-events:none; z-index:0; }
.process-path-svg.desktop{ display:none; height:1350px; }
@media (min-width:900px){ .process-path-svg.desktop{ display:block; } }
.process-path-svg.mobile{ left:50%; transform:translateX(-50%); width:16px; height:100%; }
@media (min-width:900px){ .process-path-svg.mobile{ display:none; } }
.path-guide{ fill:none; stroke:#cbd5e1; stroke-width:2; stroke-dasharray:8 10; }
.path-fill{ fill:none; stroke:#000; stroke-width:2; stroke-dasharray:8 10; }

.process-cards{
  display:flex; flex-direction:column; align-items:center; gap:32px; position:relative; z-index:10; padding-top:16px;
}
@media (min-width:900px){ .process-cards{ display:block; padding-top:0; } }
.tag-card{
  width:300px; border-radius:32px; padding:8px; position:relative;
  background:#fff; border:1px solid #e5e7eb; box-shadow:0 15px 40px rgba(0,0,0,0.06);
  transition:all 0.7s; flex-shrink:0;
}
.tag-card:hover{ transform:scale(1.02); }
.tag-card.is-active{ background:#ff2a2a; border-color:#f87171; box-shadow:0 20px 50px rgba(255,42,42,0.4); }
.tag-card .hole{
  width:20px; height:20px; border-radius:50%; position:absolute; top:16px; left:50%; transform:translateX(-50%);
  background:linear-gradient(145deg,#d1d5db,#f3f4f6); box-shadow:inset 0 2px 4px rgba(0,0,0,0.3); border:1px solid #d1d5db;
}
.tag-card-inner{
  margin-top:32px; border-radius:24px; padding:32px; min-height:200px; display:flex; flex-direction:column;
  background:#f4f4f4; transition:background 0.7s;
}
.tag-card.is-active .tag-card-inner{ background:rgba(185,28,28,0.5); }
.tag-card-inner .num{ font-family:Georgia,serif; font-style:italic; font-weight:700; font-size:20px; color:#9ca3af; margin-bottom:8px; transition:color 0.7s; }
.tag-card.is-active .tag-card-inner .num{ color:#fecaca; }
.tag-card-inner h3{ font-size:23px; font-weight:900; color:#111827; margin-bottom:10px; letter-spacing:-0.01em; transition:color 0.7s; }
.tag-card.is-active .tag-card-inner h3{ color:#fff; }
.tag-card-inner p{ font-size:14px; color:#6b7280; line-height:1.65; font-weight:500; transition:color 0.7s; }
.tag-card.is-active .tag-card-inner p{ color:#fee2e2; }

@media (min-width:900px){
  .tc-1{ position:absolute; top:10px; right:5%; transform:rotate(6deg); }
  .tc-2{ position:absolute; top:450px; left:5%; transform:rotate(-6deg); }
  .tc-3{ position:absolute; top:700px; right:8%; transform:rotate(3deg); }
  .tc-4{ position:absolute; top:1050px; left:18%; transform:rotate(-3deg); }
}
.process-note{
  display:none; position:absolute; top:1250px; left:58%; font-family:'Caveat',cursive; font-size:30px; color:#4b5563; transform:rotate(6deg);
}
@media (min-width:900px){ .process-note{ display:block; } }

/* ===== Systems (project showcase) ===== */
/* ===== Systems (project showcase) — v2 ===== */
.systems{
  background:#050505; padding:130px 0 110px; position:relative; overflow:hidden;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:64px 64px;
}
.systems::before{
  content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,42,42,0.10), transparent 70%); pointer-events:none;
}
.systems::after{
  content:''; position:absolute; bottom:-200px; left:-200px; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,42,42,0.06), transparent 70%); pointer-events:none;
}
 
.systems-head{ max-width:680px; margin:0 auto 72px; text-align:center; position:relative; z-index:2; }
.systems-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,0.2); border-radius:999px; padding:6px 20px;
  font-size:13px; color:#ff8a8a; font-weight:700; margin-bottom:24px; letter-spacing:0.04em;
}
.systems-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:#ff2a2a; animation:pulse-soft 1.8s infinite; }
.systems-head h2{ font-size:clamp(32px,5vw,52px); font-weight:900; letter-spacing:-0.02em; margin-bottom:18px; line-height:1.1; }
.systems-head h2 .stroke{ color:transparent; -webkit-text-stroke:1.5px #fff; }
.systems-head p{ color:rgba(255,255,255,0.55); font-size:16px; font-weight:500; line-height:1.7; }
 
.sys-grid, .sys-grid-extra{
  display:grid; grid-template-columns:1fr; gap:28px; max-width:1140px; margin:0 auto;
  position:relative; z-index:2;
}
@media (min-width:680px){ .sys-grid, .sys-grid-extra{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .sys-grid, .sys-grid-extra{ grid-template-columns:repeat(3,1fr); } }
 
.sys-grid-extra{ margin-top:0; max-height:0; opacity:0; overflow:hidden; transition:max-height 0.6s ease, opacity 0.5s ease, margin-top 0.6s ease; }
.sys-grid-extra.show{ max-height:3000px; opacity:1; margin-top:28px; }
 
/* ---- Card shell: padded outer "tag" + inner panel, echoes the Process hole-punch card ---- */
.sys-card{
  background:#fff; border-radius:28px; padding:7px;
  position:relative; flex-shrink:0; opacity:0; transform:translateY(34px) scale(0.97);
  transition:opacity 0.7s ease, transform 0.7s cubic-bezier(.22,1,.36,1), box-shadow 0.5s;
}
.sys-card.in{ opacity:1; transform:translateY(0) scale(1); }
.sys-card:hover{ transform:translateY(-8px) scale(1.015); box-shadow:0 25px 60px rgba(0,0,0,0.45); }
 
.sys-card .hole{
  width:18px; height:18px; border-radius:50%; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(145deg,#0a0a0a,#1a1a1a); box-shadow:inset 0 2px 4px rgba(0,0,0,0.6); z-index:3;
}
 
.sys-card-inner{
  margin-top:28px; border-radius:22px; padding:30px 26px 26px; min-height:300px;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:#0d0d0d; transition:background 0.5s; color:#ff5454;
}
 
/* corner brackets — small premium detail, fade in on hover */
.sys-card-inner::before, .sys-card-inner::after{
  content:''; position:absolute; width:18px; height:18px; opacity:0; transition:opacity 0.4s;
}
.sys-card-inner::before{ top:14px; right:14px; border-top:2px solid currentColor; border-right:2px solid currentColor; }
.sys-card-inner::after{ bottom:14px; left:14px; border-bottom:2px solid currentColor; border-left:2px solid currentColor; }
.sys-card:hover .sys-card-inner::before, .sys-card:hover .sys-card-inner::after{ opacity:0.35; }
 
.sys-num{
  font-family:Georgia,serif; font-style:italic; font-weight:700; font-size:16px;
  color:rgba(255,255,255,0.3); margin-bottom:16px; transition:color 0.5s;
}
.sys-icon{
  width:50px; height:50px; border-radius:14px; background:rgba(255,42,42,0.1); border:1px solid rgba(255,42,42,0.25);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:#ff2a2a; transition:all 0.5s;
}
.sys-icon svg{ width:24px; height:24px; }
.sys-card-inner h3{ font-size:19px; font-weight:800; margin-bottom:10px; letter-spacing:-0.01em; color:#fff; line-height:1.3; }
.sys-card-inner p{ color:rgba(255,255,255,0.5); font-size:14px; line-height:1.65; font-weight:500; flex:1; margin-bottom:22px; transition:color 0.5s; }
.sys-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }
.sys-tag{
  font-size:11px; font-weight:700; letter-spacing:0.03em; color:rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  padding:4px 11px; border-radius:999px; transition:all 0.5s;
}
.sys-link{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#fff;
  border-top:1px solid rgba(255,255,255,0.1); padding-top:16px; transition:gap 0.3s, color 0.3s, border-color 0.5s;
}
.sys-link svg{ width:14px; height:14px; transition:transform 0.3s; }
.sys-card:hover .sys-link{ color:#ff8a8a; gap:11px; }
.sys-card:hover .sys-link svg{ transform:translate(3px,-3px); }
 
/* Alternating RED "flagship" cards — echoes .tag-card.is-active from the Process section */
.sys-card.is-flagship{ background:#ff2a2a; }
.sys-card.is-flagship .hole{ background:linear-gradient(145deg,#7f0000,#3a0000); }
.sys-card.is-flagship .sys-card-inner{ background:rgba(0,0,0,0.82); color:#ffb3b3; }
.sys-card.is-flagship .sys-num{ color:#ffb3b3; }
.sys-card.is-flagship .sys-icon{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3); color:#fff; }
.sys-card.is-flagship .sys-card-inner p{ color:#ffd6d6; }
.sys-card.is-flagship .sys-tag{ color:#fff; background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.25); }
.sys-card.is-flagship .sys-link{ color:#fff; border-color:rgba(255,255,255,0.2); }
.sys-card.is-flagship:hover .sys-link{ color:#fff; }
.sys-card.is-flagship:hover{ box-shadow:0 25px 60px rgba(255,42,42,0.35); }
 
/* staggered entrance delay per column position */
.sys-card:nth-child(1), .sys-card:nth-child(4){ transition-delay:0s; }
.sys-card:nth-child(2), .sys-card:nth-child(5){ transition-delay:0.08s; }
.sys-card:nth-child(3), .sys-card:nth-child(6){ transition-delay:0.16s; }
 
.sys-more-wrap{ text-align:center; margin-top:52px; position:relative; z-index:2; }
.btn-more{
  display:inline-flex; align-items:center; gap:10px; padding:15px 32px; border-radius:999px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); color:#fff; font-weight:700; font-size:14px;
  transition:all 0.3s; cursor:pointer; font-family:'Inter',sans-serif;
}
.btn-more:hover{ background:rgba(255,42,42,0.14); border-color:rgba(255,42,42,0.45); transform:translateY(-2px); }
.btn-more svg{ width:16px; height:16px; transition:transform 0.35s; }
.btn-more.expanded svg{ transform:rotate(180deg); }
 
.btn-all{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px; margin-left:14px;
  font-size:13px; font-weight:700; color:rgba(255,255,255,0.55); transition:color 0.3s;
}
.btn-all:hover{ color:#ff8a8a; }
.btn-all svg{ width:13px; height:13px; }
 
@media (max-width:640px){
  .sys-more-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; }
  .btn-all{ margin-left:0; margin-top:0; }
}
 
/* ===== Bot (AI twin) ===== */
.bot{
  background:#0a0a0a; padding:100px 0; position:relative; border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06);
}
.bot-inner{ max-width:950px; margin:0 auto; text-align:center; }
.bot-eyebrow{
  display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,42,42,0.3); border-radius:999px; padding:6px 18px;
  font-size:13px; color:#ff8a8a; font-weight:700; margin-bottom:24px; letter-spacing:0.04em; background:rgba(255,42,42,0.06);
}
.bot-dot{ width:8px; height:8px; border-radius:50%; background:#ff2a2a; animation:pulse-soft 1.6s infinite; }
.bot h2{ font-size:clamp(28px,4.5vw,44px); font-weight:900; letter-spacing:-0.02em; margin-bottom:16px; }
.bot p{ color:rgba(255,255,255,0.6); font-size:16px; font-weight:500; max-width:560px; margin:0 auto 40px; line-height:1.7; }
.bot-frame-wrap{
  border-radius:20px; padding:3px; background:linear-gradient(135deg,#ff2a2a,#7f0000,#000);
  max-width:880px; margin:0 auto; box-shadow:0 30px 70px rgba(255,42,42,0.18);
}
.bot-frame-inner{ background:#000; border-radius:18px; overflow:hidden; }
.bot-frame-inner iframe{ width:100%; height:450px; display:block; border:0; background:#0d0d0d; }
@media (max-width:640px){ .bot-frame-inner iframe{ height:380px; } }

/* ===== Contact ===== */
.contact{
  background:#000; padding:140px 0 100px; position:relative; overflow:hidden;
}
.contact-bigtext{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:clamp(80px,18vw,260px); font-weight:900; letter-spacing:-0.03em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.08);
  white-space:nowrap; z-index:0; pointer-events:none; user-select:none;
}
.contact-grid{
  position:relative; z-index:2; display:flex; flex-direction:column; gap:56px; max-width:1100px; margin:0 auto;
}
@media (min-width:900px){ .contact-grid{ flex-direction:row; justify-content:space-between; align-items:flex-start; gap:40px; } }
.contact-info{ max-width:420px; }
.contact-eyebrow{
  display:inline-block; border:1px solid rgba(255,255,255,0.2); border-radius:999px; padding:6px 20px;
  font-size:13px; color:#ff8a8a; font-weight:700; margin-bottom:24px; letter-spacing:0.04em;
}
.contact-info h2{ font-size:clamp(32px,5vw,48px); font-weight:900; letter-spacing:-0.02em; margin-bottom:20px; line-height:1.1; }
.contact-info p{ color:rgba(255,255,255,0.6); font-size:16px; font-weight:500; line-height:1.7; margin-bottom:36px; }
.contact-links{ display:flex; flex-direction:column; gap:16px; }
.contact-link{
  display:flex; align-items:center; gap:14px; font-size:15px; font-weight:700; color:#fff;
  padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.1); transition:color 0.3s, padding-left 0.3s;
}
.contact-link:hover{ color:#ff2a2a; padding-left:6px; }
.contact-link svg{ width:18px; height:18px; flex-shrink:0; color:#ff2a2a; }

.contact-panel{
  background:#ff2a2a; border-radius:24px; padding:40px 32px; width:100%; max-width:440px;
  box-shadow:0 30px 70px rgba(255,42,42,0.25); position:relative;
}
.field{ position:relative; margin-bottom:24px; }
.field input, .field textarea{
  width:100%; background:rgba(0,0,0,0.18); border:1px solid rgba(0,0,0,0.25); border-radius:12px;
  padding:18px 16px 8px; color:#fff; font-family:'Inter',sans-serif; font-size:15px; font-weight:600;
  transition:border-color 0.3s, background 0.3s;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input::placeholder, .field textarea::placeholder{ color:transparent; }
.field input:focus, .field textarea:focus{ outline:none; border-color:#fff; background:rgba(0,0,0,0.3); }
.field label{
  position:absolute; left:16px; top:18px; color:rgba(255,255,255,0.75); font-size:15px; font-weight:600;
  pointer-events:none; transition:all 0.2s ease;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  top:7px; font-size:11px; font-weight:700; letter-spacing:0.04em; color:#fff;
}
.btn-send{
  width:100%; padding:16px 24px; border-radius:999px; background:#000; color:#fff; font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:10px; transition:all 0.3s;
}
.btn-send:hover{ background:#1a1a1a; transform:scale(1.02); }
.btn-send svg{ width:16px; height:16px; transition:transform 0.3s; }
.btn-send:hover svg{ transform:translateX(4px); }
.form-note{ font-size:12px; color:rgba(255,255,255,0.7); margin-top:14px; text-align:center; font-weight:600; }
.form-success{
  display:none; text-align:center; padding:30px 10px; color:#fff;
}
.form-success.show{ display:block; }
.form-success svg{ width:40px; height:40px; margin:0 auto 14px; color:#000; }
.form-success h4{ font-size:18px; font-weight:900; margin-bottom:6px; }
.form-success p{ font-size:13px; color:rgba(0,0,0,0.7); font-weight:600; }

/* ===== Footer ===== */
.footer{
  background:#050505; padding:80px 0 32px; position:relative; border-top:1px solid rgba(255,255,255,0.06);
}
.footer-word{
  font-size:clamp(48px,12vw,160px); font-weight:900; letter-spacing:-0.04em; line-height:0.85;
  text-transform:lowercase; margin-bottom:56px; color:#fff;
}
.footer-word .dot{ color:#ff2a2a; }
.footer-cols{
  display:grid; grid-template-columns:1fr; gap:36px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.08);
}
@media (min-width:768px){ .footer-cols{ grid-template-columns:repeat(3,1fr); gap:24px; } }
.footer-col h5{
  font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:18px;
}
.footer-col a, .footer-col p{
  display:block; font-size:14px; font-weight:600; color:rgba(255,255,255,0.75); margin-bottom:10px; transition:color 0.3s;
}
.footer-col a:hover{ color:#ff2a2a; }
.footer-bottom{
  display:flex; flex-direction:column; gap:14px; align-items:flex-start; padding-top:28px;
  font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.35);
}
@media (min-width:768px){ .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; } }

/* ===== Back to top ===== */
/* Offset to the left of the chatbot fab (60px wide + 28px gap + 8px breathing room) so the two buttons sit side by side instead of stacking */
#back-to-top{
  position:fixed; bottom:28px; right:96px; width:48px; height:48px; border-radius:50%;
  background:#ff2a2a; color:#fff; display:flex; align-items:center; justify-content:center;
  z-index:7800; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity 0.3s, transform 0.3s, visibility 0.3s;
  box-shadow:0 10px 24px rgba(255,42,42,0.3);
}
#back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
#back-to-top svg{ width:20px; height:20px; }
#back-to-top:hover{ background:#fff; color:#ff2a2a; }

/* ===== Floating Chatbot Button ===== */
#chatbot-fab{
  position:fixed; bottom:28px; right:28px; z-index:7900;
  width:60px; height:60px; border-radius:50%;
  background:#ff2a2a; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(255,42,42,0.4);
  transition:transform 0.3s, box-shadow 0.3s;
}
#chatbot-fab:hover{ transform:scale(1.08); box-shadow:0 14px 36px rgba(255,42,42,0.55); }
#chatbot-fab svg{ width:26px; height:26px; }
#chatbot-fab .fab-ping{
  position:absolute; inset:0; border-radius:50%; background:rgba(255,42,42,0.5);
  animation:pulse-soft 2s infinite;
}
.chatbot-tooltip{
  position:fixed; bottom:30px; right:96px; z-index:7899;
  background:#111; color:#fff; font-size:13px; font-weight:700; padding:10px 16px;
  border-radius:10px; border:1px solid rgba(255,255,255,0.1);
  opacity:0; visibility:hidden; transform:translateX(8px);
  transition:opacity 0.3s, transform 0.3s, visibility 0.3s, right 0.3s;
  white-space:nowrap;
}
.chatbot-tooltip.show{ opacity:1; visibility:visible; transform:translateX(0); }
.chatbot-tooltip.beside-btt{ right:154px; }
@media (max-width:480px){ .chatbot-tooltip{ display:none; } }
.highlight{
  color:#ff2a2a;
  font-weight:600;
}

/* ===== Credentials (verified training ledger) ===== */
.credentials{
  background:#0a0a0a; padding:120px 0 130px; position:relative;
  border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
}
.credentials::before{
  content:''; position:absolute; top:-180px; left:50%; transform:translateX(-50%);
  width:900px; height:360px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,42,42,0.08), transparent 70%);
  pointer-events:none;
}

.cred-head{ max-width:640px; margin:0 auto 64px; text-align:center; position:relative; z-index:2; }
.cred-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,0.2); border-radius:999px; padding:6px 20px;
  font-size:13px; color:#ff8a8a; font-weight:700; margin-bottom:24px; letter-spacing:0.04em;
}
.cred-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:#ff2a2a; animation:pulse-soft 1.8s infinite; }
.cred-head h2{ font-size:clamp(30px,4.6vw,46px); font-weight:900; letter-spacing:-0.02em; margin-bottom:16px; line-height:1.15; }
.cred-head h2 .stroke{ color:transparent; -webkit-text-stroke:1.5px #fff; }
.cred-head p{ color:rgba(255,255,255,0.55); font-size:15.5px; font-weight:500; line-height:1.7; }

/* ---- Summary strip: reuses .stat-num / .stat-label / .stat-count + JS counter for free ---- */
.cred-summary{
  display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap;
  gap:0; max-width:620px; margin:0 auto 80px; position:relative; z-index:2;
  border:1px solid rgba(255,255,255,0.1); border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,0.015);
}
.cred-stat{
  flex:1; min-width:160px; text-align:center; padding:26px 20px;
  border-right:1px solid rgba(255,255,255,0.1);
}
.cred-stat:last-child{ border-right:none; }
.cred-stat .stat-num{ justify-content:center; font-size:clamp(26px,3.6vw,34px); }
.cred-stat .stat-label{ margin-top:8px; }

/* ---- Ledger list ---- */
.cred-list{
  max-width:920px; margin:0 auto; position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,0.08);
}
.cred-row{
  display:grid;
  grid-template-columns:44px 52px 1fr auto 28px;
  align-items:center; gap:22px;
  padding:26px 20px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  position:relative;
  transition:background 0.4s, padding-left 0.4s;
}
.cred-row::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0;
  background:#ff2a2a; transition:width 0.35s ease;
}
.cred-row:hover{ background:rgba(255,42,42,0.05); padding-left:30px; }
.cred-row:hover::before{ width:3px; }

.cred-index{
  font-family:Georgia,serif; font-style:italic; font-weight:700; font-size:17px;
  color:rgba(255,255,255,0.28); transition:color 0.4s;
}
.cred-row:hover .cred-index{ color:#ff8a8a; }

.cred-mark{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-weight:900; font-size:13px; letter-spacing:0.01em;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#fff;
  transition:all 0.4s; flex-shrink:0;
}
.cred-row:hover .cred-mark{ background:#ff2a2a; border-color:#ff2a2a; color:#fff; transform:scale(1.06); }

.cred-content h3{
  font-size:16.5px; font-weight:800; color:#fff; margin-bottom:5px; letter-spacing:-0.005em; line-height:1.35;
}
.cred-content p{
  font-size:13.5px; color:rgba(255,255,255,0.45); font-weight:500; line-height:1.55; max-width:520px;
}

.cred-meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex-shrink:0;
}
.cred-pill{
  font-size:11px; font-weight:800; letter-spacing:0.03em; color:#ff8a8a;
  background:rgba(255,42,42,0.1); border:1px solid rgba(255,42,42,0.25);
  padding:4px 12px; border-radius:999px; white-space:nowrap;
}
.cred-pill-alt{ color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12); }
.cred-issuer{
  font-size:11px; font-weight:600; color:rgba(255,255,255,0.4); letter-spacing:0.02em; white-space:nowrap;
}

.cred-check{
  width:22px; height:22px; color:rgba(255,255,255,0.15); transition:color 0.4s, transform 0.4s; flex-shrink:0;
}
.cred-row:hover .cred-check{ color:#ff2a2a; transform:scale(1.12); }

@media (max-width:760px){
  .cred-row{
    grid-template-columns:32px 1fr; grid-template-areas:
      "index mark"
      "content content"
      "meta meta";
    row-gap:14px; padding:22px 16px;
  }
  .cred-index{ grid-area:index; align-self:start; }
  .cred-mark{ grid-area:mark; justify-self:end; width:44px; height:44px; }
  .cred-content{ grid-area:content; }
  .cred-content p{ max-width:100%; }
  .cred-meta{ grid-area:meta; flex-direction:row; align-items:center; justify-content:flex-start; flex-wrap:wrap; }
  .cred-check{ display:none; }
}