Enhance layout and styling for improved UI consistency across components

src/components/Navbar.svelte

@@ -67,7 +67,7 @@
                 <span class="scrolled-trigger" style="display: none" aria-hidden="true"></span>
             </span>
         </a>
-        <div class="flex justify-center flex-wrap">
+        <div class="flex justify-center flex-wrap gap-2">
             <div class="btn-dropdown">
                 <button class="btn btn-gray">
                     <a href={l("/")}>

src/components/dashboard/UserInfo.svelte

@@ -52,7 +52,7 @@
                 />
             </figure>
         </Card>
-        <div class="flex flex-wrap">
+        <div class="flex flex-wrap gap-2">
             <button class="btn mt-2" onclick={logout}>{t("dashboard.buttons.logout")}</button>
             {#if user.perms.includes("MODERATION")}
                 <a class="btn w-fit mt-2" href="/admin/new" data-astro-reload>{t("dashboard.buttons.admin")}</a>

src/components/styled/SWPaginator.svelte

@@ -18,36 +18,21 @@
   -->
 
 <script lang="ts">
-  import { preventDefault } from 'svelte/legacy';
+    import { preventDefault } from "svelte/legacy";
 
-    import {
+    import { ChevronDoubleLeftOutline, ChevronDoubleRightOutline, ChevronLeftOutline, ChevronRightOutline } from "flowbite-svelte-icons";
-        ChevronDoubleLeftOutline,
-        ChevronDoubleRightOutline,
-        ChevronLeftOutline,
-        ChevronRightOutline,
-    } from "flowbite-svelte-icons";
 
+    interface Props {
+        page?: number;
+        maxPage: number;
+        firstUrl?: string;
+        lastUrl?: string;
+        previousUrl?: string;
+        nextUrl?: string;
+        pagesUrl?: (i: number) => string;
+    }
 
-
+    let { page = $bindable(0), maxPage, firstUrl = "#", lastUrl = "#", previousUrl = "#", nextUrl = "#", pagesUrl = () => "#" }: Props = $props();
-  interface Props {
-    page?: number;
-    maxPage: number;
-    firstUrl?: string;
-    lastUrl?: string;
-    previousUrl?: string;
-    nextUrl?: string;
-    pagesUrl?: (i: number) => string;
-  }
-
-  let {
-    page = $bindable(0),
-    maxPage,
-    firstUrl = "#",
-    lastUrl = "#",
-    previousUrl = "#",
-    nextUrl = "#",
-    pagesUrl = () => "#"
-  }: Props = $props();
 
     const previous = () => {
         page = Math.max(page - 1, 0);
@@ -56,20 +41,23 @@
     const next = () => {
         page = Math.min(page + 1, maxPage - 1);
     };
-    let pages = $derived(new Array(maxPage).fill(0)
+    let pages = $derived(
-        .map((_, i) => i + 1)
+        new Array(maxPage)
-        //.slice(Math.max(page - 2, 0) - Math.abs(Math.max(page + 3 - maxPage, 0)), Math.min(page + 3, maxPage) + Math.abs(Math.min(page - 2, 0)))
+            .fill(0)
-        .map(i => ({
+            .map((_, i) => i + 1)
-            name: i.toString(),
+            //.slice(Math.max(page - 2, 0) - Math.abs(Math.max(page + 3 - maxPage, 0)), Math.min(page + 3, maxPage) + Math.abs(Math.min(page - 2, 0)))
-            active: i === page + 1,
+            .map((i) => ({
-            i: i - 1
+                name: i.toString(),
-        })));
+                active: i === page + 1,
+                i: i - 1,
+            })),
+    );
 </script>
 
 <div class="w-full flex justify-center mt-4">
-    <ul class="inline-flex flex-wrap">
+    <ul class="inline-flex flex-wrap gap-1">
         <li>
-            <a href={firstUrl} onclick={preventDefault(() => page = 0)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
+            <a href={firstUrl} onclick={preventDefault(() => (page = 0))} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
                 <span class="sr-only">Next</span>
                 <ChevronDoubleLeftOutline class="w-3 h-3" />
             </a>
@@ -82,7 +70,7 @@
         </li>
         {#each pages as p}
             <li>
-                <a href={pagesUrl(p.i)} onclick={preventDefault(() => page = p.i)} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-neutral={!p.active}>
+                <a href={pagesUrl(p.i)} onclick={preventDefault(() => (page = p.i))} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-neutral={!p.active}>
                     <span>{p.name}</span>
                 </a>
             </li>
@@ -94,10 +82,10 @@
             </a>
         </li>
         <li>
-            <a href={lastUrl} onclick={preventDefault(() => page = maxPage - 1)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
+            <a href={lastUrl} onclick={preventDefault(() => (page = maxPage - 1))} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
                 <span class="sr-only">Next</span>
                 <ChevronDoubleRightOutline class="w-3 h-3" />
             </a>
         </li>
     </ul>
-</div>
+</div>

src/layouts/NavbarLayout.astro

@@ -12,6 +12,9 @@ import Navbar from "@components/Navbar.svelte";
 import ServerStatus from "../components/ServerStatus.svelte";
 
 const { title, description, transparentFooter = true } = Astro.props;
+
+const footerCol = "flex flex-col min-w-40 [&_a]:text-neutral-400/85 [&_a]:text-[0.85rem] [&_a]:leading-[1.9] [&_a]:no-underline [&_a]:transition-colors [&_a]:duration-200 [&_a:hover]:text-amber-500";
+const footerH1 = "font-display text-[0.7rem] font-bold tracking-[0.2em] uppercase text-amber-500 mb-3";
 ---
 
 <Basic title={title} description={description} autoDarkMode={false}>
@@ -24,15 +27,15 @@ const { title, description, transparentFooter = true } = Astro.props;
             <main class="flex-1" data-pagefind-body>
                 <slot />
             </main>
-            <footer class="sw-footer">
+            <footer class="w-full max-w-[75em] mx-auto mt-16 px-4 pb-4 bg-[rgba(8,8,8,0.85)]">
-                <div class="sw-footer-rule"></div>
+                <div class="h-px bg-gradient-to-r from-transparent via-amber-500/30 to-transparent mb-10"></div>
-                <div class="sw-footer-grid">
+                <div class="flex justify-evenly items-start flex-wrap gap-8">
-                    <div class="sw-footer-col">
+                    <div class={`${footerCol} [&_h2]:text-[0.85rem] [&_h2]:text-neutral-400/85 [&_h2]:leading-[1.9]`}>
-                        <h1>Serverstatus</h1>
+                        <h1 class={footerH1}>Serverstatus</h1>
                         <ServerStatus client:only="svelte" />
                     </div>
-                    <div class="sw-footer-col">
+                    <div class={footerCol}>
-                        <h1>Links</h1>
+                        <h1 class={footerH1}>Links</h1>
                         <a href={l("/")}>{t("navbar.links.home.title")}</a>
                         <a href={l("/join")}>{t("footer.join")}</a>
                         <a href={l("/announcements")}>{t("footer.announcements")}</a>
@@ -42,8 +45,8 @@ const { title, description, transparentFooter = true } = Astro.props;
                         <a href={l("/privacy-policy")}>{t("footer.privacy")}</a>
                         <a href={l("/imprint")}>{t("footer.imprint")}</a>
                     </div>
-                    <div class="sw-footer-col">
+                    <div class={footerCol}>
-                        <h1>Social Media</h1>
+                        <h1 class={footerH1}>Social Media</h1>
                         <a class="flex" href="/youtube">
                             <YoutubeSolid class="mr-2" />
                             YouTube</a
@@ -58,79 +61,8 @@ const { title, description, transparentFooter = true } = Astro.props;
                         >
                     </div>
                 </div>
-                <span class="sw-footer-copy">© SteamWar.de</span>
+                <span class="block text-center text-[0.7rem] tracking-[0.15em] text-neutral-400/40 mt-10">© SteamWar.de</span>
             </footer>
         </div>
     </Fragment>
 </Basic>
-
-<style>
-    .sw-footer {
-        width: min(100%, 75em);
-        margin: 4rem auto 0;
-        padding: 0 1rem 1rem;
-    }
-
-    .sw-footer-rule {
-        height: 1px;
-        background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.3), transparent);
-        margin-bottom: 2.5rem;
-    }
-
-    .sw-footer-grid {
-        display: flex;
-        justify-content: space-evenly;
-        align-items: flex-start;
-        flex-wrap: wrap;
-        gap: 2rem;
-    }
-
-    .sw-footer-col {
-        display: flex;
-        flex-direction: column;
-        min-width: 10rem;
-    }
-
-    .sw-footer-col > h1 {
-        font-family: "Barlow Condensed", sans-serif;
-        font-size: 0.7rem;
-        font-weight: 700;
-        letter-spacing: 0.2em;
-        text-transform: uppercase;
-        color: #f59e0b;
-        margin-bottom: 0.75rem;
-    }
-
-    .sw-footer-col > :global(a),
-    .sw-footer-col > a {
-        color: rgba(163, 163, 163, 0.85);
-        font-size: 0.85rem;
-        line-height: 1.9;
-        text-decoration: none;
-        transition: color 0.2s ease;
-    }
-
-    .sw-footer-col > :global(a:hover),
-    .sw-footer-col > a:hover {
-        color: #f59e0b;
-    }
-
-    .sw-footer-col > :global(h2) {
-        font-size: 0.85rem;
-        color: rgba(163, 163, 163, 0.85);
-        line-height: 1.9;
-    }
-
-    .sw-footer-copy {
-        display: block;
-        text-align: center;
-        font-size: 0.7rem;
-        letter-spacing: 0.15em;
-        color: rgba(163, 163, 163, 0.4);
-        margin-top: 2.5rem;
-    }
-
-    .match {
-        width: min(100vw, 70em);
-    }
-</style>

src/pages/index.astro

@@ -36,27 +36,30 @@ const prefixColors: { [key: string]: string } = {
     Sup: "#1d4ed8",
     Arch: "#22c55e",
 };
+
+const featClass =
+    "flex flex-col items-center text-center py-10 px-8 border-b border-white/[0.04] md:border-b-0 md:border-r md:last:border-r-0 transition-[background] duration-[400ms] hover:bg-amber-500/[0.025] [&_svg]:text-amber-500 [&_svg]:mb-5 [&_svg]:transition-transform [&_svg]:duration-300 [&:hover_svg]:scale-[1.15]";
+const featNum = "font-display text-[3.5rem] font-extrabold leading-none text-amber-500/10 mb-5";
+const featH3 = "font-display text-[1.15rem] font-bold text-white tracking-[0.08em] uppercase mb-3";
+const featP = "text-neutral-400/85 text-[0.85rem] leading-[1.65] mt-1";
 ---
 
 <NavbarLayout title={t("home.page")} description="SteamWar.de Homepage" transparentFooter={false}>
-    <!-- ═══════════ HERO ═══════════ -->
+    <section class="relative w-full h-screen overflow-hidden">
-    <section class="hero">
+        <div class="absolute inset-0 h-[calc(100vh+1rem)]">
-        <div class="hero-bg">
             <BackgroundImage />
         </div>
-        <div class="hero-gradient"></div>
+        <div class="absolute inset-0 z-[2] [background:linear-gradient(to_bottom,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.2)_35%,rgba(0,0,0,0.45)_65%,#080808_100%)]"></div>
-        <div class="hero-scanlines"></div>
+        <div class="absolute inset-0 z-[3] pointer-events-none [background:repeating-linear-gradient(0deg,transparent_0px,transparent_3px,rgba(0,0,0,0.06)_3px,rgba(0,0,0,0.06)_4px)]"></div>
 
-        <div class="hero-content">
+        <div class="relative z-10 h-full flex flex-col items-center justify-center px-4">
-            <span class="hero-label">Minecraft PvP Server</span>
+            <h1 class="font-display text-[clamp(4.5rem,14vw,14rem)] font-black leading-[0.85] tracking-[-0.03em] select-none animate-[scaleIn_0.9s_0.25s_ease-out_both]">
-
+                <span class="hero-text text-transparent">{t("home.title.first")}</span><span class="text-white [text-shadow:0_0_80px_rgba(255,255,255,0.06)]">{t("home.title.second")}</span>
-            <h1 class="hero-title">
-                <span class="hero-steam">{t("home.title.first")}</span><span class="hero-war">{t("home.title.second")}</span>
             </h1>
 
-            <div class="hero-rule"></div>
+            <div class="w-0 h-0.5 bg-gradient-to-r from-transparent via-amber-500 to-transparent my-7 animate-[lineGrow_0.6s_0.7s_ease-out_both]"></div>
 
-            <text-carousel class="hero-carousel">
+            <text-carousel class="h-10 sm:h-12 w-full max-w-[28rem] sm:max-w-[32rem] relative pointer-events-none">
                 <h2>{t("home.subtitle.1")}</h2>
                 <h2>
                     {t("home.subtitle.2")}
@@ -65,72 +68,78 @@ const prefixColors: { [key: string]: string } = {
                 <h2>{t("home.subtitle.3")}</h2>
             </text-carousel>
 
-            <a href={l("join")} class="hero-cta">
+            <a
+                href={l("join")}
+                class="inline-flex items-center gap-[0.6rem] mt-12 py-[0.8rem] px-[2.8rem] border border-amber-500/50 text-amber-400 font-display text-[0.85rem] tracking-[0.2em] uppercase bg-amber-500/[0.04] backdrop-blur-[12px] [clip-path:polygon(0_0,calc(100%-14px)_0,100%_14px,100%_100%,14px_100%,0_calc(100%-14px))] transition-all duration-[350ms] animate-[fadeUp_0.6s_1s_ease-out_both] hover:bg-amber-500/[0.12] hover:border-amber-500/85 hover:text-white hover:[box-shadow:0_0_40px_rgba(245,158,11,0.1),inset_0_0_40px_rgba(245,158,11,0.03)] hover:scale-[1.04] active:scale-[0.97]"
+            >
                 <span>{t("home.join")}</span>
                 <CaretRight width="18" height="18" />
             </a>
         </div>
 
-        <div class="hero-announcement">
+        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 w-full max-w-[40rem] px-4">
             <PostComponent post={latestPost} slim={true} />
         </div>
     </section>
 
-    <!-- ═══════════ FEATURES ═══════════ -->
+    <section class="relative bg-[#080808] overflow-hidden">
-    <section class="features">
+        <div class="absolute -top-[100px] left-1/2 -translate-x-1/2 w-[500px] h-[250px] [background:radial-gradient(ellipse,rgba(245,158,11,0.06)_0%,transparent_70%)] pointer-events-none"></div>
-        <div class="features-glow"></div>
+        <div class="relative z-[2] max-w-5xl mx-auto py-24 px-4">
-        <div class="features-inner">
+            <div class="grid grid-cols-1 md:grid-cols-3">
-            <div class="features-grid">
+                <article class={featClass}>
-                <article class="feat">
+                    <span class={featNum}>01</span>
-                    <span class="feat-num">01</span>
                     <Crosshair1 height="36" width="36" />
-                    <h3>{t("home.benefits.fights.title")}</h3>
+                    <h3 class={featH3}>{t("home.benefits.fights.title")}</h3>
-                    <p>{t("home.benefits.fights.description.1")}</p>
+                    <p class={featP}>{t("home.benefits.fights.description.1")}</p>
-                    <p>{t("home.benefits.fights.description.2")}</p>
+                    <p class={featP}>{t("home.benefits.fights.description.2")}</p>
                 </article>
 
-                <article class="feat">
+                <article class={featClass}>
-                    <span class="feat-num">02</span>
+                    <span class={featNum}>02</span>
                     <Rocket height="36" width="36" />
-                    <h3>{t("home.benefits.bau.title")}</h3>
+                    <h3 class={featH3}>{t("home.benefits.bau.title")}</h3>
-                    <p>{t("home.benefits.bau.description")}</p>
+                    <p class={featP}>{t("home.benefits.bau.description")}</p>
                 </article>
 
-                <article class="feat">
+                <article class={featClass}>
-                    <span class="feat-num">03</span>
+                    <span class={featNum}>03</span>
                     <Pause height="36" width="36" />
-                    <h3>{t("home.benefits.minigames.title")}</h3>
+                    <h3 class={featH3}>{t("home.benefits.minigames.title")}</h3>
-                    <p>{t("home.benefits.minigames.description.1")}</p>
+                    <p class={featP}>{t("home.benefits.minigames.description.1")}</p>
-                    <p>{t("home.benefits.minigames.description.2")}</p>
+                    <p class={featP}>{t("home.benefits.minigames.description.2")}</p>
                 </article>
             </div>
         </div>
     </section>
 
-    <!-- ═══════════ TEAM ═══════════ -->
+    <section class="bg-[#0c0c0c] py-20">
-    <section class="team">
+        <div class="max-w-5xl mx-auto px-4 flex flex-wrap gap-4">
-        <div class="team-inner">
             {
                 Object.entries(teamMember).map(([prefix, players]) => (
-                    <div class="rank-group">
+                    <Fragment>
-                        <h2 class="rank-label" style={`--rc: ${prefixColors[prefix] || "#666"}`}>
+                        {players.map((v, i) => (
-                            {t("home.prefix." + prefix)}
+                            <div class="flex flex-col justify-end">
-                        </h2>
+                                {i === 0 && (
-                        <div class="rank-members">
+                                    <h2 class="font-display text-[1.35rem] font-bold tracking-[0.12em] uppercase text-[var(--rc)] pb-1 inline-block" style={`--rc: ${prefixColors[prefix] || "#666"}`}>
-                            {players.map((v) => (
+                                        {t("home.prefix." + prefix)}
-                                <div class="member" style={`--rc: ${prefixColors[prefix] || "#666"}`}>
+                                    </h2>
+                                )}
+                                <div
+                                    class="flex flex-col items-center py-5 px-6 bg-white/[0.025] border-t-2 border-[var(--rc)] transition-[transform,background,box-shadow] duration-300 hover:-translate-y-1.5 hover:bg-white/5 hover:shadow-[0_12px_32px_rgba(0,0,0,0.5)] [&:hover_img]:scale-[1.08]"
+                                    style={`--rc: ${prefixColors[prefix] || "#666"}`}
+                                >
                                     <Image
                                         src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`}
                                         alt={v.name}
                                         width="120"
                                         height="120"
-                                        class="w-[100px] h-[100px] transition-transform duration-300"
+                                        class="w-[120px] h-[120px] transition-transform duration-300"
                                     />
-                                    <span class="member-name">{v.name}</span>
+                                    <span class="font-display mt-3 text-[0.9rem] tracking-[0.1em] text-neutral-300/90">{v.name}</span>
                                 </div>
-                            ))}
+                            </div>
-                        </div>
+                        ))}
-                    </div>
+                    </Fragment>
                 ))
             }
         </div>
@@ -172,118 +181,11 @@ const prefixColors: { [key: string]: string } = {
 </NavbarLayout>
 
 <style>
-    /* ── Typography ── */
+    .hero-text {
-    .hero-label,
+        background-image: linear-gradient(160deg, #fcd34d, #f59e0b);
-    .hero-title,
-    .hero-cta span,
-    .feat-num,
-    .feat h3,
-    .rank-label,
-    .member-name {
-        font-family: "Barlow Condensed", sans-serif;
-    }
-
-    /* ══════════════════════════════════════
-       HERO
-       ══════════════════════════════════════ */
-    .hero {
-        position: relative;
-        width: 100%;
-        height: 100vh;
-        overflow: hidden;
-    }
-
-    .hero-bg {
-        position: absolute;
-        inset: 0;
-        height: calc(100vh + 1rem);
-    }
-
-    .hero-gradient {
-        position: absolute;
-        inset: 0;
-        z-index: 2;
-        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.45) 65%, #080808 100%);
-    }
-
-    .hero-scanlines {
-        position: absolute;
-        inset: 0;
-        z-index: 3;
-        pointer-events: none;
-        background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.06) 3px, rgba(0, 0, 0, 0.06) 4px);
-    }
-
-    .hero-content {
-        position: relative;
-        z-index: 10;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 0 1rem;
-    }
-
-    .hero-label {
-        font-size: 0.65rem;
-        letter-spacing: 0.5em;
-        text-transform: uppercase;
-        color: rgba(245, 158, 11, 0.7);
-        margin-bottom: 2rem;
-        animation: fadeUp 0.8s 0.1s ease-out both;
-    }
-
-    @media (min-width: 640px) {
-        .hero-label {
-            font-size: 0.8rem;
-        }
-    }
-
-    .hero-title {
-        font-size: clamp(4.5rem, 14vw, 14rem);
-        font-weight: 900;
-        line-height: 0.85;
-        letter-spacing: -0.03em;
-        user-select: none;
-        animation: scaleIn 0.9s 0.25s ease-out both;
-    }
-
-    .hero-steam {
-        background: linear-gradient(160deg, #fcd34d 0%, #f59e0b 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
         background-clip: text;
     }
 
-    .hero-war {
-        color: #ffffff;
-        text-shadow: 0 0 80px rgba(255, 255, 255, 0.06);
-    }
-
-    .hero-rule {
-        width: 0;
-        height: 2px;
-        background: linear-gradient(90deg, transparent, #f59e0b, transparent);
-        margin: 1.75rem 0;
-        animation: lineGrow 0.6s 0.7s ease-out both;
-    }
-
-    /* Carousel */
-    .hero-carousel {
-        height: 2.5rem;
-        width: 100%;
-        max-width: 28rem;
-        position: relative;
-    }
-
-    @media (min-width: 640px) {
-        .hero-carousel {
-            height: 3rem;
-            max-width: 32rem;
-        }
-    }
-
     text-carousel > * {
         position: absolute;
         top: 0;
@@ -308,221 +210,6 @@ const prefixColors: { [key: string]: string } = {
         }
     }
 
-    /* CTA */
-    .hero-cta {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.6rem;
-        margin-top: 3rem;
-        padding: 0.8rem 2.8rem;
-        border: 1px solid rgba(245, 158, 11, 0.5);
-        color: #fbbf24;
-        font-size: 0.85rem;
-        letter-spacing: 0.2em;
-        text-transform: uppercase;
-        background: rgba(245, 158, 11, 0.04);
-        backdrop-filter: blur(12px);
-        clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
-        transition: all 0.35s ease;
-        animation: fadeUp 0.6s 1s ease-out both;
-    }
-
-    .hero-cta:hover {
-        background: rgba(245, 158, 11, 0.12);
-        border-color: rgba(245, 158, 11, 0.85);
-        color: #fff;
-        box-shadow:
-            0 0 40px rgba(245, 158, 11, 0.1),
-            inset 0 0 40px rgba(245, 158, 11, 0.03);
-        transform: scale(1.04);
-    }
-
-    .hero-cta:active {
-        transform: scale(0.97);
-    }
-
-    /* Announcement */
-    .hero-announcement {
-        position: absolute;
-        bottom: 1.5rem;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 20;
-        width: 100%;
-        max-width: 40rem;
-        padding: 0 1rem;
-    }
-
-    /* ══════════════════════════════════════
-       FEATURES
-       ══════════════════════════════════════ */
-    .features {
-        position: relative;
-        background: #080808;
-        overflow: hidden;
-    }
-
-    .features-glow {
-        position: absolute;
-        top: -100px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 500px;
-        height: 250px;
-        background: radial-gradient(ellipse, rgba(245, 158, 11, 0.06) 0%, transparent 70%);
-        pointer-events: none;
-    }
-
-    .features-inner {
-        position: relative;
-        z-index: 2;
-        max-width: 64rem;
-        margin: 0 auto;
-        padding: 6rem 1rem;
-    }
-
-    .features-grid {
-        display: grid;
-        grid-template-columns: 1fr;
-        gap: 0;
-    }
-
-    @media (min-width: 768px) {
-        .features-grid {
-            grid-template-columns: 1fr 1fr 1fr;
-        }
-    }
-
-    .feat {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        padding: 2.5rem 2rem;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-        transition: background 0.4s ease;
-    }
-
-    @media (min-width: 768px) {
-        .feat {
-            border-bottom: none;
-            border-right: 1px solid rgba(255, 255, 255, 0.04);
-        }
-        .feat:last-child {
-            border-right: none;
-        }
-    }
-
-    .feat:hover {
-        background: rgba(245, 158, 11, 0.025);
-    }
-
-    .feat-num {
-        font-size: 3.5rem;
-        font-weight: 800;
-        line-height: 1;
-        color: rgba(245, 158, 11, 0.1);
-        margin-bottom: 1.25rem;
-    }
-
-    .feat :global(svg) {
-        color: #f59e0b;
-        margin-bottom: 1.25rem;
-        transition: transform 0.3s ease;
-    }
-
-    .feat:hover :global(svg) {
-        transform: scale(1.15);
-    }
-
-    .feat h3 {
-        font-size: 1.15rem;
-        font-weight: 700;
-        color: #fff;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-        margin-bottom: 0.75rem;
-    }
-
-    .feat p {
-        color: rgba(163, 163, 163, 0.85);
-        font-size: 0.85rem;
-        line-height: 1.65;
-        margin-top: 0.3rem;
-    }
-
-    /* ══════════════════════════════════════
-       TEAM
-       ══════════════════════════════════════ */
-    .team {
-        background: #0c0c0c;
-        padding: 5rem 0;
-    }
-
-    .team-inner {
-        max-width: 64rem;
-        margin: 0 auto;
-        padding: 0 1rem;
-    }
-
-    .rank-group {
-        margin-bottom: 3rem;
-    }
-    .rank-group:last-child {
-        margin-bottom: 0;
-    }
-
-    .rank-label {
-        font-size: 1.35rem;
-        font-weight: 700;
-        letter-spacing: 0.12em;
-        text-transform: uppercase;
-        color: var(--rc);
-        padding-bottom: 0.6rem;
-        margin-bottom: 1.25rem;
-        border-bottom: 2px solid var(--rc);
-        display: inline-block;
-    }
-
-    .rank-members {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 1rem;
-    }
-
-    .member {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 1.25rem 1.5rem;
-        background: rgba(255, 255, 255, 0.025);
-        border-top: 2px solid var(--rc);
-        transition:
-            transform 0.3s ease,
-            background 0.3s ease,
-            box-shadow 0.3s ease;
-    }
-
-    .member:hover {
-        transform: translateY(-6px);
-        background: rgba(255, 255, 255, 0.05);
-        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
-    }
-
-    .member:hover :global(img) {
-        transform: scale(1.08);
-    }
-
-    .member-name {
-        margin-top: 0.75rem;
-        font-size: 0.9rem;
-        letter-spacing: 0.1em;
-        color: rgba(212, 212, 212, 0.9);
-    }
-
-    /* ══════════════════════════════════════
-       ANIMATIONS
-       ══════════════════════════════════════ */
     @keyframes fadeUp {
         from {
             opacity: 0;