/* TheHardwareGuru // Premium Gaming × Streaming × Hardware — 2026-10-20
   Deliberately layered after styles.css + visual-refresh.css.
   All artwork local; no third-party fonts, trackers, or JavaScript. */

/* Visual system: cinematic atmosphere, tech circuit silhouette, readable content. */
:root {
  --brand-glass: rgba(8,18,29,.79);
  --brand-border: rgba(97,149,177,.34);
  --brand-gold: #ffb45e;
  --brand-focus: #61e3ff;
  --brand-shadow: 0 18px 50px rgba(0,0,0,.48);
}
html { scroll-padding-top: 96px; }
body { background: #050b13; }
.site-shell { position:relative; isolation:isolate; min-height:100vh; overflow:clip; }
.site-shell::before {
  content:"";pointer-events:none;position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg, rgba(4,9,17,.26) 0,rgba(4,9,17,.57) 570px,#050c15 1800px),
    radial-gradient(ellipse 780px 520px at 12% 850px,rgba(24,140,196,.20),transparent 80%),
    radial-gradient(ellipse 1050px 720px at 94% 1960px,rgba(103,47,188,.19),transparent 80%),
    radial-gradient(ellipse 780px 670px at 8% 3150px,rgba(246,105,25,.14),transparent 80%),
    url("/assets/hero.webp") center top/100% auto no-repeat,
    linear-gradient(120deg,#06111d 0%,#050c15 56%,#0b1421 100%);
}
.site-shell::after {
  content:"";pointer-events:none;position:absolute;inset:0;z-index:-1;
  background: url("/assets/tech-circuit.svg") center 240px / min(100vw,1560px) auto repeat-y;
  opacity:.39;
}
.container { position:relative; }
.section { position:relative; isolation:isolate; }
.section::before {
  content:"";position:absolute;inset:8% 0 4%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 55% 42% at 8% 45%,rgba(20,144,213,.095),transparent 90%),
             radial-gradient(ellipse 36% 38% at 90% 30%,rgba(151,78,255,.11),transparent 90%);
}
#partners::before { background:radial-gradient(ellipse 43% 55% at 15% 42%,rgba(255,109,34,.12),transparent 90%),radial-gradient(ellipse 54% 60% at 91% 48%,rgba(42,189,226,.095),transparent 90%); }
#contact::before { background:radial-gradient(ellipse at center,rgba(71,85,170,.12),transparent 78%); }
.topbar {background:rgba(4,9,17,.93);border-bottom:1px solid rgba(88,164,194,.29);box-shadow:0 9px 38px rgba(0,0,0,.35);}
.topbar::after {content:"";height:1px;position:absolute;bottom:-1px;left:12%;right:12%;background:linear-gradient(90deg,transparent,rgba(255,134,42,.55),rgba(61,206,251,.3),transparent);}
.main-nav a {font-weight:750;position:relative;transition:color .2s;}
.main-nav a::after {content:"";position:absolute;bottom:-9px;height:2px;left:0;right:100%;background:var(--orange);transition:right .22s ease;}
.main-nav a:hover::after,.main-nav a:focus-visible::after {right:0;}
.brand-mark {border:1px solid rgba(255,209,123,.9);transform:skew(-6deg);box-shadow:0 0 0 4px rgba(255,131,30,.08),0 15px 32px rgba(255,90,14,.29);}
.brand-text {letter-spacing:1.1px;}

/* Buttons: deliberate premium hierarchy, clear keyboard focus and click affordance. */
:where(a.btn,.cta-mini,.header-discord,.lang-switch,.hero-side-cta a,.mobile-menu) {
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:11px;letter-spacing:.055em;
  text-transform:uppercase;font-weight:900;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease,filter .22s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 22px rgba(0,0,0,.34);
}
:where(a.btn,.cta-mini,.header-discord,.lang-switch,.hero-side-cta a)::before {
  content:"";pointer-events:none;position:absolute;inset:0;
  background:linear-gradient(112deg,transparent 0,transparent 38%,rgba(255,255,255,.15) 49%,transparent 59%,transparent 100%);
  transform:translateX(-140%);transition:transform .58s ease;
}
:where(a.btn,.cta-mini,.header-discord,.lang-switch,.hero-side-cta a):hover::before {transform:translateX(140%);}
:where(a.btn,.cta-mini,.header-discord,.lang-switch,.hero-side-cta a):hover {
  transform:translateY(-3px);filter:brightness(1.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 13px 30px rgba(0,0,0,.48),0 0 24px rgba(255,123,31,.13);
}
:where(a.btn,.cta-mini,.header-discord,.lang-switch,.hero-side-cta a):active {transform:translateY(0);}
:where(a.btn,.cta-mini,.header-discord,.lang-switch,.hero-side-cta a,.platform-card,.link-row,.contact-card,.main-nav a):focus-visible {
  outline:3px solid var(--brand-focus);outline-offset:4px;
}
.btn-orange,.cta-mini {border:1px solid #ffbd68!important;color:#140c08!important;background:linear-gradient(105deg,#ffb24e 0%,#ff8c26 48%,#f36b16 100%);}
.btn-outline {background:linear-gradient(140deg,rgba(20,41,56,.9),rgba(8,18,32,.93));border-color:rgba(106,173,208,.58);color:#e6f8ff;}
.btn-outline:hover {border-color:#69dafe;}
.btn-discord,.hero-side-cta a.discord,.header-discord {background:linear-gradient(110deg,#5468fc,#6a4fca 90%);border:1px solid #9497ff;}
.btn-kofi,.hero-side-cta a.kofi {background:linear-gradient(115deg,#ff6e7a,#c72a59);border:1px solid #ff9eaf;}
.btn-tip {background:linear-gradient(115deg,#2ce5be,#078f84);border-color:#7af3d9;}
.hero-side-cta a {text-shadow:0 1px 4px rgba(0,0,0,.3);}
.header-actions a {white-space:nowrap;}

/* Hero: layered cinematic content, visible HUD accents, legible streaming CTAs. */
.hero {position:relative;}
.hero-card {
  border:1px solid rgba(255,149,54,.6);border-radius:23px;
  box-shadow:0 0 0 1px rgba(255,128,37,.12),0 26px 72px rgba(0,0,0,.54),0 0 42px rgba(255,115,35,.085);
  background:linear-gradient(118deg,rgba(6,15,27,.94),rgba(7,13,23,.91) 67%,rgba(20,13,24,.92));
}
.hero-card::after {
  content:"";position:absolute;pointer-events:none;inset:10px;border:1px solid rgba(132,184,203,.08);
  border-radius:15px;z-index:0;
}
.hero-copy {background:radial-gradient(ellipse 74% 85% at 0% 20%,rgba(15,107,147,.15),transparent 85%);}
.hero h1 {text-wrap:balance;text-shadow:0 5px 25px rgba(0,0,0,.4);}
.hero h1 em {background:linear-gradient(100deg,#ffbc63,#ff7620);background-clip:text;color:transparent;-webkit-background-clip:text;}
.hero-art {background-position:50% 45%;border-left:1px solid rgba(76,118,155,.25);}
.hero-art::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,11,18,.34),transparent 30%),linear-gradient(0deg,rgba(6,10,19,.35),transparent 58%);}
.hero-overlay {z-index:2;}
.hero-strip {backdrop-filter:blur(9px);border-color:rgba(255,146,61,.7);box-shadow:inset 0 0 0 1px rgba(255,163,79,.15),0 14px 40px rgba(0,0,0,.45);}
.hero-notes span {border-color:rgba(71,132,158,.37);background:rgba(8,26,40,.76);}
.eyebrow,.kicker,.card-tag {text-shadow:0 0 22px rgba(255,133,32,.21);}
.section-heading h2 {text-wrap:balance;text-shadow:0 6px 25px rgba(0,0,0,.47);}
.section-heading {padding-left:20px;border-left:3px solid rgba(255,127,34,.72);}

/* Platform cards: distinct branded glow, stronger photography, transparent labels. */
.platform-grid {gap:20px;}
.platform-card {
  border-radius:19px;border:1px solid color-mix(in srgb,var(--accent) 32%,#203040);
  box-shadow:0 16px 40px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease;
}
.platform-card::before {filter:saturate(1.2) contrast(1.07);opacity:.9;}
.platform-card::after {background:linear-gradient(180deg,rgba(6,10,18,.05) 0%,rgba(8,13,23,.28) 39%,rgba(5,10,17,.97) 100%);}
.platform-card:hover {
  transform:translateY(-6px);border-color:var(--accent);
  box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 24px color-mix(in srgb,var(--accent) 24%,transparent);
}
.platform-card:hover::before {opacity:1;}
.platform-card .platform-body h3 {letter-spacing:-.02em;}
.platform-card .platform-chip {border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:rgba(3,10,19,.84);}
.platform-card .platform-arrow {box-shadow:0 0 22px color-mix(in srgb,var(--accent) 16%,transparent);transition:transform .22s,background .22s;}
.platform-card:hover .platform-arrow {transform:rotate(-35deg) scale(1.08);background:color-mix(in srgb,var(--accent) 24%,#0a1220);}
.platform-card .icon-mark {box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 26px color-mix(in srgb,var(--accent) 22%,transparent);}

/* Glass panel treatment on promo, affiliate and contact sections. */
.division-card,.support-card,.affiliate-card,.contact-card {
  border-color:var(--brand-border);
  background:linear-gradient(145deg,rgba(13,30,46,.91),rgba(8,17,31,.95));
  box-shadow:var(--brand-shadow),inset 0 1px 0 rgba(180,223,243,.095);
  backdrop-filter:blur(6px);
}
.division-card {border-top:2px solid rgba(255,153,57,.65);}
.division-banner {border-color:rgba(255,158,55,.48);background:linear-gradient(90deg,#081827,#1c1317);box-shadow:0 0 32px rgba(255,111,29,.08);}
.support-card {border-top:2px solid #ed6b8f;background:linear-gradient(145deg,rgba(29,20,43,.94),rgba(10,19,33,.95));}
.support-actions .btn {min-height:54px;}
.aff-grid {align-items:start;gap:20px;}
.affiliate-card {border-radius:19px;min-height:0;padding:24px;}
.affiliate-card.games {border-top:3px solid #ff8b32;background:linear-gradient(145deg,rgba(31,23,23,.9),rgba(8,20,34,.94));}
.affiliate-card.hardware {border-top:3px solid #3dccff;background:linear-gradient(145deg,rgba(9,30,47,.95),rgba(7,17,31,.94));}
.affiliate-card.support {border-top:3px solid #ba8bff;background:linear-gradient(145deg,rgba(25,22,45,.93),rgba(8,17,30,.94));}
.affiliate-card::before {width:330px;height:330px;inset:auto -140px -140px auto;opacity:.34;}
.affiliate-card header {padding-bottom:16px;border-bottom:1px solid rgba(145,177,192,.15);}
.affiliate-card header h3 {font-size:clamp(21px,2vw,29px);}
.affiliate-card p {max-width:43ch;line-height:1.5;}
.link-list {gap:8px;}
.link-row {
  position:relative;overflow:hidden;isolation:isolate;min-height:61px;padding:13px 15px;
  border-radius:11px;border:1px solid rgba(85,126,155,.34);
  background:linear-gradient(130deg,rgba(10,28,43,.92),rgba(6,13,25,.91));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  transition:transform .2s,border-color .2s,box-shadow .2s,background .2s;
}
.link-row::before {content:"";position:absolute;top:12px;bottom:12px;left:0;width:3px;background:var(--glow,#ff8a2c);opacity:.45;transition:opacity .2s,box-shadow .2s;}
.link-row:hover {
  transform:translateX(4px);
  background:linear-gradient(125deg,rgba(19,46,61,.95),rgba(10,25,43,.95));
  border-color:rgba(255,176,102,.57);box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.link-row:hover::before {opacity:1;box-shadow:0 0 14px var(--glow,#ff8a2c);}
.link-row strong {font-size:14px;letter-spacing:.012em;}
.link-row small {font-size:12px;color:#adc3d0;}
.open-arrow {font-weight:900;transition:transform .22s;}
.link-row:hover .open-arrow {transform:translate(3px,-3px);}
.aff-badge {background:rgba(255,142,50,.065);letter-spacing:.08em;}
.support-mini .link-row {background:linear-gradient(120deg,rgba(35,23,49,.9),rgba(12,17,32,.95));}
.contact-card {border-radius:18px;border-top:2px solid rgba(68,193,236,.45);transition:transform .23s,border-color .23s;}
.contact-card:hover {transform:translateY(-3px);border-color:rgba(255,160,74,.55);}
.contact-card b {overflow-wrap:anywhere;}
.footer {background:linear-gradient(180deg,rgba(5,11,20,.84),rgba(3,8,16,.98));border-top-color:rgba(255,128,36,.33);}

/* Continuous responsive hierarchy: 1080p, 1440p, 4K & phones. */
@media(min-width:1800px) {
  .aff-grid,.platform-grid {gap:24px;}
  .affiliate-card {padding:30px;}
  .site-shell::after {background-size:min(100vw,1900px) auto;opacity:.48;}
}
@media(min-width:2560px) {
  .hero-card {box-shadow:0 35px 90px rgba(0,0,0,.54),0 0 55px rgba(250,98,19,.11);}
  .section-heading h2 {font-size:clamp(38px,2.5vw,52px);}
  .link-row {min-height:70px;}
}
@media(max-width:980px) {
  .site-shell::before {background-size:auto,auto,auto,auto,1600px auto,auto;background-position:center,center,center,center,center top,center;}
  .section-heading {padding-left:14px;}
  .aff-grid {align-items:stretch;}
  .hero-art {border-left:0;border-top:1px solid rgba(78,131,166,.24);}
}
@media(max-width:720px) {
  html {scroll-padding-top:78px;}
  .site-shell::before {background-size:auto,auto,auto,auto,1050px auto,auto;}
  .site-shell::after {background-size:960px auto;opacity:.24;}
  .section-heading {padding-left:12px;}
  .hero-card {border-radius:16px;}
  .hero-card::after {inset:6px;border-radius:10px;}
  .hero h1 {letter-spacing:-.035em;}
  .hero-buttons .btn {min-height:52px;justify-content:center;}
  .platform-card:hover {transform:none;}
  .affiliate-card {padding:18px;}
  .aff-grid {gap:14px;}
  .link-row {min-height:62px;}
  .contact-card {padding:18px;}
}
@media(prefers-reduced-motion:reduce) {
  .platform-card,.link-row,.platform-arrow {transition:none!important;}
  :where(a.btn,.cta-mini,.header-discord,.lang-switch,.hero-side-cta a)::before {display:none;}
}
@media(prefers-reduced-transparency:reduce) {
  .division-card,.support-card,.affiliate-card,.contact-card {backdrop-filter:none;}
}

/* Owner-provided GameSeal & Ubisoft affiliate CTAs. */
.affiliate-card .link-row.partner-highlight{border:1px solid #337967;background:linear-gradient(108deg,#10302e,#121f27);box-shadow:inset 0 1px 0 #ffffff12;margin-top:8px}
.affiliate-card .link-row.partner-highlight.partner-ubisoft{border-color:#86602f;background:linear-gradient(108deg,#342519,#171e28)}
.affiliate-card .link-row.partner-highlight .aff-badge{background:#293c28;color:#c6ffc2;border-color:#588452}
.affiliate-card .link-row.partner-highlight:hover,.affiliate-card .link-row.partner-highlight:focus-visible{border-color:#ffab58;background:linear-gradient(108deg,#224341,#182e35);transform:translateY(-2px);box-shadow:0 12px 28px #0006;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.affiliate-card .link-row.partner-highlight{transition:none!important;transform:none!important}}