*{box-sizing:border-box}
:root{
  --bg:#080909;
  --panel:#111314;
  --panel2:#181a1b;
  --steel:#aeb1b2;
  --muted:#80766b;
  --bronze:#b47743;
  --bronze2:#d4a06e;
  --bronzeDark:#553724;
  --line:#3b3028;
  --text:#e8e5df;
  --white:#f5f2ed;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Rajdhani",Arial,sans-serif;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),
    #090a0a;
  background-size:42px 42px;
  color:var(--text);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* INTRO */
#fanuq-intro{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%,rgba(104,64,37,.32) 0,rgba(28,23,20,.72) 28%,#080909 68%,#030303 100%);
}
.intro-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(circle,#000 20%,transparent 80%)}
.intro-scan{position:absolute;left:0;top:-20%;width:100%;height:8%;background:linear-gradient(transparent,rgba(180,119,67,.16),rgba(238,185,126,.5),rgba(180,119,67,.12),transparent);filter:blur(4px);animation:introScan 2.7s ease-in-out forwards}
.intro-logo-wrap{position:relative;text-align:center;animation:introContainer 4s ease forwards}
.intro-logo{width:min(430px,70vw);opacity:0;filter:brightness(.2) drop-shadow(0 0 0 rgba(190,125,70,0));transform:perspective(900px) scale(.62) rotateY(-18deg) rotateX(5deg);animation:logoStartup 2.45s cubic-bezier(.2,.8,.2,1) forwards,logoFloat 2.1s ease-in-out 2.2s infinite alternate}
.intro-ring{position:absolute;left:50%;top:42%;border:1px solid rgba(212,160,110,.16);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.ring-a{width:520px;height:520px;animation:ringSpin 7s linear infinite}
.ring-b{width:600px;height:600px;border-style:dashed;animation:ringSpinReverse 10s linear infinite}
.intro-status{margin-top:12px;font-family:"Orbitron",Arial,sans-serif;letter-spacing:4px;color:var(--bronze2)}
.intro-brand{font-size:clamp(18px,2vw,28px);font-weight:700;opacity:0;text-shadow:0 0 10px rgba(215,167,109,.4);animation:statusAppear .5s ease 1.35s forwards}
.status-line{margin-top:8px;font-size:10px;letter-spacing:3px;color:#887463;opacity:0}
.status-1{animation:statusAppear .35s ease 1.8s forwards}
.status-2{animation:statusAppear .35s ease 2.25s forwards}
.status-3{color:var(--bronze2);animation:statusAppear .35s ease 2.7s forwards,statusGlow .8s ease 2.7s infinite alternate}
#skip-intro{position:absolute;right:26px;bottom:24px;padding:10px 15px;border:1px solid #725137;background:rgba(8,9,10,.76);color:#9b8067;font-family:"Orbitron",sans-serif;font-size:9px;letter-spacing:2px;cursor:pointer}
#skip-intro:hover{border-color:var(--bronze2);color:var(--bronze2)}
#fanuq-intro.intro-out{animation:introOut .9s cubic-bezier(.6,0,.4,1) forwards}

@keyframes logoStartup{
0%{opacity:0;transform:perspective(900px) scale(.55) rotateY(-22deg) rotateX(8deg);filter:brightness(.1) drop-shadow(0 0 0 rgba(190,125,70,0))}
45%{opacity:.82;transform:perspective(900px) scale(.94) rotateY(4deg) rotateX(-2deg);filter:brightness(.65) drop-shadow(0 0 14px rgba(190,125,70,.35))}
72%{transform:perspective(900px) scale(1.04) rotateY(-2deg);filter:brightness(1.2) drop-shadow(0 0 34px rgba(215,167,109,.72))}
100%{opacity:1;transform:perspective(900px) scale(1) rotateY(0) rotateX(0);filter:brightness(1) drop-shadow(0 0 20px rgba(190,125,70,.5))}
}
@keyframes logoFloat{from{transform:perspective(900px) translateY(0) rotateY(-1deg)}to{transform:perspective(900px) translateY(-8px) rotateY(1deg)}}
@keyframes introScan{0%{top:-15%;opacity:0}20%{opacity:1}100%{top:110%;opacity:0}}
@keyframes statusAppear{from{opacity:0;transform:translateY(5px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes statusGlow{from{text-shadow:0 0 5px rgba(215,167,109,.2)}to{text-shadow:0 0 8px rgba(215,167,109,.7),0 0 22px rgba(160,94,45,.35)}}
@keyframes introOut{0%{opacity:1;filter:brightness(1)}30%{filter:brightness(1.8)}100%{opacity:0;visibility:hidden;filter:brightness(.2)}}
@keyframes ringSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes ringSpinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}

/* SYSTEM BAR */
.system-bar{
  min-height:28px;padding:0 4vw;display:flex;align-items:center;gap:10px;
  font-family:"Orbitron",sans-serif;font-size:8px;letter-spacing:1.7px;color:#7c7066;
  background:#050606;border-bottom:1px solid #251e19;position:relative;z-index:90;
}
.system-dot{width:5px;height:5px;border-radius:50%;background:var(--bronze);box-shadow:0 0 10px var(--bronze)}
.system-time{margin-left:auto;color:#a17b5e}

/* HEADER */
.site-header{
  height:82px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;
  position:absolute;top:28px;left:0;right:0;z-index:50;
  background:linear-gradient(180deg,rgba(5,6,6,.88),rgba(5,6,6,.38),transparent);
  border-bottom:1px solid rgba(167,116,75,.22);
}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 9px rgba(185,120,70,.28))}
.brand strong{display:block;font-family:"Orbitron";font-size:19px;letter-spacing:4px}
.brand small{display:block;font-family:"Orbitron";font-size:8px;letter-spacing:5px;color:var(--bronze2);margin-top:3px}
.main-nav{display:flex;align-items:center;gap:22px;font-family:"Orbitron";font-size:9px;letter-spacing:1.2px}
.main-nav a{position:relative;color:#bbb7b0;padding:30px 0}
.main-nav a:not(.nav-access)::after{content:"";position:absolute;left:0;bottom:22px;width:0;height:1px;background:var(--bronze2);transition:.25s}
.main-nav a:hover{color:#fff}
.main-nav a:hover::after{width:100%}
.nav-access{padding:11px 16px!important;border:1px solid #6d4a31;background:linear-gradient(180deg,rgba(180,119,67,.11),rgba(56,36,25,.15));clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.menu-toggle{display:none;background:none;border:1px solid #5c4330;color:#d6b08a;font-size:20px}

/* HERO */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;background:url("assets/fanuq-campus.jpg") center/cover no-repeat;overflow:hidden}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,6,.91) 0%,rgba(7,8,8,.58) 40%,rgba(7,8,8,.25) 72%,rgba(7,8,8,.54) 100%),linear-gradient(0deg,#090a0a 0%,transparent 30%)}
.hero-lines{position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,rgba(192,134,83,.1) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(192,134,83,.06) 50%,transparent 50.2%)}
.hero-content{position:relative;z-index:2;width:min(860px,88vw);margin-left:6vw;padding-top:75px}
.eyebrow,.section-label{font-family:"Orbitron";font-size:9px;letter-spacing:2.4px;color:var(--bronze2)}
.hero h1{font-family:"Orbitron";font-size:clamp(50px,7.4vw,115px);line-height:.92;letter-spacing:-3px;margin:22px 0 18px;color:var(--white);text-shadow:0 10px 35px rgba(0,0,0,.6)}
.hero p{font-size:18px;letter-spacing:2px;color:#c7c1b9}
.hero-actions{display:flex;gap:12px;margin-top:31px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;font-family:"Orbitron";font-size:9px;letter-spacing:1.5px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:.25s}
.btn-primary{background:linear-gradient(135deg,#a36b3f,#6c452d);border:1px solid #d0a075;color:#fff;box-shadow:0 0 28px rgba(164,103,56,.15)}
.btn-primary:hover{filter:brightness(1.2);transform:translateY(-2px)}
.btn-ghost{border:1px solid #6b5a4e;background:rgba(11,12,12,.5);color:#c4b7aa}
.btn-ghost:hover{border-color:var(--bronze2);color:#fff}
.hero-corner-card{position:absolute;z-index:3;right:4vw;bottom:45px;width:min(330px,88vw);padding:16px 18px;background:rgba(10,11,11,.72);border:1px solid rgba(179,121,70,.34);backdrop-filter:blur(8px);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.hero-corner-card span,.hero-corner-card small{display:block;font-family:"Orbitron";font-size:8px;letter-spacing:1.5px;color:#87796d}
.hero-corner-card strong{display:block;font-family:"Orbitron";font-size:20px;margin:7px 0;color:#e6dfd7}

/* SECTIONS */
.section{padding:105px 7vw;max-width:1600px;margin:auto}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:8vw;align-items:start;margin-top:18px}
.kicker{font-family:"Orbitron";font-size:11px;letter-spacing:2.5px;color:var(--bronze2);margin:0 0 12px}
h2{font-family:"Orbitron";font-size:clamp(32px,4.4vw,68px);line-height:1.05;margin:0;color:#e7e3dd}
.body-copy{font-size:19px;line-height:1.65;color:#aaa49d}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #352a23;border-bottom:1px solid #352a23;margin-top:70px}
.stat{padding:28px 20px;border-right:1px solid #352a23}
.stat:last-child{border-right:0}
.stat strong{display:block;font-family:"Orbitron";font-size:36px;color:#ddd5cc}
.stat span{font-family:"Orbitron";font-size:8px;letter-spacing:1.7px;color:#827469}

.tech{border-top:1px solid #1c1916}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.tech-card{min-height:330px;padding:30px;position:relative;overflow:hidden;border:1px solid #3a2e26;background:linear-gradient(145deg,rgba(57,50,45,.56),rgba(18,20,21,.93) 45%,rgba(12,13,13,.98));clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);transition:.3s}
.tech-card::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 35%,rgba(255,255,255,.04) 48%,transparent 60%);transform:translateX(-120%);transition:.55s}
.tech-card:hover{transform:translateY(-5px);border-color:#765036}
.tech-card:hover::before{transform:translateX(120%)}
.card-index{font-family:"Orbitron";font-size:10px;color:#7a6555}
.tech-card h3{font-family:"Orbitron";font-size:20px;letter-spacing:1px;margin:70px 0 15px}
.tech-card p{font-size:17px;line-height:1.55;color:#a6a099}
.tech-card a{position:absolute;left:30px;bottom:28px;font-family:"Orbitron";font-size:8px;letter-spacing:1.2px;color:var(--bronze2)}

/* HUMANOID */
.humanoid-section{display:grid;grid-template-columns:1.2fr .8fr;min-height:760px;border-top:1px solid #241e1a;border-bottom:1px solid #241e1a;background:#0a0b0b}
.humanoid-image{position:relative;overflow:hidden}
.humanoid-image img{width:100%;height:100%;object-fit:cover}
.humanoid-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,#0a0b0b 100%),linear-gradient(0deg,#0a0b0b 0%,transparent 25%)}
.humanoid-panel{padding:90px 6vw 70px 4vw;display:flex;flex-direction:column;justify-content:center}
.humanoid-panel h2{font-size:clamp(34px,4vw,62px);margin:10px 0 20px}
.humanoid-panel>p:not(.kicker){font-size:18px;line-height:1.6;color:#aaa49d}
.spec-line{display:flex;justify-content:space-between;border-top:1px solid #362c25;padding:14px 0;font-family:"Orbitron";font-size:9px}
.spec-line span{color:#74675d}.spec-line strong{color:var(--bronze2)}
.humanoid-panel .btn{margin-top:25px;align-self:flex-start}

/* RESEARCH */
.research{padding-top:125px;padding-bottom:125px}
.research-box{margin-top:18px;padding:55px;border:1px solid #4b392d;background:radial-gradient(circle at 85% 20%,rgba(137,86,48,.18),transparent 35%),linear-gradient(145deg,#161717,#0b0c0c);clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}
.research-tag{font-family:"Orbitron";font-size:8px;letter-spacing:2px;color:#8f765f}
.research-box h2{font-size:clamp(30px,4vw,60px);margin:18px 0}
.research-box p{max-width:920px;font-size:18px;line-height:1.6;color:#aaa49d}
.research-location{font-family:"Orbitron";font-size:9px!important;letter-spacing:2px;color:var(--bronze2)!important}
.text-link{display:inline-block;margin-top:20px;font-family:"Orbitron";font-size:9px;letter-spacing:1.5px;color:var(--bronze2)}

/* CONTACT */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;border-top:1px solid #211c18}
.contact-grid{display:grid;grid-template-columns:1fr 1fr}
.contact-grid div{padding:25px;border:1px solid #332921}
.contact-grid span{display:block;font-family:"Orbitron";font-size:8px;letter-spacing:1.4px;color:#786b60}
.contact-grid strong{display:block;font-family:"Orbitron";font-size:20px;margin-top:8px;color:#ded8d0}

/* FOOTER */
footer{padding:38px 5vw 24px;border-top:1px solid #3c2e25;background:#050606}
.footer-brand{display:flex;align-items:center;gap:14px}
.footer-brand img{width:56px}
.footer-brand strong{display:block;font-family:"Orbitron";letter-spacing:2px}
.footer-brand small{display:block;margin-top:5px;font-family:"Orbitron";font-size:7px;letter-spacing:1.6px;color:#806b59}
.footer-links{display:flex;gap:20px;margin:25px 0;font-family:"Orbitron";font-size:8px;letter-spacing:1px;color:#877a6f}
.copyright{padding-top:20px;border-top:1px solid #201b17;font-family:"Orbitron";font-size:7px;letter-spacing:1.3px;color:#5e554d}

/* RESPONSIVE */
@media (max-width:1050px){
  .main-nav{display:none;position:absolute;top:82px;left:0;right:0;flex-direction:column;align-items:stretch;background:#090a0a;padding:15px 5vw;border-bottom:1px solid #513723}
  .main-nav.open{display:flex}
  .main-nav a{padding:14px 0}
  .menu-toggle{display:block}
  .split,.humanoid-section,.contact{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .humanoid-image{min-height:500px}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid #352a23}
}
@media (max-width:650px){
  .site-header{height:68px}
  .brand img{width:48px;height:48px}
  .brand strong{font-size:14px}.brand small{font-size:6px}
  .hero-content{margin-left:7vw;padding-top:50px}
  .hero h1{font-size:48px}
  .hero-corner-card{display:none}
  .section{padding:78px 7vw}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0!important;border-bottom:1px solid #352a23}
  .research-box{padding:30px 22px}
  .contact-grid{grid-template-columns:1fr}
  .intro-ring{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .intro-logo,.intro-scan,.intro-ring,.status-line,.intro-brand{animation:none!important}
}
