/*
    Version: V1
    Project: Sigonggan
    License: © 2026 Damso. All Rights Reserved.
*/

:root {
    --damso-color-primary: #2D2350;
    --damso-color-secondary: #5C527F;
    --damso-color-accent: #D63484;
    --damso-color-bg: #F4F3F8;
    --damso-color-surface: #FFFFFF;
    --damso-color-text: #2B2C34;
    --damso-card-border: #E2DFED;

    /* UI Overrides */
    --damso-nav-bg-image: linear-gradient(135deg, rgba(244, 243, 248, 0.95), rgba(255, 255, 255, 0.95));
    --damso-card-color-bg: #FFFFFF;
    --damso-btn-color-bg: linear-gradient(45deg, #D63484, #FF6B6B);
    --damso-btn-color-bg-hover: linear-gradient(45deg, #FF6B6B, #D63484);

    --damso-lang-color-bg: #E8E5F0;
    --damso-lang-color-bg-hover: #D9D4E5;
    --damso-lang-color-bg-active: #2D2350;

    --damso-heading-color-text: #2D2350;
    --damso-text-color-secondary: #5C527F;
    --damso-text-color-accent: #D63484;

    --damso-nav-color-text: #2D2350;
    --damso-lang-color-text: #5C527F;
    --damso-lang-color-text-active: #FFFFFF;
    --damso-btn-color-text: #FFFFFF;
    --damso-section-title-color-icon: #D63484;
    --damso-footer-color-text: #888888;
    --damso-footer-color-bg: #1A202C;

    --damso-card-color-border: #E2DFED;
    --damso-nav-color-border-bottom: rgba(45, 35, 80, 0.1);
    --damso-section-heading-color-underline: #D63484;
    --damso-radius: 12px;

    --damso-card-premium-border: linear-gradient(135deg, #FFD700, #D63484, #7928CA);
    --damso-card-premium-badge-bg: linear-gradient(45deg, #7928CA, #FF0080);
    --damso-card-border-hover: var(--damso-color-accent);

    --particle-color: #D63484;
    --particle-link-color: rgba(214, 52, 132, 0.3);
}

[data-theme="dark"] {
    --damso-color-primary: #FFFFFF;
    --damso-color-secondary: #CBD5E0;
    --damso-color-accent: #FF6B6B;
    --damso-color-bg: #0F1117;
    --damso-color-surface: #1E2330;
    --damso-color-text: #E2E8F0;

    --damso-nav-color-text: #f0e0e7;
    --damso-heading-color-text: #FFFFFF;
    --damso-text-color-secondary: #A0AEC0;

    --damso-nav-bg-image: linear-gradient(135deg, rgba(15, 17, 23, 0.95), rgba(30, 35, 48, 0.95));
    --damso-card-color-bg: #1E2330;
    --damso-card-color-border: rgba(255, 255, 255, 0.16);

    --damso-btn-color-bg: linear-gradient(45deg, #D63484, #FF6B6B);
    --damso-btn-color-bg-hover: linear-gradient(45deg, #FF6B6B, #D63484);
    --damso-btn-color-text: #FFFFFF;

    --damso-footer-color-bg: #0A0C10;

    --damso-card-border-hover: #FF6B6B;
}

/* Button UI Styling */
.damso-btn, .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    border-radius: var(--damso-radius);
    background: var(--damso-btn-color-bg);
    color: var(--damso-btn-color-text) !important;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.damso-btn:hover, .cta-button:hover {
    background: var(--damso-btn-color-bg-hover);
    transform: translateY(-2px);
    color: var(--damso-btn-color-text) !important;
}

.damso-button-group {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.damso-button-group--lg {
    margin-top: 50px;
}

/* Brand Borders */
.google-border, .cloudflare-border {
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    position: relative;
}
.google-border {
    background-image: linear-gradient(var(--damso-card-color-bg), var(--damso-card-color-bg)),
                      linear-gradient(to right, #4285F4, #DB4437, #F4B400, #0F9D58);
}
.cloudflare-border {
    background-image: linear-gradient(var(--damso-card-color-bg), var(--damso-card-color-bg)),
                      linear-gradient(to right, #F38020, #F6821F, #FAAE40, #FDB913);
}

.brand-logo {
    font-weight: lighter;
    font-size: clamp(3.8rem, 2.8rem + 4.5vw, 6.5rem);
}

.brand-slogan {
    font-weight: normal;
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
    letter-spacing: 1em;
    margin-left: 1em;
}

.product-card {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-title-container {
    margin-bottom: 15px;
}

.product-title-container .damso-card__title {
    margin: 0;
    font-size: 1.8rem;
    color: var(--damso-heading-color-text);
}

.ui-card-subtitle {
    font-size: 1rem;
    color: var(--damso-text-color-secondary);
    margin: 5px 0 0 0;
    font-weight: 700;
}

.product-specs-table {
    padding-top: 25px;
    flex-grow: 1;
    margin-bottom: 30px;
}

.damso-faq-item a {
    color: var(--damso-color-accent);
    text-decoration: underline;
}

.spec-category {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--damso-color-accent);
    text-align: left;
    margin-top: 20px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--damso-card-color-border);
}

.spec-category:first-child {
    margin-top: 0;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    padding-block: 9px;
    text-align: left;
    gap: 12px;
}

.spec-label {
    color: var(--damso-color-text);
    font-weight: 500;
    flex-shrink: 0;
    min-width: 130px;
}

.spec-value {
    color: var(--damso-color-secondary);
    font-weight: 600;
    text-align: right;
}

.spec-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    margin-left: 4px;
    border-radius: 4px;
    background-color: var(--damso-color-surface);
    color: var(--damso-color-text);
    vertical-align: middle;
}




/* Wave Canvas Styling */
.canvas-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    z-index: 4;
    pointer-events: none;
}

/* Premium Product Card Row & Layout */
.product-row--premium {
    margin-top: 24px;
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

.damso-card--premium {
    position: relative;
    border: 2px solid transparent;
    background-image: linear-gradient(var(--damso-card-color-bg), var(--damso-card-color-bg)), var(--damso-card-premium-border);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.damso-card--premium:hover {
    transform: translateY(-4px);
}

.damso-card__tag--premium {
    background: var(--damso-card-premium-badge-bg);
    color: var(--damso-btn-color-text);
    font-weight: 700;
}

.damso-card__body .product-specs-table {
    padding-top: 0;
    margin-bottom: 16px;
}

/* Card Surface & Interactive Gallery Enhancements */
.damso-card {
    border: 1px solid var(--damso-card-color-border);
    background-color: var(--damso-card-color-bg);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.gallery-link {
    display: block;
    text-decoration: none;
}

.gallery-link .damso-card:hover {
    transform: translateY(-4px);
    border-color: var(--damso-card-border-hover);
}

/* Spec Small Notice */
.spec-notice {
    font-size: 0.8rem;
    color: var(--damso-text-color-secondary);
    margin: 4px 0 16px 0;
    text-align: left;
    opacity: 0.85;
}

/* Dedicated AI Token Card Layout */
.product-row--ai {
    margin-top: 24px;
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

.damso-card--ai {
    position: relative;
    border: 2px solid transparent;
    background-image: linear-gradient(var(--damso-card-color-bg), var(--damso-card-color-bg)), linear-gradient(135deg, #00C6FF, #0072FF, #7928CA);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.damso-card--ai:hover {
    transform: translateY(-4px);
}

.damso-card__tag--ai {
    background: linear-gradient(45deg, #0072FF, #00C6FF);
    color: #FFFFFF;
    font-weight: 700;
}

/* Token Badge Styling */
.token-badge-container {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.token-badge {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #FFFFFF;
    background: linear-gradient(135deg, #0072FF, #7928CA);
    border-radius: 20px;
    letter-spacing: 0.3px;
}



/* Stacked Layout for AI Card (Header Top, Body Full Width Bottom) */
.product-card--stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.product-card__header--stacked {
    text-align: left;
    margin-bottom: 24px;
    width: 100%;
}

.ai-token-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.ai-token-box .spec-label {
    min-width: auto;
}

@media (max-width: 860px) {
    .ai-token-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}