@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap");
:root{--bg:#060606;--p:#101010;--l:#292929;--t:#f2f0e9;--m:#85837e;--y:#ffd21a;--o:#ff8a00;--r:#e83222}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--t);font-family:"Space Grotesk",sans-serif}.grid{position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:linear-gradient(#fff1 1px,transparent 1px),linear-gradient(90deg,#fff1 1px,transparent 1px);background-size:48px 48px}.noise{position:fixed;inset:0;pointer-events:none;opacity:.025;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:5px 5px}
.topbar,main,footer{max-width:1180px;margin:auto}.topbar{margin-top:10px;padding:18px 26px;border:1px solid var(--l);display:flex;align-items:center;justify-content:space-between;background:#080808}.brand{display:flex;align-items:center;gap:10px;color:#eee;text-decoration:none;font-weight:700;letter-spacing:.03em}.brand img{filter:drop-shadow(0 0 8px rgba(255,179,0,.18))}.top-meta{font:10px "JetBrains Mono";color:#666;letter-spacing:.12em}.status{color:#aaa}.status i{display:inline-block;width:7px;height:7px;background:#83c46b;border-radius:50%;margin-right:7px}.sep{margin:0 8px;color:#333}
.hero{padding:90px 26px 70px;text-align:center}.hero-copy{display:flex;flex-direction:column;align-items:center}.eyebrow{font:9px "JetBrains Mono";color:var(--o);letter-spacing:.13em}.hero h1{font-size:clamp(55px,9vw,108px);line-height:.9;letter-spacing:-.07em;margin:20px 0}.hero h1 span{background:linear-gradient(90deg,var(--y),var(--o),var(--r));-webkit-background-clip:text;color:transparent}.hero-sub{font:11px "JetBrains Mono";letter-spacing:.16em;color:#777}.hero p{font:12px "JetBrains Mono";color:#888;line-height:1.8}.hero p b{color:var(--y)}.terminal-line{display:inline-block;border:1px solid var(--l);padding:12px 15px;font:10px "JetBrains Mono";color:#777}.terminal-line span{color:var(--y)}
.section{padding:0 26px 62px}.section-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--l);padding-bottom:12px;margin-bottom:15px}.section-head>div{display:flex;align-items:center;gap:14px}.section-head .num{font:9px "JetBrains Mono";color:var(--o)}.section-head h2{margin:0;font:700 18px "JetBrains Mono";letter-spacing:.08em}.section-note{font:8px "JetBrains Mono";color:#555}
.social-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.card{position:relative;min-height:145px;padding:25px 30px;display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,#101010,#080808);border:1px solid var(--l);color:var(--t);text-decoration:none;transition:.25s}.card:before,.lab-card:before,.affiliate:before{content:"";position:absolute;left:0;top:0;width:0;height:2px;background:linear-gradient(90deg,var(--y),var(--o),var(--r));transition:.3s}.card:hover,.lab-card:hover,.affiliate:hover{transform:translateY(-3px);border-color:#505050;box-shadow:0 12px 35px #0008}.card:hover:before,.lab-card:hover:before,.affiliate:hover:before{width:100%}.card-num{position:absolute;right:14px;top:13px;font:10px "JetBrains Mono";color:#555}.icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid #383838;color:var(--y);font-weight:700;font-size:19px;background:#0c0c0c}.card div{display:flex;flex-direction:column;gap:4px}.card small,.lab-card small,.affiliate small{color:var(--o);font-size:8px;letter-spacing:.12em}.card strong{font-size:21px}.card div span{font:12px "JetBrains Mono";color:#8ba1b0}.card em{position:absolute;right:19px;bottom:20px;color:var(--y);font-style:normal;font-size:22px}
.lab-card,.affiliate{position:relative;min-height:155px;padding:25px 30px;display:flex;align-items:center;gap:24px;background:radial-gradient(circle at 80% 50%,#ffb30018,transparent 40%),linear-gradient(110deg,#071019,#050b10);border:1px solid var(--l);color:var(--t);text-decoration:none;transition:.25s}.lab-icon{width:48px;height:48px;display:grid;place-items:center;border:1px solid #4b3d18;color:var(--y);font-size:28px}.lab-card h3,.affiliate h3{margin:6px 0 5px;font-size:29px}.lab-card p,.affiliate p{margin:0;color:#7f96a5;font:12px "JetBrains Mono"}.lab-arrow,.affiliate-arrow{margin-left:auto;color:var(--y);font-size:28px}.affiliate{background:radial-gradient(circle at 15% 50%,#ffb3000e,transparent 35%),linear-gradient(110deg,#081019,#050b10);border-style:dashed}.affiliate .lock{font:8px "JetBrains Mono";color:#aaa;border:1px solid #33404a;padding:9px 12px;letter-spacing:.1em}
.draw-mini{position:relative;width:58px;height:58px;border:1px solid #5b4b1b;background:#0a0a0a;flex:none}.draw-rack:before{content:"";position:absolute;left:13px;right:13px;top:10px;bottom:10px;border:1px solid var(--y);box-shadow:0 0 12px #ffb30016}.draw-rack i{position:absolute;left:18px;right:18px;height:4px;border:1px solid #555;top:19px}.draw-rack i:nth-child(2){top:28px}.draw-rack i:nth-child(3){top:37px}
footer{border-top:1px solid var(--l);padding:27px 26px 40px;display:flex;justify-content:space-between;color:#666;font:9px "JetBrains Mono"}footer strong{display:block;color:#eee;font:700 17px "Space Grotesk"}footer strong span{color:var(--y)}footer small{display:block;margin-top:7px;letter-spacing:.15em}.footer-tag{align-self:flex-end}
@media(max-width:760px){.social-grid{grid-template-columns:1fr}.top-meta .sep,.top-meta span:last-child{display:none}.hero{padding:75px 20px 55px}.section{padding:0 16px 50px}.section-note{display:none}.lab-card,.affiliate{padding:20px;gap:14px}.lab-card h3,.affiliate h3{font-size:23px}.affiliate .lock{display:none}footer{display:block;padding:25px 16px 35px}.footer-tag{margin-top:25px}}

.home-icon{color:var(--y);filter:drop-shadow(0 0 7px rgba(255,179,0,.18));transition:.2s}.brand:hover .home-icon{color:var(--o);transform:translateY(-1px)}

.social-grid .home-card{grid-column:span 2}

.person-icon{display:grid;place-items:center}.person-icon svg{width:25px;height:25px;fill:none;stroke:var(--y);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(255,179,0,.15));transition:.2s}.card:hover .person-icon svg{stroke:var(--o);transform:scale(1.05)}



.social-icon{

  display:grid;

  place-items:center;

}



.social-icon svg{

  width:23px;

  height:23px;

  fill:var(--y);

  transition:.2s;

}



.card:hover .social-icon svg{

  fill:var(--o);

  transform:scale(1.06);

}




.youtube-icon svg{

  width:23px;

  height:23px;

  fill:var(--y);

  transition:.2s;

}



.card:hover .youtube-icon svg{

  fill:var(--o);

  transform:scale(1.06);

}




.person-top-icon{

  fill:var(--y);

  stroke:none;

  transition:.2s;

}



.brand:hover .person-top-icon{

  fill:var(--o);

  transform:scale(1.06);

}




.server-icon{

  display:grid;

  place-items:center;

}



.server-icon svg{

  width:30px;

  height:30px;

  fill:none;

  stroke:var(--y);

  stroke-width:1.4;

  transition:.2s;

}



.lab-card:hover .server-icon svg{

  stroke:var(--o);

  transform:scale(1.06);

}



.gear-icon{

  display:grid;

  place-items:center;

}



.gear-icon svg{

  width:34px;

  height:34px;

  fill:none;

  stroke:var(--y);

  stroke-width:1.5;

  stroke-linecap:round;

  stroke-linejoin:round;

  transition:.2s;

}



.affiliate:hover .gear-icon svg{

  stroke:var(--o);

  transform:scale(1.06) rotate(-4deg);

}




.gear-icon svg{

  width:34px !important;

  height:34px !important;

  fill:none !important;

  stroke:#ffcc00 !important;

  stroke-width:1.5 !important;

  stroke-linecap:round !important;

  stroke-linejoin:round !important;

}



.affiliate:hover .gear-icon svg{

  stroke:#ff7a18 !important;

}




.draw-mini.gear-icon{

  color:#ffcc00 !important;

  background:transparent !important;

}



.draw-mini.gear-icon svg{

  display:block !important;

  width:34px !important;

  height:34px !important;

  color:#ffcc00 !important;

  fill:none !important;

  stroke:#ffcc00 !important;

  opacity:1 !important;

  visibility:visible !important;

}



.draw-mini.gear-icon svg path,

.draw-mini.gear-icon svg circle{

  fill:none !important;

  stroke:#ffcc00 !important;

  opacity:1 !important;

  visibility:visible !important;

}



.affiliate:hover .draw-mini.gear-icon svg,

.affiliate:hover .draw-mini.gear-icon svg path,

.affiliate:hover .draw-mini.gear-icon svg circle{

  stroke:#ff7a18 !important;

}




/* =========================================================

   KCUuLAB — FULL MOBILE RESPONSIVE

   ========================================================= */



@media (max-width:760px){



  /* ---------- GLOBAL ---------- */



  html,

  body{

    width:100%;

    max-width:100%;

    overflow-x:hidden;

  }



  *{

    box-sizing:border-box;

  }



  .page{

    width:100%;

    max-width:100%;

    overflow:hidden;

  }



  /* ---------- HEADER ---------- */



  header{

    width:100%;

  }



  .topbar{

    padding:16px 18px;

    gap:12px;

  }



  .brand{

    width:42px;

    height:42px;

  }



  .top-meta{

    gap:8px;

    font-size:9px;

  }



  /* ---------- HERO ---------- */



  .hero{

    min-height:auto;

    padding:58px 18px 48px;

  }



  .hero-copy{

    width:100%;

    max-width:100%;

  }



  .hero h1{

    font-size:clamp(36px,11vw,58px);

    line-height:.94;

    letter-spacing:-.045em;

    max-width:100%;

    word-break:normal;

  }



  .hero p{

    max-width:330px;

    font-size:12px;

    line-height:1.55;

  }



  .terminal{

    max-width:100%;

    width:100%;

    overflow:hidden;

  }



  .terminal-line{

    font-size:10px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

  }



  /* ---------- SECTIONS ---------- */



  .section{

    width:100%;

    padding:0 16px 55px;

  }



  .section-head,

  .head{

    width:100%;

    gap:10px;

  }



  .head h2,

  .section-head h2{

    font-size:20px;

  }



  .head em,

  .section-head em{

    font-size:8px;

  }



  /* ---------- SOCIALS ---------- */



  .social-grid{

    grid-template-columns:1fr 1fr;

    gap:10px;

  }



  .social-card{

    min-width:0;

    padding:16px;

  }



  .social-card strong{

    font-size:12px;

  }



  /* ---------- PROJECT / FEATURE CARDS ---------- */



  .project-row{

    grid-template-columns:1fr;

    gap:12px;

  }



  .project-card{

    width:100%;

  }



  .project-card .art,

  .project-card .art-mel,

  .project-card .art-law,

  .project-card .art-services{

    aspect-ratio:1/1!important;

  }



  .feature-card{

    width:100%;

    height:auto;

    min-height:360px;

    border-radius:18px;

  }



  .feature-copy{

    left:18px;

    bottom:18px;

    max-width:75%;

  }



  .feature-copy strong{

    font-size:24px;

  }



  .feature-copy small{

    font-size:10px;

  }



  .feature-arrow{

    right:12px;

    top:12px;

  }



  /* ---------- BOOK ---------- */



  .book-card{

    height:300px;

    border-radius:18px;

  }



  .book-copy{

    left:20px;

    right:20px;

    max-width:270px;

  }



  .book-copy strong{

    font-size:30px;

  }



  /* ---------- LAB / ALTERNATIVES ---------- */



  .lab-card,

  .affiliate{

    width:100%;

    min-width:0;

    padding:18px;

    gap:12px;

  }



  .lab-card h3,

  .affiliate h3{

    font-size:20px;

  }



  .lab-card p,

  .affiliate p{

    font-size:10px;

    line-height:1.5;

  }



  .affiliate{

    grid-template-columns:1fr;

  }



  .affiliate .lock{

    display:none;

  }



  /* ---------- SVG FRAMES ---------- */



  .reactor-frame,

  .retro-frame{

    width:100%;

    height:100%;

  }



  /* ---------- FOOTER ---------- */



  footer{

    width:100%;

    padding:25px 16px 35px;

    overflow:hidden;

  }



}



/* =========================================================

   SMALL PHONES

   ========================================================= */



@media (max-width:430px){



  .topbar{

    padding:14px 14px;

  }



  .hero{

    padding:48px 14px 42px;

  }



  .hero h1{

    font-size:38px;

  }



  .section{

    padding-left:14px;

    padding-right:14px;

  }



  .social-grid{

    grid-template-columns:1fr;

  }



  .feature-card{

    min-height:300px;

  }



  .book-card{

    height:270px;

  }



  .book-copy strong{

    font-size:27px;

  }



  .project-caption{

    min-height:54px;

  }



}



/* =========================================================

   TOUCH DEVICES

   ========================================================= */



@media (hover:none) and (pointer:coarse){



  .project-card:hover,

  .feature-card:hover,

  .book-card:hover{

    transform:none;

  }



  .project-card img{

    transition:transform .25s ease-out;

  }



  .feature-card,

  .project-card,

  .book-card{

    -webkit-tap-highlight-color:transparent;

  }



}






/* =========================================================

   KCUuLAB — MOBILE FIX / REAL COMPONENTS

   ========================================================= */



@media (max-width:760px){



  html,

  body{

    width:100%;

    max-width:100%;

    overflow-x:hidden;

  }



  body{

    min-width:0;

  }



  /* TOPBAR */

  .topbar{

    width:100%;

    padding:14px 16px;

    gap:10px;

  }



  .top-meta{

    min-width:0;

    overflow:hidden;

    white-space:nowrap;

  }



  .top-meta span{

    font-size:8px;

  }



  /* HERO */

  .hero{

    width:100%;

    padding:55px 18px 48px;

  }



  .hero-copy{

    width:100%;

    max-width:100%;

  }



  .hero h1{

    max-width:100%;

    font-size:clamp(42px,13vw,64px);

    line-height:.92;

  }



  .hero-sub{

    font-size:9px;

  }



  .terminal-line{

    max-width:100%;

    overflow:hidden;

    white-space:nowrap;

    font-size:9px;

  }



  /* SECTIONS */

  .section{

    width:100%;

    padding-left:16px;

    padding-right:16px;

    padding-bottom:50px;

  }



  .section-head{

    width:100%;

    min-width:0;

  }



  .section-head > div{

    min-width:0;

  }



  .section-head h2{

    font-size:21px;

  }



  .section-note{

    max-width:130px;

    text-align:right;

    font-size:7px;

    line-height:1.3;

  }



  /* SOCIAL CARDS */

  .social-grid{

    width:100%;

    grid-template-columns:1fr 1fr;

    gap:10px;

  }



  .social-grid .card{

    width:100%;

    min-width:0;

    min-height:105px;

    padding:15px;

    overflow:hidden;

  }



  .social-grid .card div{

    min-width:0;

  }



  .social-grid .card small,

  .social-grid .card strong{

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    display:block;

  }



  .social-grid .card small{

    font-size:7px;

  }



  .social-grid .card strong{

    font-size:13px;

  }



  .social-grid .card em{

    font-size:13px;

  }



  .card-num{

    font-size:8px;

  }



  .icon{

    flex-shrink:0;

  }



  /* HOME LAB */

  .lab-card{

    width:100%;

    min-width:0;

    display:grid;

    grid-template-columns:auto minmax(0,1fr) auto;

    align-items:center;

    padding:17px;

    gap:12px;

  }



  .lab-card > div:nth-child(2){

    min-width:0;

  }



  .lab-card h3{

    font-size:20px;

    line-height:1;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

  }



  .lab-card p{

    font-size:9px;

    line-height:1.4;

    white-space:normal;

  }



  .lab-arrow{

    flex-shrink:0;

  }



  /* GEAR / AFFILIATE */

  .affiliate{

    width:100%;

    min-width:0;

    display:grid;

    grid-template-columns:auto minmax(0,1fr) auto;

    align-items:center;

    padding:17px;

    gap:12px;

  }



  .affiliate > div{

    min-width:0;

  }



  .affiliate h3{

    font-size:19px;

    line-height:1.05;

  }



  .affiliate p{

    font-size:9px;

    line-height:1.4;

  }



  .affiliate .lock{

    display:none;

  }



  .affiliate-arrow{

    flex-shrink:0;

  }



  /* FOOTER */

  footer{

    width:100%;

    padding:25px 16px 35px;

  }



}



@media (max-width:430px){



  .topbar{

    padding-left:13px;

    padding-right:13px;

  }



  .hero{

    padding-left:14px;

    padding-right:14px;

  }



  .section{

    padding-left:13px;

    padding-right:13px;

  }



  .social-grid{

    grid-template-columns:1fr;

  }



  .social-grid .card{

    min-height:88px;

  }



  .section-note{

    display:none;

  }



  .lab-card{

    padding:15px;

  }



  .affiliate{

    padding:15px;

  }



}



@media (hover:none) and (pointer:coarse){



  .card,

  .lab-card,

  .affiliate{

    -webkit-tap-highlight-color:transparent;

  }



}






/* =========================================================

   KCUuLAB — MOBILE HERO POLISH

   ========================================================= */



@media (max-width:760px){



  .hero{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

  }



  .hero-copy{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

  }



  .hero h1{

    width:100%;

    font-size:clamp(44px,14vw,62px);

    letter-spacing:-.055em;

    text-align:center;

  }



  .hero-sub{

    margin-top:10px;

    text-align:center;

  }



  .terminal{

    width:min(100%,360px);

    margin:24px auto 0;

  }



  .terminal-line{

    width:100%;

    font-size:9px;

    line-height:1.4;

    text-align:left;

    overflow:hidden;

  }



  .terminal-cursor{

    display:inline-block;

  }



}



@media (max-width:430px){



  .hero{

    padding-top:45px;

    padding-bottom:40px;

  }



  .hero h1{

    font-size:43px;

  }



  .hero-sub{

    font-size:8px;

    letter-spacing:.14em;

  }



  .terminal{

    margin-top:20px;

  }



  .terminal-line{

    font-size:8px;

  }



}






/* =========================================================

   KCUuLAB — MOBILE CARDS / ICONS / FOOTER

   ========================================================= */



@media (max-width:760px){



  /* SOCIAL ICONS */

  .social-grid .card{

    position:relative;

    display:grid;

    grid-template-columns:62px minmax(0,1fr) 30px;

    align-items:center;

    gap:12px;

  }



  .social-grid .card .icon{

    width:62px;

    height:62px;

    min-width:62px;

    display:grid;

    place-items:center;

  }



  .social-grid .card .icon svg{

    width:30px;

    height:30px;

  }



  .social-grid .card strong{

    font-size:13px;

    line-height:1.1;

  }



  .social-grid .card small{

    margin-bottom:5px;

  }



  .social-grid .card em{

    width:30px;

    height:30px;

    display:grid;

    place-items:center;

    font-size:13px;

  }



  /* FOOTER */

  footer{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

  }



  footer > *{

    max-width:100%;

  }



}



@media (max-width:430px){



  .social-grid .card{

    grid-template-columns:56px minmax(0,1fr) 28px;

    gap:10px;

    padding:13px;

  }



  .social-grid .card .icon{

    width:56px;

    height:56px;

    min-width:56px;

  }



  .social-grid .card .icon svg{

    width:27px;

    height:27px;

  }



  .social-grid .card em{

    width:28px;

    height:28px;

    font-size:12px;

  }



}






/* =========================================================

   KCUuLAB — MOBILE HOME LAB STATS

   ========================================================= */



@media (max-width:760px){



  .lab-stats{

    width:100%;

    min-height:0!important;

    height:auto!important;

    padding:24px!important;

    display:grid!important;

    grid-template-columns:1fr 1fr!important;

    gap:0!important;

  }



  .lab-stats > div{

    min-width:0;

    padding:18px 16px!important;

  }



  .lab-stats > div:nth-child(1),

  .lab-stats > div:nth-child(2){

    padding-top:10px!important;

  }



  .lab-stats > div:nth-child(3),

  .lab-stats > div:nth-child(4){

    padding-bottom:10px!important;

  }



  .lab-stats strong{

    font-size:30px!important;

    line-height:1!important;

  }



  .lab-stats span{

    font-size:8px!important;

    line-height:1.3!important;

  }



  .lab-stats small{

    font-size:9px!important;

    line-height:1.35!important;

  }



}



@media (max-width:430px){



  .lab-stats{

    padding:18px!important;

  }



  .lab-stats > div{

    padding:15px 11px!important;

  }



  .lab-stats strong{

    font-size:27px!important;

  }



}






/* =========================================================

   KCUuLAB — REAL SVG ACTION / SOCIAL ICONS

   ========================================================= */



.card-arrow{

  width:30px!important;

  height:30px!important;

  display:grid!important;

  place-items:center!important;

  border-radius:7px!important;

  background:rgba(220,235,255,.9)!important;

  color:#111!important;

  font-style:normal!important;

  flex-shrink:0!important;

}



.card-arrow svg{

  width:17px!important;

  height:17px!important;

  fill:none!important;

  stroke:currentColor!important;

  stroke-width:2.2!important;

  stroke-linecap:round!important;

  stroke-linejoin:round!important;

}



.linkedin-icon svg{

  width:30px;

  height:30px;

}



.linkedin-icon svg path{

  fill:currentColor;

  stroke:none;

}



@media(max-width:430px){

  .card-arrow{

    width:28px!important;

    height:28px!important;

  }



  .card-arrow svg{

    width:16px!important;

    height:16px!important;

  }



  .linkedin-icon svg{

    width:28px;

    height:28px;

  }

}






/* =========================================================

   KCUuLAB — MOBILE FINAL POLISH

   ========================================================= */



@media (max-width:760px){



  /* HERO — BUILDING / RUNNING / BREAKING / FIXING */

  .hero-copy > p{

    width:100%;

    margin:18px 0 22px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:7px;

    font-size:12px;

    line-height:1.5;

    white-space:normal;

  }



  .hero-copy > p b{

    display:inline-block;

    font-size:10px;

  }



  /* TERMINAL */

  .terminal-line{

    box-sizing:border-box;

    width:100%;

    min-height:52px;

    padding:15px 16px;

    display:flex;

    align-items:center;

    font-size:9px;

    line-height:1.3;

    border:1px solid rgba(255,255,255,.13);

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

    overflow:hidden;

  }



  .terminal-line > span{

    flex-shrink:0;

  }



  #terminal-text{

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

  }



  /* SOCIAL CARDS */

  .social-grid .card{

    box-sizing:border-box;

    grid-template-columns:56px minmax(0,1fr) 38px;

    gap:12px;

    min-width:0;

  }



  .social-grid .card > div{

    min-width:0;

    overflow:hidden;

  }



  .social-grid .card small,

  .social-grid .card strong{

    max-width:100%;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

  }



  /* REAL SVG ARROW — NO EMOJI / NO BLUE BUTTON */

  .social-grid .card .card-arrow{

    width:38px;

    height:38px;

    min-width:38px;

    padding:0;

    margin:0;

    display:grid;

    place-items:center;

    border:1px solid rgba(255,255,255,.22);

    border-radius:9px;

    background:rgba(255,255,255,.055);

    color:#fff;

    font-style:normal;

    line-height:1;

  }



  .social-grid .card .card-arrow svg{

    width:19px;

    height:19px;

    display:block;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

  }



  /* MY SOCIALS */

  .social-grid .home-card{

    grid-template-columns:56px minmax(0,1fr) 38px;

  }



  /* HOME LAB CARD */

  .lab-card{

    box-sizing:border-box;

    min-height:88px;

    grid-template-columns:52px minmax(0,1fr) 28px;

  }



  .lab-icon{

    width:52px;

    height:52px;

    display:grid;

    place-items:center;

  }



  .lab-icon svg{

    width:27px;

    height:27px;

  }



  .lab-card h3{

    font-size:19px;

  }



  .lab-card p{

    max-width:100%;

    overflow:hidden;

    text-overflow:ellipsis;

  }



  .lab-arrow{

    font-size:22px;

    line-height:1;

  }



  /* FOOTER */

  footer{

    box-sizing:border-box;

    width:100%;

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

    flex-wrap:wrap;

    gap:8px 16px;

    padding:28px 16px 38px;

  }



}



@media (max-width:430px){



  .hero-copy > p{

    font-size:11px;

    gap:5px;

    margin-top:16px;

  }



  .terminal-line{

    min-height:50px;

    padding:14px 13px;

    font-size:8px;

  }



  .social-grid .card{

    grid-template-columns:52px minmax(0,1fr) 36px;

    gap:10px;

    padding:13px;

  }



  .social-grid .card .icon{

    width:52px;

    height:52px;

    min-width:52px;

  }



  .social-grid .card .card-arrow{

    width:36px;

    height:36px;

    min-width:36px;

  }



  .social-grid .card .card-arrow svg{

    width:18px;

    height:18px;

  }



}






/* =========================================================

   KCUuLAB — FINAL MOBILE CARD / TERMINAL FIX

   ========================================================= */



@media (max-width:760px){



  /* ---------- SOCIAL CARDS ---------- */



  .social-grid .card{

    position:relative;

    display:grid;

    grid-template-columns:58px minmax(0,1fr) 34px;

    align-items:stretch;

    gap:12px;

    min-height:116px;

    padding:14px;

  }



  .social-grid .card .icon{

    width:58px;

    height:58px;

    min-width:58px;

    align-self:center;

    display:grid;

    place-items:center;

  }



  .social-grid .card .icon svg{

    width:28px;

    height:28px;

  }



  .social-grid .card > div:nth-child(2){

    min-width:0;

    align-self:end;

    padding-bottom:2px;

  }



  .social-grid .card small{

    display:block;

    width:100%;

    max-width:100%;

    margin-bottom:5px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

  }



  .social-grid .card strong{

    display:block;

    width:100%;

    max-width:100%;

    font-size:14px;

    line-height:1.1;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

  }



  /* REAL ARROW ICON — no iOS emoji */

  .social-grid .card em{

    width:34px;

    height:34px;

    min-width:34px;

    align-self:end;

    margin:0 0 1px auto;

    padding:0;

    display:grid;

    place-items:center;

    font-size:0 !important;

    line-height:0;

    color:transparent !important;

    background:rgba(255,255,255,.035) !important;

    border:1px solid rgba(255,255,255,.22) !important;

    border-radius:9px !important;

    box-shadow:none !important;

    -webkit-appearance:none;

    appearance:none;

  }



  .social-grid .card em::before{

    content:"";

    width:15px;

    height:15px;

    display:block;

    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M9 6h9v9' fill='none' stroke='%23f4f4f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;

  }



  .social-grid .card em::after{

    display:none !important;

  }



  /* ---------- ANIMATED TERMINAL ---------- */



  .terminal{

    width:100%;

    max-width:100%;

    min-width:0;

    overflow:hidden;

  }



  .terminal-line{

    width:100%;

    max-width:100%;

    min-width:0;

    height:48px;

    padding:0 14px;

    box-sizing:border-box;

    display:flex;

    align-items:center;

    gap:5px;

    overflow:hidden;

    white-space:nowrap;

    font-size:9px;

  }



  #terminal-text{

    display:block;

    min-width:0;

    flex:1 1 auto;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:clip;

  }



  .terminal-cursor{

    flex:0 0 auto;

    display:inline-block;

    width:6px;

    overflow:hidden;

  }



}



@media (max-width:430px){



  .social-grid .card{

    grid-template-columns:54px minmax(0,1fr) 34px;

    min-height:108px;

    gap:10px;

    padding:13px;

  }



  .social-grid .card .icon{

    width:54px;

    height:54px;

    min-width:54px;

  }



  .social-grid .card .icon svg{

    width:26px;

    height:26px;

  }



  .social-grid .card em{

    width:34px;

    height:34px;

    min-width:34px;

  }



  .terminal-line{

    height:44px;

    padding:0 11px;

    font-size:8px;

  }



}






/* =========================================================

   KCUuLAB — MOBILE SOCIAL CARDS / FINAL CENTERED DESIGN

   ========================================================= */



@media (max-width:760px){



  .social-grid .card{

    position:relative;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;

    text-align:center !important;

    gap:8px !important;

    min-height:150px !important;

    padding:18px 12px !important;

    box-sizing:border-box !important;

  }



  /* ICON BOX */

  .social-grid .card .icon{

    width:58px !important;

    height:58px !important;

    min-width:58px !important;

    flex:0 0 58px !important;

    display:grid !important;

    place-items:center !important;

    margin:0 auto !important;

  }



  .social-grid .card .icon svg{

    width:28px !important;

    height:28px !important;

  }



  /* TEXT */

  .social-grid .card > div:nth-child(2){

    width:100% !important;

    min-width:0 !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;

    text-align:center !important;

    padding:0 !important;

    margin:0 !important;

  }



  .social-grid .card small{

    width:100% !important;

    margin:0 0 3px !important;

    text-align:center !important;

    white-space:nowrap !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;

  }



  .social-grid .card strong{

    width:100% !important;

    margin:0 !important;

    text-align:center !important;

    font-size:14px !important;

    line-height:1.1 !important;

    white-space:nowrap !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;

  }



  /* ARROW BUTTON — ALL EXACTLY THE SAME SIZE */

  .social-grid .card em{

    width:64px !important;

    height:48px !important;

    min-width:64px !important;

    max-width:64px !important;

    flex:0 0 48px !important;

    margin:3px auto 0 !important;

    padding:0 !important;



    display:grid !important;

    place-items:center !important;



    font-size:0 !important;

    line-height:0 !important;

    color:transparent !important;



    background:rgba(255,255,255,.035) !important;

    border:1px solid rgba(255,255,255,.25) !important;

    border-radius:10px !important;



    box-sizing:border-box !important;

  }



  .social-grid .card em::before{

    content:"" !important;

    width:17px !important;

    height:17px !important;

    display:block !important;

    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M9 6h9v9' fill='none' stroke='%23f4f4f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat !important;

  }



  .social-grid .card em::after{

    display:none !important;

    content:none !important;

  }



  /* NUMBER */

  .social-grid .card .card-num{

    position:absolute !important;

    top:14px !important;

    right:14px !important;

  }



}



@media (max-width:430px){



  .social-grid .card{

    min-height:148px !important;

    padding:17px 10px !important;

  }



  .social-grid .card .icon{

    width:56px !important;

    height:56px !important;

    min-width:56px !important;

    flex-basis:56px !important;

  }



  .social-grid .card .icon svg{

    width:27px !important;

    height:27px !important;

  }



  .social-grid .card em{

    width:64px !important;

    height:48px !important;

    min-width:64px !important;

    max-width:64px !important;

  }



}






/* =========================================================

   KCUuLAB — MOBILE SOCIAL CARDS / ALIGNMENT FIX

   ========================================================= */



@media (max-width:760px){



  .social-grid{

    width:100% !important;

    grid-template-columns:1fr 1fr !important;

    align-items:stretch !important;

  }



  .social-grid .card{

    width:100% !important;

    min-width:0 !important;

    max-width:none !important;

    box-sizing:border-box !important;



    position:relative !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;



    text-align:center !important;

    gap:8px !important;

    min-height:150px !important;

    padding:18px 10px !important;

  }



  .social-grid .card .icon{

    flex:0 0 58px !important;

    width:58px !important;

    height:58px !important;

    min-width:58px !important;

    margin:0 auto !important;

  }



  .social-grid .card > div:nth-child(2){

    width:100% !important;

    min-width:0 !important;

    max-width:100% !important;

    margin:0 !important;

    padding:0 !important;



    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    text-align:center !important;

  }



  .social-grid .card small{

    width:100% !important;

    max-width:100% !important;

    margin:0 0 4px !important;

    text-align:center !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;

    white-space:nowrap !important;

  }



  .social-grid .card strong{

    width:100% !important;

    max-width:100% !important;

    margin:0 !important;

    text-align:center !important;

    white-space:nowrap !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;

  }



  /* FORCE ARROW BELOW TEXT */

  .social-grid .card em{

    position:static !important;

    inset:auto !important;

    transform:none !important;



    display:grid !important;

    place-items:center !important;



    flex:0 0 48px !important;

    width:64px !important;

    height:48px !important;

    min-width:64px !important;

    max-width:64px !important;



    margin:4px auto 0 !important;

    padding:0 !important;



    box-sizing:border-box !important;

  }



  .social-grid .card em::before{

    width:17px !important;

    height:17px !important;

  }



  .social-grid .card .card-num{

    position:absolute !important;

    top:14px !important;

    right:14px !important;

  }



}



@media (max-width:430px){



  .social-grid{

    gap:9px !important;

  }



  .social-grid .card{

    min-height:148px !important;

    padding:17px 8px !important;

  }



  .social-grid .card em{

    width:64px !important;

    min-width:64px !important;

    max-width:64px !important;

    height:48px !important;

  }



}






/* =========================================================

   KCUuLAB — MOBILE ARROW BUTTON FINAL

   ========================================================= */



@media (max-width:760px){



  .social-grid .card em{

    width:42px !important;

    height:42px !important;

    min-width:42px !important;

    max-width:42px !important;

    flex:0 0 42px !important;



    margin:5px auto 0 !important;

    padding:0 !important;



    display:grid !important;

    place-items:center !important;



    border:1px solid rgba(255,255,255,.28) !important;

    border-radius:10px !important;

    background:rgba(255,255,255,.025) !important;



    box-sizing:border-box !important;

  }



  .social-grid .card em::before{

    width:16px !important;

    height:16px !important;

  }



}



@media (max-width:430px){



  .social-grid .card em{

    width:42px !important;

    height:42px !important;

    min-width:42px !important;

    max-width:42px !important;

    flex-basis:42px !important;

  }



}






/* =========================================================

   MOBILE — ARROW BUTTONS MATCH DESKTOP

   ========================================================= */



@media (max-width:760px){



  .social-grid .card em{

    width:30px !important;

    height:30px !important;

    min-width:30px !important;

    max-width:30px !important;

    flex:0 0 30px !important;



    margin:5px auto 0 !important;

    padding:0 !important;



    display:grid !important;

    place-items:center !important;



    background:#dbe6f4 !important;

    border:0 !important;

    border-radius:7px !important;



    box-shadow:none !important;

  }



  .social-grid .card em::before{

    width:14px !important;

    height:14px !important;



    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M9 6h9v9' fill='none' stroke='%23151a20' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  }



}



@media (max-width:430px){



  .social-grid .card em{

    width:30px !important;

    height:30px !important;

    min-width:30px !important;

    max-width:30px !important;

    flex-basis:30px !important;

  }



}






/* KCUuLAB — ARROW BUTTON DARK FINAL */



@media (max-width:760px){



  .social-grid .card em{

    background:#0b0c0f !important;

    background-color:#0b0c0f !important;

    border:1px solid rgba(255,255,255,.24) !important;

    border-radius:10px !important;

    box-shadow:inset 0 0 0 1px rgba(0,0,0,.25) !important;

    -webkit-appearance:none !important;

    appearance:none !important;

    -webkit-tap-highlight-color:transparent !important;

  }



  .social-grid .card em::before{

    filter:none !important;

    opacity:.95 !important;

  }



  .social-grid .card em:active{

    background:#15171b !important;

    transform:scale(.96);

  }



}






/* =========================================================

   KCUuLAB — ARROW ICON / CLEAN CSS

   ========================================================= */



@media (max-width:760px){



  .social-grid .card em{

    opacity:1 !important;

    color:#fff !important;

    position:relative !important;

  }



  .social-grid .card em::before{

    content:"" !important;

    position:absolute !important;

    width:11px !important;

    height:11px !important;

    border-top:2px solid #fff !important;

    border-right:2px solid #fff !important;

    background:none !important;

    transform:translate(-3px,3px) rotate(-45deg) !important;

    display:block !important;

  }



  .social-grid .card em::after{

    content:"" !important;

    position:absolute !important;

    width:16px !important;

    height:2px !important;

    background:#fff !important;

    border:0 !important;

    border-radius:2px !important;

    transform:translate(-1px,5px) rotate(-45deg) !important;

    display:block !important;

  }



}






/* KCUuLAB — REMOVE SOCIAL ARROW BUTTONS */



@media (max-width:760px){

  .social-grid .card em{

    display:none !important;

  }

}






/* =========================================================

   KCUuLAB — SOCIAL CARDS CLEAN / CENTERED

   ========================================================= */



/* REMOVE ARROW BUTTONS EVERYWHERE */

.social-grid .card em{

  display:none !important;

}



/* CENTER SOCIAL CARDS */

.social-grid .card{

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:center !important;

  text-align:center !important;

  gap:10px !important;

  position:relative !important;

}



/* ICON */

.social-grid .card .icon{

  margin:0 auto !important;

  flex:0 0 auto !important;

  display:grid !important;

  place-items:center !important;

}



/* TEXT CONTAINER */

.social-grid .card > div:nth-child(2){

  width:100% !important;

  min-width:0 !important;

  margin:0 !important;

  padding:0 !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:center !important;

  text-align:center !important;

}



/* CATEGORY */

.social-grid .card small{

  width:100% !important;

  margin:0 0 4px !important;

  text-align:center !important;

  white-space:nowrap !important;

}



/* NAME */

.social-grid .card strong{

  width:100% !important;

  margin:0 !important;

  text-align:center !important;

  white-space:nowrap !important;

}



/* CARD NUMBER */

.social-grid .card .card-num{

  position:absolute !important;

  top:14px !important;

  right:14px !important;

}



/* MOBILE */

@media (max-width:760px){



  .social-grid .card{

    min-height:150px !important;

    padding:18px 12px !important;

  }



  .social-grid .card .icon{

    width:58px !important;

    height:58px !important;

  }



  .social-grid .card .icon svg{

    width:28px !important;

    height:28px !important;

  }



}



/* SMALL MOBILE */

@media (max-width:430px){



  .social-grid .card{

    min-height:145px !important;

  }



}






/* KCU LAB — MY SOCIALS GOLD */

.social-grid .home-card{

  position:relative!important;

  overflow:hidden!important;

  border-color:rgba(212,175,55,.45)!important;

  background:linear-gradient(105deg,rgba(212,175,55,.15),rgba(212,175,55,.035) 55%,rgba(255,255,255,.018))!important;

  box-shadow:inset 0 0 35px rgba(212,175,55,.05)!important;

  transition:.3s ease!important;

}



.social-grid .home-card::after{

  content:""!important;

  position:absolute!important;

  top:0!important;

  left:-45%!important;

  width:28%!important;

  height:100%!important;

  background:linear-gradient(90deg,transparent,rgba(255,215,90,.35),transparent)!important;

  transform:skewX(-18deg)!important;

  animation:kcuLabGoldSweep 4s ease-in-out infinite!important;

  pointer-events:none!important;

}



.social-grid .home-card:hover{

  transform:translateY(-4px)!important;

  border-color:#d4af37!important;

  background:linear-gradient(105deg,rgba(212,175,55,.26),rgba(212,175,55,.06) 55%,rgba(255,255,255,.025))!important;

  box-shadow:0 12px 38px rgba(212,175,55,.18),0 0 25px rgba(212,175,55,.1)!important;

}



.social-grid .home-card .person-icon{

  border-color:rgba(212,175,55,.65)!important;

  color:#d4af37!important;

  box-shadow:0 0 18px rgba(212,175,55,.15)!important;

}



.social-grid .home-card .person-icon svg{

  stroke:#d4af37!important;

  filter:drop-shadow(0 0 6px rgba(212,175,55,.35))!important;

}



.social-grid .home-card:hover .person-icon{

  background:rgba(212,175,55,.12)!important;

  box-shadow:0 0 28px rgba(212,175,55,.3)!important;

  transform:scale(1.06)!important;

}



.social-grid .home-card small{

  color:#e6c45a!important;

}



.social-grid .home-card .card-arrow{

  color:#d4af37!important;

}



.social-grid .home-card:hover .card-arrow{

  transform:translateX(6px)!important;

}



@keyframes kcuLabGoldSweep{

  0%,45%{left:-45%;opacity:0}

  55%{opacity:1}

  75%,100%{left:125%;opacity:0}

}