/* ============================================
   SINOCLOUD.IT - MAIN STYLESHEET V3
   Bundle Import - Premium & High-Tech Design
   ============================================ */

/* Design System Foundation */
@import url('design-tokens.css');
@import url('base.css');

/* Layouts */
@import url('layout.css');

/* Components */
@import url('components.css');

/* Features */
@import url('hero.css');
@import url('animations.css');

/* Widgets */
@import url('telegram-widget.css');

/* ============================================
   GOOGLE FONTS - Inter & Outfit
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

/* ============================================
   PAGE-SPECIFIC OVERRIDES
   ============================================ */

/* Page Title (H1 visually hidden for SEO) */
.page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 767px) {

    /* Mobile-specific adjustments */
    .hero__visual {
        order: -1;
    }

    .hero__title {
        font-size: var(--text-3xl);
    }

    .section-header__title {
        font-size: var(--text-2xl);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {

    /* Tablet adjustments */
    .hero__title {
        font-size: var(--text-4xl);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

    .header,
    .footer,
    .telegram-fab,
    .telegram-modal,
    .cookie-banner,
    .theme-toggle,
    .mobile-menu-toggle {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    main {
        padding-top: 0;
    }

    a {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}