/* ==========================================================================
   TRUNK MONKEYS HOSTING SERVICES
   Shared stylesheet — palette & components derived directly from the badge logo.
   Theme: BLACK + PURPLE + GRAYS (with the logo's gold as the metallic accent).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET + VARIABLES
   -------------------------------------------------------------------------- */
:root {
    /* --- core palette (from logo) --- */
    --black:        #0b0612;   /* near-black with purple tint  */
    --black-soft:   #12071a;
    --bg:           #0e0718;   /* page background */
    --bg-alt:       #100820;
    --surface:      #150b26;   /* cards / surfaces */
    --surface-2:    #1a0f33;
    --surface-hover:#211247;

    --purple:       #9b2d8f;   /* primary purple (logo gradient mid) */
    --purple-br:    #c74bd1;   /* bright purple (logo gradient) */
    --purple-dp:    #5b1a6e;   /* deep purple */
    --gold:         #d9a441;   /* metallic gold (logo lettering) */
    --gold-br:      #f0c66a;   /* gold highlight */
    --gold-dim:     #b07d2b;

    /* --- grays (user requested) --- */
    --gray-900: #1a1426;
    --gray-800: #2a2338;
    --gray-700: #3a3349;
    --gray-600: #554e66;
    --gray-500: #6e6580;
    --gray-400: #8a819a;
    --gray-300: #a9a1b6;
    --text-muted: #9a92a8;
    --text:       #e6e0f0;
    --text-head:  #f4efe9;

    --line:  rgba(163,130,200,.18);
    --line-2: rgba(213,164,65,.35);

    --shadow: 0 18px 40px rgba(0,0,0,.55);
    --shadow-sm: 0 8px 22px rgba(0,0,0,.45);

    --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Bungee", "Archivo Black", "Segoe UI", sans-serif;
    --font-mono: "Cascadia Code", "Consolas", monospace;

    --radius: 14px;
    --radius-lg: 20px;
    --max: 1200px;
    --transition: .25s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--purple-br); color: #12071a; }

::root,
::before,
::after { -webkit-tap-highlight-color: transparent; }

/* scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--gray-800); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

/* --------------------------------------------------------------------------
   2. DECORATIVE STARS (subtle starfield from the badge)
   -------------------------------------------------------------------------- */
.starfield {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(199,77,209,.10) 0, transparent 22px),
        radial-gradient(circle at 85% 12%, rgba(213,164,65,.12) 0, transparent 18px),
        radial-gradient(circle at 74% 78%, rgba(155,45,143,.08) 0, transparent 26px),
        radial-gradient(circle at 22% 85%, rgba(240,198,106,.10) 0, transparent 16px),
        radial-gradient(circle at 48% 40%, rgba(199,77,209,.06) 0, transparent 14px);
    opacity: .55;
}
body::before {
    content: "";
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background-color:
        radial-gradient(circle at 20% 25%, rgba(91,26,110,.30), transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(91,26,110,.22), transparent 45%),
        radial-gradient(1400px 900px at 85% -10%, rgba(155,45,143,.18), transparent 70%),
        radial-gradient(1100px 900px at -10% 110%, rgba(199,77,209,.14), transparent 70%);
}
body::after {
    content: "";
    position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, transparent 0, transparent 55%, rgba(91,26,110,.28) 100%);
}

/* --------------------------------------------------------------------------
   3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.wrap { width: min(var(--max), 94%); margin-inline: auto; position: relative; z-index: 1; }
.section { padding: 90px 0; }
.section--tint { background: linear-gradient(180deg, var(--bg-alt), var(--bg) 60%); }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY + BRAND
   -------------------------------------------------------------------------- */
.display { font-family: var(--font-display); }
.kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .72rem; letter-spacing: .34em; text-transform: uppercase;
    color: var(--gold); background: rgba(213,164,65,.10);
    border: 1px solid rgba(213,164,65,.35); border-radius: 999px;
    padding: 7px 16px; font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    position: relative; display: inline-grid; place-items: center; align-items: center;
    justify-items: center; padding: 14px 28px; border-radius: 999px;
    font-weight: 800; font-size: .95rem; letter-spacing: .04em; cursor: pointer;
    transition: var(--transition); border: 2px solid transparent;
    text-decoration: none;
}
.btn--gold {
    color: #12071a; background: linear-gradient(180deg, var(--gold-br), var(--gold));
    box-shadow: 0 10px 26px rgba(213,164,65,.35); border-color: var(--gold-br);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(213,164,65,.45); }
.btn--gold:active { transform: translateY(0); }
.btn--ghost {
    color: var(--text); background: rgba(163,130,200,.08);
    border-color: var(--line);
}
.btn--ghost:hover { background: rgba(155,45,143,.18); border-color: var(--purple-br); color: var(--text-head); transform: translateY(-2px); }
.btn--purple {
    color: #fff; background: linear-gradient(180deg, var(--purple-br), var(--purple));
    box-shadow: 0 10px 26px rgba(155,45,143,.35); border-color: var(--purple-br);
}
.btn--purple:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(155,45,143,.5); }

/* --------------------------------------------------------------------------
   6. NAV / HEADER
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(11,6,18,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 54px; width: auto; filter: drop-shadow(0 6px 14px rgba(91,26,110,.5)); }
.brand-name { line-height: 1.05; }
.brand-name .bn-top { font-family: var(--font-display); color: var(--purple-br); font-size: 1.1rem; text-shadow: 0 0 0 2px rgba(0,0,0,.6); }
.brand-name .bn-bot { font-family: var(--font-display); color: var(--gold); font-size: 1.1rem; text-shadow: 0 2px 0 #12071a, 0 0 10px rgba(213,164,65,.5); }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
    padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: .85rem;
    color: var(--gray-300); transition: var(--transition);
}
.nav a:hover { color: var(--text-head); background: rgba(163,130,200,.12); }
.nav .nav-login { background: var(--purple); color: #fff; border: none; }
.nav .nav-login:hover { background: var(--purple-br); color: #fff; transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero { padding: 70px 0 60px; min-height: 72vh; display: flex; align-items: center; position: relative; overflow: hidden; }
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(900px 500px at 115% 20%, rgba(155,45,143,.28), transparent 60%),
                radial-gradient(700px 500px at -10% 120%, rgba(91,26,110,.30), transparent 60%);
}
.hero__inner { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 50px; }
.hero__logo-wrap { display: flex; align-items: center; justify-content: center; position: relative; }
.hero__logo {
    width: min(460px, 82vw); height: auto;
    filter: drop-shadow(0 18px 40px rgba(91,26,110,.45)) drop-shadow(0 0 0 6px rgba(213,164,65,.12));
    border-radius: 50%;
}
/* subtle glow ring behind logo */
.hero__logo::before {
    content: ""; position: absolute; inset: -32px; z-index: -1;
    background: radial-gradient(circle, rgba(155,45,143,.28), transparent 70%);
    border: 1px dashed rgba(213,164,65,.35); border-radius: 50%;
    animation: pulse 3.2s ease-in-out infinite;
}
@keyframes pulse {
    0%,100% { transform: scale(1); opacity: .5; }
    50% { transform: scale(1.06); opacity: 1; }
}
.hero__content { animation: riseIn .7s ease both; }
.hero h1 {
    font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: .95;
    color: #f7f2fb;
    margin: 14px 0 14px; text-shadow: 0 3px 0 #07040b, 0 0 30px rgba(199,77,209,.25);
}
.hero h1 .h-br { color: #e08cf5; text-shadow: 0 3px 0 #07040b, 0 0 30px rgba(199,77,209,.7); }
.hero h1 .h-gold { color: #f2c877; text-shadow: 0 3px 0 #07040b, 0 0 30px rgba(213,164,65,.6); }
.hero .tagline { font-size: 1.05rem; color: #c9c2d6; max-width: 42ch; margin-bottom: 28px; }
.hero .tagline strong { color: var(--gold-br); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-stats { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 34px; }
.hero-stat { border-left: 2px solid var(--purple-br); padding-left: 14px; min-width: 80px; }
.hero-stat .hs-num { font-family: var(--font-display); font-size: 1.9rem; color: var(--gold-br); line-height: 1; }
.hero-stat .hs-lbl { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gray-400); margin-top: 6px; }

@keyframes riseIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes floaty { from,to { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero__logo-wrap .float { animation: floaty 5s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   8. CABLE DIVIDER (tech motif from logo)
   -------------------------------------------------------------------------- */
.cable-divider {
    display: block; width: min(var(--max), 90%); margin: 0 auto;
    height: 22px; position: relative;
}
.cable-divider::before {
    content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--purple-br) 20%, var(--purple) 50%, var(--purple-br) 80%, transparent);
    opacity: .55;
}
.cable-divider::after {
    content: ""; position: absolute; top: 4px; right: 0; width: 12px; height: 14px;
    border: 2px solid var(--gold); border-radius: 4px; background: var(--black);
    box-shadow: -2px 0 0 var(--gold);
}

/* --------------------------------------------------------------------------
   9. FEATURES / SERVICES (why choose us)
   -------------------------------------------------------------------------- */
.sec-head { text-align: center; max-width: 68ch; margin: 0 auto 54px; }
.sec-head h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.15; margin: 12px 0 8px; color: var(--text-head); }
.sec-head h2 span { color: var(--gold); }
.sec-head p { color: var(--text-muted); }

.grid-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feat-card {
    position: relative; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 28px 24px; transition: var(--transition);
}
.feat-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, var(--purple-br), var(--gold)); opacity: 0; transition: var(--transition);
}
.feat-card:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--surface-2); box-shadow: var(--shadow-sm); }
.feat-card:hover::before { opacity: 1; }
.feat-icon {
    width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
    background: linear-gradient(180deg, rgba(155,45,143,.2), rgba(155,45,143,.08));
    border: 1px solid rgba(155,45,143,.4); margin-bottom: 20px;
    box-shadow: inset 0 0 0 4px rgba(213,164,65,.12);
}
.feat-icon svg { width: 28px; height: 28px; }
.feat-card h3 { font-family: var(--font-display); font-size: 1.06rem; letter-spacing: .04em; color: var(--text-head); margin-bottom: 10px; }
.feat-card p { color: var(--text-muted); font-size: .94rem; }

/* --------------------------------------------------------------------------
   10. CTA BANNER
   -------------------------------------------------------------------------- */
.cta-banner {
    border-radius: var(--radius-lg); padding: 48px 34px; text-align: center;
    background: linear-gradient(135deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line); position: relative; overflow: hidden;
}
.cta-banner::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 12% 10%, rgba(155,45,143,.22), transparent 40%),
        radial-gradient(circle at 88% 90%, rgba(213,164,65,.16), transparent 45%);
}
.cta-banner h2 { font-family: var(--font-display); color: var(--text-head); font-size: clamp(1.4rem, 3.5vw, 2.2rem); margin-bottom: 12px; }
.cta-banner p { color: var(--text-muted); max-width: 52ch; margin: 0 auto 26px; }

/* --------------------------------------------------------------------------
   11. LINK TILES  (members area / loginlinks)
   -------------------------------------------------------------------------- */
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tile {
    position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 22px 20px; color: var(--text); font-weight: 700; transition: var(--transition);
    text-decoration: none; overflow: hidden;
}
.tile::before {
    content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(155,45,143,.10), transparent 60%);
    opacity: 0; transition: var(--transition);
}
.tile:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--surface-2); box-shadow: var(--shadow-sm); color: var(--text-head); }
.tile:hover::before { opacity: 1; }
.tile::after {
    content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg);
    border: 1px solid var(--gold); opacity: 0; transition: var(--transition);
}
.tile:hover::after { opacity: .5; }
.tile__icon {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(180deg, rgba(213,164,65,.2), rgba(213,164,65,.06));
    border: 1px solid rgba(213,164,65,.45); flex-shrink: 0;
    box-shadow: inset 0 0 0 4px rgba(213,164,65,.12);
}
.tile__icon svg { width: 26px; height: 26px; }
.tile__body { display: flex; flex-direction: column; }
.tile__lbl { font-family: var(--font-display); font-size: .98rem; letter-spacing: .05em; color: var(--text-head); line-height: 1.2; }
.tile__sub { font-weight: 400; font-size: .74rem; color: var(--gray-400); margin-top: 3px; }
.tile-arrow {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%) translateX(-4px);
    color: var(--gold); transition: var(--transition); font-size: 1.1rem; line-height: 1;
}
.tile:hover .tile-arrow { transform: translateY(-50%) translateX(0); color: var(--gold-br); }

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { padding: 46px 0 34px; border-top: 1px solid var(--line); background: var(--black-soft); }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand img { height: 40px; width: auto; opacity: .9; }
.foot-text { color: var(--text-muted); font-size: .85rem; line-height: 1.5; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { color: var(--gray-300); font-weight: 700; font-size: .85rem; transition: var(--transition); }
.foot-links a:hover { color: var(--gold-br); }

/* --------------------------------------------------------------------------
   13. AUTH BADGE (shown in members area)
   -------------------------------------------------------------------------- */
.auth-note {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
    background: rgba(213,164,65,.12); border: 1px solid var(--gold); color: var(--gold-br);
    font-size: .8rem; font-weight: 700; letter-spacing: .04em;
}
.auth-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-br); box-shadow: 0 0 10px var(--gold); }

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; text-align: center; }
    .hero__content { order: -1; }
    .hero .tagline { margin-inline: auto; }
    .hero-cta { justify-content: center; }
    .hero-stats { justify-content: center; }
    .grid-feat { grid-template-columns: repeat(2, 1fr); }
    .tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .section { padding: 60px 0; }
    .grid-feat { grid-template-columns: 1fr; }
    .tile-grid { grid-template-columns: 1fr; }
    .tile { grid-template-columns: 1fr; text-align: center; }
    .tile-arrow { display: none; }
    .tile__icon { width: 46px; height: 46px; }
    .nav .nav span { display: none; }
    .nav-login, .nav { }
    .sec-head p { font-size: .95rem; }
    .head-inner { padding: 10px 0; }
}