/* =========================================================
   KRISHNA.SYSTEM
   FUTURISTIC CYBER PORTFOLIO
   ========================================================= */

:root{
  --bg:#010302;
  --panel:rgba(2,12,7,.82);
  --green:#00ff66;
  --green2:#00b94b;
  --green-dark:#075d30;
  --green-soft:rgba(0,255,102,.10);

  --red:#ff1744;
  --red2:#ff003c;

  --white:#eafff1;
  --text:#789789;
  --muted:#405c4c;

  --line:rgba(0,255,102,.20);

  --mono:"Courier New",Consolas,monospace;
  --serif:Georgia,"Times New Roman",serif;
}

/* =========================================================
   RESET
   ========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  overflow-x:hidden;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(0,255,102,.07),
      transparent 38%
    ),
    #010302;

  color:var(--text);
  font-family:var(--mono);

  transition:
    background .3s ease,
    color .3s ease;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea{
  font:inherit;
}

::selection{
  background:var(--green);
  color:#000;
}

/* =========================================================
   CANVAS
   ========================================================= */

#matrixCanvas,
#particleCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

#matrixCanvas{
  z-index:-10;
  opacity:.14;
}

#particleCanvas{
  z-index:-9;
  opacity:.28;
}

/* =========================================================
   CRT EFFECTS
   ========================================================= */

.scanlines{
  position:fixed;
  inset:0;
  z-index:9000;
  pointer-events:none;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 3px,
      rgba(0,255,102,.025) 4px
    );
}

.screen-noise{
  position:fixed;
  inset:0;
  z-index:8999;
  pointer-events:none;
  opacity:.035;

  background-image:
    repeating-radial-gradient(
      circle at 0 0,
      #fff 0,
      transparent 1px,
      transparent 3px
    );

  background-size:5px 5px;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:8998;
  pointer-events:none;

  background:
    radial-gradient(
      ellipse at center,
      transparent 40%,
      rgba(0,0,0,.75) 100%
    );
}

/* =========================================================
   BOOT SCREEN
   ========================================================= */

.boot-screen{
  position:fixed;
  inset:0;
  z-index:10000;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#000;

  transition:
    opacity .7s ease,
    visibility .7s ease;
}

.boot-screen.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.boot-box{
  width:min(700px,90%);
  position:relative;
  padding:30px;

  border:1px solid var(--green);

  box-shadow:
    0 0 35px rgba(0,255,102,.08),
    inset 0 0 30px rgba(0,255,102,.03);
}

.boot-title{
  color:var(--green);
  font-size:20px;
  letter-spacing:4px;
  margin-bottom:22px;
}

.boot-lines{
  color:#a0b8aa;
  font-size:13px;
  line-height:2;
}

.boot-green{
  color:var(--green);
  text-shadow:0 0 10px var(--green);
}

.boot-progress{
  width:100%;
  height:8px;
  margin-top:25px;

  border:1px solid var(--green-dark);
  background:#031008;
}

.boot-progress span{
  display:block;
  width:0;
  height:100%;
  background:var(--green);
  box-shadow:0 0 15px var(--green);

  transition:width .15s linear;
}

.boot-percent{
  text-align:right;
  margin-top:8px;
  color:var(--green);
  font-size:11px;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;

  height:68px;

  z-index:5000;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 28px;

  background:rgba(1,4,2,.88);
  border-bottom:1px solid var(--line);

  backdrop-filter:blur(12px);
}

.logo{
  color:var(--green);
  font-size:13px;
  font-weight:bold;
  letter-spacing:2px;
  white-space:nowrap;
}

.logo-dot{
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:8px;

  border-radius:50%;
  background:var(--green);

  box-shadow:0 0 12px var(--green);

  animation:pulse 1s infinite;
}

nav{
  display:flex;
  gap:18px;
}

nav a{
  color:#547464;
  font-size:9px;
  letter-spacing:2px;
  transition:.25s;
}

nav a:hover{
  color:var(--green);
  text-shadow:0 0 12px var(--green);
}

.top-right{
  display:flex;
  align-items:center;
  gap:18px;
}

#clock{
  color:var(--green);
  font-size:10px;
  letter-spacing:2px;
}

.menu-btn{
  display:none;
  background:none;
  border:1px solid var(--line);
  color:var(--green);
  padding:8px 11px;
}

/* =========================================================
   DANGER TOGGLE
   ========================================================= */

.danger-toggle{
  position:fixed;
  right:20px;
  top:82px;
  z-index:6000;

  padding:12px 17px;

  color:var(--red);
  background:rgba(35,0,7,.75);

  border:1px solid rgba(255,23,68,.55);

  font-size:9px;
  font-weight:bold;
  letter-spacing:2px;

  box-shadow:0 0 18px rgba(255,0,60,.15);

  transition:.2s;
}

.danger-toggle:hover{
  box-shadow:
    0 0 30px rgba(255,0,60,.4);
}

.danger-toggle span{
  margin-left:7px;
}

body.danger .danger-toggle{
  color:#fff;
  background:var(--red2);
  border-color:#fff;

  box-shadow:
    0 0 30px var(--red),
    0 0 80px rgba(255,0,60,.35);

  animation:dangerButton .1s infinite;
}

/* =========================================================
   HERO
   ========================================================= */

.hero{
  min-height:100vh;
  padding:140px 25px 100px;

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

.hero-grid{
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(0,255,102,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,255,102,.035) 1px,
      transparent 1px
    );

  background-size:55px 55px;
}

.hero-content{
  width:min(900px,100%);
  position:relative;
  z-index:2;
  text-align:center;
}

.hero-hud{
  position:absolute;
  top:115px;

  padding:18px;

  border:1px solid var(--line);

  color:#496b57;
  font-size:9px;
  line-height:2;
  letter-spacing:1px;

  background:rgba(0,15,7,.35);
}

.hero-hud b{
  color:var(--green);
}

.hud-left{
  left:30px;
}

.hud-right{
  right:30px;
}

.breach-text{
  color:var(--red);
  font-size:11px;
  letter-spacing:4px;

  animation:blink .8s infinite;
}

.welcome-small{
  margin-top:22px;

  color:var(--green);
  font-family:var(--mono);
  font-size:clamp(22px,4vw,40px);
  font-weight:bold;
  letter-spacing:7px;

  text-shadow:0 0 20px rgba(0,255,102,.5);
}

.welcome-title{
  margin-top:-4px;

  color:var(--green);

  font-family:var(--serif);
  font-size:clamp(52px,10vw,125px);
  line-height:.9;

  letter-spacing:6px;

  text-shadow:
    0 0 8px var(--green),
    0 0 30px rgba(0,255,102,.7),
    0 0 70px rgba(0,255,102,.3);
}

.hero-tagline{
  margin-top:30px;

  color:#557363;
  font-size:11px;
  letter-spacing:6px;
}

.krishna-box{
  width:min(650px,100%);
  margin:35px auto 0;

  padding:20px;

  border:1px solid var(--green);

  box-shadow:
    0 0 25px rgba(0,255,102,.08),
    inset 0 0 30px rgba(0,255,102,.03);
}

.krishna-name{
  color:var(--green);
  font-family:var(--serif);
  font-size:36px;
  letter-spacing:9px;
}

.krishna-role{
  margin-top:8px;
  color:#67a47b;
  font-size:11px;
  letter-spacing:2px;
}

.initializing{
  width:min(680px,100%);
  margin:35px auto 0;
  text-align:left;
}

.init-line{
  display:flex;
  justify-content:space-between;

  color:#60806c;
  font-size:11px;
}

.init-line span:last-child{
  color:var(--green);
}

.init-bar{
  height:10px;
  margin-top:12px;

  border:1px solid var(--green-dark);
}

.init-bar span{
  display:block;
  width:100%;
  height:100%;

  background:var(--green);

  box-shadow:
    0 0 12px var(--green);
}

.hero-terminal{
  width:min(680px,100%);
  margin:20px auto 0;

  text-align:left;

  color:#527561;
  font-size:10px;
  line-height:2;
}

/* =========================================================
   DANGER PHONE CARD
   ========================================================= */

.danger-section{
  width:min(900px,92%);
  margin:0 auto 80px;
}

.danger-card{
  position:relative;

  display:flex;
  align-items:center;
  gap:25px;

  padding:25px;

  border:1px solid rgba(255,23,68,.45);

  background:
    linear-gradient(
      90deg,
      rgba(80,0,15,.16),
      rgba(20,0,5,.8)
    );

  box-shadow:
    inset 0 0 30px rgba(255,0,60,.04),
    0 0 25px rgba(255,0,60,.06);

  overflow:hidden;
}

.danger-card::before{
  content:"";
  position:absolute;
  left:-100%;
  top:0;

  width:100%;
  height:2px;

  background:var(--red);

  box-shadow:0 0 15px var(--red);

  animation:dangerScan 2.5s linear infinite;
}

.danger-symbol{
  width:70px;
  height:70px;

  display:grid;
  place-items:center;

  color:var(--red);
  font-size:45px;

  border:2px solid var(--red);

  clip-path:polygon(
    50% 0,
    100% 100%,
    0 100%
  );

  text-shadow:0 0 20px var(--red);
}

.danger-card-content{
  flex:1;
}

.danger-mini{
  color:#9e5362;
  font-size:8px;
  letter-spacing:3px;
}

.danger-card h2{
  margin-top:5px;

  color:var(--red);
  font-size:25px;
  letter-spacing:4px;

  text-shadow:0 0 15px rgba(255,0,60,.5);
}

.danger-card p{
  color:#ff607b;
  font-size:12px;
  letter-spacing:4px;
}

.phone-hack-btn{
  padding:17px 22px;

  color:#fff;
  background:var(--red2);

  border:1px solid #fff;

  font-weight:bold;
  font-size:10px;
  letter-spacing:2px;

  box-shadow:
    0 0 20px rgba(255,0,60,.35);

  animation:warningButton 1s infinite;
}

/* =========================================================
   MODULES
   ========================================================= */

.modules{
  width:min(1100px,92%);
  margin:auto;
}

.module-card{
  min-height:245px;

  position:relative;

  display:grid;
  grid-template-columns:80px 170px 1fr 230px 170px;
  align-items:center;

  gap:20px;

  margin-bottom:24px;
  padding:25px;

  border:1px solid var(--line);

  background:
    linear-gradient(
      100deg,
      rgba(0,255,102,.025),
      rgba(0,8,4,.7)
    );

  overflow:hidden;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.module-card::before{
  content:"";

  position:absolute;
  left:0;
  top:0;

  width:2px;
  height:100%;

  background:var(--green);

  box-shadow:0 0 15px var(--green);
}

.module-card::after{
  content:"";

  position:absolute;
  left:-100%;
  top:0;

  width:70%;
  height:100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,255,102,.07),
      transparent
    );

  animation:moduleScan 5s linear infinite;
}

.module-card:hover{
  transform:translateY(-6px);

  border-color:var(--green);

  box-shadow:
    0 0 30px rgba(0,255,102,.1),
    inset 0 0 25px rgba(0,255,102,.03);
}

.module-number{
  align-self:start;
  color:var(--green);
  font-size:11px;
  letter-spacing:2px;
}

.module-icon{
  color:var(--green);
  font-size:46px;
  text-align:center;
  text-shadow:0 0 20px rgba(0,255,102,.7);
}

.lightning{
  font-size:54px;
}

.diamond{
  font-size:60px;
}

.terminal-symbol{
  font-size:38px;
}

.module-main h2{
  color:var(--white);

  font-family:var(--serif);
  font-size:34px;
  letter-spacing:5px;
}

.module-sub{
  margin-top:10px;
  color:#577265;
  font-size:11px;
  letter-spacing:3px;
}

.module-info{
  display:grid;
  gap:5px;

  color:#4d6b59;
  font-size:8px;
  line-height:1.5;
  letter-spacing:1px;
}

.enter-module{
  justify-self:end;

  padding:14px 16px;

  color:var(--green);

  border:1px solid var(--line);

  font-size:9px;
  letter-spacing:1px;

  transition:.25s;
}

.enter-module:hover{
  color:#001b09;
  background:var(--green);

  box-shadow:0 0 25px rgba(0,255,102,.3);
}

/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section{
  width:min(1100px,92%);
  margin:auto;
  padding:100px 0;
}

.section-heading{
  margin-bottom:35px;
}

.section-heading span{
  color:var(--green);
  font-size:9px;
  letter-spacing:4px;
}

.section-heading h2{
  margin-top:10px;

  color:var(--white);

  font-family:var(--serif);
  font-size:clamp(35px,6vw,65px);
  letter-spacing:4px;
}

/* =========================================================
   IDENTITY
   ========================================================= */

.identity-grid{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:25px;
}

.identity-panel,
.identity-text{
  padding:30px;

  border:1px solid var(--line);
  background:var(--panel);
}

.identity-logo{
  width:90px;
  height:90px;

  display:grid;
  place-items:center;

  color:var(--green);
  font-family:var(--serif);
  font-size:40px;

  border:1px solid var(--green);
  box-shadow:0 0 25px rgba(0,255,102,.1);
}

.identity-panel h3{
  margin-top:25px;
  color:var(--white);
  font-size:25px;
  letter-spacing:4px;
}

.identity-panel p{
  margin-top:8px;
  color:#567264;
  font-size:10px;
}

.identity-status{
  margin-top:25px;
  color:var(--green);
  font-size:9px;
}

.identity-text{
  color:#718b7b;
  font-size:12px;
  line-height:2;
}

.identity-text p + p{
  margin-top:20px;
}

/* =========================================================
   SKILLS
   ========================================================= */

.skills-panel{
  padding:35px;

  border:1px solid var(--line);
  background:var(--panel);
}

.skill{
  margin-bottom:25px;
}

.skill-head{
  display:flex;
  justify-content:space-between;

  margin-bottom:8px;

  color:#799789;
  font-size:10px;
  letter-spacing:2px;
}

.skill-head b{
  color:var(--green);
}

.skill-track{
  width:100%;
  height:7px;

  background:#06120a;
  border:1px solid rgba(0,255,102,.08);
}

.skill-track span{
  display:block;
  width:0;
  height:100%;

  background:linear-gradient(
    90deg,
    var(--green-dark),
    var(--green)
  );

  box-shadow:0 0 12px var(--green);

  transition:width 1.5s ease;
}

/* =========================================================
   MISSIONS
   ========================================================= */

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

.mission-card{
  min-height:250px;

  padding:25px;

  border:1px solid var(--line);
  background:var(--panel);

  transition:.3s;
}

.mission-card:hover{
  transform:translateY(-6px);
  border-color:var(--green);
  box-shadow:0 0 25px rgba(0,255,102,.1);
}

.mission-card small{
  color:var(--green);
  font-size:8px;
  letter-spacing:3px;
}

.mission-card h3{
  margin:30px 0 15px;

  color:var(--white);
  font-size:16px;
  letter-spacing:2px;
}

.mission-card p{
  color:#607c6b;
  font-size:10px;
  line-height:1.8;
}

.mission-card div{
  margin-top:20px;
  color:var(--green);
  font-size:8px;
}

/* =========================================================
   TERMINAL
   ========================================================= */

.terminal-window{
  border:1px solid var(--line);
  background:#000b05;

  box-shadow:
    0 0 30px rgba(0,255,102,.06);
}

.terminal-header{
  display:flex;
  justify-content:space-between;

  padding:15px;

  border-bottom:1px solid var(--line);

  color:var(--green);
  font-size:9px;
}

.terminal-output{
  min-height:300px;
  max-height:400px;

  padding:20px;

  overflow-y:auto;

  color:#759384;
  font-size:11px;
  line-height:1.9;
}

.terminal-output b{
  color:var(--green);
}

.terminal-input{
  display:flex;
  align-items:center;
  gap:10px;

  padding:15px;

  border-top:1px solid var(--line);

  color:var(--green);
}

.terminal-input input{
  flex:1;

  border:0;
  outline:0;

  background:transparent;
  color:var(--white);

  caret-color:var(--green);
}

/* =========================================================
   STATUS
   ========================================================= */

.status-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}

.status-grid > div{
  padding:22px 10px;

  text-align:center;

  border:1px solid var(--line);
  background:var(--panel);
}

.status-grid b{
  display:block;

  color:#4c6958;
  font-size:8px;
  letter-spacing:2px;
}

.status-grid strong{
  display:block;
  margin-top:10px;

  color:var(--green);
  font-size:12px;
}

/* =========================================================
   CONTACT
   ========================================================= */

.contact-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:25px;
}

.contact-links{
  display:grid;
  gap:10px;
}

.contact-links a{
  display:flex;
  justify-content:space-between;

  padding:18px;

  border:1px solid var(--line);
  color:#648171;

  font-size:10px;
  letter-spacing:2px;

  transition:.25s;
}

.contact-links a:hover{
  color:var(--green);
  border-color:var(--green);
  transform:translateX(5px);
}

#contactForm{
  padding:25px;

  border:1px solid var(--line);
  background:var(--panel);
}

#contactForm label{
  display:block;
  margin-bottom:7px;

  color:var(--green);
  font-size:8px;
  letter-spacing:2px;
}

#contactForm input,
#contactForm textarea{
  width:100%;

  margin-bottom:18px;
  padding:13px;

  outline:0;

  border:1px solid var(--line);

  background:#020a05;
  color:var(--white);
}

#contactForm textarea{
  min-height:130px;
  resize:vertical;
}

#contactForm input:focus,
#contactForm textarea:focus{
  border-color:var(--green);
  box-shadow:0 0 15px rgba(0,255,102,.08);
}

#contactForm button{
  padding:14px 18px;

  color:var(--green);
  background:transparent;

  border:1px solid var(--green);

  font-size:9px;
  letter-spacing:2px;

  transition:.25s;
}

#contactForm button:hover{
  color:#000;
  background:var(--green);
}

/* =========================================================
   HACK MODAL
   ========================================================= */

.hack-modal{
  position:fixed;
  inset:0;

  z-index:8000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  background:rgba(0,0,0,.88);

  opacity:0;
  visibility:hidden;

  transition:.25s;
}

.hack-modal.active{
  opacity:1;
  visibility:visible;
}

.hack-box{
  width:min(600px,100%);

  padding:35px;

  text-align:center;

  border:2px solid var(--red);

  background:#080003;

  box-shadow:
    0 0 40px rgba(255,0,60,.4),
    inset 0 0 40px rgba(255,0,60,.06);

  animation:hackBox .12s infinite;
}

.hack-alert{
  color:var(--red);
  font-size:13px;
  letter-spacing:4px;

  animation:blink .4s infinite;
}

.hack-box h2{
  margin-top:20px;

  color:#ff5470;
  font-family:var(--serif);
  letter-spacing:4px;
}

.hack-count{
  margin:25px;

  color:#fff;

  font-size:75px;
  font-weight:bold;

  text-shadow:
    0 0 20px var(--red),
    0 0 50px var(--red);
}

.hack-log{
  min-height:55px;

  color:#ff7189;

  font-size:11px;
  line-height:2;
}

#closeHack{
  margin-top:25px;

  padding:12px 20px;

  color:#fff;
  background:var(--red2);

  border:1px solid #fff;

  font-size:9px;
  letter-spacing:2px;
}

/* =========================================================
   TOAST
   ========================================================= */

.toast{
  position:fixed;
  left:50%;
  bottom:25px;

  z-index:9500;

  transform:translate(-50%,30px);

  padding:13px 18px;

  color:var(--green);
  background:#020c06;

  border:1px solid var(--green);

  font-size:9px;
  letter-spacing:1px;

  opacity:0;
  pointer-events:none;

  transition:.3s;
}

.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

/* =========================================================
   FOOTER
   ========================================================= */

footer{
  display:flex;
  justify-content:space-between;
  gap:20px;

  padding:30px 5%;

  border-top:1px solid var(--line);

  color:#456152;
  font-size:8px;
  letter-spacing:2px;
}

/* =========================================================
   REVEAL
   ========================================================= */

.reveal{
  opacity:0;
  transform:translateY(35px);

  transition:
    opacity .8s ease,
    transform .8s ease;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   DANGER MODE
   ========================================================= */

body.danger{
  --green:#ff1744;
  --green2:#ff003c;
  --green-dark:#7d1027;
  --green-soft:rgba(255,0,60,.1);
  --line:rgba(255,20,60,.3);

  background:
    radial-gradient(
      circle at center,
      rgba(100,0,15,.12),
      transparent 45%
    ),
    #010001;

  /*
    HARD VIBRATION
  */

  animation:
    hardShake .065s linear infinite;
}

body.danger #matrixCanvas{
  opacity:.25;
  filter:
    hue-rotate(300deg)
    saturate(4);
}

body.danger #particleCanvas{
  opacity:.55;
  filter:
    hue-rotate(300deg)
    saturate(5);
}

body.danger .module-card,
body.danger .mission-card,
body.danger .terminal-window,
body.danger .skills-panel,
body.danger .status-grid > div{
  animation:
    dangerPulse .35s infinite alternate;
}

body.danger .welcome-title{
  animation:
    dangerGlitch .12s infinite;
}

body.danger .danger-card{
  animation:
    dangerCardShake .08s infinite;
}

body.danger .scanlines{
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 1px,
      rgba(255,0,60,.08) 2px
    );
}

/* =========================================================
   DANGER OVERLAY
   ========================================================= */

.danger-overlay{
  position:fixed;
  inset:0;

  z-index:8500;

  pointer-events:none;

  opacity:0;

  border:15px solid transparent;

  box-shadow:
    inset 0 0 100px rgba(255,0,60,.5);

  transition:.2s;
}

body.danger .danger-overlay{
  opacity:1;
  animation:redBorder .45s infinite;
}

.danger-warning-top{
  position:absolute;
  top:82px;
  left:50%;

  transform:translateX(-50%);

  color:var(--red);

  font-size:10px;
  letter-spacing:4px;

  text-shadow:0 0 15px var(--red);

  animation:blink .35s infinite;
}

.danger-warning-bottom{
  position:absolute;
  bottom:15px;
  left:50%;

  transform:translateX(-50%);

  color:var(--red);

  font-size:8px;
  letter-spacing:3px;
}

.danger-corner{
  position:absolute;

  color:var(--red);

  font-size:55px;

  text-shadow:0 0 25px var(--red);

  animation:blink .5s infinite;
}

.danger-left{
  left:20px;
  top:45%;
}

.danger-right{
  right:20px;
  top:45%;
}

.danger-flash{
  position:fixed;
  inset:0;

  z-index:8400;

  pointer-events:none;

  background:rgba(255,0,50,.2);

  opacity:0;
}

body.danger .danger-flash{
  animation:redFlash .25s infinite;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes pulse{
  0%,100%{
    opacity:.4;
  }

  50%{
    opacity:1;
  }
}

@keyframes blink{
  0%,100%{
    opacity:.25;
  }

  50%{
    opacity:1;
  }
}

@keyframes moduleScan{
  0%{
    left:-100%;
  }

  100%{
    left:140%;
  }
}

@keyframes dangerScan{
  0%{
    left:-100%;
  }

  100%{
    left:100%;
  }
}

@keyframes warningButton{
  0%,100%{
    box-shadow:0 0 12px rgba(255,0,60,.25);
  }

  50%{
    box-shadow:
      0 0 25px rgba(255,0,60,.7),
      0 0 50px rgba(255,0,60,.2);
  }
}

/* HARD SHAKE */

@keyframes hardShake{

  0%{
    transform:translate(0,0) rotate(0);
  }

  10%{
    transform:translate(-7px,5px) rotate(-.3deg);
  }

  20%{
    transform:translate(6px,-6px) rotate(.35deg);
  }

  30%{
    transform:translate(-8px,-3px) rotate(-.4deg);
  }

  40%{
    transform:translate(7px,6px) rotate(.3deg);
  }

  50%{
    transform:translate(-6px,2px) rotate(-.35deg);
  }

  60%{
    transform:translate(8px,-6px) rotate(.4deg);
  }

  70%{
    transform:translate(-7px,5px) rotate(-.3deg);
  }

  80%{
    transform:translate(6px,3px) rotate(.35deg);
  }

  90%{
    transform:translate(-8px,-5px) rotate(-.4deg);
  }

  100%{
    transform:translate(0,0) rotate(0);
  }

}

@keyframes dangerCardShake{

  0%,100%{
    transform:translate(0);
  }

  25%{
    transform:translate(-3px,2px);
  }

  50%{
    transform:translate(3px,-2px);
  }

  75%{
    transform:translate(-2px,-1px);
  }

}

@keyframes dangerPulse{
  from{
    box-shadow:
      0 0 5px rgba(255,0,60,.04);
  }

  to{
    box-shadow:
      0 0 25px rgba(255,0,60,.15);
  }
}

@keyframes dangerButton{

  0%,100%{
    transform:translate(0);
  }

  25%{
    transform:translate(-3px,2px);
  }

  50%{
    transform:translate(3px,-2px);
  }

  75%{
    transform:translate(-2px,-1px);
  }

}

@keyframes redBorder{

  0%,100%{
    box-shadow:
      inset 0 0 70px rgba(255,0,60,.3);
  }

  50%{
    box-shadow:
      inset 0 0 150px rgba(255,0,60,.7);
  }

}

@keyframes redFlash{

  0%,70%,100%{
    opacity:0;
  }

  72%{
    opacity:.8;
  }

  76%{
    opacity:0;
  }

}

@keyframes dangerGlitch{

  0%{
    transform:translate(0);
  }

  25%{
    transform:translate(-5px,2px);
  }

  50%{
    transform:translate(5px,-2px);
  }

  75%{
    transform:translate(-3px,-3px);
  }

  100%{
    transform:translate(0);
  }

}

@keyframes hackBox{

  0%,100%{
    transform:translate(0);
  }

  25%{
    transform:translate(-3px,2px);
  }

  50%{
    transform:translate(3px,-2px);
  }

  75%{
    transform:translate(-2px,-1px);
  }

}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){

  nav{
    gap:10px;
  }

  .module-card{
    grid-template-columns:60px 120px 1fr 150px;
  }

  .module-info{
    display:none;
  }

  .status-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .mission-grid{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:760px){

  .topbar{
    padding:0 15px;
  }

  nav{
    position:absolute;

    top:68px;
    left:0;
    right:0;

    display:flex;
    flex-direction:column;

    max-height:0;
    overflow:hidden;

    background:#010604;

    border-bottom:1px solid var(--line);

    transition:max-height .3s ease;
  }

  nav.open{
    max-height:400px;
  }

  nav a{
    padding:16px 20px;
    border-bottom:1px solid rgba(0,255,102,.05);
  }

  .menu-btn{
    display:block;
  }

  .hero{
    padding-top:130px;
  }

  .hero-hud{
    display:none;
  }

  .welcome-small{
    letter-spacing:4px;
  }

  .welcome-title{
    font-size:clamp(48px,14vw,90px);
    letter-spacing:2px;
  }

  .hero-tagline{
    font-size:8px;
    letter-spacing:3px;
  }

  .krishna-name{
    font-size:28px;
  }

  .danger-section{
    width:calc(100% - 25px);
  }

  .danger-card{
    flex-direction:column;
    text-align:center;
  }

  .phone-hack-btn{
    width:100%;
  }

  .module-card{
    min-height:300px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    padding:35px 20px;
  }

  .module-number{
    position:absolute;
    top:18px;
    left:20px;
  }

  .module-icon{
    margin-bottom:15px;
  }

  .module-main h2{
    font-size:34px;
  }

  .enter-module{
    margin-top:22px;
    justify-self:auto;
  }

  .identity-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .mission-grid{
    grid-template-columns:1fr;
  }

  .status-grid{
    grid-template-columns:1fr 1fr;
  }

  footer{
    flex-direction:column;
    text-align:center;
  }

}

@media(max-width:450px){

  .logo{
    font-size:10px;
  }

  #clock{
    display:none;
  }

  .danger-toggle{
    top:76px;
    right:10px;
    padding:9px 10px;
    font-size:7px;
  }

  .hero{
    padding-left:14px;
    padding-right:14px;
  }

  .welcome-small{
    font-size:19px;
  }

  .welcome-title{
    font-size:47px;
  }

  .hero-tagline{
    line-height:1.8;
  }

  .boot-box{
    padding:20px;
  }

  .boot-lines{
    font-size:10px;
  }

  .section{
    width:calc(100% - 25px);
    padding:75px 0;
  }

  .section-heading h2{
    font-size:38px;
  }

  .status-grid{
    gap:7px;
  }

  .status-grid > div{
    padding:16px 5px;
  }

  .status-grid strong{
    font-size:10px;
  }

  .hack-box{
    padding:25px 18px;
  }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }

  body.danger{
    animation:none;
  }

}
/* =========================================================
   ULTRA CYBER HERO // STRONG BACKGROUND
   ========================================================= */

.hero{
  min-height:100vh;
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0,255,70,.12) 0%,
      rgba(0,80,35,.06) 35%,
      transparent 68%
    );
}

/* VISIBLE MATRIX */
#matrixCanvas{
  z-index:-3 !important;
  opacity:.48 !important;

  filter:
    brightness(1.8)
    contrast(1.35)
    saturate(1.5);
}

/* CODE GRID */
.hero-grid{
  opacity:.7;

  background-image:
    linear-gradient(
      rgba(0,255,102,.09) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,255,102,.09) 1px,
      transparent 1px
    );

  background-size:45px 45px;

  animation:
    gridMove 12s linear infinite;
}

@keyframes gridMove{
  from{
    transform:translate(0,0);
  }

  to{
    transform:translate(45px,45px);
  }
}

/* =========================================================
   HERO HUD BOXES
   ========================================================= */

.hero-hud{
  z-index:5;

  min-width:190px;

  color:#4fae6d;

  background:
    linear-gradient(
      135deg,
      rgba(0,255,102,.07),
      rgba(0,0,0,.7)
    );

  border:1px solid rgba(0,255,102,.4);

  box-shadow:
    0 0 25px rgba(0,255,102,.08),
    inset 0 0 25px rgba(0,255,102,.035);

  backdrop-filter:blur(2px);
}

.hero-hud::before{
  content:"";

  position:absolute;
  top:-1px;
  left:20px;

  width:45px;
  height:2px;

  background:var(--green);

  box-shadow:0 0 12px var(--green);
}

/* =========================================================
   STRONG BREACH WARNING
   ========================================================= */

.breach-text{
  display:inline-block;

  padding:8px 20px;

  color:#ff1744;

  border:1px solid rgba(255,23,68,.35);

  background:rgba(255,0,40,.035);

  box-shadow:
    0 0 20px rgba(255,0,60,.08);

  text-shadow:
    0 0 12px rgba(255,0,60,.8);

  animation:
    breachBlink .7s infinite;
}

@keyframes breachBlink{
  0%,100%{
    opacity:.45;
  }

  50%{
    opacity:1;
    box-shadow:
      0 0 30px rgba(255,0,60,.25);
  }
}

/* =========================================================
   BIGGER WELCOME
   ========================================================= */

.welcome-small{
  text-shadow:
    0 0 10px var(--green),
    0 0 30px rgba(0,255,102,.45);
}

.welcome-title{
  position:relative;

  font-size:clamp(60px,11vw,145px);

  text-shadow:
    0 0 8px var(--green),
    0 0 20px var(--green),
    0 0 50px rgba(0,255,102,.7),
    0 0 100px rgba(0,255,102,.25);
}

/* GLITCH LINES */

.welcome-title::before,
.welcome-title::after{
  content:"HACKER WORLD";

  position:absolute;
  left:0;
  right:0;

  overflow:hidden;

  opacity:0;

  pointer-events:none;
}

.welcome-title::before{
  color:#fff;
  transform:translateX(-3px);
}

.welcome-title::after{
  color:#ff1744;
  transform:translateX(3px);
}

.welcome-title:hover::before,
.welcome-title:hover::after{
  opacity:.35;
}

/* =========================================================
   KRISHNA COMMAND BOX
   ========================================================= */

.krishna-box{
  position:relative;

  background:
    linear-gradient(
      90deg,
      rgba(0,255,102,.035),
      rgba(0,0,0,.2),
      rgba(0,255,102,.035)
    );

  box-shadow:
    0 0 30px rgba(0,255,102,.12),
    inset 0 0 30px rgba(0,255,102,.04);
}

.krishna-box::before,
.krishna-box::after{
  content:"";

  position:absolute;

  width:18px;
  height:18px;
}

.krishna-box::before{
  top:-1px;
  left:-1px;

  border-top:2px solid var(--green);
  border-left:2px solid var(--green);
}

.krishna-box::after{
  bottom:-1px;
  right:-1px;

  border-right:2px solid var(--green);
  border-bottom:2px solid var(--green);
}

.krishna-name{
  text-shadow:
    0 0 12px var(--green),
    0 0 30px rgba(0,255,102,.4);
}

/* =========================================================
   INITIALIZATION
   ========================================================= */

.initializing{
  position:relative;

  padding:15px;

  border-left:1px solid rgba(0,255,102,.25);
  border-right:1px solid rgba(0,255,102,.25);

  background:rgba(0,20,8,.18);
}

.init-bar{
  height:12px;

  background:#021508;

  box-shadow:
    inset 0 0 10px rgba(0,255,102,.15);
}

.init-bar span{
  box-shadow:
    0 0 8px var(--green),
    0 0 25px var(--green);
}

/* =========================================================
   HERO TERMINAL
   ========================================================= */

.hero-terminal{
  padding:12px 18px;

  border-left:1px solid rgba(0,255,102,.15);

  background:
    linear-gradient(
      90deg,
      rgba(0,255,102,.035),
      transparent
    );

  text-shadow:
    0 0 8px rgba(0,255,102,.3);
}

/* =========================================================
   SIDE CYBER LIGHTS
   ========================================================= */

.hero::before{
  content:"";

  position:absolute;

  left:0;
  top:18%;
  bottom:10%;

  width:3px;

  background:linear-gradient(
    transparent,
    var(--green),
    transparent
  );

  box-shadow:
    0 0 20px var(--green);

  opacity:.7;
}

.hero::after{
  content:"";

  position:absolute;

  right:0;
  top:18%;
  bottom:10%;

  width:3px;

  background:linear-gradient(
    transparent,
    var(--green),
    transparent
  );

  box-shadow:
    0 0 20px var(--green);

  opacity:.7;
}

/* =========================================================
   DANGER MODE
   ========================================================= */

body.danger .hero{
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,0,50,.12),
      transparent 65%
    );
}

body.danger #matrixCanvas{
  opacity:.58 !important;

  filter:
    brightness(2)
    contrast(1.5)
    saturate(5)
    hue-rotate(300deg);
}

body.danger .hero-grid{
  background-image:
    linear-gradient(
      rgba(255,0,60,.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,0,60,.12) 1px,
      transparent 1px
    );
}

body.danger .hero::before,
body.danger .hero::after{
  background:linear-gradient(
    transparent,
    var(--red),
    transparent
  );

  box-shadow:
    0 0 30px var(--red);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  #matrixCanvas{
    opacity:.40 !important;
  }

  .hero{
    min-height:100svh;
  }

  .hero-hud{
    display:none;
  }

  .welcome-title{
    font-size:clamp(52px,15vw,90px);
  }

  .hero::before,
  .hero::after{
    opacity:.35;
  }

}
/* =========================================================
   NAV TEXT — FORCE BIG SIZE
   ========================================================= */

/* Desktop */
nav a,
.nav a,
.navbar a,
.nav-links a,
.menu a,
header nav a{
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:2px !important;

  color:#76a987 !important;

  line-height:1.5 !important;

  text-shadow:
    0 0 6px rgba(0,255,102,.18) !important;

  transition:
    .25s ease !important;
}

nav a:hover,
.nav a:hover,
.navbar a:hover,
.nav-links a:hover,
.menu a:hover,
header nav a:hover,

nav a.active,
.nav a.active,
.navbar a.active,
.nav-links a.active{
  color:#00ff66 !important;

  text-shadow:
    0 0 8px #00ff66,
    0 0 18px rgba(0,255,102,.65) !important;
}

/* Navigation spacing */
nav,
.nav,
.navbar,
.nav-links{
  gap:32px !important;
}

/* =========================================================
   MOBILE NAV
   ========================================================= */

@media(max-width:700px){

  nav a,
  .nav a,
  .navbar a,
  .nav-links a,
  .menu a,
  header nav a{
    font-size:19px !important;

    font-weight:700 !important;

    letter-spacing:2px !important;

    padding:15px 8px !important;
  }

  nav,
  .nav,
  .navbar,
  .nav-links{
    gap:5px !important;
  }
}
/* =========================================================
   MODULE SIDE TEXT — BIG & CLEAR
   ========================================================= */

/* Side information text */
.module-card .hud-line,
.module-card .module-info,
.module-card .module-meta,
.module-card .card-info,
.module-card small{
  font-size:13px !important;
  line-height:1.8 !important;
  letter-spacing:1.5px !important;

  color:#79a987 !important;

  text-shadow:
    0 0 5px rgba(0,255,102,.18);
}

/* Labels like STATUS / TYPE / ACCESS */
.module-card .label,
.module-card .hud-title,
.module-card .meta-label{
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:2px !important;

  color:#00ff66 !important;
}

/* Values inside those boxes */
.module-card strong,
.module-card .value,
.module-card .meta-value{
  font-size:13px !important;
  font-weight:600 !important;

  color:#9bd8ad !important;

  text-shadow:
    0 0 6px rgba(0,255,102,.25);
}

/* =========================================================
   ENTER MODULE BUTTON — BIGGER
   ========================================================= */

.module-card a,
.module-card button,
.module-card .enter-module,
.module-card .module-btn{
  font-size:12px !important;

  font-weight:700 !important;

  letter-spacing:1.5px !important;

  padding:13px 18px !important;

  color:#00ff66 !important;

  text-shadow:
    0 0 7px rgba(0,255,102,.5);

  border:1px solid rgba(0,255,102,.45);

  background:rgba(0,255,102,.025);

  box-shadow:
    0 0 10px rgba(0,255,102,.06);

  white-space:nowrap;
}

/* Button hover */
.module-card a:hover,
.module-card button:hover,
.module-card .enter-module:hover,
.module-card .module-btn:hover{
  color:#fff !important;

  border-color:#00ff66;

  box-shadow:
    0 0 18px rgba(0,255,102,.3),
    inset 0 0 12px rgba(0,255,102,.06);
}

/* =========================================================
   MODULE SUBTITLE
   ========================================================= */

.module-card .subtitle,
.module-card .module-subtitle,
.module-card .card-subtitle{
  font-size:12px !important;

  letter-spacing:2px !important;

  color:#628a70 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .module-card .hud-line,
  .module-card .module-info,
  .module-card .module-meta,
  .module-card .card-info,
  .module-card small{
    font-size:11px !important;
  }

  .module-card .label,
  .module-card .hud-title,
  .module-card .meta-label{
    font-size:10px !important;
  }

  .module-card strong,
  .module-card .value,
  .module-card .meta-value{
    font-size:11px !important;
  }

  .module-card a,
  .module-card button,
  .module-card .enter-module,
  .module-card .module-btn{
    font-size:10px !important;

    padding:11px 13px !important;
  }
}
/* =========================================================
   KRISHNA ABOUT PAGE — PREMIUM CYBER COMMAND CENTER
   Paste this block at the VERY END of style.css
   ========================================================= */

#aboutHero{
  min-height:100vh !important;
  position:relative;
  display:grid !important;
  grid-template-columns:260px minmax(400px,760px) 260px !important;
  align-items:center !important;
  justify-content:center !important;
  gap:45px !important;
  padding:130px 35px 80px !important;
  overflow:hidden;
  background:
    radial-gradient(circle at center,
      rgba(0,255,102,.08),
      transparent 42%),
    linear-gradient(
      180deg,
      #010503 0%,
      #010302 100%
    ) !important;
}


/* HERO GRID */

#aboutHero .hero-grid{
  position:absolute !important;
  inset:0 !important;
  pointer-events:none;
  opacity:.55;
  background-image:
    linear-gradient(rgba(0,255,102,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,102,.06) 1px,transparent 1px);
  background-size:45px 45px;
  mask-image:linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}


/* HERO SIDE PANELS */

#aboutHero .hero-side{
  position:relative !important;
  z-index:5;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:18px;
}

#aboutHero .hero-side.left{
  justify-self:end;
}

#aboutHero .hero-side.right{
  justify-self:start;
}


/* HUD PANEL */

#aboutHero .hud-panel{
  position:relative;
  padding:20px !important;
  border:1px solid rgba(0,255,102,.28);
  background:
    linear-gradient(
      145deg,
      rgba(0,255,102,.055),
      rgba(0,0,0,.72)
    );
  box-shadow:
    0 0 25px rgba(0,255,102,.045),
    inset 0 0 25px rgba(0,255,102,.025);
  overflow:hidden;
}

#aboutHero .hud-panel::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:55px;
  height:2px;
  background:#00ff66;
  box-shadow:0 0 12px #00ff66;
}

#aboutHero .hud-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 4px,
      rgba(0,255,102,.018) 5px
    );
}


/* HUD TITLE */

#aboutHero .hud-title{
  position:relative;
  margin-bottom:16px;
  color:#00ff66;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
}


/* HUD ROW */

#aboutHero .hud-line{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:9px 0;
  border-bottom:1px solid rgba(0,255,102,.08);
  color:#567563;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1px;
}

#aboutHero .hud-line:last-child{
  border-bottom:0;
}

#aboutHero .hud-line strong{
  color:#b4e8c4;
  font-size:10px;
  letter-spacing:1px;
}


/* ONLINE DOT */

#aboutHero .online-dot,
.identity-panel .online-dot{
  display:inline-block;
  width:7px;
  height:7px;
  margin-left:5px;
  border-radius:50%;
  background:#00ff66;
  box-shadow:
    0 0 5px #00ff66,
    0 0 12px rgba(0,255,102,.8);
  animation:aboutPulse 1.4s infinite;
}

@keyframes aboutPulse{
  0%,100%{
    opacity:1;
    transform:scale(1);
  }
  50%{
    opacity:.35;
    transform:scale(.7);
  }
}


/* HUD BARS */

#aboutHero .hud-bars{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#aboutHero .hud-bar-row{
  display:grid;
  grid-template-columns:45px 1fr 35px;
  align-items:center;
  gap:8px;
  color:#668572;
  font-family:var(--mono);
  font-size:9px;
}

#aboutHero .hud-bar{
  height:4px;
  overflow:hidden;
  background:rgba(0,255,102,.08);
}

#aboutHero .hud-bar span{
  display:block;
  height:100%;
  background:#00ff66;
  box-shadow:0 0 10px rgba(0,255,102,.8);
}


/* FOCUS LIST */

#aboutHero .module-list{
  margin:0;
  padding:0;
  list-style:none;
}

#aboutHero .module-list li{
  padding:8px 0;
  color:#7ea58b;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1px;
  border-bottom:1px solid rgba(0,255,102,.07);
}

#aboutHero .module-list li::before{
  content:"> ";
  color:#00ff66;
}


/* HERO CENTER */

#aboutHero .hero-content{
  position:relative !important;
  z-index:10;
  width:100%;
  text-align:center;
}


/* WARNING */

#aboutHero .breach-text{
  display:inline-block;
  margin-bottom:22px;
  padding:7px 14px;
  color:#ff1744;
  border:1px solid rgba(255,23,68,.45);
  background:rgba(255,23,68,.04);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:3px;
  text-shadow:0 0 10px rgba(255,23,68,.7);
  animation:aboutWarning 2s infinite;
}

@keyframes aboutWarning{
  0%,100%{opacity:1}
  50%{opacity:.45}
}


/* SMALL TITLE */

#aboutHero .welcome-small{
  color:#00ff66;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:6px;
}


/* MAIN NAME */

#aboutHero .welcome-title{
  margin:10px 0;
  color:#eafff1;
  font-family:var(--serif);
  font-size:clamp(75px,10vw,150px) !important;
  font-weight:400;
  line-height:.9;
  letter-spacing:8px;
  text-shadow:
    0 0 10px rgba(0,255,102,.18),
    0 0 35px rgba(0,255,102,.08);
}


/* TAGLINE */

#aboutHero .hero-tagline{
  color:#719581;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:4px;
}


/* DEVELOPER BOX */

#aboutHero .krishna-box{
  width:min(480px,100%);
  margin:30px auto 22px;
  padding:18px 22px;
  border:1px solid rgba(0,255,102,.28);
  background:rgba(0,255,102,.025);
  box-shadow:
    0 0 30px rgba(0,255,102,.04),
    inset 0 0 20px rgba(0,255,102,.025);
}

#aboutHero .krishna-name{
  color:#00ff66;
  font-family:var(--mono);
  font-size:18px;
  letter-spacing:4px;
}

#aboutHero .krishna-role{
  margin-top:7px;
  color:#6f8e7a;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:2px;
}


/* LOADING */

#aboutHero .initializing{
  width:min(500px,100%);
  margin:20px auto;
}

#aboutHero .init-header{
  display:flex;
  justify-content:space-between;
  margin-bottom:7px;
  color:#60806c;
  font-family:var(--mono);
  font-size:9px;
}

#aboutHero .init-percent{
  color:#00ff66;
}

#aboutHero .init-bar{
  height:3px;
  background:rgba(0,255,102,.08);
  overflow:hidden;
}

#aboutHero .init-bar span{
  display:block;
  width:100%;
  height:100%;
  background:#00ff66;
  box-shadow:0 0 12px #00ff66;
}


/* HERO TERMINAL */

#aboutHero .hero-terminal{
  width:min(520px,100%);
  margin:22px auto 0;
  padding:16px;
  text-align:left;
  border-left:2px solid #00ff66;
  background:rgba(0,255,102,.025);
  color:#61806d;
  font-family:var(--mono);
  font-size:9px;
  line-height:1.9;
}

#aboutHero .hero-terminal div:last-child{
  color:#00ff66;
}


/* =========================================================
   ABOUT SECTIONS
   ========================================================= */

body > main > section:not(#aboutHero){
  position:relative;
  padding:110px 25px !important;
  border-top:1px solid rgba(0,255,102,.12);
  background:
    linear-gradient(
      180deg,
      rgba(0,255,102,.015),
      transparent 25%,
      transparent 75%,
      rgba(0,255,102,.012)
    );
}

.section-container{
  width:min(1150px,100%);
  margin:auto;
}

.section-header{
  margin-bottom:40px;
}

.section-number{
  margin-bottom:10px;
  color:#00ff66;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:3px;
}

.section-title{
  margin:0;
  color:#eafff1;
  font-family:var(--serif);
  font-size:clamp(35px,5vw,68px);
  font-weight:400;
  letter-spacing:3px;
  line-height:1;
}

.section-subtitle{
  margin-top:13px;
  color:#567563;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:3px;
}


/* =========================================================
   IDENTITY
   ========================================================= */

.about-grid{
  display:grid;
  grid-template-columns:350px 1fr;
  gap:25px;
}

.identity-panel,
.identity-text{
  position:relative;
  padding:30px;
  border:1px solid rgba(0,255,102,.20);
  background:
    linear-gradient(
      145deg,
      rgba(0,255,102,.045),
      rgba(0,0,0,.55)
    );
  box-shadow:
    inset 0 0 25px rgba(0,255,102,.018),
    0 0 25px rgba(0,0,0,.3);
}

.identity-panel::before,
.identity-text::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:45px;
  height:2px;
  background:#00ff66;
  box-shadow:0 0 10px #00ff66;
}

.identity-panel h3,
.identity-text h3{
  margin:0 0 22px;
  color:#00ff66;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:2px;
}

.identity-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid rgba(0,255,102,.08);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1px;
}

.identity-row span:first-child{
  color:#4f705d;
}

.identity-row span:last-child{
  color:#a0cdae;
  text-align:right;
}

.identity-text p{
  margin:0;
  color:#789789;
  font-family:var(--mono);
  font-size:13px;
  line-height:2;
}


/* =========================================================
   SKILLS
   ========================================================= */

.skills-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.skills-panel{
  padding:28px;
  border:1px solid rgba(0,255,102,.18);
  background:rgba(2,12,7,.75);
}

.skills-panel h3{
  margin:0 0 25px;
  color:#00ff66;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:2px;
}

.skill{
  margin-bottom:22px;
}

.skill:last-child{
  margin-bottom:0;
}

.skill-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
  font-family:var(--mono);
  font-size:11px;
}

.skill-top span{
  color:#d3f3dd;
}

.skill-top strong{
  color:#00ff66;
  font-size:9px;
}

.skill-track{
  height:5px;
  overflow:hidden;
  background:rgba(0,255,102,.08);
}

.skill-fill{
  width:0;
  height:100%;
  background:#00ff66;
  box-shadow:0 0 12px rgba(0,255,102,.8);
  transition:width 1.5s ease;
}


/* =========================================================
   MISSION CARDS
   ========================================================= */

.missions-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.mission-card{
  position:relative;
  display:block;
  padding:28px;
  border:1px solid rgba(0,255,102,.18);
  background:rgba(2,12,7,.72);
  color:inherit;
  text-decoration:none;
  overflow:hidden;
  transition:.3s ease;
}

.mission-card::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:70%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(0,255,102,.08),
    transparent
  );
  transition:.6s ease;
}

.mission-card:hover{
  transform:translateY(-6px);
  border-color:#00ff66;
  box-shadow:
    0 0 25px rgba(0,255,102,.12),
    inset 0 0 25px rgba(0,255,102,.025);
}

.mission-card:hover::before{
  left:120%;
}

.mission-id{
  color:#00ff66;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:2px;
}

.mission-card h3{
  margin:16px 0 12px;
  color:#eafff1;
  font-family:var(--serif);
  font-size:28px;
  letter-spacing:2px;
}

.mission-card p{
  color:#708d7c;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.9;
}

.mission-status{
  margin-top:20px;
  color:#00ff66;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:1px;
}

.status-dot{
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:7px;
  border-radius:50%;
  background:#00ff66;
  box-shadow:0 0 8px #00ff66;
}


/* =========================================================
   STATUS GRID
   ========================================================= */

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

.status-card{
  position:relative;
  min-height:130px;
  padding:25px;
  border:1px solid rgba(0,255,102,.18);
  background:rgba(2,12,7,.72);
}

.status-card .label{
  color:#577766;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:2px;
}

.status-card .value{
  margin-top:15px;
  color:#d9f5e1;
  font-family:var(--mono);
  font-size:16px;
  letter-spacing:2px;
}

.status-card > .status-dot{
  position:absolute;
  right:20px;
  top:25px;
}


/* =========================================================
   CLASSIFIED TERMINAL
   ========================================================= */

.terminal-window{
  border:1px solid rgba(0,255,102,.25);
  background:#010604;
  box-shadow:
    0 0 35px rgba(0,255,102,.05),
    inset 0 0 30px rgba(0,255,102,.025);
}

.terminal-head{
  display:flex;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid rgba(0,255,102,.15);
  color:#00ff66;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:2px;
}

.terminal-body{
  padding:28px;
}

.terminal-line{
  color:#759482;
  font-family:var(--mono);
  font-size:12px;
  line-height:2;
}

.terminal-prompt{
  color:#00ff66;
}

#final-message .identity-text p{
  color:#a5d5b4;
  font-size:16px;
  letter-spacing:2px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:30px 35px;
  border-top:1px solid rgba(0,255,102,.15);
  color:#496454;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:2px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:1000px){

  #aboutHero{
    grid-template-columns:1fr !important;
    gap:25px !important;
    padding-top:120px !important;
  }

  #aboutHero .hero-side{
    display:none !important;
  }

  .about-grid{
    grid-template-columns:1fr;
  }

  .skills-grid,
  .missions-grid{
    grid-template-columns:1fr;
  }

  .status-grid{
    grid-template-columns:1fr 1fr;
  }

}


@media(max-width:760px){

  #aboutHero{
    min-height:auto !important;
    padding:120px 18px 70px !important;
  }

  #aboutHero .welcome-title{
    font-size:clamp(55px,18vw,100px) !important;
    letter-spacing:3px;
  }

  #aboutHero .welcome-small{
    font-size:9px;
    letter-spacing:3px;
  }

  #aboutHero .hero-tagline{
    font-size:8px;
    letter-spacing:2px;
  }

  body > main > section:not(#aboutHero){
    padding:75px 16px !important;
  }

  .section-title{
    font-size:clamp(32px,10vw,55px);
  }

  .identity-panel,
  .identity-text,
  .skills-panel,
  .mission-card{
    padding:22px;
  }

  .identity-row{
    flex-direction:column;
    gap:5px;
  }

  .identity-row span:last-child{
    text-align:left;
  }

  .status-grid{
    grid-template-columns:1fr;
  }

  .terminal-body{
    padding:20px;
    overflow-x:auto;
  }

  .terminal-line{
    white-space:nowrap;
    font-size:10px;
  }

  footer{
    flex-direction:column;
    text-align:center;
    padding:25px 15px;
  }

}


@media(prefers-reduced-motion:reduce){

  #aboutHero .breach-text,
  #aboutHero .online-dot,
  .online-dot,
  .status-dot{
    animation:none !important;
  }

  .mission-card{
    transition:none !important;
  }

}
/* =========================================================
   ABOUT HERO — MATRIX VISIBLE FIX
   ========================================================= */

#aboutHero{
  isolation:isolate;
}

/* Matrix ko hero ke andar visible layer banao */
#aboutHero::before{
  z-index:0 !important;
  pointer-events:none;
}

/* Hero ka grid matrix ke upar rahe */
#aboutHero .hero-grid{
  z-index:1 !important;
  pointer-events:none;
}

/* Hero ke HUD/content sabse upar */
#aboutHero .hero-side,
#aboutHero .hero-content{
  z-index:5 !important;
}

/* Dedicated Matrix canvas */
body:has(#aboutHero) #matrixCanvas{
  z-index:0 !important;
  opacity:.42 !important;
  pointer-events:none !important;
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
}

/* Hero ko opaque background mat do */
#aboutHero{
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,255,70,.10) 0%,
      rgba(0,80,35,.045) 35%,
      rgba(1,3,2,.18) 70%,
      transparent 100%
    ) !important;
}

/* Matrix ko clearly visible rakho */
#aboutHero .hero-grid{
  opacity:.55 !important;
}

/* Content readable rahe */
#aboutHero .hero-content,
#aboutHero .hero-side{
  position:relative !important;
  z-index:5 !important;
}

/* Mobile */
@media(max-width:760px){

  body:has(#aboutHero) #matrixCanvas{
    opacity:.30 !important;
  }

}
/* =========================================================
   ABOUT PAGE — BIGGER BOX TEXT
   ========================================================= */

/* Identity / About text */
#aboutHero ~ section .identity-text,
#aboutHero ~ section .identity-text p,
#aboutHero ~ section .identity-row,
#aboutHero ~ section .identity-row span,
#aboutHero ~ section .identity-row strong{
  font-size:15px !important;
  line-height:1.8 !important;
}

/* All normal paragraph text */
.section-container p{
  font-size:15px !important;
  line-height:1.9 !important;
}

/* Small labels inside boxes */
.section-container .label{
  font-size:12px !important;
  letter-spacing:2px !important;
}

/* Box headings */
.section-container .hud-title,
.section-container .panel-title,
.section-container .terminal-head{
  font-size:13px !important;
  letter-spacing:2px !important;
}

/* Identity information */
.section-container .identity-row{
  font-size:14px !important;
  line-height:1.7 !important;
}

/* Skill information */
.section-container .skill,
.section-container .skill-top,
.section-container .skill-top span{
  font-size:13px !important;
}

/* Mission / learning cards */
.section-container .mission-card{
  font-size:14px !important;
  line-height:1.7 !important;
}

.section-container .mission-card p{
  font-size:14px !important;
  line-height:1.8 !important;
}

/* Terminal text */
.section-container .terminal-line,
.section-container .terminal-prompt{
  font-size:14px !important;
  line-height:1.8 !important;
}

/* HUD small information */
.hud-line{
  font-size:12px !important;
  line-height:1.8 !important;
}

.hud-line strong{
  font-size:12px !important;
}

/* Bigger text on smaller screens */
@media(max-width:760px){

  .section-container p{
    font-size:14px !important;
    line-height:1.8 !important;
  }

  .section-container .identity-row{
    font-size:13px !important;
  }

  .section-container .terminal-line{
    font-size:12px !important;
  }

}
/* =========================================================
   PROJECTS PAGE // MISSION DATABASE
   ========================================================= */

.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:30px;
}

.project-card{
  position:relative;
  padding:25px;
  border:1px solid rgba(0,255,102,.25);
  background:rgba(1,8,4,.72);
  overflow:hidden;
  transition:.35s ease;
}

.project-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:45px;
  height:2px;
  background:#00ff66;
  box-shadow:0 0 15px #00ff66;
}

.project-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 4px,
    rgba(0,255,102,.025) 5px
  );
}

.project-card:hover{
  transform:translateY(-8px);
  border-color:#00ff66;
  box-shadow:
    0 0 20px rgba(0,255,102,.12),
    inset 0 0 30px rgba(0,255,102,.035);
}

.project-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:1px;
}

.mission-number{
  color:#789789;
}

.mission-status{
  color:#00ff66;
}

.project-icon{
  margin:28px 0 15px;
  font-family:var(--mono);
  font-size:30px;
  color:#00ff66;
  text-shadow:0 0 12px rgba(0,255,102,.7);
}

.project-card h3{
  margin:0;
  font-family:var(--serif);
  font-size:25px;
  letter-spacing:2px;
  color:#eafff1;
}

.project-code{
  margin-top:8px;
  color:#00b94b;
  font:11px var(--mono);
  letter-spacing:2px;
}

.project-info{
  margin-top:25px;
  border-top:1px solid rgba(0,255,102,.15);
}

.project-info div{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:9px 0;
  border-bottom:1px solid rgba(0,255,102,.1);
  font:11px var(--mono);
}

.project-info span{
  color:#405c4c;
}

.project-info strong{
  color:#9acaaa;
  text-align:right;
}

.project-description{
  margin-top:25px;
}

.project-description h4{
  margin-bottom:12px;
  color:#00ff66;
  font:12px var(--mono);
  letter-spacing:2px;
}

.project-description p{
  margin:0;
  color:#789789;
  font:14px/1.8 var(--mono);
}

.project-features{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:20px;
}

.project-features span{
  padding:6px 8px;
  border:1px solid rgba(0,255,102,.2);
  color:#789789;
  font:9px var(--mono);
  letter-spacing:1px;
}

.project-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:25px;
  padding-top:15px;
  border-top:1px solid rgba(0,255,102,.15);
}

.project-footer > span{
  color:#405c4c;
  font:9px var(--mono);
}

.project-button{
  padding:9px 12px;
  border:1px solid #00ff66;
  color:#00ff66;
  text-decoration:none;
  font:10px var(--mono);
  transition:.25s ease;
}

.project-button:hover{
  background:#00ff66;
  color:#010302;
  box-shadow:0 0 15px rgba(0,255,102,.5);
}

.project-log{
  max-width:1000px;
  margin:auto;
}

.final-project-panel{
  max-width:1000px;
  margin:auto;
}

.final-project-panel p{
  color:#789789;
  font:15px/1.9 var(--mono);
}

.final-project-panel strong{
  color:#00ff66;
}


/* =========================================================
   PROJECTS RESPONSIVE
   ========================================================= */

@media(max-width:1000px){

  .projects-grid{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:700px){

  .projects-grid{
    grid-template-columns:1fr;
  }

  .project-card{
    padding:20px;
  }

  .project-card h3{
    font-size:21px;
  }

  .project-description p{
    font-size:13px;
  }

  .project-footer{
    align-items:flex-start;
    flex-direction:column;
  }

}
.project-card{
  cursor:pointer !important;
}

.project-card:hover{
  transform:translateY(-8px) scale(1.01);
  border-color:#00ff66;
  box-shadow:
    0 0 25px rgba(0,255,102,.18),
    inset 0 0 30px rgba(0,255,102,.04);
}
/* =========================================================
   KRISHNA // SKILLS PAGE
   ========================================================= */

.skills-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:30px;
}

.skill-main-panel{
  position:relative;
  padding:25px !important;
  min-height:330px;
  overflow:hidden;
}

.skill-main-panel::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:45px;
  height:2px;
  background:#00ff66;
  box-shadow:0 0 14px #00ff66;
}

.skill-panel-head{
  display:flex;
  justify-content:space-between;
  padding-bottom:12px;
  border-bottom:1px solid rgba(0,255,102,.15);
  color:#405c4c;
  font:10px var(--mono);
  letter-spacing:1px;
}

.skill-panel-head strong{
  color:#00ff66;
}

.skill-main-panel h3{
  margin-top:25px;
  color:#eafff1;
  font:26px var(--serif);
  letter-spacing:2px;
}

.skill-big-number{
  margin:10px 0 18px;
  color:#00ff66;
  font:bold 32px var(--mono);
  text-shadow:0 0 12px rgba(0,255,102,.4);
}

.skill-main-panel p{
  margin-top:20px;
  color:#789789;
  font:13px/1.7 var(--mono);
}

.tools-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:30px;
}

.tool-card{
  position:relative;
  padding:25px;
  min-height:190px;
  border:1px solid rgba(0,255,102,.2);
  background:rgba(1,8,4,.72);
  transition:.3s ease;
}

.tool-card:hover{
  transform:translateY(-6px);
  border-color:#00ff66;
  box-shadow:
    0 0 22px rgba(0,255,102,.15),
    inset 0 0 20px rgba(0,255,102,.03);
}

.tool-number{
  color:#405c4c;
  font:10px var(--mono);
  letter-spacing:2px;
}

.tool-card h3{
  margin:25px 0 12px;
  color:#eafff1;
  font:24px var(--serif);
  letter-spacing:2px;
}

.tool-card p{
  color:#789789;
  font:12px/1.7 var(--mono);
}

.tool-status{
  display:block;
  margin-top:18px;
  color:#00ff66;
  font:10px var(--mono);
  letter-spacing:1px;
}

.learning-process{
  max-width:1000px;
  margin:auto;
}

.future-skills-text{
  max-width:1000px;
  margin:auto;
}

.final-skill-panel{
  max-width:1000px;
  margin:auto;
}

.final-skill-panel p{
  color:#789789;
  font:14px/1.8 var(--mono);
}

.final-skill-panel strong{
  color:#00ff66;
}


/* =========================================================
   SKILLS PAGE // RESPONSIVE
   ========================================================= */

@media(max-width:1050px){

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

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

}

@media(max-width:700px){

  .skills-grid,
  .tools-grid{
    grid-template-columns:1fr;
  }

  .skill-main-panel{
    min-height:auto;
  }

  .skill-main-panel h3{
    font-size:22px;
  }

  .skill-big-number{
    font-size:28px;
  }

  .tool-card{
    min-height:auto;
  }

}
/* =========================================================
   KRISHNA // ACCESS BOX HOVER EFFECT
   ========================================================= */

#connection .status-card{
  position:relative !important;
  cursor:pointer !important;
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease !important;
}

/* MOUSE HOVER */

#connection .status-card:hover{
  transform:translateY(-8px) scale(1.02) !important;

  border-color:#00ff66 !important;

  background:
    linear-gradient(
      135deg,
      rgba(0,255,102,.08),
      rgba(0,10,5,.85)
    ) !important;

  box-shadow:
    0 0 8px rgba(0,255,102,.35),
    0 0 25px rgba(0,255,102,.18),
    inset 0 0 25px rgba(0,255,102,.05) !important;
}

/* GREEN SCANNING LINE */

#connection .status-card::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:2px;
  height:0;
  background:#00ff66;
  box-shadow:0 0 12px #00ff66;
  transition:height .3s ease;
  pointer-events:none;
}

#connection .status-card:hover::after{
  height:100%;
}

/* TEXT GLOW */

#connection .status-card:hover .value{
  color:#00ff66 !important;
  text-shadow:
    0 0 8px rgba(0,255,102,.7),
    0 0 18px rgba(0,255,102,.3);
}

#connection .status-card:hover .label{
  color:#00ff66 !important;
}


/* MOBILE */

@media(max-width:700px){

  #connection .status-card:hover{
    transform:translateY(-4px) !important;
  }

}
/* =========================================================
   KRISHNA // TERMINAL PAGE
   ========================================================= */

.terminal-hero{
  min-height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding:120px 30px 80px;
}

.terminal-hero-grid{
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      rgba(0,255,102,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,255,102,.035) 1px,
      transparent 1px
    );

  background-size:50px 50px;
}

.terminal-hero-content{
  position:relative;
  z-index:5;
  width:min(1000px,92%);
  text-align:center;
}

.terminal-alert{
  display:inline-block;
  padding:10px 18px;
  border:1px solid rgba(255,23,68,.45);
  color:#ff1744;
  font:11px var(--mono);
  letter-spacing:3px;
  text-shadow:0 0 8px rgba(255,23,68,.5);
}

.terminal-kicker{
  margin-top:30px;
  color:#00ff66;
  font:12px var(--mono);
  letter-spacing:5px;
}

.terminal-hero h1{
  margin:15px 0;
  color:#eafff1;
  font:clamp(45px,8vw,100px) var(--serif);
  letter-spacing:4px;
  text-shadow:
    0 0 15px rgba(0,255,102,.2);
}

.terminal-hero p{
  color:#789789;
  font:12px var(--mono);
  letter-spacing:3px;
}

.terminal-status-line{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
  color:#405c4c;
  font:10px var(--mono);
}

.terminal-status-line strong{
  color:#00ff66;
}


/* =========================================================
   MAIN TERMINAL
   ========================================================= */

.real-terminal{
  max-width:1100px;
  margin:35px auto 0;
  border:1px solid rgba(0,255,102,.35);
  background:rgba(0,5,3,.9);
  box-shadow:
    0 0 30px rgba(0,255,102,.06),
    inset 0 0 40px rgba(0,255,102,.025);
  overflow:hidden;
}

.real-terminal-header{
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 18px;
  border-bottom:1px solid rgba(0,255,102,.2);
  background:rgba(0,255,102,.025);
}

.terminal-window-title{
  display:flex;
  align-items:center;
  gap:8px;
  color:#9acaaa;
  font:11px var(--mono);
  letter-spacing:1px;
}

.terminal-light{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#00ff66;
  box-shadow:0 0 8px #00ff66;
}

.terminal-header-status{
  color:#00ff66;
  font:10px var(--mono);
}

.real-terminal-body{
  min-height:400px;
  max-height:500px;
  overflow-y:auto;
  padding:25px;
  font:14px/1.8 var(--mono);
}

.real-terminal-body::-webkit-scrollbar{
  width:5px;
}

.real-terminal-body::-webkit-scrollbar-thumb{
  background:#075d30;
}

.terminal-line{
  color:#789789;
  word-break:break-word;
}

.terminal-line.success{
  color:#00ff66;
}

.terminal-line strong{
  color:#eafff1;
}

.terminal-line.danger-text{
  color:#ff1744;
  text-shadow:0 0 8px rgba(255,23,68,.5);
}

.terminal-input-area{
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 20px;
  border-top:1px solid rgba(0,255,102,.2);
  background:rgba(0,255,102,.025);
}

.terminal-user{
  flex-shrink:0;
  color:#00ff66;
  font:13px var(--mono);
}

#terminalInput{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#eafff1;
  font:14px var(--mono);
  caret-color:#00ff66;
}

#terminalInput::placeholder{
  color:#405c4c;
}

.terminal-execute{
  flex-shrink:0;
  padding:9px 14px;
  border:1px solid #00ff66;
  background:transparent;
  color:#00ff66;
  cursor:pointer;
  font:10px var(--mono);
  letter-spacing:1px;
  transition:.25s ease;
}

.terminal-execute:hover{
  background:#00ff66;
  color:#010302;
  box-shadow:0 0 15px rgba(0,255,102,.4);
}


/* =========================================================
   COMMAND BOXES
   ========================================================= */

.command-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  max-width:1100px;
  margin:20px auto 0;
}

.command-box{
  padding:17px;
  border:1px solid rgba(0,255,102,.15);
  background:rgba(1,8,4,.65);
  transition:.25s ease;
}

.command-box:hover{
  transform:translateY(-4px);
  border-color:#00ff66;
  box-shadow:0 0 18px rgba(0,255,102,.12);
}

.command-box span{
  display:block;
  color:#00ff66;
  font:bold 13px var(--mono);
}

.command-box small{
  display:block;
  margin-top:7px;
  color:#405c4c;
  font:10px/1.5 var(--mono);
}


/* =========================================================
   SYSTEM LOG
   ========================================================= */

.log-panel{
  max-width:1000px;
  margin:auto;
  padding:25px;
  border:1px solid rgba(0,255,102,.2);
  background:rgba(1,8,4,.7);
}

.log-panel div{
  padding:11px 0;
  border-bottom:1px solid rgba(0,255,102,.08);
  color:#789789;
  font:13px var(--mono);
}

.log-panel span{
  margin-right:15px;
  color:#00ff66;
}


/* =========================================================
   TERMINAL MESSAGE
   ========================================================= */

.terminal-message{
  max-width:1000px;
  margin:auto;
  padding:30px;
  border:1px solid rgba(0,255,102,.25);
  background:rgba(1,8,4,.72);
}

.terminal-message-title{
  margin-bottom:20px;
  color:#00ff66;
  font:bold 13px var(--mono);
  letter-spacing:2px;
}

.terminal-message p{
  margin:12px 0;
  color:#789789;
  font:14px/1.8 var(--mono);
}

.terminal-message strong{
  display:block;
  margin-top:25px;
  color:#00ff66;
  font:12px var(--mono);
  letter-spacing:2px;
}


/* =========================================================
   TERMINAL CONNECTION BOXES
   ========================================================= */

#connection .status-card{
  position:relative !important;
  cursor:pointer !important;
  text-decoration:none !important;
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease !important;
}

#connection .status-card:hover{
  transform:translateY(-8px) scale(1.02) !important;
  border-color:#00ff66 !important;
  box-shadow:
    0 0 8px rgba(0,255,102,.35),
    0 0 25px rgba(0,255,102,.18),
    inset 0 0 25px rgba(0,255,102,.05) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

  .command-list{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:700px){

  .terminal-hero{
    min-height:65vh;
    padding:110px 18px 60px;
  }

  .terminal-status-line{
    gap:8px;
  }

  .real-terminal-body{
    min-height:350px;
    padding:18px;
    font-size:12px;
  }

  .terminal-input-area{
    align-items:stretch;
    flex-direction:column;
  }

  .terminal-user{
    font-size:11px;
  }

  .terminal-execute{
    width:100%;
  }

  .command-list{
    grid-template-columns:1fr;
  }

  .terminal-message{
    padding:20px;
  }

}
/* =====================================================
   TERMINAL // EXTRA LARGE KRISHNA
   ===================================================== */

.terminal-kicker{
  font-size:28px !important;
  letter-spacing:12px !important;
  font-weight:900 !important;
  line-height:1.4 !important;

  color:#00ff66 !important;

  text-shadow:
    0 0 10px #00ff66,
    0 0 25px rgba(0,255,102,.8),
    0 0 50px rgba(0,255,102,.35) !important;

  transform:scale(1.15);
  margin-bottom:20px !important;
}


/* DESKTOP */

@media(min-width:1000px){

  .terminal-kicker{
    font-size:32px !important;
    letter-spacing:15px !important;
    transform:scale(1.2);
  }

}


/* MOBILE */

@media(max-width:700px){

  .terminal-kicker{
    font-size:18px !important;
    letter-spacing:6px !important;
    transform:none;
  }

}
/* =========================================================
   KRISHNA // CONTACT PAGE
   ========================================================= */

.contact-hero{
  min-height:75vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding:120px 25px 70px;
}

.contact-grid{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      rgba(0,255,102,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,255,102,.035) 1px,
      transparent 1px
    );

  background-size:50px 50px;
}

.contact-hero-content{
  position:relative;
  z-index:3;
  text-align:center;
  width:min(1100px,92%);
}

.contact-alert{
  display:inline-block;
  padding:10px 20px;
  border:1px solid rgba(255,23,68,.5);
  color:#ff1744;
  font:11px var(--mono);
  letter-spacing:3px;
  text-shadow:0 0 8px rgba(255,23,68,.5);
}

.contact-kicker{
  margin-top:30px;
  color:#00ff66;
  font:20px var(--mono);
  font-weight:700;
  letter-spacing:7px;
  text-shadow:0 0 15px rgba(0,255,102,.6);
}

.contact-hero h1{
  margin:18px 0;
  color:#eafff1;
  font:clamp(48px,8vw,105px) var(--serif);
  letter-spacing:3px;
  text-shadow:
    0 0 20px rgba(0,255,102,.18);
}

.contact-hero p{
  color:#789789;
  font:12px var(--mono);
  letter-spacing:4px;
}

.contact-status{
  margin-top:30px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  color:#405c4c;
  font:10px var(--mono);
}

.contact-status strong{
  color:#00ff66;
}


/* =========================================================
   CONTACT FORM
   ========================================================= */

.contact-layout{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:25px;
  max-width:1100px;
  margin:auto;
}

.contact-form-panel,
.contact-status-panel,
.contact-note{
  border:1px solid rgba(0,255,102,.25);
  background:rgba(1,8,4,.78);
  box-shadow:
    inset 0 0 30px rgba(0,255,102,.025);
}

.contact-form-panel{
  padding:25px;
}

.panel-top{
  display:flex;
  justify-content:space-between;
  padding-bottom:18px;
  margin-bottom:25px;
  border-bottom:1px solid rgba(0,255,102,.15);
  color:#00ff66;
  font:11px var(--mono);
  letter-spacing:2px;
}

.online-dot{
  text-shadow:0 0 8px #00ff66;
}

.contact-form-panel label{
  display:block;
  margin:18px 0 8px;
  color:#00ff66;
  font:bold 11px var(--mono);
  letter-spacing:2px;
}

.contact-form-panel input,
.contact-form-panel textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(0,255,102,.2);
  outline:none;
  background:rgba(0,8,4,.8);
  color:#eafff1;
  padding:14px;
  font:13px var(--mono);
  resize:vertical;
  transition:.25s ease;
}

.contact-form-panel input:focus,
.contact-form-panel textarea:focus{
  border-color:#00ff66;
  box-shadow:
    0 0 12px rgba(0,255,102,.12),
    inset 0 0 15px rgba(0,255,102,.03);
}

.contact-form-panel input::placeholder,
.contact-form-panel textarea::placeholder{
  color:#405c4c;
}

.transmit-button{
  width:100%;
  margin-top:22px;
  padding:16px;
  border:1px solid #00ff66;
  background:transparent;
  color:#00ff66;
  cursor:pointer;
  font:bold 12px var(--mono);
  letter-spacing:2px;
  transition:.25s ease;
}

.transmit-button:hover{
  background:#00ff66;
  color:#010302;
  box-shadow:
    0 0 15px rgba(0,255,102,.45);
}

.transmit-button:disabled{
  opacity:.7;
  cursor:wait;
}


/* =========================================================
   STATUS PANEL
   ========================================================= */

.contact-side{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.contact-status-panel{
  padding:25px;
}

.panel-title{
  margin-bottom:18px;
  color:#00ff66;
  font:bold 12px var(--mono);
  letter-spacing:2px;
}

.channel-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid rgba(0,255,102,.1);
  color:#405c4c;
  font:11px var(--mono);
}

.channel-row strong{
  color:#9acaaa;
  text-align:right;
}

.channel-row:last-child{
  border-bottom:0;
}

.contact-note{
  padding:25px;
}

.contact-note p{
  color:#789789;
  font:12px/1.8 var(--mono);
}

.contact-note strong{
  display:block;
  margin-top:20px;
  color:#00ff66;
  font:11px var(--mono);
  letter-spacing:1px;
}


/* =========================================================
   DIRECT CHANNELS
   ========================================================= */

.direct-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  max-width:1100px;
  margin:auto;
}

.direct-card{
  position:relative;
  padding:25px;
  min-height:190px;
  box-sizing:border-box;
  border:1px solid rgba(0,255,102,.2);
  background:rgba(1,8,4,.72);
  text-decoration:none;
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.direct-card:hover{
  transform:translateY(-8px) scale(1.02);
  border-color:#00ff66;
  box-shadow:
    0 0 10px rgba(0,255,102,.25),
    0 0 30px rgba(0,255,102,.1);
}

.direct-number{
  color:#405c4c;
  font:9px var(--mono);
}

.direct-icon{
  margin-top:20px;
  color:#00ff66;
  font:30px var(--mono);
  text-shadow:0 0 10px rgba(0,255,102,.6);
}

.direct-card h3{
  margin:12px 0 7px;
  color:#eafff1;
  font:20px var(--serif);
}

.direct-card p{
  color:#789789;
  font:10px var(--mono);
  word-break:break-word;
}

.direct-card span{
  position:absolute;
  bottom:20px;
  color:#00ff66;
  font:bold 9px var(--mono);
}


/* =========================================================
   TOPICS
   ========================================================= */

.topic-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  max-width:1100px;
  margin:auto;
}

.topic-card{
  padding:25px;
  border:1px solid rgba(0,255,102,.18);
  background:rgba(1,8,4,.65);
  transition:.25s ease;
}

.topic-card:hover{
  transform:translateY(-5px);
  border-color:#00ff66;
}

.topic-card span{
  color:#00ff66;
  font:bold 10px var(--mono);
}

.topic-card h3{
  color:#eafff1;
  font:18px var(--serif);
}

.topic-card p{
  color:#789789;
  font:11px/1.7 var(--mono);
}


/* =========================================================
   PROTOCOL
   ========================================================= */

.protocol-panel{
  max-width:1100px;
  margin:auto;
  border:1px solid rgba(0,255,102,.2);
}

.protocol-step{
  display:flex;
  align-items:center;
  gap:25px;
  padding:20px 25px;
  border-bottom:1px solid rgba(0,255,102,.1);
}

.protocol-step:last-child{
  border-bottom:0;
}

.protocol-step span{
  color:#00ff66;
  font:bold 12px var(--mono);
}

.protocol-step strong{
  color:#9acaaa;
  font:12px var(--mono);
  letter-spacing:2px;
}


/* =========================================================
   FINAL MESSAGE
   ========================================================= */

.final-message-box{
  max-width:1000px;
  margin:auto;
  padding:55px 30px;
  text-align:center;
  border:1px solid rgba(0,255,102,.3);
  background:
    linear-gradient(
      135deg,
      rgba(0,255,102,.04),
      rgba(1,8,4,.8)
    );
}

.final-message-box > div{
  color:#00ff66;
  font:bold 11px var(--mono);
  letter-spacing:3px;
}

.final-message-box h2{
  margin:20px auto;
  max-width:800px;
  color:#eafff1;
  font:clamp(30px,5vw,60px) var(--serif);
}

.final-message-box p{
  color:#405c4c;
  font:10px var(--mono);
  letter-spacing:3px;
}


/* =========================================================
   ACCESS OTHER NODES
   ========================================================= */

#connection .status-card{
  position:relative !important;
  cursor:pointer !important;
  text-decoration:none !important;
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease !important;
}

#connection .status-card:hover{
  transform:translateY(-8px) scale(1.02) !important;
  border-color:#00ff66 !important;
  box-shadow:
    0 0 8px rgba(0,255,102,.35),
    0 0 25px rgba(0,255,102,.18),
    inset 0 0 25px rgba(0,255,102,.05) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

  .contact-layout{
    grid-template-columns:1fr;
  }

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

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

}

@media(max-width:600px){

  .contact-hero{
    min-height:65vh;
    padding:100px 15px 60px;
  }

  .contact-kicker{
    font-size:13px;
    letter-spacing:4px;
  }

  .contact-status{
    font-size:9px;
  }

  .direct-grid,
  .topic-grid{
    grid-template-columns:1fr;
  }

  .contact-form-panel,
  .contact-status-panel,
  .contact-note{
    padding:18px;
  }

  .protocol-step{
    padding:17px;
    gap:15px;
  }

}
/* =========================================================
   KRISHNA // INSTAGRAM CHANNEL
   ========================================================= */

.instagram-channel{
  width:min(500px,90%);
  margin:0 auto 22px;
  position:relative;
  z-index:10;
}

.instagram-link{
  min-height:62px;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;

  padding:12px 22px;

  border:1px solid #00ff66;

  background:
    linear-gradient(
      90deg,
      rgba(0,255,102,.04),
      rgba(0,0,0,.75),
      rgba(0,255,102,.04)
    );

  color:#00ff66;
  text-decoration:none;

  box-shadow:
    0 0 12px rgba(0,255,102,.12),
    inset 0 0 20px rgba(0,255,102,.03);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}


/* INSTAGRAM ICON */

.instagram-icon{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border:2px solid #00ff66;
  border-radius:10px;

  color:#00ff66;
  font-size:27px;
  font-family:Arial,sans-serif;

  text-shadow:
    0 0 8px rgba(0,255,102,.7);

  box-shadow:
    0 0 10px rgba(0,255,102,.25);
}


/* USERNAME */

.instagram-text{
  font-family:var(--mono);
  font-size:17px;
  font-weight:700;
  letter-spacing:2px;

  text-shadow:
    0 0 8px rgba(0,255,102,.5);
}


/* ARROW */

.instagram-arrow{
  font-family:var(--mono);
  font-size:20px;

  transition:
    transform .25s ease;
}


/* HOVER */

.instagram-link:hover{
  transform:translateY(-5px);

  border-color:#00ff66;

  box-shadow:
    0 0 15px rgba(0,255,102,.35),
    0 0 35px rgba(0,255,102,.12),
    inset 0 0 25px rgba(0,255,102,.06);
}

.instagram-link:hover .instagram-arrow{
  transform:translateX(7px);
}


/* =========================================================
   DANGER MODE
   ========================================================= */

body.danger .instagram-link{
  border-color:var(--red);
  color:var(--red);

  box-shadow:
    0 0 18px rgba(255,23,68,.3),
    inset 0 0 20px rgba(255,23,68,.06);
}

body.danger .instagram-icon{
  border-color:var(--red);
  color:var(--red);
  box-shadow:0 0 12px rgba(255,23,68,.5);
}


/* MOBILE */

@media(max-width:600px){

  .instagram-channel{
    width:calc(100% - 30px);
    margin-bottom:18px;
  }

  .instagram-link{
    min-height:58px;
    gap:12px;
    padding:10px 14px;
  }

  .instagram-icon{
    width:32px;
    height:32px;
    font-size:23px;
  }

  .instagram-text{
    font-size:13px;
    letter-spacing:1px;
  }

  .instagram-arrow{
    font-size:17px;
  }

}
/* =========================================================
   FINAL MOBILE FIX
   ========================================================= */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img,
canvas,
video,
svg{
  max-width:100%;
}

@media(max-width:700px){

  *{
    max-width:100%;
  }

  .topbar{
    width:100%;
    max-width:100%;
    padding:0 12px;
  }

  .logo{
    max-width:65%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .nav{
    width:100%;
    max-width:100%;
  }

  .hero{
    width:100%;
    max-width:100%;
    padding-left:16px;
    padding-right:16px;
    overflow:hidden;
  }

  .hero-content{
    width:100%;
    max-width:100%;
  }

  .welcome-small,
  .welcome-title,
  .hero-tagline{
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .welcome-title{
    font-size:clamp(38px,13vw,58px);
    letter-spacing:2px;
    line-height:.95;
    word-break:break-word;
  }

  .krishna-box{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    padding:16px;
    overflow:hidden;
  }

  .krishna-name{
    font-size:clamp(24px,8vw,34px);
    letter-spacing:4px;
    overflow-wrap:anywhere;
  }

  .krishna-role{
    font-size:9px;
    line-height:1.7;
    letter-spacing:1px;
    overflow-wrap:anywhere;
  }

  .initializing,
  .hero-terminal{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .init-line{
    gap:10px;
    flex-wrap:wrap;
  }

  .hero-terminal{
    padding-left:10px;
    padding-right:10px;
    overflow-wrap:anywhere;
  }

  .danger-section,
  .modules,
  .section,
  .section-container{
    width:calc(100% - 24px);
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  .danger-card{
    width:100%;
    max-width:100%;
    padding:20px 14px;
    overflow:hidden;
  }

  .danger-card h2{
    font-size:clamp(18px,6vw,25px);
    letter-spacing:2px;
  }

  .danger-card p{
    font-size:9px;
    line-height:1.7;
    letter-spacing:2px;
    overflow-wrap:anywhere;
  }

  .module-card{
    width:100%;
    max-width:100%;
    min-height:280px;
    padding:30px 16px;
    overflow:hidden;
  }

  .module-main{
    width:100%;
    max-width:100%;
  }

  .module-main h2{
    font-size:clamp(25px,9vw,34px);
    overflow-wrap:anywhere;
  }

  .module-main p,
  .module-info{
    overflow-wrap:anywhere;
  }

  .status-grid,
  .skills-grid,
  .mission-grid,
  .missions-grid,
  .about-grid,
  .contact-grid,
  .identity-grid{
    width:100%;
    max-width:100%;
  }

  .status-grid{
    grid-template-columns:1fr;
  }

  .hud-panel,
  .terminal-window,
  .skills-panel,
  .mission-card,
  .status-card,
  .identity-panel{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .section-title,
  .section-header,
  .section-subtitle{
    max-width:100%;
    overflow-wrap:anywhere;
  }

  footer{
    width:100%;
    max-width:100%;
    padding-left:15px;
    padding-right:15px;
  }

  /* Prevent long URLs / text from breaking layout */
  a,
  p,
  span,
  strong,
  div{
    overflow-wrap:anywhere;
  }

}

/* Very small phones */
@media(max-width:400px){

  .welcome-title{
    font-size:40px;
  }

  .welcome-small{
    font-size:16px;
    letter-spacing:3px;
  }

  .hero-tagline{
    font-size:8px;
    letter-spacing:2px;
  }

  .krishna-box{
    padding:14px 12px;
  }

  .module-card{
    padding:28px 14px;
  }

  .danger-toggle,
  .danger-button{
    max-width:calc(100vw - 20px);
  }

}