/* Tropical Hosting site styles (2026-10-21). Shared by every main page.
   Neutral black/graphite palette, white pill buttons, borderless tiles, translucent header.
   Keep these class hooks: the seasonal sale filter (tropical-hosting-data/promo/promo.php) and
   promo.css look for .hero, .nav, .price, .plan-name, .game-tile-badge, .button.primary, .kicker, .accent. */

:root{
  --bg:#000;--bg-alt:#0a0a0b;--tile:#161618;--tile2:#1d1d1f;--tile3:#2a2a2d;
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);
  --text:#f5f5f7;--muted:#a1a1a6;--muted2:#6e6e73;
  --green:#30d158;--link:#f5f5f7;
  --r-lg:28px;--r:20px;--r-sm:12px;
  --ease:cubic-bezier(.25,.1,.25,1);--ease-out:cubic-bezier(.23,1,.32,1);
  --nav-h:56px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px);background:var(--bg)}
body{margin:0;padding-top:var(--nav-h);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",system-ui,sans-serif;font-size:17px;line-height:1.5;letter-spacing:-.012em;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,"Segoe UI",system-ui,sans-serif;text-wrap:balance}
p{margin:0}
code{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;background:var(--tile2);padding:2px 6px;border-radius:6px}
::selection{background:rgba(255,255,255,.22)}
:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:3px}
.wrap{width:min(1080px,calc(100% - 48px));margin:0 auto}
.narrow{width:min(720px,calc(100% - 48px));margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:18px;height:18px;flex:0 0 auto}

/* ---------- header: translucent material, content scrolls underneath ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);background:rgba(0,0,0,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);transition:top .2s var(--ease)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.06)}
.nav-inner{height:100%;display:flex;align-items:center;gap:28px}
.brand img{height:26px;width:auto}
.links{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.links>a,.links .account-menu-trigger{padding:6px 12px;border-radius:8px;color:rgba(245,245,247,.8);font-size:13.5px;font-weight:400;letter-spacing:-.01em;background:none;border:0;transition:color .2s var(--ease)}
.links>a:hover,.links .account-menu-trigger:hover,.links>a[aria-current]{color:#fff}
.nav-actions{display:flex;align-items:center;gap:8px}
.menu-toggle{display:none;width:40px;height:40px;border-radius:50%;border:0;background:transparent;align-items:center;justify-content:center}
.menu-toggle svg{width:20px;height:20px}
.mobile-menu{display:none}
.account-menu-list{background:rgba(29,29,31,.92);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border:1px solid var(--line-strong);border-radius:16px;padding:8px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.account-menu-list a{color:var(--text);font-size:14px;border-radius:9px}
.account-menu-list a:hover,.account-menu-list a:focus-visible{background:rgba(255,255,255,.08)}
.account-menu-label{color:var(--muted2)}
.account-menu-divider{background:var(--line)}
.links .account-menu-list{left:50%;right:auto;transform-origin:top center;translate:-50% 0}
.menu-games{min-width:300px}
.menu-games a{display:flex;align-items:center;gap:12px;padding:8px 10px}
.menu-games img{width:28px;height:28px;border-radius:7px;object-fit:cover}
.menu-games small{margin-left:auto;color:var(--muted);font-size:12.5px}
.menu-desc a{display:block;padding:10px 12px}
.menu-desc a span{display:block;color:var(--muted);font-size:12.5px}
@media (max-width:940px){
  .links,.nav-actions .account-menu,.nav-actions .hide-sm{display:none}
  .menu-toggle{display:inline-flex}
  .nav-inner{justify-content:space-between}
  .mobile-menu{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:59;background:rgba(0,0,0,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:12px 28px 48px;overflow-y:auto}
  .nav[data-menu-open] .mobile-menu{display:block}
  .mobile-menu a{display:block;padding:12px 0;font-size:22px;font-weight:600;letter-spacing:-.02em;border-bottom:0}
  .mobile-menu .mm-label{margin:28px 0 4px;font-size:12px;font-weight:600;color:var(--muted2)}
  .mobile-menu .mm-label~a{font-size:16px;font-weight:400;padding:8px 0;color:var(--muted)}
  .mobile-menu .button{margin-top:28px;font-size:16px;color:#000}
  html.menu-open{overflow:hidden}
}

/* ---------- buttons: pills, instant press feedback ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:980px;border:0;font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.25;white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease),transform .1s ease-out}
.button:active{transform:scale(.97)}
.button.primary{background:#f5f5f7;color:#000}
.button.primary:hover{background:#fff}
.button.secondary{background:rgba(255,255,255,.1);color:var(--text)}
.button.secondary:hover{background:rgba(255,255,255,.16)}
.nav .button{padding:6px 14px;font-size:13px}
.button.big{padding:13px 26px;font-size:16px}
.button.full{width:100%}
.button svg{width:15px;height:15px}
.account-menu-caret,.button .account-menu-caret{width:9px;height:9px}
.text-link{color:var(--text);font-weight:500;display:inline-flex;align-items:center;gap:5px}
.text-link svg{width:14px;height:14px;transition:transform .2s var(--ease-out)}
.text-link:hover{text-decoration:underline;text-underline-offset:3px}
a:hover .text-link svg,.text-link:hover svg{transform:translateX(2px)}

/* ---------- hero: centred type over the artwork ---------- */
.hero{position:relative;overflow:hidden;background:var(--bg);text-align:center}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 40%}
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(0,0,0,.66),rgba(0,0,0,.2)),linear-gradient(0deg,#000 0%,transparent 35%)}
.hero-content{position:relative;width:min(900px,calc(100% - 48px));margin:0 auto;padding:120px 0 136px}
.hero.short .hero-content{padding:84px 0 92px}
.hero-content>*{margin-left:auto;margin-right:auto}
.kicker{display:block;margin-bottom:14px;color:var(--muted);font-size:17px;font-weight:600;letter-spacing:-.01em}
.hero .kicker{color:#d2d2d7}
h1{font-size:clamp(40px,6.4vw,76px);line-height:1.04;font-weight:700;letter-spacing:-.035em}
.accent{color:inherit}
.lead{max-width:680px;margin-top:20px;color:#d2d2d7;font-size:clamp(18px,2.1vw,22px);line-height:1.4;letter-spacing:-.015em}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px}
.hero-note{margin-top:16px;color:var(--muted);font-size:15px}
.ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:30px 0 0;padding:0;list-style:none;color:#d2d2d7;font-size:15px}
.ticks li{display:flex;align-items:center;gap:7px}
.ticks svg{width:16px;height:16px;color:var(--green)}
.hero-icon{width:72px;height:72px;border-radius:18px;margin-bottom:20px;object-fit:cover;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.crumb{display:inline-flex;align-items:center;gap:6px;margin-bottom:24px;color:var(--muted);font-size:14px}
.crumb:hover{color:var(--text)}
.crumb svg{width:14px;height:14px;transform:rotate(180deg)}
.price-from{margin-top:22px;color:var(--muted);font-size:17px}
.price-from b{color:var(--text);font-weight:600;margin:0 4px}

/* ---------- game picker ---------- */
.game-bar{position:relative;z-index:2;margin-top:-56px}
.games-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.game-tile{display:flex;flex-direction:column;border-radius:var(--r);background:var(--tile2);overflow:hidden;transition:transform .35s var(--ease-out),background .2s var(--ease)}
.game-tile:active{transform:scale(.98)}
.game-tile .shot{aspect-ratio:4/3;overflow:hidden}
.game-tile .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.game-tile-body{display:flex;flex-direction:column;gap:1px;padding:12px 14px 14px}
.game-tile-body .name{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;letter-spacing:-.015em}
.game-tile-body .name img{width:20px;height:20px;border-radius:5px}
.game-tile-badge{color:var(--muted);font-size:13px}
.game-tile-badge.promo{color:var(--text)}
@media (hover:hover) and (pointer:fine){.game-tile:hover{background:var(--tile3)}.game-tile:hover .shot img{transform:scale(1.04)}}
.games-grid.large{grid-template-columns:repeat(3,1fr);gap:20px}
.games-grid.large .game-tile{border-radius:var(--r-lg)}
.games-grid.large .game-tile-body{padding:18px 22px 22px}
.games-grid.large .game-tile-body .name{font-size:19px}
.games-grid.large .game-tile-body .name img{width:26px;height:26px}

/* ---------- sections ---------- */
section{padding:112px 0}
.alt{background:var(--bg-alt)}
.section-head{max-width:760px;margin:0 auto 56px;text-align:center}
.section-head>div{display:contents}
.section-head h2{font-size:clamp(32px,4.4vw,52px);line-height:1.08;font-weight:700;letter-spacing:-.03em}
.section-head p{margin:16px auto 0;max-width:640px;color:var(--muted);font-size:clamp(17px,1.8vw,20px);line-height:1.45}
.section-head .text-link{display:inline-flex;margin-top:18px;font-size:17px}
.group-label{margin:0 0 18px;color:var(--muted);font-size:15px;font-weight:600;text-align:center}
.group+.group{margin-top:44px}

/* ---------- feature rows: big image tile + copy ---------- */
.feature-row{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.feature-row+.feature-row{margin-top:112px}
.feature-row.flip{grid-template-columns:.9fr 1.1fr}
.feature-row.flip .feature-media{order:2}
.feature-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}
.feature-copy .kicker{margin-bottom:10px}
.feature-copy h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;font-weight:700;letter-spacing:-.03em}
.feature-copy>p{margin-top:16px;color:var(--muted);font-size:18px;line-height:1.5}
.feature-copy .hero-actions{justify-content:flex-start;margin-top:28px}
.bullets{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.bullets li{display:flex;gap:12px;align-items:flex-start}
.bullets svg{width:18px;height:18px;margin-top:3px;color:var(--green);flex:0 0 auto}
.bullets b{display:block;font-weight:600;font-size:16px}
.bullets span{display:block;margin-top:1px;color:var(--muted);font-size:15px}
.bullets.cols-2{grid-template-columns:1fr 1fr;gap:18px 28px}

/* ---------- feature tiles ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.features.cols-4{grid-template-columns:repeat(4,1fr)}
.features.cols-2{grid-template-columns:repeat(2,1fr)}
.feature{position:relative;padding:30px 28px;border-radius:var(--r);background:var(--tile)}
.alt .feature{background:var(--tile2)}
.feature .fi{width:26px;height:26px;color:var(--text);opacity:.9}
.feature h3{margin-top:18px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.feature p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.5}
.feature .badge{position:static;display:inline-block;margin-left:8px;vertical-align:3px}

/* ---------- services ---------- */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--tile);overflow:hidden;transition:transform .35s var(--ease-out)}
.alt .svc{background:var(--tile2)}
.svc:active{transform:scale(.99)}
.svc-img{height:220px;overflow:hidden}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.svc:hover .svc-img img{transform:scale(1.03)}}
.svc-body{display:flex;flex-direction:column;flex:1;padding:28px 32px 30px}
.svc h3{font-size:26px;font-weight:700;letter-spacing:-.025em}
.svc p{margin-top:8px;color:var(--muted);font-size:16px}
.svc ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;font-size:15px;color:#d2d2d7;flex:1}
.svc li{display:flex;gap:9px;align-items:flex-start}
.svc li svg{width:16px;height:16px;margin-top:3px;color:var(--green);flex:0 0 auto}
.svc .from{margin-top:24px;display:flex;align-items:baseline;justify-content:space-between;color:var(--muted);font-size:15px}
.svc .from b{color:var(--text);font-size:20px;font-weight:600}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fact{padding:28px;border-radius:var(--r);background:var(--tile);text-align:center}
.fact strong{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em}
.fact span{display:block;margin-top:4px;color:var(--muted);font-size:14.5px}

/* ---------- locations ---------- */
.locations{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.location{padding:36px;border-radius:var(--r-lg);background:var(--tile2)}
.location-head{display:flex;align-items:center;gap:12px}
.location-head img{width:30px;height:21px;border-radius:4px;object-fit:cover}
.location h3{font-size:26px;font-weight:700;letter-spacing:-.025em}
.location p{margin-top:12px;color:var(--muted);font-size:16px}
.location .bullets{margin-top:20px;gap:10px}
.location .bullets b{font-weight:500;font-size:15.5px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:step}
.step{padding:30px 28px;border-radius:var(--r);background:var(--tile)}
.alt .step{background:var(--tile2)}
.step::before{counter-increment:step;content:counter(step);display:block;margin-bottom:14px;color:var(--muted2);font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1}
.step h3{font-size:19px;font-weight:600;letter-spacing:-.02em}
.step p{margin-top:8px;color:var(--muted);font-size:15px}

/* ---------- plan cards ---------- */
.plans,.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plans.cols-5{grid-template-columns:repeat(5,1fr);gap:12px}
.card,.plan{position:relative;display:flex;flex-direction:column;padding:30px 28px;border-radius:var(--r-lg);background:var(--tile)}
.alt .card,.alt .plan{background:var(--tile2)}
.card.featured,.plan.popular{box-shadow:inset 0 0 0 1.5px rgba(245,245,247,.55)}
.badge{position:absolute;top:30px;right:26px;color:var(--green);font-size:13px;font-weight:600}
.plan-name,.plan h3{font-size:22px;font-weight:700;letter-spacing:-.025em}
.plan-note,.plan .tag{margin-top:4px;color:var(--muted);font-size:14.5px;min-height:22px}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;margin:20px 0 4px;font-size:40px;font-weight:700;letter-spacing:-.035em;line-height:1.05}
.price strong{font-size:40px;font-weight:700}
.price span{color:var(--muted);font-size:15px;font-weight:400;letter-spacing:-.01em}
.plans.cols-5 .card{padding:26px 22px}
.plans.cols-5 .price,.plans.cols-5 .price strong{font-size:32px}
.plans.cols-5 .badge{top:26px;right:20px}
.plan-ram{margin-top:12px;display:flex;align-items:baseline;gap:6px}
.plan-ram strong{font-size:22px;font-weight:600;letter-spacing:-.02em}
.plan-ram span{color:var(--muted);font-size:15px}
.specs,.plan ul{list-style:none;margin:22px 0 26px;padding:22px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;flex:1;font-size:15px;color:#d2d2d7}
.specs li,.plan li{display:flex;align-items:center;gap:9px}
.specs svg,.plan li svg{width:15px;height:15px;color:var(--green);flex:0 0 auto}
.plan li b{font-weight:600;color:var(--text)}
.plan .button.secondary,.card .button.secondary{background:rgba(255,255,255,.1)}
.plan-perk{display:flex;align-items:center;gap:8px;margin-top:16px;color:var(--green);font-size:14px;font-weight:500}
.plan-perk:hover{text-decoration:underline}
.plan-perk svg{width:15px;height:15px}
/* game plan cards are rendered name, ram, specs, button, price; show the price under the name */
.plans.game .card .plan-name{order:0}
.plans.game .card .price{order:1;margin-top:10px}
.plans.game .card .plan-ram{order:2;margin-top:4px}
.plans.game .card .specs{order:3}
.plans.game .card .button{order:4}
.plans-notice{padding:16px 20px;margin-bottom:24px;border-radius:var(--r-sm);background:var(--tile2);color:var(--muted);text-align:center}
.plan-foot{margin-top:32px;text-align:center;color:var(--muted);font-size:15.5px}
.plan-foot a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.switcher{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 36px}
.switcher a{padding:8px 18px;border-radius:980px;background:var(--tile2);color:#d2d2d7;font-size:14.5px;font-weight:500;transition:background .2s var(--ease)}
.switcher a:hover{background:var(--tile3);color:#fff}
.switcher a[aria-current]{background:#f5f5f7;color:#000}
.loc-tabs{display:flex;justify-content:center;gap:6px;width:max-content;max-width:100%;margin:0 auto 36px;padding:4px;border-radius:980px;background:var(--tile2);overflow-x:auto}
.loc-tab{padding:9px 22px;border:0;border-radius:980px;background:none;color:#d2d2d7;font-size:14.5px;font-weight:600;text-align:center;white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease)}
.loc-tab small{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.loc-tab[aria-selected="true"]{background:#f5f5f7;color:#000}
.loc-tab[aria-selected="true"] small{color:#515154}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq.single{max-width:820px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 2px;font-size:19px;font-weight:600;letter-spacing:-.02em;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:0 0 auto;font-size:26px;font-weight:300;line-height:1;color:var(--muted);transition:transform .3s var(--ease-out)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-body p{padding:0 40px 26px 2px;color:var(--muted);font-size:16.5px;line-height:1.6}
.faq-body a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ---------- closing call to action ---------- */
.cta{padding:72px 40px;border-radius:var(--r-lg);background:var(--tile);text-align:center}
.cta h2{font-size:clamp(30px,4vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.cta p{margin:14px auto 0;max-width:560px;color:var(--muted);font-size:19px}
.cta .hero-actions{margin-top:30px}
section:has(>.wrap>.cta){padding-top:0}
.alt+section:has(>.wrap>.cta){padding-top:112px}

/* ---------- partner strip ---------- */
.trusted{padding:44px 0 0}
.trusted[hidden]{display:none}
.trusted .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 32px}
.trusted-head{color:var(--muted2);font-size:14px}
.trusted-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px}
.trusted-logo{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:15px;font-weight:500;transition:color .2s var(--ease)}
.trusted-logo:hover{color:var(--text)}
.trusted-logo img,.trusted-logo .initial{width:30px;height:30px;border-radius:8px;object-fit:cover;background:var(--tile2)}
.trusted-logo .initial{display:grid;place-items:center;font-size:13px}
.trusted-all{color:var(--muted);font-size:14px}
.trusted-all:hover{color:var(--text)}

/* ---------- colocation ---------- */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.gallery img{width:100%;height:360px;object-fit:cover;border-radius:var(--r)}
.gallery-label{margin-top:14px;color:var(--muted2);font-size:14px;text-align:center}
.powered-by{margin-top:28px}
.powered-by img{height:52px;width:auto;padding:8px 12px;border-radius:12px;background:#fff}

/* ---------- support ---------- */
.search{position:relative;display:flex;align-items:center;max-width:620px;margin-top:32px;border-radius:980px;background:rgba(29,29,31,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px var(--line-strong)}
.search>svg{position:absolute;left:20px;width:19px;height:19px;color:var(--muted)}
.search input{flex:1;min-width:0;padding:16px 20px 16px 50px;border:0;background:none;color:var(--text);font:inherit;font-size:17px;outline:0}
.search:focus-within{box-shadow:inset 0 0 0 1.5px rgba(245,245,247,.6)}
.search .clear{display:none;margin-right:8px;padding:6px 12px;border:0;border-radius:980px;background:var(--tile3);color:var(--muted);font-size:13px}
.search.has-value .clear{display:block}
.search input::-webkit-search-cancel-button{display:none}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.chip,.category-pill{padding:7px 16px;border-radius:980px;border:0;background:var(--tile2);color:#d2d2d7;font-size:14px;font-weight:500;transition:background .2s var(--ease)}
.chip:hover,.category-pill:hover{background:var(--tile3);color:#fff}
.chip[aria-pressed="true"],.category-pill.active{background:#f5f5f7;color:#000}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.contact-card{display:flex;flex-direction:column;padding:30px 28px;border-radius:var(--r);background:var(--tile);transition:background .2s var(--ease)}
.contact-card:hover{background:var(--tile2)}
.contact-card .fi{width:26px;height:26px}
.contact-card h2{margin-top:18px;font-size:21px;font-weight:600;letter-spacing:-.02em}
.contact-card p{margin-top:6px;color:var(--muted);font-size:15px;flex:1}
.contact-card .value{margin-top:16px;color:var(--text);font-weight:500;display:flex;align-items:center;gap:6px}
.contact-card .value svg{width:14px;height:14px}
.list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.list-head h2{font-size:clamp(30px,3.6vw,40px);font-weight:700;letter-spacing:-.03em}
.list-head p{margin-top:6px;color:var(--muted)}
.count{color:var(--muted2);font-size:14px;white-space:nowrap}
.articles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.article{display:flex;flex-direction:column;padding:26px 28px;border-radius:var(--r);background:var(--tile2);transition:background .2s var(--ease)}
.article:hover{background:var(--tile3)}
.article .tag{color:var(--muted);font-size:13px;font-weight:600}
.article h3{margin-top:6px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.article p{margin-top:8px;color:var(--muted);font-size:15px;flex:1}
.article .more{margin-top:14px;color:var(--text);font-size:14.5px;font-weight:500;display:flex;align-items:center;gap:6px}
.article .more svg{width:14px;height:14px}
.article mark{background:rgba(255,255,255,.2);color:inherit;border-radius:3px}
.empty{display:none;padding:44px 20px;text-align:center;color:var(--muted);border-radius:var(--r);background:var(--tile2)}
.empty.show{display:block}
.empty strong{display:block;color:var(--text);margin-bottom:6px}
.empty a{color:var(--text);text-decoration:underline}

/* ---------- partners ---------- */
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.partner-card{display:flex;flex-direction:column;padding:28px;border-radius:var(--r);background:var(--tile);transition:background .2s var(--ease)}
.partner-card:hover{background:var(--tile2)}
.partner-top{display:flex;align-items:center;gap:14px}
.partner-logo{width:56px;height:56px;border-radius:14px;object-fit:cover;background:var(--tile3);flex:0 0 auto}
.partner-logo.initial{display:grid;place-items:center;font-weight:700;font-size:20px}
.partner-name{font-size:20px;font-weight:600;letter-spacing:-.02em}
.partner-short{margin-top:14px;color:var(--muted);font-size:15px;flex:1}
.partner-more{margin-top:18px;color:var(--text);font-size:14.5px;font-weight:500;display:flex;align-items:center;gap:6px}
.partner-more svg{width:14px;height:14px}
.partner-empty{grid-column:1/-1;padding:56px 20px;text-align:center;color:var(--muted);border-radius:var(--r);background:var(--tile)}
.partner-empty strong{display:block;color:var(--text);margin-bottom:4px}
.profile{padding:64px 0 112px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14.5px;margin-bottom:32px}
.back:hover{color:var(--text)}
.back svg{width:14px;height:14px;transform:rotate(180deg)}
.profile-head{display:flex;align-items:center;gap:24px}
.profile-logo{width:104px;height:104px;border-radius:24px;object-fit:cover;background:var(--tile2);flex:0 0 auto}
.profile-logo.initial{display:grid;place-items:center;font-size:40px;font-weight:700}
.profile-head .kicker{margin-bottom:4px;font-size:15px}
.profile-head h1{font-size:clamp(34px,4.8vw,52px)}
.profile-head .lead{margin:8px 0 0}
.profile-body{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-top:44px;align-items:start}
.panel{padding:32px;border-radius:var(--r-lg);background:var(--tile)}
.panel h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.panel.about p{color:var(--muted);margin-top:12px}
.panel.join>div+div{margin-top:22px}
.join-label{display:block;margin-bottom:8px;color:var(--muted);font-size:13.5px}
.ip-box{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-radius:980px;background:var(--tile3)}
.ip-box code{flex:1;background:none;padding:0;font-size:15px;overflow:hidden;text-overflow:ellipsis}
.copy-btn{padding:7px 14px;border-radius:980px;border:0;background:#f5f5f7;color:#000;font-size:13px;font-weight:500}
.copy-btn.done,.copy-btn.copied{background:var(--green);color:#000}
.button.discord{background:#5865f2;color:#fff}
.button.discord:hover{background:#6873f5}
.muted-note{color:var(--muted)}
.not-found{text-align:center;padding:40px 0}
.not-found h1{margin-top:8px}
.not-found p{margin:14px auto 28px;color:var(--muted);max-width:480px}

/* ---------- blog index ---------- */
.category-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.post-list{display:grid;gap:12px}
.post-row{display:block;padding:26px 28px;border-radius:var(--r);background:var(--tile);transition:background .2s var(--ease)}
.post-row:hover{background:var(--tile2)}
.post-row[hidden]{display:none}
.post-row-meta{display:flex;align-items:center;gap:8px;color:var(--muted2);font-size:13.5px}
.post-row h2{margin-top:8px;font-size:22px;font-weight:600;letter-spacing:-.02em}
.post-row p{margin-top:8px;color:var(--muted);font-size:15.5px}
.dot{width:3px;height:3px;border-radius:50%;background:currentColor;display:inline-block}
.list-note{margin-top:28px;color:var(--muted);font-size:15.5px;text-align:center}
.list-note a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ---------- blog posts ---------- */
.post-top{padding:80px 24px 0;max-width:820px;margin:0 auto;text-align:center}
.crumbs{display:flex;justify-content:center;gap:8px;color:var(--muted2);font-size:14px;margin-bottom:18px}
.crumbs a:hover{color:var(--text)}
.post-top .tag,.section-head .tag{display:inline-block;margin-bottom:12px;color:var(--muted);font-size:15px;font-weight:600}
.post-top h1{font-size:clamp(34px,5vw,56px)}
.post-meta-row,.byline{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:22px;color:var(--muted2);font-size:14.5px}
.byline .avatar{width:28px;height:28px;border-radius:50%;background:var(--tile2);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--text)}
.byline b{color:var(--text);font-weight:600}
article:not(.card) p,article:not(.card) ul,article:not(.card) ol{color:#d2d2d7;font-size:18px;line-height:1.7;letter-spacing:-.01em;margin:0 0 20px}
article:not(.card) li{margin-bottom:6px}
article:not(.card) a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
article:not(.card) h2{font-size:clamp(25px,3.2vw,32px);margin:52px 0 16px;font-weight:700;letter-spacing:-.025em}
article:not(.card) h2:first-child{margin-top:0}
article:not(.card) h3{font-size:21px;margin:32px 0 10px;font-weight:600;letter-spacing:-.02em}
article:not(.card) figure{margin:0 0 8px}
article:not(.card) figcaption{margin-top:10px;color:var(--muted2);font-size:14px;text-align:center}
.img-real{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);background:var(--tile2)}
hr.rule,article:not(.card) hr,.narrow>hr{border:0;border-top:1px solid var(--line);margin:48px 0}
.item-entry{padding:28px 0;border-top:1px solid var(--line)}
.item-entry:first-child{border-top:0;padding-top:0}
.item-index,.seed-index{display:block;color:var(--muted2);font-size:14px;font-weight:600;margin-bottom:6px}
.item-entry h3{margin:0 0 8px}
.item-entry p{margin:0}
.item-tag{display:inline-block;padding:3px 10px;border-radius:980px;background:var(--tile2);color:var(--muted);font-size:12.5px;font-weight:500;margin-bottom:10px}
.callout{padding:22px 24px;margin:28px 0;border-radius:var(--r-sm);background:var(--tile)}
.callout h3{margin:0 0 8px;font-size:16px}
.callout ol,.callout ul,.callout p{color:var(--muted);font-size:15.5px;margin:0}
.callout-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.callout-grid .callout{margin:0}
.note{padding:20px 24px;margin:28px 0;border-radius:var(--r-sm);background:var(--tile);color:var(--muted);font-size:15.5px;line-height:1.7}
.note strong{color:var(--text)}
.table-wrap{overflow-x:auto;margin:24px 0}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}
td{color:#d2d2d7}
th{color:var(--muted);font-size:13px;font-weight:600}
table a{color:var(--text);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-strong)}
.seed-entry{scroll-margin-top:100px;padding:48px 0}
.seed-entry:first-child{padding-top:0}
.seed-entry h2{margin:0 0 8px}
.seed-dek{color:var(--muted)!important;font-size:16px!important;margin:0 0 20px!important}
.seed-meta-line{display:flex;flex-wrap:wrap;gap:8px 18px;margin:20px 0 16px;color:var(--muted);font-size:14.5px}
.seed-meta-line span{display:flex;align-items:center;gap:6px}
.seed-meta-line svg{width:15px;height:15px}
.seed-code-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.seed-code-line code{padding:8px 12px;font-size:14px}
.coord-list{list-style:none;margin:18px 0 0;padding:0}
.coord-list li{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:15.5px;padding:11px 0;border-top:1px solid var(--line);margin:0}
.coord-list .coord{margin-left:auto;color:var(--muted2);font-size:13px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;white-space:nowrap}
.faq-block{display:grid;gap:24px}
.faq-block h3{margin:0 0 6px;font-size:17px;font-weight:600}
.faq-block p{margin:0;color:var(--muted);font-size:16px}
section.spaced{padding-bottom:64px}
.final-cta{padding:88px 0;margin-top:48px;background:var(--bg-alt)}
.final-cta-inner{max-width:660px;margin:0 auto;text-align:center}
.final-cta h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.03em}
.final-cta p{margin-top:12px;color:var(--muted);font-size:18px}
.final-cta .hero-actions{margin-top:26px}
.glow{display:none}
.reveal{opacity:1;transform:none}

/* ---------- 404 ---------- */
.error-content{max-width:680px;margin:0 auto;padding:140px 24px 150px;text-align:center}
.error-code{color:var(--muted);font-size:17px;font-weight:600;margin-bottom:12px}
.error-content .lead{margin-left:auto;margin-right:auto}
.quick-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:40px}
.quick-links a{color:var(--muted);font-size:15px}
.quick-links a:hover{color:var(--text)}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .games-grid{grid-template-columns:repeat(3,1fr)}
  .plans.cols-5{grid-template-columns:repeat(3,1fr)}
  .features.cols-4,.facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .games-grid.large,.plans,.plan-grid,.partner-grid,.features,.steps{grid-template-columns:repeat(2,1fr)}
  .feature-row,.feature-row.flip{grid-template-columns:1fr;gap:32px}
  .feature-row.flip .feature-media{order:0}
  .feature-row+.feature-row{margin-top:80px}
  .services-grid,.locations,.contact-grid,.profile-body{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery img:first-child{grid-column:1/-1}
}
@media (max-width:600px){
  :root{--nav-h:52px}
  body{font-size:16px}
  .wrap,.narrow,.hero-content{width:calc(100% - 40px)}
  .brand img{height:23px}
  section{padding:76px 0}
  .alt+section:has(>.wrap>.cta){padding-top:76px}
  .hero-content{padding:72px 0 96px}
  .hero.short .hero-content{padding:56px 0 64px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .feature-copy .hero-actions{align-items:flex-start}
  .game-bar{margin-top:-48px}
  .games-grid,.games-grid.large{grid-template-columns:repeat(2,1fr);gap:10px}
  .plans,.plans.cols-5,.plan-grid,.partner-grid,.features,.features.cols-4,.features.cols-2,.articles,.callout-grid,.steps,.bullets.cols-2{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr;gap:10px}
  .fact{padding:20px 14px}
  .fact strong{font-size:20px}
  .svc-img{height:180px}
  .svc-body{padding:24px}
  .location,.cta{padding:40px 24px}
  .gallery img{height:220px}
  .list-head{flex-direction:column;align-items:flex-start}
  .profile-head{flex-direction:column;align-items:flex-start}
  .loc-tabs{width:100%}
  .loc-tab{flex:1;padding:8px 10px}
  .coord-list .coord{margin-left:0}
  .faq-item summary{font-size:17px}
  .faq-body p{padding-right:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important}
  .button:active,.game-tile:active,.svc:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .nav,.account-menu-list,.mobile-menu,.search{background:#000;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--muted:#d2d2d7;--line:rgba(255,255,255,.3)}
  .card,.plan,.feature,.svc,.fact,.location{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
}
.hero-bg[style*="about-server-room"]::after{background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.72)),linear-gradient(0deg,#000 0%,transparent 35%)}
/* left-aligned hero (home), styled like lilypawdigital.xyz */
.hero.left{text-align:left}
.hero.left .hero-content{width:min(1080px,calc(100% - 48px));padding:96px 0 112px}
.hero.left .hero-content>*{margin-left:0;margin-right:0;max-width:600px}
.hero.left h1{font-size:clamp(38px,5.2vw,64px)}
.hero.left .hero-actions,.hero.left .ticks{justify-content:flex-start}
.hero.left .hero-bg::after{background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.25) 100%),linear-gradient(0deg,#000 0%,transparent 30%)}
@media (max-width:600px){.hero.left .hero-content{padding:64px 0 88px}.hero.left .hero-bg::after{background:rgba(0,0,0,.72)}}
#games.game-bar{margin-top:0;padding-top:56px}.game-bar-title{margin-bottom:24px;text-align:center;font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.03em}
.hero-content>.hero-contact{max-width:none;margin-top:36px;text-align:left}.hero-contact .contact-card{background:rgba(29,29,31,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.menu-hosting{min-width:340px}.menu-hosting .mh-text{display:block}.menu-hosting .mh-text span{display:block;color:var(--muted);font-size:12.5px}