/* Chris Eigl — "Cyber-Punk Tactical HUD" concept.
   No fake esports matches, live odds drift, or kill heatmaps — the "monitoring
   panel" tracks Chris's own real reviewed casinos and real review status. */
*{box-sizing:border-box;}
html{background:var(--bg); min-height:100%;}
body{
  margin:0; min-height:100%; background:var(--bg); color:var(--text);
  font-family:'Inter', sans-serif; font-size:1.02rem; line-height:1.65;
}
:root{
  --bg:#030712; --frame:#1F2937; --panel:#0A0F1C; --teal:#00F5D4; --pink:#F72585; --text:#D7DCE5; --muted:#8B93A7;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
/* Chakra Petch (the HUD-tech display font) is reserved for short strings
   (name, nav, stat numbers, tags) — full-sentence headings use Inter so they
   stay legible; see .hero-name for the one deliberate exception. */
h1,h2,h3{font-family:'Inter', sans-serif; font-weight:700; margin:0; color:#fff; letter-spacing:-.01em;}
.hero-name{font-family:'Chakra Petch',sans-serif;}
.kicker{font-family:'Chakra Petch', sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:.68rem; color:var(--teal); margin:0 0 10px; font-weight:600;}
.display{font-size:clamp(1.7rem,3.6vw,2.4rem); line-height:1.22;}
.lede{font-size:1.03rem; color:var(--muted); max-width:660px;}
.lede.center{margin:0 auto;}
a{color:var(--teal);}

/* chamfered "tactical" frame — used on every card/button */
.chamf{clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));}
.panel{background:var(--panel); border:1px solid var(--frame); position:relative;}
.corner-tl, .corner-br{content:''; position:absolute; width:14px; height:14px; pointer-events:none;}
.corner-tl{top:-1px; left:-1px; border-top:2px solid var(--teal); border-left:2px solid var(--teal);}
.corner-br{bottom:-1px; right:-1px; border-bottom:2px solid var(--teal); border-right:2px solid var(--teal);}

/* targeting-reticle hover — corner brackets brighten/expand, no cursor tracking needed */
.target:hover .corner-tl{width:20px; height:20px; border-color:var(--pink); box-shadow:0 0 8px var(--pink);}
.target:hover .corner-br{width:20px; height:20px; border-color:var(--pink); box-shadow:0 0 8px var(--pink);}
.corner-tl, .corner-br{transition:width .2s ease, height .2s ease, border-color .2s ease, box-shadow .2s ease;}
@media (prefers-reduced-motion:reduce){ .corner-tl,.corner-br{transition:none;} }

.btn{display:inline-block; padding:13px 26px; border:1px solid var(--teal); font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; color:var(--teal); background:transparent;}
.btn:hover{background:var(--teal); color:#001210;}
.btn-solid{background:var(--teal); color:#001210; border-color:var(--teal);}
.btn-solid:hover{background:var(--pink); border-color:var(--pink); color:#1a0010;}

/* nav */
.topnav{position:sticky; top:0; z-index:50; background:rgba(3,7,18,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--frame);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 24px; gap:16px;}
.nav-logo{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:1.05rem; color:#fff; text-decoration:none; display:flex; align-items:center; gap:8px;}
.nav-logo img{height:20px; width:auto;}
.nav-logo span{color:var(--teal);}
.hud-clock{font-family:'Chakra Petch',sans-serif; font-size:.72rem; color:var(--teal); display:flex; align-items:center; gap:6px;}
.hud-dot{width:6px; height:6px; border-radius:50%; background:var(--pink); box-shadow:0 0 6px var(--pink); animation:blink 1.4s ease-in-out infinite;}
@keyframes blink{50%{opacity:.3;}}
@media (prefers-reduced-motion:reduce){ .hud-dot{animation:none;} }
@media (max-width:760px){ .hud-clock{display:none;} }
.nav-links{display:flex; gap:0; align-items:center;}
.nav-links a{font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); text-decoration:none; padding:8px 14px; border-left:1px solid var(--frame);}
.nav-links a:hover, .nav-links a.active{background:var(--teal); color:#001210;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{width:22px; height:2px; background:var(--teal);}
@media (max-width:860px){
  .nav-toggle{display:flex;}
  .nav-links{position:absolute; top:100%; left:0; right:0; background:#030712; border-bottom:1px solid var(--frame); flex-direction:column; align-items:stretch; max-height:0; overflow:hidden;}
  .nav-links.open{max-height:340px;}
  .nav-links a{padding:12px 20px; border-left:none; border-bottom:1px solid var(--frame);}
}

/* hero */
.hero{padding:40px 0;}
.hero-panel{padding:26px 26px 22px;}
.hero-panel-head{display:flex; justify-content:space-between; align-items:center; font-family:'Chakra Petch',sans-serif; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--frame);}
.live-tag{color:var(--pink); display:flex; align-items:center; gap:6px;}
.hero-grid{display:grid; grid-template-columns:1fr 200px; gap:32px; align-items:center;}
@media (max-width:760px){ .hero-grid{grid-template-columns:1fr;} }
.hero-name{font-size:clamp(2rem,5.4vw,2.9rem); margin:0 0 6px;}
.role-label{font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:.86rem; color:var(--teal); text-transform:uppercase; letter-spacing:.04em; margin:0 0 16px;}
.bronze-badge{background:linear-gradient(135deg,#C98A3C,#8A5A22); color:#fff; font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; padding:5px 14px; display:inline-block; margin-top:6px; border:1px solid #E0A05C;}
.hud-photo{position:relative; padding:6px;}
.hud-photo img{width:100%; height:190px; object-fit:cover; display:block;}

.stat-strip{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
.stat-chip{background:var(--bg); border:1px solid var(--frame); text-align:center; padding:12px 14px; flex:1; min-width:88px;}
.stat-chip b{display:block; font-family:'Chakra Petch',sans-serif; font-size:1.4rem; color:var(--teal); font-weight:700;}
.stat-chip span{font-size:.6rem; text-transform:uppercase; letter-spacing:.02em; color:var(--muted); font-family:'Chakra Petch',sans-serif;}

section{padding:42px 0; border-bottom:1px solid var(--frame);}
.section-head{margin-bottom:22px;}
.two-col{display:grid; grid-template-columns:280px 1fr; gap:34px; align-items:start;}
@media (max-width:760px){ .two-col{grid-template-columns:1fr;} }

/* credentials */
.cred-row{display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid var(--frame);}
.cred-row:last-child{border-bottom:none;}
.cred-icon{width:30px; height:30px; flex-shrink:0; background:rgba(0,245,212,.1); border:1px solid var(--teal); color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:.85rem;}
.cred-text b{display:block; font-family:'Inter',sans-serif; font-weight:700; font-size:.98rem; color:#fff;}
.cred-text span{font-size:.9rem; color:var(--muted);}

/* monitoring panel — real review status, not fake odds */
.mon-head{display:flex; justify-content:space-between; align-items:center; font-family:'Chakra Petch',sans-serif; font-size:.68rem; text-transform:uppercase; color:var(--muted); padding:10px 16px; border-bottom:1px solid var(--frame);}
.rev-row{display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--frame); font-family:'Chakra Petch',sans-serif;}
.rev-row:last-child{border-bottom:none;}
.rev-name{font-weight:600; color:#fff; font-size:.94rem;}
.rev-score{color:var(--teal); font-weight:700;}
.rev-status{font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--pink); display:flex; align-items:center; gap:5px;}

/* section shortcuts — plain jump links, deliberately NOT styled like filter
   buttons/toggles since they don't filter anything, just scroll to a section */
.hud-jumps{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:18px; font-family:'Chakra Petch',sans-serif; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em;}
.hud-jumps a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent;}
.hud-jumps a:hover{color:var(--teal); border-color:var(--teal);}
.rev-more{display:inline-block; margin-top:14px; font-family:'Chakra Petch',sans-serif; font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; color:var(--teal); text-decoration:none;}
.rev-more:hover{text-decoration:underline;}

/* quote */
.quote-block{padding:24px 26px; display:flex; gap:14px; align-items:flex-start;}
.quote-mark{font-family:'Chakra Petch',sans-serif; font-size:2.2rem; color:var(--pink); line-height:1; flex-shrink:0;}
.quote-block blockquote{margin:0; font-size:1.04rem; color:#fff; font-style:italic;}
.quote-attr{margin-top:10px; font-family:'Chakra Petch',sans-serif; font-size:.68rem; color:var(--teal); text-transform:uppercase; letter-spacing:.03em;}

/* testimonials */
.testi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;}
.testi-card{padding:16px 18px;}
.testi-head{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.avatar-photo{width:44px; height:44px; object-fit:cover; flex-shrink:0; border:1px solid var(--teal);}
.testi-head b{display:block; font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:.92rem; color:#fff;}
.testi-head span{font-size:.74rem; color:var(--muted); display:block;}
.tier-pill{font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:.56rem; text-transform:uppercase; padding:2px 8px; border:1px solid; display:inline-block; margin-top:4px;}
.tier-pill.gold{color:#E8B33D; border-color:#E8B33D;}
.tier-pill.silver{color:#C7D0D6; border-color:#C7D0D6;}
.tier-pill.bronze{color:#C98A3C; border-color:#C98A3C;}
.testi-card p{margin:0; font-size:.88rem; color:var(--muted);}

/* board */
.board{display:flex; flex-direction:column; gap:12px;}
.board-row{display:flex; gap:14px; align-items:flex-start; padding:16px 18px;}
.board-icon{width:34px; height:34px; background:rgba(247,37,133,.1); border:1px solid var(--pink); color:var(--pink); font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:.56rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; text-align:center; line-height:1.05;}
.board-row b{display:block; font-family:'Inter',sans-serif; font-weight:700; font-size:.96rem; margin-bottom:3px; color:#fff;}
.board-row p{margin:0; font-size:.88rem; color:var(--muted);}

/* career: log line */
.file-line{position:relative; padding-left:38px;}
.file-line::before{content:''; position:absolute; left:11px; top:6px; bottom:6px; width:1px; background:var(--frame);}
.file-row{position:relative; padding-bottom:26px;}
.file-row:last-child{padding-bottom:0;}
.file-dot{position:absolute; left:-38px; top:2px; width:20px; height:20px; background:var(--bg); border:2px solid var(--teal); transform:rotate(45deg);}
.file-when{font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:.72rem; color:var(--teal); margin:0 0 3px; text-transform:uppercase;}
.file-role{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:1.1rem; color:#fff;}
.file-org{font-size:.9rem; color:var(--muted);}

.cta-strip{color:var(--text); text-align:center; padding:48px 24px; background:var(--panel); border-top:1px solid var(--frame);}
footer{padding:22px 24px; text-align:center; font-family:'Chakra Petch',sans-serif; font-size:.7rem; color:var(--muted);}
footer .links a{color:var(--teal); margin:0 10px; text-decoration:none;}

.contact-form{max-width:560px; display:flex; flex-direction:column; gap:16px;}
.form-row{display:flex; flex-direction:column; gap:6px;}
.form-row label{font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:.7rem; text-transform:uppercase; color:var(--teal);}
.form-row input, .form-row textarea{font-family:'Inter',sans-serif; font-size:1rem; padding:10px 12px; border:1px solid var(--frame); background:var(--panel); color:var(--text);}
.form-row input:focus, .form-row textarea:focus{outline:none; border-color:var(--teal);}
.form-note{font-size:.85rem; color:var(--muted);}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:22px;}
.contact-card{padding:18px;}
.contact-card p{color:var(--muted);}

.page-hero{padding:38px 0; border-bottom:1px solid var(--frame); text-align:center;}