* { box-sizing: border-box;}
html { scroll-behavior: smooth;}


body {
    margin:0;
    min-height:100vh;
    font-family:
    "Segoe UI",
    "Trebuchet MS",
    Arial,
    sans-serif;
    color:#f8fafc;
    overflow-x:hidden;
    background:
    linear-gradient(
        135deg,
        #050816,
        #0f172a,
        #020617
    );
}
/* Digital grid background */

body::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    background-image:
    linear-gradient(
        rgba(0,255,255,.08) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(0,255,255,.08) 1px,
        transparent 1px
    );
    background-size:
    45px 45px;
    opacity:.35;
}

/* GLOW ORBS */
body::after {
    content:"";
    position:fixed;
    width:500px;
    height:500px;
    right:-150px;
    top:-150px;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(0,255,255,.35),
        transparent 70%
    );
    filter:blur(40px);
    z-index:-1;
}

/* MAIN CONTAINER */
.container {
    width:min(1400px,92%);
    margin:auto;
    padding:
    40px 0 80px;
}

/* HEADERS  */
h1 {
    text-align:center;
    font-size:clamp(2.5rem,6vw,4.5rem);
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
    color:white;
    text-shadow:
    0 0 10px #00ffff,
    0 0 30px #00ffff;
}

h2 {
    font-weight:900;
    letter-spacing:1px;
}

.section-title {
    margin:
    70px 0 35px;
    text-align:center;
    font-size:2.3rem;
    color:#fff;
    text-transform:uppercase;
    text-shadow:
    0 0 15px currentColor;
}

/* INTRO PANEL */

.intro {
    max-width:900px;
    margin:
    0 auto 50px;
    padding:25px;
    text-align:center;
    font-size:1.25rem;
    line-height:1.7;
    background:
    rgba(255,255,255,.08);
    backdrop-filter:blur(15px);
    border-radius:30px;
    border:
    1px solid rgba(255,255,255,.15);
    box-shadow:
    inset 0 0 30px rgba(255,255,255,.05),
    0 20px 50px rgba(0,0,0,.5);
}

/* GLASS PANELS */

.glass {
    background:
    rgba(255,255,255,.1);
    backdrop-filter:
    blur(20px);
    border-radius:35px;
    border:
    1px solid rgba(255,255,255,.2);
    box-shadow:
    8px 8px 25px rgba(0,0,0,.45),
    inset -5px -5px 15px rgba(0,0,0,.25),
    inset 5px 5px 15px rgba(255,255,255,.1);
}

/* BACK BUTTON */


.back-button {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:
    12px 25px;
    border-radius:50px;
    color:white;
    text-decoration:none;
    font-weight:bold;
    background:
    rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    border:
    1px solid rgba(255,255,255,.2);
    box-shadow:
    5px 5px 15px rgba(0,0,0,.4);
    transition:.3s;
}

.back-button:hover {
    transform:
    translateY(-5px);
    box-shadow:
    0 0 25px cyan;
}

/* CARD GRID */
.card-grid {
    display:grid;
    grid-template-columns:
    repeat(
    auto-fit,
    minmax(290px,1fr)
    );
    gap:35px;

/* FLIP CARD SYSTEM*/
.flip-card {
    height:340px;
    perspective:1200px;
    cursor:pointer;
}

.flip-inner {
    position:relative;
    width:100%;
    height:100%;
    transition:
    transform .8s cubic-bezier(.4,2,.6,1);
    transform-style:preserve-3d;
}

.flip-card:hover .flip-inner {
    transform:
    rotateY(180deg)
    translateZ(30px);
}

/* CARD SURFACES */
.flip-front,
.flip-back {
    position:absolute;
    inset:0;
    padding:30px;
    border-radius:35px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    backface-visibility:hidden;
    overflow:hidden;
    border:
    2px solid rgba(255,255,255,.18);
    backdrop-filter:
    blur(18px);
    box-shadow:
    12px 12px 30px rgba(0,0,0,.6),
    inset 8px 8px 20px rgba(255,255,255,.12),
    inset -8px -8px 20px rgba(0,0,0,.25);
}

/* ---------- CARD FRONT ---------- */

.flip-front {
    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.05)
    );
}

.flip-front::before {
    content:"SYSTEM READY";
    position:absolute;
    top:18px;
    left:20px;
    font-size:.7rem;
    letter-spacing:3px;
    color:#00ffff;
    font-family:monospace;
}

.flip-front h2 {
    font-size:1.55rem;
    text-transform:uppercase;
    color:white;
    text-shadow:
    0 0 10px cyan;
}

/* ---------- CARD BACK ---------- */

.flip-back {
    transform:rotateY(180deg);
    background:
    linear-gradient(
    145deg,
    rgba(0,0,0,.75),
    rgba(15,23,42,.9)
    );
    justify-content:space-between;
}

.flip-back::before {
    content:"> PROMPT.EXE";
    position:absolute;
    top:18px;
    left:25px;
    font-family:monospace;
    color:#39ff14;
    font-size:.8rem;
}

.flip-back p {
    margin-top:35px;
    font-family:
    "Courier New",
    monospace;
    color:#e2e8f0;
    line-height:1.6;
    font-size:.95rem;
    max-height:160px;
    overflow-y:auto;
}

/*  TERMINAL SCROLLBAR */

.flip-back p::-webkit-scrollbar {
    width:6px;
}

.flip-back p::-webkit-scrollbar-thumb {
    background:#00ffff;
    border-radius:20px;
}

/*  COPY BUTTON */

button {
    position:relative;
    overflow:hidden;
    border:none;
    padding:
    13px 28px;
    border-radius:50px;
    cursor:pointer;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1px;
    background:
    linear-gradient(
    135deg,
    #00ffff,
    #2563eb
    );

    color:#020617;
    box-shadow:
    0 0 20px rgba(0,255,255,.6),
    5px 5px 15px rgba(0,0,0,.5);
    transition:.3s;
}

button:hover {
    transform:
    scale(1.1);
    box-shadow:
    0 0 40px cyan;
}

button:active {
    transform:
    scale(.95);
}

/*  CARD POP EFFECT  */
.flip-card {
    animation:
    cardEntry .6s ease backwards;
}

.flip-card:hover {
    filter:
    drop-shadow(
    0 0 25px cyan
    );
}

@keyframes cardEntry {

    from {
        opacity:0;
        transform:
        translateY(40px)
        scale(.9);
    }
    to {
        opacity:1;
        transform:
        translateY(0)
        scale(1);
    }
}

/*  HACKER TERMINAL DETAILS*/
.flip-back span {
    font-family:monospace;
    color:#39ff14;
}

/* GLOWING SECTION DIVIDERS */

.section-title::before {
    content:"// ";
    color:#39ff14;
}

.section-title::after {
    content:" //";
    color:#00ffff;
}

.index-page {
    background:
    radial-gradient(
        circle at top,
        #ff00ff,
        transparent 35%
    ),
    linear-gradient(
        135deg,
        #020617,
        #111827,
        #0f172a
    );
}

.index-page h1 {
    color:#fff;
    text-shadow:
    0 0 10px #ff00ff,
    0 0 30px #00ffff,
    0 0 60px #ff00ff;
}

/*  DISCOVERY  */
.discovery-page {
    background:
    radial-gradient(
    circle at top right,
    #00ffff,
    transparent 40%
    ),
    linear-gradient(
    135deg,
    #022c22,
    #075985
    );
}

.discovery-page .flip-front {
    box-shadow:
    0 0 30px rgba(0,255,255,.35),
    inset 5px 5px 20px rgba(255,255,255,.1);
}

/* STRATEGY  */

.strategy-page {
    background:
    radial-gradient(
    circle,
    #c026d3,
    transparent 35%
    ),
    linear-gradient(
    135deg,
    #1e1b4b,
    #581c87
    );
}

.strategy-page .flip-front {
    box-shadow:
    0 0 35px rgba(192,38,211,.5);
}

/*  RESUME  */
.resume-page {
    background:
    radial-gradient(
    circle at top,
    #22c55e,
    transparent 35%
    ),
    linear-gradient(
    135deg,
    #052e16,
    #14532d
    );
}

.resume-page .flip-front {
    box-shadow:
    0 0 35px rgba(34,197,94,.5);
}

/* STRESS TESTING  */

.stress-page {
    background:
    radial-gradient(
    circle,
    #ef4444,
    transparent 35%
    ),
    linear-gradient(
    135deg,
    #450a0a,
    #7c2d12
    );
}

.stress-page .flip-front {
    box-shadow:
    0 0 35px rgba(239,68,68,.6);
}

/* OPTIMIZATION  */


.optimization-page {
    background:
    radial-gradient(
    circle at top,
    #facc15,
    transparent 30%
    ),
    linear-gradient(
    135deg,
    #082f49,
    #0f766e
    );
}

.optimization-page .flip-front {
    box-shadow:
    0 0 35px rgba(250,204,21,.55);
}

/* POP ART LABELS */
.flip-front h2::after {
    content:" ✦";
    color:#ff00ff;
}

/*  CYBER CORNERS */
.flip-front::after,
.flip-back::after {
    content:"";
    position:absolute;
    width:40px;
    height:40px;
    border:
    3px solid cyan;
    opacity:.6;
}

.flip-front::after {
    right:15px;
    bottom:15px;
    border-left:none;
    border-top:none;
}

.flip-back::after {
    left:15px;
    bottom:15px;
    border-right:none;
    border-top:none;
}

/*  LANDING PAGE */
.welcome {
    min-height:85vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.welcome p {
    padding:25px;
    border-radius:30px;
    background:
    rgba(255,255,255,.1);
    backdrop-filter:blur(15px);
    box-shadow:
    0 20px 40px rgba(0,0,0,.5);
}

/*  MOBILE  */

@media(max-width:768px){
    .container {
        width:94%;
    }

    h1 { font-size:2.5rem; }

    .section-title { font-size:1.6rem; }

    .flip-card { height:360px; }


    .flip-card:hover .flip-inner { transform:rotateY(180deg); }

}

/*  REDUCE MOTION OPTION */


@media(prefers-reduced-motion:reduce){


    * {
        animation:none!important;
        transition:none!important;
    }
}