/* Focii Games - Global Styles */
:root{
  --bg:#0b0d12;
  --panel:#121521;
  --elev:#161a29;
  --text:#e7eaf3;
  --muted:#9aa4c0;
  --brand:#5f8ee6; /* toned primary */
  --brand-2:#4e63d6;
  --accent:#ff7a6a;
  --ok:#3ddc97;
  --warning:#f6c177;
  --border:rgba(255,255,255,.08);
  --shadow:0 6px 18px rgba(0,0,0,.25);
  --radius:8px;
  --bg-grad1: transparent;
  --bg-grad2: transparent;
}
/* Alt theme: Sand (light) */
body.theme-sand{
  /* provided palette mapped to site tokens */
  --bg: #F9F2DA;              /* --bg-color */
  --panel: #EDE3C2;           /* --bg-secondary */
  --elev: #e6d9bcde;          /* --inventory-bg */
  --text: #3D2B1F;            /* --body-text */
  --muted: #6e5a3f;           /* derived muted */
  --brand: #8B6F47;           /* --header-text as brand1 */
  --brand-2: #CAB58D;         /* --accent as brand2 */
  --accent: #CAB58D;          /* keep accent consistent */
  --accent-2: #D98E48;        /* warm ember */
  --accent-3: #6AA58C;        /* sage */
  --border: rgba(0,0,0,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --bg-grad1: #FFFBE8;        /* --highlight */
  --bg-grad2: #f1f1db;        /* --bgbg */
  /* additional tones */
  --header-bg: linear-gradient(180deg, rgba(203,181,141,.85), rgba(203,181,141,.20));
  --footer-bg: linear-gradient(180deg, rgba(203,181,141,.18), rgba(203,181,141,.05));
  --link: #8B6F47;
  --link-hover: #5e462c;
  --footer-text: #634531;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 17px/1.65 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.theme-sand{font-size:17px; line-height:1.65}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1040px, 92%); margin-inline:auto}

/* Headings */
h1,.h1{font-weight:800; letter-spacing:-.2px}
h2,.h2{font-weight:700; letter-spacing:-.1px}
h3,.h3{font-weight:600}
h1{font-size: clamp(32px, 4.6vw, 56px)}
h2{font-size: clamp(22px, 3.2vw, 32px)}
h3{font-size: clamp(18px, 2.6vw, 22px)}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(110%) blur(4px); background:rgba(11,13,18,.65); border-bottom:1px solid var(--border)}
body.theme-sand .site-header{backdrop-filter:saturate(110%) blur(4px); background:rgba(249,242,218,.7)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; position:relative}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.brand-logo{width:36px; height:36px; border-radius:2px; display:grid; place-items:center; font-weight:800; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0a0c12; box-shadow:var(--shadow); overflow:hidden}
.brand-logo img{width:100%; height:100%; display:block; object-fit:contain; border-radius:inherit}
.brand-text{font-size:20px; font-family:"DM Serif Display", Georgia, serif; letter-spacing:.1px}
/* Theme logo variants */
.brand-logo .logo-sand{display:none}
body.theme-sand .brand-logo .logo-dark{display:none}
body.theme-sand .brand-logo .logo-sand{display:block}
/* Sand-specific logo container look */
body.theme-sand .brand-logo{background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0)); box-shadow:none; border:1px solid rgba(0,0,0,.12)}
.site-header.scrolled{box-shadow:var(--shadow)}

.nav{display:flex; align-items:center; gap:14px}
.nav a{color:var(--link, var(--muted)); position:relative}
.nav a:hover{color:var(--link-hover, var(--text))}
.nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; border-radius:2px; background:var(--brand)}

.nav-toggle{display:none; background:none; border:0; width:40px; height:40px; padding:4px; cursor:pointer}
.nav-toggle span{display:block; height:2px; background:var(--text); margin:7px 4px; border-radius:2px; transition:.25s}

/* Mobile nav */
@media (max-width: 820px){
  .nav-toggle{display:block}
  .nav{position:absolute; top:100%; right:0; left:0; z-index:40; display:none; flex-direction:column; gap:12px; padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--border)}
  body.theme-sand .nav{background:var(--footer-bg)}
  .nav.open{display:flex}
}

/* Hero */
.hero{position:relative; overflow:hidden; background:transparent}
.gradient-bg{display:none}
.hero::before,.hero::after{content:none}
.hero-inner{position:relative; padding:72px 0 44px; text-align:center}
.headline{font-size: clamp(30px, 4.2vw, 52px); line-height:1.1; letter-spacing:-.3px; margin:0 0 10px; color:var(--text)}
.subhead{color:var(--muted); font-size: clamp(15px, 1.9vw, 19px); margin:0 auto 18px; max-width:680px}
/* trustband removed */

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:var(--radius); border:1px solid var(--border); background:var(--elev); color:var(--text); box-shadow:none; transition:background .2s ease, border-color .2s ease}
.btn:hover{background:rgba(255,255,255,.05)}
.btn:active{transform:none}
.btn-small{padding:6px 10px}
.btn-primary{background:var(--brand); color:#0b0d12; border:0; font-weight:700}
body.theme-sand .btn-primary{background:var(--accent-2); color:#1b120c}
.btn-secondary{background:#1b2236; color:#dfe6ff}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text)}
body.theme-sand .btn-ghost{border-color:rgba(0,0,0,.2); color:var(--link)}
body.theme-sand .btn-secondary{background:#d7c49a; color:#3D2B1F}

/* Sections */
.section{padding:72px 0}
.section-alt{background:transparent}
.section-head{display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:18px}
.section-head h2{margin:0}
.section-head p{margin:0; color:var(--muted)}

/* Product grid */
.product-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column}
.card-media img{aspect-ratio: 16 / 9; object-fit:cover}
.card-body{padding:14px}
.eyebrow{color:var(--muted); font-size:12px; letter-spacing:.4px; text-transform:uppercase}
.card h3{margin:4px 0 6px}
.card p{margin:0 0 10px; color:var(--muted)}
.card-actions{display:flex; gap:10px; flex-wrap:wrap}
.card{transition:background .2s ease, border-color .2s ease}
.card:hover{background:rgba(255,255,255,.02); border-color:rgba(255,255,255,.16)}

/* Partners / Logo belt */
.logo-belt{display:flex; flex-wrap:wrap; gap:12px}
.logo-chip{padding:10px 14px; border-radius:999px; font-weight:600; color:var(--text); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)); border:1px solid var(--border); position:relative}
body.theme-sand .logo-chip{color:#3D2B1F; background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,0)); border-color:rgba(0,0,0,.12)}
.logo-chip::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:linear-gradient(135deg, var(--brand), var(--accent)) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.35}

/* Standard mask for compatibility */
.logo-chip::after{mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0)}

/* Tech Stack */
.stack-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px}
.stack-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px}
.stack-card h3{margin:4px 0 10px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0)); color:var(--text)}
body.theme-sand .chip{background:linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,0)); color:#3D2B1F; border-color:rgba(0,0,0,.12)}

/* Testimonials */
.testimonial-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px}
.t-card{margin:0; padding:16px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); position:relative}
.t-card::before{content:"\201C"; position:absolute; top:8px; left:12px; font-size:40px; opacity:.15}
.t-card cite{display:block; margin-top:10px; color:var(--muted); font-style:normal}

/* Services / What we do */
.services-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px}
.service-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px}
.service-card h3{margin:6px 0 8px}
.service-card p{margin:0; color:var(--muted)}

/* Privacy */
.policy{display:grid; gap:8px; max-width:800px}
.policy h3{margin:12px 0 6px}
.policy p{margin:0}
.policy ul{margin:6px 0 12px; padding-left:18px}
.policy li{margin:4px 0; color:var(--muted)}

/* Modal */
.modal{position:fixed; inset:0; display:none; z-index:1000; padding:24px; display:none}
.modal[aria-hidden="false"]{display:grid; place-items:center}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5)}
.modal-dialog{position:relative; z-index:1; width:min(720px, 92%); margin:0; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px 18px 14px; box-shadow:0 10px 40px rgba(0,0,0,.35); max-height:calc(100dvh - 48px); overflow:auto; overscroll-behavior:contain}
body.theme-sand .modal-dialog{background:#fffdf6; border-color:rgba(0,0,0,.12)}
.modal-close{position:absolute; top:8px; right:8px; width:36px; height:36px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer}
body.theme-sand .modal-close{border-color:rgba(0,0,0,.12)}
.modal-dialog h2{margin:0 32px 8px 0}

/* Consent banner */
.consent-banner{position:fixed; left:0; right:0; bottom:0; z-index:900; background:var(--panel); border-top:1px solid var(--border); padding:10px 0}
body.theme-sand .consent-banner{background:#fffdf6; border-color:rgba(0,0,0,.12)}
.consent-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.consent-inner p{margin:0; color:var(--muted)}
.consent-actions{display:flex; gap:8px; flex-wrap:wrap}
@media (max-width: 640px){
  .consent-inner{flex-direction:column; align-items:flex-start}
}

/* Leadership */
.team-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px}
.member-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px}
.member-card h3{margin:6px 0 8px}
.member-card p{margin:0; color:var(--muted)}

/* Playtests banner */
.banner-playtests{background:color-mix(in oklab, var(--brand) 85%, #000); color:#0b0d12}
body.theme-sand .banner-playtests{background:color-mix(in oklab, var(--accent-2) 85%, #fff)}
.banner-inner{display:flex; align-items:center; justify-content:space-between; gap:14px}
.banner-inner h2{margin:0}
.banner-inner p{margin:6px 0 0}

/* About */
.about-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:center}
.about-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px}
.stat{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px; text-align:center}
.stat-value{font-size: clamp(20px, 3.4vw, 30px); font-weight:800; letter-spacing:.2px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-label{color:var(--muted); font-size:13px}
.checklist{margin:12px 0 0; padding:0 0 0 18px}

/* Careers */
.careers-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start}
.careers-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px}
.values{margin:10px 0 0; padding:0 0 0 18px}
.bulletlist{margin:8px 0 16px; padding:0 0 0 18px}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:start}
.signup{display:flex; flex-direction:column; gap:10px; max-width:440px}
.signup input{padding:12px 12px; border-radius:10px; border:1px solid var(--border); background:#0f1320; color:var(--text)}
body.theme-sand .signup input{background:#fff6da; color:#3D2B1F; border-color:rgba(0,0,0,.12)}
.signup small{color:var(--muted)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.contact-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:24px 0; background:rgba(0,0,0,.12)}
body.theme-sand .site-footer{background:rgba(0,0,0,.05)}
.footer-grid{display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:center}
.foot-nav{display:flex; gap:14px; color:var(--muted)}
.foot-copy{color:var(--muted)}
body.theme-sand .foot-copy{color:var(--footer-text)}
.brand-foot .brand-logo{width:30px; height:30px}
.socials a{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--border)}
body.theme-sand .socials a{background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.12)}

/* Animations */
.a-fade-up{opacity:0; transform:translateY(8px); animation:fadeUp .7s ease forwards}
.a-delay-1{animation-delay:.15s}
.a-delay-2{animation-delay:.3s}
.a-delay-3{animation-delay:.45s}
@keyframes fadeUp{to{opacity:1; transform:none}}
.a-rise{animation:rise .6s ease both}
@keyframes rise{from{transform:translateY(6px)} to{transform:none}}

/* Responsive */
@media (max-width: 980px){
  .product-grid{grid-template-columns:repeat(2, 1fr)}
  .about-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:repeat(3, 1fr)}
  .careers-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .nav{position:fixed; inset:60px 0 auto 0; background:rgba(11,13,18,.98); border-bottom:1px solid var(--border); padding:12px 4%; gap:10px; transform:translateY(-120%); transition:.25s}
  body.theme-sand .nav{background:rgba(249,242,218,.98)}
  .nav.open{transform:none}
  .nav a{padding:12px 10px}
  .nav-toggle{display:inline-block}
  .product-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}