/* ================================================================
   HishCok — Shared Theme
   Carries over the visual language of the Coming Soon page:
   cyber HUD · dark navy · cyan accents · clip-path chamfers
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg-0:#03070f;
  --bg-1:#070d1c;
  --bg-2:#0c1730;
  --bg-3:#101e3a;

  --ink:#e8f1ff;
  --ink-dim:#7f95b8;
  --ink-ghost:#3a4a6b;

  --cyan:#3ec7ff;
  --cyan-bright:#7fe1ff;
  --cyan-deep:#0a6ea8;
  --steel:#aebed8;
  --warn:#ff5d4d;
  --ok:#3ddc7e;

  --grid:rgba(62,199,255,.10);
  --grid-strong:rgba(62,199,255,.22);

  --radius:0px;
  --chamfer-sm:8px;
  --chamfer-md:14px;
  --chamfer-lg:20px;

  --maxw:1280px;
  --pad-x:56px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{min-height:100%;background:var(--bg-0)}
body{
  font-family:'Rajdhani',sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
  line-height:1.5;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}

/* ============== TYPOGRAPHY ============== */
.font-display{font-family:'Orbitron',sans-serif;font-weight:900;letter-spacing:.04em}
.font-mono{font-family:'JetBrains Mono',monospace}
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.4em;
  color:var(--ink-dim);text-transform:uppercase;
}
.eyebrow .line{height:1px;width:80px;background:linear-gradient(90deg,var(--cyan),transparent)}
.h1{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(40px,5.6vw,84px);line-height:1;letter-spacing:.01em;color:var(--ink)}
.h2{font-family:'Orbitron',sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,46px);line-height:1.1;letter-spacing:.02em;color:var(--ink)}
.h3{font-family:'Orbitron',sans-serif;font-weight:700;font-size:18px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.lead{font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--steel)}

/* ============== ATMOSPHERE (background layers) ============== */
.atmosphere{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.atmosphere::before{
  content:"";position:absolute;inset:-10%;
  background:
    radial-gradient(ellipse 60% 50% at 50% 20%, #0e2348 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 110%, #051226 0%, transparent 55%),
    linear-gradient(180deg,#03070f 0%, #050b18 40%, #03070f 100%);
}
.atm-hex{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 1 L54 16 L54 48 L28 63 L2 48 L2 16 Z' fill='none' stroke='%233ec7ff' stroke-width='1' stroke-opacity='0.13'/></svg>");
  background-size:84px 96px;
  opacity:.45;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, #000 0%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, #000 0%, transparent 80%);
}
.atm-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  opacity:.4;
}
.atm-scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
  pointer-events:none;
}
.atm-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;mix-blend-mode:screen}
.atm-blob.a{width:520px;height:520px;background:#0a6ea8;top:-140px;left:-160px;animation:atmDrift 24s ease-in-out infinite}
.atm-blob.b{width:620px;height:620px;background:#1d3a8f;bottom:-220px;right:-180px;animation:atmDrift 30s ease-in-out infinite reverse}
.atm-blob.c{width:380px;height:380px;background:#3ec7ff;top:30%;left:50%;transform:translate(-50%,-50%);opacity:.14;animation:atmPulse 6s ease-in-out infinite}
@keyframes atmDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}}
@keyframes atmPulse{0%,100%{opacity:.12;transform:translate(-50%,-50%) scale(1)}50%{opacity:.22;transform:translate(-50%,-50%) scale(1.1)}}
.atm-particles{position:absolute;inset:0}
.atm-particles .p{position:absolute;width:2px;height:2px;background:#7fe1ff;border-radius:50%;box-shadow:0 0 8px #3ec7ff;opacity:.6;animation:atmRise linear infinite}
@keyframes atmRise{0%{transform:translateY(100vh);opacity:0}10%{opacity:.7}90%{opacity:.7}100%{transform:translateY(-10vh);opacity:0}}

/* ============== HUD CHROME ============== */
.hud{position:fixed;inset:0;pointer-events:none;z-index:5}
.hud-corner{position:absolute;width:120px;height:120px;border:1px solid var(--grid-strong)}
.hud-corner.tl{top:18px;left:18px;border-right:none;border-bottom:none;clip-path:polygon(0 0, 100% 0, 100% 8%, 8% 8%, 8% 100%, 0 100%)}
.hud-corner.tr{top:18px;right:18px;border-left:none;border-bottom:none;clip-path:polygon(0 0, 100% 0, 100% 100%, 92% 100%, 92% 8%, 0 8%)}
.hud-corner.bl{bottom:18px;left:18px;border-right:none;border-top:none;clip-path:polygon(0 0, 8% 0, 8% 92%, 100% 92%, 100% 100%, 0 100%)}
.hud-corner.br{bottom:18px;right:18px;border-left:none;border-top:none;clip-path:polygon(92% 0, 100% 0, 100% 100%, 0 100%, 0 92%, 92% 92%)}
.hud-tick{position:absolute;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--ink-ghost);text-transform:uppercase}
.hud-tick.tl{top:28px;left:150px}
.hud-tick.tr{top:28px;right:150px;text-align:right}
.hud-tick.bl{bottom:28px;left:150px}
.hud-tick.br{bottom:28px;right:150px;text-align:right}

/* ============== HEADER / NAV ============== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, rgba(3,7,15,.85), rgba(3,7,15,.55) 60%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(62,199,255,.08);
}
.site-header .inner{
  max-width:var(--maxw);margin:0 auto;
  padding:18px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{
  width:44px;height:44px;border-radius:8px;
  background:url('assets/hc-logo.jpg') center/cover;
  box-shadow:0 0 0 1px rgba(62,199,255,.4), 0 0 24px rgba(62,199,255,.3);
  position:relative;flex-shrink:0;
}
.brand-logo::after{content:"";position:absolute;inset:-3px;border-radius:10px;border:1px solid rgba(62,199,255,.25)}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:14px;letter-spacing:.32em;color:var(--ink)}
.brand-sub{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.28em;color:var(--cyan);text-transform:uppercase}

.nav-main{display:flex;align-items:center;gap:6px}
.nav-main a{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-dim);
  padding:10px 14px;
  position:relative;transition:color .2s ease;
}
.nav-main a::before{content:"//";color:var(--cyan);margin-right:6px;opacity:0;transition:opacity .2s ease}
.nav-main a:hover{color:var(--ink)}
.nav-main a:hover::before,
.nav-main a.is-active::before{opacity:1}
.nav-main a.is-active{color:var(--cyan-bright)}
.nav-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;
  background:linear-gradient(135deg,#3ec7ff 0%, #1a8ccf 100%);
  color:#03070f;
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  box-shadow:0 0 20px rgba(62,199,255,.4);
  transition:all .2s ease;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 28px rgba(62,199,255,.6);background:linear-gradient(135deg,#7fe1ff,#3ec7ff)}

.nav-toggle{display:none;width:42px;height:42px;border:1px solid rgba(62,199,255,.25);align-items:center;justify-content:center;color:var(--cyan)}
.nav-toggle svg{width:22px;height:22px}

/* ============== LAYOUT / SECTIONS ============== */
main{position:relative;z-index:10}
.section{padding:96px 0;position:relative}
.section.compact{padding:64px 0}
.section.tight{padding:48px 0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.section-head{display:flex;flex-direction:column;gap:16px;margin-bottom:48px;max-width:760px}
.section-head .h2{margin-top:4px}
.section-head .lead{margin-top:6px}

/* ============== BUTTONS ============== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition:all .2s ease;
  cursor:pointer;border:none;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,#3ec7ff 0%, #1a8ccf 100%);
  color:#03070f;
  box-shadow:0 0 24px rgba(62,199,255,.4);
}
.btn-primary:hover{background:linear-gradient(135deg,#7fe1ff,#3ec7ff);transform:translateY(-1px);box-shadow:0 0 32px rgba(62,199,255,.6)}
.btn-ghost{
  background:transparent;
  color:var(--cyan-bright);
  border:1px solid rgba(62,199,255,.3);
  box-shadow:inset 0 0 24px rgba(62,199,255,.06);
}
.btn-ghost:hover{border-color:var(--cyan);background:rgba(62,199,255,.06);color:var(--ink)}
.btn-sm{padding:10px 18px;font-size:10px;letter-spacing:.24em}
.btn .arr{display:inline-block;transition:transform .2s ease}
.btn:hover .arr{transform:translateX(3px)}

/* ============== BADGES / CHIPS ============== */
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;
  border:1px solid rgba(62,199,255,.3);
  background:linear-gradient(90deg, rgba(62,199,255,.08), transparent);
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--cyan-bright);
}
.badge .ind{width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 10px var(--cyan);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(62,199,255,.2);background:rgba(62,199,255,.04);
  color:var(--ink-dim);
  clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.chip.is-active{border-color:var(--cyan);color:var(--cyan-bright);background:rgba(62,199,255,.1)}
.chip:hover{color:var(--ink);border-color:rgba(62,199,255,.4)}

/* ============== PANELS / CARDS ============== */
.panel{
  position:relative;
  padding:24px 26px;
  background:linear-gradient(135deg, rgba(12,23,48,.55), rgba(7,13,28,.35));
  border:1px solid rgba(62,199,255,.16);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition:all .25s ease;
}
.panel.is-hover:hover{
  border-color:rgba(62,199,255,.4);
  background:linear-gradient(135deg, rgba(12,23,48,.75), rgba(7,13,28,.5));
  transform:translateY(-3px);
}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.panel-id{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;color:var(--ink-ghost)}

/* ============== FORM ============== */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;color:var(--ink-dim);text-transform:uppercase}
.field input,.field select,.field textarea{
  background:rgba(3,7,15,.6);
  border:1px solid rgba(62,199,255,.22);
  color:var(--ink);
  padding:14px 16px;
  font-family:'Rajdhani',sans-serif;font-size:16px;font-weight:500;letter-spacing:.02em;
  outline:none;transition:all .2s ease;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-ghost);letter-spacing:.04em}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 1px var(--cyan), 0 0 24px rgba(62,199,255,.18);
}
.field textarea{resize:vertical;min-height:120px}

/* ============== FOOTER ============== */
.site-footer{
  position:relative;z-index:10;
  border-top:1px solid rgba(62,199,255,.12);
  background:rgba(3,7,15,.6);
  backdrop-filter:blur(6px);
  margin-top:64px;
}
.site-footer .inner{max-width:var(--maxw);margin:0 auto;padding:56px var(--pad-x) 24px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-col h4{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.32em;color:var(--ink);text-transform:uppercase;margin-bottom:18px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--ink-dim);text-transform:uppercase;transition:color .2s ease}
.footer-col a:hover{color:var(--cyan-bright)}
.footer-col p{font-size:14px;color:var(--ink-dim);line-height:1.6}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:24px;border-top:1px solid rgba(62,199,255,.08);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;color:var(--ink-ghost);text-transform:uppercase;
  gap:16px;flex-wrap:wrap;
}
.footer-bottom .tick{color:var(--cyan)}
.footer-socials{display:flex;gap:8px}
.footer-socials a{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(62,199,255,.18);color:var(--ink-dim);
  clip-path:polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  transition:all .2s ease;
}
.footer-socials a:hover{border-color:var(--cyan);color:var(--cyan-bright);background:rgba(62,199,255,.06)}
.footer-socials svg{width:16px;height:16px;fill:currentColor}

/* ============== REVEAL ON SCROLL ============== */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease}
[data-reveal].is-revealed{opacity:1;transform:translateY(0)}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
[data-reveal][data-delay="5"]{transition-delay:.4s}

/* ============== RESPONSIVE ============== */
@media (max-width: 1024px){
  :root{--pad-x:36px}
  .hud-tick{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width: 720px){
  :root{--pad-x:22px}
  .section{padding:64px 0}
  .nav-main{display:none}
  .nav-toggle{display:flex}
  .nav-cta{display:none}
  .brand-sub{display:none}
  .site-header.is-open .nav-main{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(3,7,15,.97);
    border-bottom:1px solid rgba(62,199,255,.18);
    padding:8px 0;
  }
  .site-header.is-open .nav-main a{padding:14px 22px;border-bottom:1px solid rgba(62,199,255,.06)}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center;align-items:center}
}