/* ============================================
   completengine.net - Styles
   Flat design. Marble motifs. Pastel cards.
   ============================================ */

/* CSS Custom Properties for counter animation */
@property --num0 {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}
@property --num1 {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}
@property --num2 {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.65;
    color: #2A2A3C;
    background-color: #FAFAF8;
    overflow-x: hidden;
}

/* ---- Noise Texture on Page Background ---- */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    filter: url(#noise);
    opacity: 0.02;
    z-index: 9999;
}

/* ---- Navigation Pill ---- */
.nav-pill {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 44px;
    background: #FAFAF8;
    border-radius: 22px;
    border: 1px solid #E0DCD4;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: background-color 0.5s ease;
}

.nav-text {
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #2A2A3C;
    letter-spacing: 0.01em;
}

/* ---- Hero Section ---- */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-marble {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FAFAF8;
    background-image:
        radial-gradient(ellipse 600px 200px at 20% 30%, #C4B8A8 0%, transparent 70%),
        radial-gradient(ellipse 400px 300px at 70% 60%, #D8D0C4 0%, transparent 60%),
        radial-gradient(ellipse 300px 500px at 40% 80%, #C4B8A8 0%, transparent 65%),
        radial-gradient(ellipse 500px 150px at 80% 20%, #D8D0C4 0%, transparent 55%),
        radial-gradient(ellipse 200px 400px at 10% 70%, #C4B8A8 0%, transparent 70%),
        radial-gradient(ellipse 350px 250px at 60% 40%, #D8D0C4 0%, transparent 60%),
        radial-gradient(ellipse 150px 600px at 50% 50%, #C4B8A8 0%, transparent 75%),
        repeating-linear-gradient(
            37deg,
            transparent 0px,
            transparent 40px,
            rgba(196, 184, 168, 0.08) 40px,
            rgba(196, 184, 168, 0.08) 41px
        ),
        repeating-linear-gradient(
            127deg,
            transparent 0px,
            transparent 60px,
            rgba(216, 208, 196, 0.06) 60px,
            rgba(216, 208, 196, 0.06) 61px
        ),
        repeating-linear-gradient(
            73deg,
            transparent 0px,
            transparent 80px,
            rgba(196, 184, 168, 0.05) 80px,
            rgba(196, 184, 168, 0.05) 81px
        );
    opacity: 0.6;
}

.hero-title {
    position: relative;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(48px, 8vw, 96px);
    color: #2A2A3C;
    letter-spacing: -0.02em;
    line-height: 1.05;
    z-index: 1;
}

/* ---- Main Column ---- */
.column {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px 0;
}

/* ---- Marble Stripes ---- */
.marble-stripe {
    width: 100%;
    height: 8px;
    margin: 24px 0;
    background-color: #FAFAF8;
    background-image:
        radial-gradient(ellipse 120px 4px at 15% 50%, #C4B8A8 0%, transparent 70%),
        radial-gradient(ellipse 80px 3px at 45% 40%, #C4B8A8 0%, transparent 60%),
        radial-gradient(ellipse 150px 3px at 75% 60%, #C4B8A8 0%, transparent 65%),
        radial-gradient(ellipse 60px 2px at 30% 70%, #D8D0C4 0%, transparent 70%),
        radial-gradient(ellipse 100px 2px at 60% 30%, #D8D0C4 0%, transparent 60%),
        repeating-linear-gradient(
            12deg,
            transparent 0px,
            transparent 20px,
            rgba(196, 184, 168, 0.15) 20px,
            rgba(196, 184, 168, 0.15) 21px
        ),
        repeating-linear-gradient(
            168deg,
            transparent 0px,
            transparent 30px,
            rgba(216, 208, 196, 0.1) 30px,
            rgba(216, 208, 196, 0.1) 31px
        );
}

/* ---- Cards ---- */
.card {
    position: relative;
    width: 100%;
    min-height: 320px;
    padding: 64px 48px;
    overflow: hidden;
}

.card-1 { background-color: #F2D7EE; }
.card-2 { background-color: #D4E8C2; }
.card-3 { background-color: #C7E3F5; }
.card-4 { background-color: #FDE8CD; }
.card-5 { background-color: #E8D5F5; }
.card-6 { background-color: #F2D7EE; }
.card-7 { background-color: #D4E8C2; }

/* Card Noise Overlay */
.card-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: url(#noise);
    opacity: 0.03;
    pointer-events: none;
}

/* ---- Card Content ---- */
.card-content {
    position: relative;
    z-index: 1;
}

.card-heading {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #1A1A28;
    margin-bottom: 24px;
}

.card-body {
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.65;
    color: #2A2A3C;
    margin-bottom: 16px;
}

.card-body:last-child {
    margin-bottom: 0;
}

/* ---- Counter Tiles ---- */
.counter-tile {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    background-color: #FAFAF8;
    background-image:
        radial-gradient(ellipse 60px 30px at 25% 35%, #C4B8A8 0%, transparent 70%),
        radial-gradient(ellipse 40px 50px at 70% 65%, #D8D0C4 0%, transparent 60%),
        repeating-linear-gradient(
            25deg,
            transparent 0px,
            transparent 15px,
            rgba(196, 184, 168, 0.12) 15px,
            rgba(196, 184, 168, 0.12) 16px
        ),
        repeating-linear-gradient(
            145deg,
            transparent 0px,
            transparent 20px,
            rgba(216, 208, 196, 0.08) 20px,
            rgba(216, 208, 196, 0.08) 21px
        );
}

.counter {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: 96px;
    line-height: 1;
    color: #2A2A3C;
    display: flex;
    letter-spacing: -0.02em;
}

.counter .digit {
    display: inline-block;
    width: 0.6em;
    text-align: center;
    transition: color 0.3s ease;
}

/* Counter flash effect for card 6 */
.counter-flash.active .digit {
    animation: counterFlash 0.3s ease 1.3s;
}

@keyframes counterFlash {
    0%, 100% { color: #2A2A3C; }
    50% { color: #FF6B6B; }
}

/* ---- Column Fragments (CSS Classical Columns) ---- */
.column-fragment {
    position: absolute;
    top: 20%;
    width: 4px;
    height: 60%;
    background-color: #C4B8A8;
    z-index: 1;
}

.column-fragment::before,
.column-fragment::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
}

/* Capital (top) */
.column-fragment::before {
    top: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #C4B8A8;
}

/* Base (bottom) */
.column-fragment::after {
    bottom: -10px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 10px solid #C4B8A8;
}

.column-fragment-left {
    left: 16px;
}

.column-fragment-right {
    right: 16px;
}

/* ---- Card 2: CSS Columns Display ---- */
.columns-display {
    display: flex;
    gap: 32px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 24px;
}

.css-column {
    width: 4px;
    height: 120px;
    background-color: #C4B8A8;
    position: relative;
}

.css-column::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #C4B8A8;
}

.css-column::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 8px solid #C4B8A8;
}

/* ---- Card 3: Acanthus Pattern ---- */
.acanthus-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle 30px at 20% 25%, rgba(196, 184, 168, 0.05) 0%, transparent 100%),
        radial-gradient(circle 25px at 25% 30%, rgba(196, 184, 168, 0.05) 0%, transparent 100%),
        radial-gradient(circle 30px at 50% 50%, rgba(196, 184, 168, 0.05) 0%, transparent 100%),
        radial-gradient(circle 25px at 55% 45%, rgba(196, 184, 168, 0.05) 0%, transparent 100%),
        radial-gradient(circle 30px at 80% 70%, rgba(196, 184, 168, 0.05) 0%, transparent 100%),
        radial-gradient(circle 25px at 75% 75%, rgba(196, 184, 168, 0.05) 0%, transparent 100%),
        radial-gradient(circle 20px at 35% 65%, rgba(196, 184, 168, 0.05) 0%, transparent 100%),
        radial-gradient(circle 20px at 65% 20%, rgba(196, 184, 168, 0.05) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* ---- Card 3: Waveform ---- */
.waveform {
    margin-top: 40px;
    height: 40px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.waveform::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 8px,
            #C4B8A8 8px,
            #C4B8A8 10px
        );
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0,20 Q10,5 20,20 Q30,35 40,20 Q50,5 60,20 Q70,35 80,20 Q90,5 100,20 Q110,35 120,20 Q130,5 140,20 Q150,35 160,20 Q170,5 180,20 Q190,35 200,20 L200,40 L0,40Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0,20 Q10,5 20,20 Q30,35 40,20 Q50,5 60,20 Q70,35 80,20 Q90,5 100,20 Q110,35 120,20 Q130,5 140,20 Q150,35 160,20 Q170,5 180,20 Q190,35 200,20 L200,40 L0,40Z' fill='black'/%3E%3C/svg%3E");
    mask-size: 200px 40px;
    -webkit-mask-size: 200px 40px;
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
}

/* ---- Card 4: Mini Tiles ---- */
.mini-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
}

.mini-tile {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Serif Display', serif;
    font-size: 11px;
    color: #2A2A3C;
    background-color: #FAFAF8;
    background-image:
        radial-gradient(ellipse 15px 8px at 30% 40%, #C4B8A8 0%, transparent 70%),
        repeating-linear-gradient(
            30deg,
            transparent 0px,
            transparent 5px,
            rgba(196, 184, 168, 0.1) 5px,
            rgba(196, 184, 168, 0.1) 6px
        );
}

/* ---- Card 5: Pediment Triangle ---- */
.pediment {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #C4B8A8;
    margin: 0 auto 16px;
}

/* ---- Card 6: Short card ---- */
.card-6 {
    min-height: auto;
    padding: 48px;
}

/* ---- Card 7: Blinking Ellipsis ---- */
.blink-ellipsis {
    animation: blinkEllipsis 2s infinite;
}

@keyframes blinkEllipsis {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Color reference in text */
.color-ref {
    font-family: 'Archivo', sans-serif;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 2px 6px;
}

/* ---- Footer Marble Slab ---- */
.footer-slab {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.footer-marble {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FAFAF8;
    background-image:
        radial-gradient(ellipse 200px 80px at 25% 40%, #C4B8A8 0%, transparent 70%),
        radial-gradient(ellipse 150px 100px at 65% 60%, #D8D0C4 0%, transparent 60%),
        radial-gradient(ellipse 100px 150px at 45% 75%, #C4B8A8 0%, transparent 65%),
        repeating-linear-gradient(
            42deg,
            transparent 0px,
            transparent 30px,
            rgba(196, 184, 168, 0.1) 30px,
            rgba(196, 184, 168, 0.1) 31px
        ),
        repeating-linear-gradient(
            138deg,
            transparent 0px,
            transparent 45px,
            rgba(216, 208, 196, 0.08) 45px,
            rgba(216, 208, 196, 0.08) 46px
        );
}

.footer-text {
    position: relative;
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #8A8494;
    z-index: 1;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .column {
        padding: 0 16px;
    }

    .card {
        padding: 40px 24px;
    }

    .card-6 {
        padding: 32px 24px;
    }

    .counter {
        font-size: 72px;
    }

    .counter-tile {
        width: 96px;
        height: 96px;
    }

    .card-heading {
        font-size: clamp(32px, 6vw, 56px);
    }

    .nav-pill {
        width: 200px;
    }

    .column-fragment-left {
        left: 8px;
    }

    .column-fragment-right {
        right: 8px;
    }
}