:root { --yellow:#ffbf00; --ink:#080808; --navy:#071b3e; --paper:#f5f3ee; --muted:#777; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.topbar { height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,5vw,76px); background:#080808; color:#fff; border-bottom:1px solid #292929; position:relative; z-index:20; }
.brand img { width:190px; height:62px; object-fit:contain; }
nav { display:flex; gap:34px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
nav a:hover { color:var(--yellow); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:18px 24px; background:var(--yellow); border:2px solid var(--yellow); color:#080808; font-weight:950; text-transform:uppercase; font-size:13px; letter-spacing:.04em; box-shadow:6px 6px 0 #fff; transition:.2s; }
.button:hover { transform:translate(-2px,-2px); box-shadow:9px 9px 0 #fff; }
.button-small { padding:13px 22px; box-shadow:4px 4px 0 var(--ink); }
.hero { min-height:calc(100vh - 86px); position:relative; display:grid; grid-template-columns:1.02fr .98fr; background:var(--ink); color:#fff; overflow:hidden; }
.hero::before { content:""; position:absolute; width:52vw; height:160%; background:var(--yellow); right:-35vw; top:-30%; transform:rotate(13deg); opacity:.95; }
.hero-glow { position:absolute; width:600px; height:600px; left:-250px; top:25%; border-radius:50%; background:rgba(255,191,0,.12); filter:blur(80px); }
.hero-copy { padding:clamp(70px,8vw,120px) 5vw 60px; position:relative; z-index:2; align-self:center; }
.eyebrow { font-size:12px; font-weight:900; letter-spacing:.2em; margin:0 0 24px; display:flex; align-items:center; gap:12px; }
.eyebrow span { display:block; width:34px; height:4px; background:var(--yellow); transform:skew(-25deg); }
.hero h1, h2 { margin:0; font-weight:1000; letter-spacing:-.055em; line-height:.87; text-transform:uppercase; font-style:italic; }
.hero h1 { font-size:clamp(64px,9vw,148px); }
.hero h1 em { color:var(--yellow); font-style:inherit; }
.hero-lead { max-width:610px; margin:30px 0; font-size:clamp(17px,1.6vw,23px); line-height:1.55; color:#d3d3d3; }
.hero-lead strong { color:var(--yellow); }
.hero-actions { display:flex; align-items:center; gap:32px; }
.text-link { font-size:13px; font-weight:900; text-transform:uppercase; border-bottom:2px solid #fff; padding-bottom:6px; }
.quick-stats { display:flex; margin-top:55px; border-top:1px solid #333; padding-top:25px; gap:clamp(20px,4vw,60px); }
.quick-stats div { display:flex; flex-direction:column; gap:7px; }
.quick-stats strong { font-size:19px; color:var(--yellow); }
.quick-stats span { color:#aaa; font-size:12px; text-transform:uppercase; }
.hero-visual { position:relative; min-height:650px; z-index:2; display:flex; align-items:flex-end; justify-content:center; padding:5vw 6vw 0 2vw; }
.image-frame { width:min(520px,100%); height:88%; overflow:hidden; border:7px solid #fff; transform:rotate(2deg); box-shadow:18px 18px 0 var(--yellow); background:#111; }
.image-frame img { width:100%; height:100%; object-fit:cover; object-position:center 15%; }
.floating-tag { position:absolute; right:2vw; top:18%; background:#fff; color:#080808; font-weight:1000; padding:13px 20px; transform:rotate(5deg); box-shadow:7px 7px 0 var(--yellow); }
.game-ticker { background:var(--yellow); overflow:hidden; border-block:3px solid #000; transform:rotate(-1deg) scale(1.02); position:relative; z-index:4; }
.game-ticker > div { white-space:nowrap; padding:14px 0; animation:ticker 24s linear infinite; width:max-content; }
.game-ticker span { font-size:17px; font-weight:1000; margin-right:32px; }
.game-ticker b { margin-left:32px; }
@keyframes ticker { to { transform:translateX(-50%); } }
.section { padding:clamp(85px,10vw,150px) clamp(22px,6vw,90px); }
.experience { background:var(--paper); }
.section-heading { display:flex; flex-direction:column; }
h2 { font-size:clamp(43px,6.2vw,92px); }
h2 mark { background:var(--yellow); color:var(--ink); padding:0 .08em; }
.section-intro { width:min(440px,100%); margin:28px 0 55px auto; color:#555; font-size:18px; line-height:1.6; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-grid article { position:relative; min-height:315px; border:2px solid #111; padding:28px; background:#fff; transition:.2s; }
.feature-grid article:nth-child(2) { background:var(--yellow); transform:translateY(-18px); }
.feature-grid article:hover { transform:translateY(-8px); box-shadow:10px 10px 0 #111; }
.feature-grid article:nth-child(2):hover { transform:translateY(-26px); }
.feature-grid article > b { position:absolute; right:22px; top:20px; color:#aaa; }
.feature-icon { font-size:44px; margin:35px 0 42px; }
.feature-grid h3 { font-size:25px; margin:0 0 14px; text-transform:uppercase; }
.feature-grid p { color:#555; line-height:1.5; margin:0; }
.games-section { display:grid; grid-template-columns:1.08fr .92fr; background:var(--navy); color:#fff; min-height:760px; }
.games-photo { min-height:650px; overflow:hidden; clip-path:polygon(0 0,94% 0,100% 100%,0 100%); }
.games-photo img { width:100%; height:100%; object-fit:cover; object-position:center; }
.games-copy { padding:clamp(70px,8vw,120px) clamp(25px,6vw,85px) 70px 40px; }
.light { color:#fff; }
.game-list { margin-top:48px; border-top:1px solid rgba(255,255,255,.28); }
.game-list div { display:grid; grid-template-columns:44px 1fr auto; align-items:center; border-bottom:1px solid rgba(255,255,255,.28); padding:21px 2px; }
.game-list span { color:var(--yellow); font-size:12px; }
.game-list strong { font-size:clamp(18px,2vw,28px); font-style:italic; }
.game-list b { font-size:25px; color:var(--yellow); }
.info-section { display:grid; grid-template-columns:1fr 1fr; gap:22px; background:#fff; }
.info-card { min-height:520px; padding:clamp(35px,5vw,70px); position:relative; overflow:hidden; border:2px solid #111; }
.yellow-card { background:var(--yellow); }
.eyebrow.dark span { background:#111; }
.info-card h2 { font-size:clamp(42px,5vw,72px); }
.info-card h2 em { color:#fff; text-shadow:3px 3px 0 #111; }
.info-card > p:not(.eyebrow):not(.social) { font-size:20px; line-height:1.6; font-weight:700; }
.dark-link { display:inline-block; margin-top:20px; font-weight:950; border-bottom:3px solid #111; padding-bottom:7px; text-transform:uppercase; font-size:13px; }
.map-lines { position:absolute; width:250px; height:250px; right:-30px; bottom:-60px; opacity:.18; transform:rotate(-15deg); }
.map-lines i { display:block; height:55px; border:10px solid #000; border-radius:50%; margin:-6px; }
.contact-card { background:#080808; color:#fff; }
.whatsapp { margin-top:60px; border:2px solid #444; padding:20px; display:flex; align-items:center; gap:18px; background:#111; transition:.2s; }
.whatsapp:hover { border-color:var(--yellow); transform:translateY(-3px); }
.whatsapp > span { width:52px; height:52px; border-radius:50%; background:#22c55e; display:grid; place-items:center; font-size:26px; }
.whatsapp div { display:flex; flex-direction:column; gap:4px; }
.whatsapp small { color:#aaa; }
.whatsapp strong { font-size:clamp(21px,2.5vw,35px); }
.whatsapp b { margin-left:auto; color:var(--yellow); font-size:30px; }
.social { margin-top:30px; color:#aaa; }
.social strong { color:#fff; }
footer { min-height:150px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:30px clamp(22px,6vw,90px); }
footer img { width:170px; }
footer p { color:var(--yellow); font-weight:1000; letter-spacing:.12em; }
footer span { color:#8995a9; font-size:12px; }
.mobile-cta { display:none; }

@media (max-width:900px) {
  nav { display:none; }
  .topbar .button { display:none; }
  .topbar { height:72px; }
  .brand img { width:160px; height:52px; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { padding:70px 22px 35px; }
  .hero-visual { min-height:520px; padding:0 42px 0 28px; }
  .image-frame { height:500px; }
  .quick-stats { gap:18px; justify-content:space-between; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-grid article:nth-child(2) { transform:none; }
  .games-section { grid-template-columns:1fr; }
  .games-photo { min-height:460px; clip-path:none; }
  .games-copy { padding:65px 22px; }
  .info-section { grid-template-columns:1fr; }
  footer { flex-direction:column; gap:18px; text-align:center; padding-bottom:95px; }
  .mobile-cta { display:block; position:fixed; z-index:50; bottom:12px; left:12px; right:12px; background:#22c55e; color:#fff; padding:17px; text-align:center; font-size:14px; font-weight:1000; text-transform:uppercase; box-shadow:0 10px 30px #0008; }
}
@media (max-width:560px) {
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .hero h1 { font-size:59px; }
  .quick-stats { display:grid; grid-template-columns:1fr 1fr; }
  .hero-visual { min-height:440px; padding:0 28px 0 16px; }
  .image-frame { height:410px; border-width:5px; }
  .floating-tag { top:6%; right:14px; font-size:11px; }
  .section { padding-inline:20px; }
  .section-intro { margin-left:0; }
  .info-card { min-height:470px; }
  .whatsapp { padding:16px 12px; gap:10px; }
  .whatsapp > span { width:42px; height:42px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .game-ticker > div { animation:none; } * { transition:none !important; } }