/* =============================================================
   1. COLOR SYSTEM (CSS Variables)
   ============================================================= */
   :root {
    /* --- Base Colors --- */
    --color-bg: #31312f;                 /* Main Body Background */
    --color-bg-dark: #111111;            /* Header/Footer Background */
    --color-separator: #252525;          /* HR/Divider color */
    --color-text: #BBBBB4;               /* Primary body text color */
    --color-text-light: #e0e0e0;         /* Highlighted text (Header links, etc.) */

    /* --- Accent Colors (Gold Theme) --- */
    --color-primary: #F2D6A4;            /* Primary Accent (H1, H2, Logo) */
    --color-secondary: #E9CE98;          /* Secondary Accent (H3) */
    --color-secondary-translucent: #e9cd9642;
    --color-interactive: #f2c75b;        /* Interactive Elements (Links) */
    --color-interactive-hover: var(--color-primary);

    /* --- CTA Button Colors --- */
    --color-btn-text: #111;              /* Button text color */
    --color-btn-start: #F2DBA8;          /* Button gradient start */
    --color-btn-end: #CDAB6B;            /* Button gradient end */
    --color-btn-hover: #e0b040;          /* Button hover state */

    /* --- Code Block Colors --- */
    --color-code-bg: #222;               /* Code snippet background */
    --color-code-text: #eaeae3;          /* Code snippet text */
    --color-code-note: rgb(157, 172, 172); /* Comments inside code */
}

/* --- Theme Variant: Sky Color --- */
.sky-color {     
    --color-bg: #2d3236;
    --color-primary: #9ce3ff; 
    --color-secondary: #80b9d4;
    --color-secondary-translucent: #4097f346;
    --color-interactive: #5bbbf2;
    --color-interactive-hover: #95e1ff;  
    --color-btn-text: #111;
    --color-btn-start: #72E0FF; 
    --color-btn-end: #57B0FD;
    --color-btn-hover: #4098e0;
}

/* --- Theme Variant: Indigo Color --- */
.indigo-color.gray { --color-bg: #A6C0D7; }
.indigo-color {
    --color-bg: #8DD5F9;
    --color-primary: #0e1f35;
    --color-secondary: #1b283b;
    --color-secondary-translucent: #23748346;
    --color-interactive: #143c77;
    --color-interactive-hover: #0b294d;
    --color-btn-text: #ffffff;
    --color-btn-start: #2d496e;
    --color-btn-end: #0f2038;
    --color-btn-hover: #142e44;
}
.indigo-color h1 { -webkit-text-stroke: 1.3px var(--color-primary); }

/* --- Theme Variant: Umber Color --- */
.umber-color {
    --color-bg: #8B7A61;
    --color-primary: #271E11;
    --color-secondary: #1b283b;
    --color-secondary-translucent: #4583df46;
    --color-interactive: #271E11;
    --color-interactive-hover: #271E11;
    --color-btn-text: #ffffff;
    --color-btn-start: #473822;
    --color-btn-end: #271E11;
    --color-btn-hover: #271E11;
}
.umber-color h1 { -webkit-text-stroke: 1px var(--color-primary); }

/* =============================================================
   2. BASE STYLES & TYPOGRAPHY
   ============================================================= */
html, body { 
    font-size: 62.5%; /* 1rem = 10px */
    height: 100%; 
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: "PlusJakartaSans Variable", sans-serif;
    font-size: 1.6rem;
    word-spacing: .3rem; 
    letter-spacing: .05rem;
    margin: 0; padding: 0;
    background-color: var(--color-bg);
    color: var(--color-text-light);
    min-height: 100vh; 
    display: flex; 
    flex-direction: column;
    overflow-x: hidden;
}

canvas:focus { outline: none !important; }
strong { font-weight: bold !important; }

/* Utility Classes */
.flx { display: flex; align-items: baseline; }
.pdr8 { padding-right: .8rem; }
.mt40 { margin-top: 4rem !important; }
.mt50 { margin-top: 5rem !important; }
.w60 { width: 60rem !important; }

/* Image Reset */
noscript img {
    display: block; 
    width: 100%; height: 100%;
    object-fit: cover;
}

/* =============================================================
   3. COMPONENTS (Buttons, Loading, Hero)
   ============================================================= */

/* Call to Action Button */
.btn-buy {
    display: inline-block; 
    padding: 1.2rem 3rem;
    background: linear-gradient(180deg, var(--color-btn-start) 0%, var(--color-btn-end) 100%);    
    color: var(--color-btn-text) !important;
    text-decoration: none;
    border-radius: 0.6rem;
    font-size: 1.5rem !important; 
    font-weight: 600 !important;
    transition: background-color 0.3s;
}

.btn-buy:hover {
    background: linear-gradient(180deg, var(--color-interactive-hover), var(--color-interactive-hover));
}

.btn-buy.large { padding: 1.8rem 3.3rem; }
header .btn-buy { padding: 1.2rem 1.6rem; letter-spacing: -0.05rem; }

/* Loading Screen States */
#loading-screen { display: none; }
.js-enabled #loading-screen { display: flex; align-items: center; height: 100%; text-align: center; }

.hero { position: relative; height: 100%; }
.hero .loading-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,.5); z-index: 9999; 
    display: flex; justify-content: center; align-items: center; 
    color: var(--color-primary); font-family: sans-serif; font-size: 2rem; font-weight: 800;
}

/* 3D Canvas Positioning */
#webgl { position: absolute; width: 100%; }
#webgl:focus { outline: none !important; }

/* =============================================================
   4. TEXT CONTENT GROUPS (Hero Messaging)
   ============================================================= */

/* Badge/Label Styles */
.label-type { 
    display: inline-block; width: fit-content; margin: 0 10px 10px 0; 
    font-weight: 400; font-size: 1.4rem; line-height: 100%; letter-spacing: -.03rem;
    background: var(--color-secondary-translucent); 
    color: var(--color-primary); border-radius: 8px; padding: .5rem 1rem .7rem;
}

.label-3d { display: flex; align-items: center; margin-top: 4rem; }
.label-3d span { padding: .6rem; font-weight: 300; font-size: 1.7rem; color: var(--color-secondary); }
.label-3d img { width: 4.5rem; }

/* Floating Text Content Wrapper */
.textGroup { 
    width: fit-content; position: absolute; top: 6rem;  
    left: calc((100vw - 1460px) / 2); 
    z-index: 2 !important; font-family: "PlusJakartaSans Variable", sans-serif; 
    text-align: left; color: var(--color-primary);
}

.textGroup h1 { margin: 0; font-weight: 900 !important; font-size: 8rem; line-height: 120%; }
.textGroup .descript { margin-top: 3rem; font-weight: 600; font-size: 2.2rem; letter-spacing: 0; line-height: 150%; }
.textGroup .feature { margin-top: 1rem; }
.textGroup .feature span { font-weight: 700; font-size: 2rem; padding: 0 2rem; padding-left: 0; }

/* Specific Alignments for Text Groups */
.textGroup.wide { top: 25%; width: 70%; }

.textGroup.center {
    left: 50%; top: 11rem;
    transform: translate(-50%, -10%); 
    text-align: center !important;
    width: 100% !important;
} 
.textGroup.center .w60 { width: initial !important; }
.textGroup.center h1 { width: initial; }
.textGroup.center .flx { display: block !important; margin-top: 3rem; }
.textGroup.center.bottom { top: 60% !important; }

.textGroup.right {
    top: 10% !important; right: 7% !important; left: initial;
    transform: translate(0, 0);
    width: fit-content !important;
} 
.textGroup.right > .flx { display: block !important; margin-top: 3rem; }
.textGroup.right h1 { width: initial; }
.textGroup.right.bottom { top: 60% !important; }

.textGroup.middle { top: 18% !important; width: 60rem !important; }

/* =============================================================
   5. RESPONSIVE MEDIA QUERIES
   ============================================================= */

/* Laptop & Large Tablet (Max 1400px) */
@media screen and (max-width: 1400px) { 
    .logo span { display: none; }
    .textGroup, .textGroup.center, .textGroup.middle {
        width: 60%; left: 5%; transform: none;  
        text-align: left !important; 
    }
    .header .container { padding: 0rem 1rem; }
    .header .container nav a { margin-left: 15px; font-size: 1.5rem; }
    .textGroup h1 { font-size: 5rem !important; }
    .textGroup .descript { font-size: 1.5rem; }
    .textGroup .feature span { font-size: 1.5rem; }
}

/* Tablet Portrait & Small Screen (Max 1080px) */
@media screen and (max-width: 1080px) {
    body { font-size: 60%; }
    .hero .webgl { margin-left: initial !important; }     
    .textGroup, .textGroup.middle, .textGroup.center { 
        top: 2% !important; left: 5% !important;  
        transform: none !important; 
        text-align: left !important; width: 50%;
    }  
    .textGroup .w60 { width: initial !important; }
    .textGroup h1 { font-size: 3rem !important; width: initial; }
    .textGroup span { font-size: 1.4rem !important; font-weight: 400 !important; }
}

/* Mobile Devices (Max 768px) */
@media screen and (max-width: 768px) {
    .hero .webgl { margin-left: initial !important; }   
    .textGroup, .textGroup.center, .textGroup.middle { 
        width: 90% !important; 
        top: 2rem !important; left: 50% !important;
        transform: translate(-50%, 0) !important;
        text-align: left !important;
    }

    .textGroup h1 { font-size: 3rem !important; width: initial; }
    .textGroup .descript { margin-left: 0 !important; }
    .textGroup .label-type { display: none; }
    .textGroup .btn-buy { display: none; }  
    .textGroup .label-3d { padding: 1rem; }
    .textGroup .label-3d img { width: 5rem; }
    .textGroup .label-3d span { font-size: 1.3rem; }
    
    /* Center mobile text forced styling */
    .textGroup { text-align: center; width: 100%; left: 0; top: 15%; }
    .textGroup .label { font-weight: 900; font-size: 1.4rem; margin: initial; }
    .textGroup .subtitle { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
    .textGroup .title { font-size: 3rem; margin-top: 0; }
    .textGroup .descript { margin: auto; margin-top: .6rem; font-size: 1.5rem; width: 90%; }
    .textGroup .feature { margin-top: 0; display: none; }   
    .textGroup .feature span { font-size: 1.2rem; font-weight: 600; padding: 0 .3rem; }

    .textGroup.center .flx { margin-top: 1rem; }
    .textGroup.middle { top: initial; width: initial; width: 90% !important; }

    /* Remove outline strokes for readability on small screens */
    .indigo-color h1 { -webkit-text-stroke: none; }
}