.grid-bg{
    position: fixed;
    inset: 0;
    z-index: -1;
    background: transparent;
}

/* ===========================================
   VARIABLES
   =========================================== */
:root {
    --bg-deep: #050505;
    --bg-glass: rgba(255, 255, 255, 0.02);
    --border-mirror: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(255, 255, 255, 0.3);
    --text-main: #FFFFFF;
    --text-muted: #888888;
    --font-serif: 'Cinzel', serif;
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* ===========================================
   RESET & BASE
   =========================================== */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-deep);
    color: var(--text-main);
    font-family: var(--font-sans);
    overflow-x: hidden;
    min-height: 100vh;
    line-height: 1.6;
}

img {
    pointer-events: none;
    -webkit-user-drag: none;
    max-width: 100%;
}

/* ===========================================
   AMBIENT & GRID BACKGROUND
   =========================================== */
.ambient-light {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; 
    z-index: 0;
    background: radial-gradient(circle at 50% 50%, rgba(252, 213, 136, 0.02) 0%, transparent 50%);
    transition: background 0.15s ease;
}


.grid-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* subtle noise layer */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27120%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%271%200%200%200%200%20%200%201%200%200%200%20%200%200%201%200%200%20%200%200%200%20.45%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27120%27%20height%3D%27120%27%20filter%3D%27url%28%2523n%29%27%20opacity%3D%27.20%27/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.55;
    mix-blend-mode: overlay;
}


@keyframes bgRipple {
    0%   { transform: translate3d(0,0,0) rotate(6deg); }
    100% { transform: translate3d(-120px, 80px, 0) rotate(6deg); }
}

/* Java Icon 1 - Top Left */
.grid-bg::before {
    content: '';
    position: absolute;
    top: 8%;
    left: 5%;
    width: 100px;
    height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='rgba(255,255,255,0.025)' d='M52.581 67.817s-3.284 1.911 2.341 2.557c6.814.778 10.297.666 17.805-.753 0 0 1.979 1.237 4.735 2.309-16.836 7.213-38.104-.418-24.881-4.113zM50.522 58.402s-3.684 2.729 1.945 3.311c7.28.751 13.027.813 22.979-1.103 0 0 1.373 1.396 3.536 2.157-20.352 5.954-43.021.469-28.46-4.365z'/%3E%3Cpath fill='rgba(255,255,255,0.025)' d='M67.865 42.431c4.151 4.778-1.088 9.074-1.088 9.074s10.533-5.437 5.696-12.248c-4.519-6.349-7.982-9.502 10.771-20.378.001 0-29.438 7.35-15.379 23.552z'/%3E%3Cpath fill='rgba(255,255,255,0.025)' d='M90.132 74.781s2.432 2.005-2.678 3.555c-9.716 2.943-40.444 3.831-48.979.117-3.066-1.335 2.687-3.187 4.496-3.576 1.887-.409 2.965-.334 2.965-.334-3.412-2.403-22.055 4.719-9.469 6.762 34.324 5.563 62.567-2.506 53.665-6.524z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
    transform: rotate(-12deg);
}

/* PHP Icon 1 - Bottom Right */

/* Python Icon - Right Side */
.ambient-light::before {
    content: '';
    position: fixed;
    top: 45%;
    right: 3%;
    width: 75px;
    height: 75px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='rgba(255,255,255,0.02)' d='M49.33 62h29.159C86.606 62 93 55.132 93 46.981V19.183c0-7.912-6.632-13.856-14.555-15.164-5.014-.835-10.195-1.215-15.187-1.191-4.99.023-9.612.448-13.805 1.191C37.098 6.188 35 10.758 35 19.183V30h29v4H23.776c-8.484 0-15.914 5.108-18.237 14.811-2.681 11.12-2.8 17.919 0 29.53C7.614 86.983 12.569 93 21.054 93H31V79.952C31 70.315 39.428 62 49.33 62zm-1.838-39.11c-3.026 0-5.478-2.479-5.478-5.545 0-3.079 2.451-5.581 5.478-5.581 3.015 0 5.479 2.502 5.479 5.581-.001 3.066-2.465 5.545-5.479 5.545zm74.789 25.921C120.183 40.363 116.178 34 107.682 34H97v12.981C97 57.031 88.206 65 78.489 65H49.33C41.342 65 35 72.326 35 80.326v27.8c0 7.91 6.745 12.564 14.462 14.834 9.242 2.717 17.994 3.208 29.051 0C85.862 120.831 93 116.549 93 108.126V97H64v-4h43.682c8.484 0 11.647-5.776 14.599-14.66 3.047-9.145 2.916-17.799 0-29.529zm-41.955 55.606c3.027 0 5.479 2.479 5.479 5.547 0 3.076-2.451 5.579-5.479 5.579-3.015 0-5.478-2.502-5.478-5.579 0-3.068 2.463-5.547 5.478-5.547z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    transform: rotate(20deg);
}

/* JavaScript Icon - Left Side */
.ambient-light::after {
    content: '';
    position: fixed;
    top: 30%;
    left: 7%;
    width: 70px;
    height: 70px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='rgba(255,255,255,0.025)' d='M2 1v125h125V1H2zm66.119 106.513c-1.845 3.749-5.367 6.212-9.448 7.401-6.271 1.44-12.269.619-16.731-2.059-2.986-1.832-5.318-4.652-6.901-7.901l9.52-5.83c.083.035.333.487.667 1.071 1.214 2.034 2.261 3.474 4.319 4.485 2.022.69 6.461 1.131 8.175-2.427 1.047-1.81.714-7.628.714-14.065C58.433 78.073 58.48 68 58.48 58h11.709c0 11 .06 21.418 0 32.152.025 6.58.596 12.446-2.07 17.361zm48.574-3.308c-4.07 13.922-26.762 14.374-35.83 5.176-1.916-2.165-3.117-3.296-4.26-5.795 4.819-2.772 4.819-2.772 9.508-5.485 2.547 3.915 4.902 6.068 9.139 6.949 5.748.702 11.531-1.273 10.234-7.378-1.333-4.986-11.77-6.199-18.873-10.531-7.211-4.843-8.901-16.611-2.975-23.335 1.975-2.487 5.343-4.343 8.877-5.235l3.688-.477c7.081-.143 11.507 1.727 14.756 5.355.904.916 1.642 1.904 3.022 4.045-3.772 2.404-3.76 2.381-9.163 5.879-1.154-2.486-3.069-4.046-5.093-4.724-3.142-.952-7.104.083-7.926 3.403-.285 1.023-.226 1.975.227 3.665 1.273 2.903 5.545 4.165 9.377 5.926 11.031 4.474 14.756 9.271 15.672 14.981.882 4.916-.213 8.105-.38 8.581z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    transform: rotate(-18deg);
}

/* MySQL Icon - Bottom Left */


/* HTML5 Icon - Top Right */
header::after {
    content: '';
    position: fixed;
    top: 20%;
    right: 15%;
    width: 65px;
    height: 65px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='rgba(255,255,255,0.025)' d='M9.032 2l10.005 112.093 44.896 12.401 45.02-12.387L118.968 2H9.032zm89.126 26.539l-.627 7.172L97.255 39H44.59l1.257 14h50.156l-.336 3.471-3.233 36.119-.238 2.27L64 102.609v.002l-.034.018-28.177-7.423L33.876 74h13.815l.979 10.919L63.957 89H64v-.546l15.355-3.875L80.959 67H33.261l-3.383-38.117L29.549 25h68.939l-.33 3.539z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
    transform: rotate(-10deg);
}

/* CSS3 Icon - Middle Left */
footer::before {
    content: '';
    position: fixed;
    top: 60%;
    left: 3%;
    width: 60px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='rgba(255,255,255,0.025)' d='M8.76 1l10.055 112.883 45.118 12.58 45.244-12.626L119.24 1H8.76zm89.591 25.862l-3.347 37.605.01.203-.014.467v-.004l-2.378 26.294-.262 2.336L64 101.607v.001l-.022.019-28.311-7.888L33.75 72h13.883l.985 11.054 15.386 4.17-.004.008v-.002l15.443-4.229L81.075 65H48.792l-.277-3.043-.631-7.129L47.553 51h34.749l1.264-14H30.64l-.277-3.041-.63-7.131L29.401 23h69.281l-.331 3.862z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
    transform: rotate(25deg);
}

/* Java Icon 2 - Middle */
footer::after {
    content: '';
    position: fixed;
    top: 55%;
    right: 20%;
    width: 80px;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='rgba(255,255,255,0.02)' d='M47.617 98.12s-4.767 2.774 3.397 3.71c9.892 1.13 14.947.968 25.845-1.092 0 0 2.871 1.795 6.873 3.351-24.439 10.47-55.308-.607-36.115-5.969zm-2.988-13.665s-5.348 3.959 2.823 4.805c10.567 1.091 18.91 1.18 33.354-1.6 0 0 1.993 2.025 5.132 3.131-29.542 8.64-62.446.68-41.309-6.336z'/%3E%3Cpath fill='rgba(255,255,255,0.02)' d='M69.802 61.271c6.025 6.935-1.58 13.17-1.58 13.17s15.289-7.891 8.269-17.777c-6.559-9.215-11.587-13.792 15.635-29.58 0 .001-42.731 10.67-22.324 34.187z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
    transform: rotate(-22deg);
}

/* ===========================================
   CONTAINER
   =========================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.container[id] {
    scroll-margin-top: 80px;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* ===========================================
   HEADER
   =========================================== */
header {
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0;
    padding: 1.5rem 3rem;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    z-index: 100;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.02);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-img {
    height: 40px;
    width: auto;
}

.logo {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
}

.logo::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
}

.header-controls {
    display: flex;
    gap: 2rem;
    align-items: center;
}

nav {
    display: flex;
    gap: 0;
}

nav a {
    color: var(--text-muted); 
    text-decoration: none;
    font-family: var(--font-mono); 
    font-size: 0.85rem; 
    text-transform: uppercase;
    margin-left: 2rem; 
    transition: 0.3s;
}

nav a:hover { 
    color: #fff; 
    text-shadow: 0 0 8px rgba(255,255,255,0.5); 
}

.lang-switch {
    display: flex;
    border: 1px solid var(--border-mirror);
    border-radius: 4px;
    overflow: hidden;
}

.lang-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    cursor: pointer;
    transition: 0.3s;
}

.lang-btn:hover { 
    color: #fff; 
}

.lang-btn.active { 
    background: rgba(255,255,255,0.1); 
    color: #fff; 
}

/* ===========================================
   HERO
   =========================================== */
.hero {
    min-height: 100vh;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    text-align: center;
    padding: 0 2rem;
}

.hero-title {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 9vw, 7rem);
    line-height: 0.9;
    background: linear-gradient(180deg, #FFFFFF 0%, #555 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    opacity: 0; 
    animation: fadeIn 1s ease forwards 0.2s;
}

.hero-desc {
    font-family: var(--font-sans);
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 3rem;
    line-height: 1.8;
    font-size: 1.1rem;
    opacity: 0; 
    animation: fadeIn 1s ease forwards 0.4s;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
    from {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* ===========================================
   SECTION TITLE
   =========================================== */
.section-title {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin: 0 0 3rem;
    display: flex; 
    align-items: center; 
    gap: 1rem;
}

.section-title::after { 
    content: ''; 
    height: 1px; 
    flex-grow: 1; 
    background: var(--border-mirror); 
}

/* ===========================================
   STATS SECTION
   =========================================== */
.servers-section {
    padding: 4rem 0;
}

.v3-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 3rem;
    justify-items: center;
}

.v3-item {
    text-align: center;
}

.v3-number {
    font-family: var(--font-serif);
    font-size: 4rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.v3-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ===========================================
   ACCORDION
   =========================================== */
.features-section {
    margin-top: 2rem;
}

.features-list {
    max-width: 100%;
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.accordion-item {
    background: var(--bg-glass);
    border: 1px solid var(--border-mirror);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-item:hover {
    border-color: rgba(255,255,255,0.15);
}

.accordion-header {
    width: 100%;
    padding: 1.5rem 2rem;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.accordion-header:hover {
    background: rgba(255,255,255,0.02);
}

.accordion-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.accordion-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--text-muted);
}

.accordion-arrow {
    width: 24px;
    height: 24px;
    fill: var(--text-muted);
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-item.active .accordion-content {
    max-height: 2000px;
}

.accordion-body {
    padding: 0 2rem 2rem 2rem;
}

.accordion-divider {
    height: 1px;
    background: var(--border-mirror);
    margin-bottom: 1.5rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.feature {
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.feature:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
    color: var(--text-main);
}

/* ===========================================
   INFO BOX
   =========================================== */
.info-box {
    background: var(--bg-glass);
    border: 1px solid var(--border-mirror);
    border-radius: 8px;
    padding: 2rem;
    margin-top: 2rem;
}

.info-box h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.info-box p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.info-box p:last-child {
    margin-bottom: 0;
}

.info-box.security-highlight {
    border-color: rgba(255,100,100,0.3);
    background: rgba(255,100,100,0.03);
}

.benefits-list {
    list-style: none;
    padding: 0;
}

.benefits-list li {
    padding: 0.75rem 0;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-mirror);
    position: relative;
    padding-left: 1.5rem;
}

.benefits-list li:last-child {
    border-bottom: none;
}

.benefits-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--text-main);
}

.benefits-list li.highlight {
    color: var(--text-main);
    font-weight: 500;
    padding: 1rem 0 1rem 1.5rem;
}

.notice {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-mirror);
}

/* ===========================================
   PRICING GRID
   =========================================== */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.price-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-mirror);
    border-radius: 8px;
    padding: 2rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.price-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-5px);
}

.price-card.featured {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.04);
}

.price-value {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.period {
    font-size: 1rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.price-label {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-main);
    margin-bottom: 1rem;
}

.price-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    flex-grow: 1;
}

/* ===========================================
   CAROUSEL
   =========================================== */
/* ===========================================
   SECONDARY TITLES / SUBTITLES
   =========================================== */
.portfolio-subtitle,
.scripts-intro{
    text-align: center;
    margin: 0 auto 2.2rem auto;
    max-width: 880px;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.70);
    position: relative;
    line-height: 1.6;
}

.portfolio-subtitle::before,
.scripts-intro::before{
    content: "";
    display: block;
    width: 54px;
    height: 1px;
    margin: 0 auto 0.9rem auto;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30), transparent);
}

.portfolio-subtitle::after,
.scripts-intro::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 320px;
    height: 18px;
    background: radial-gradient(circle at 50% 50%, rgba(252,213,136,0.10), transparent 60%);
    filter: blur(6px);
    pointer-events: none;
}


.carousel-container {
    position: relative;
    margin: 2rem 0;
    padding: 0 70px;
}

.carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 1rem 0;
    padding-right: 24px; /* Отступ справа чтобы не обрезать последний элемент */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(252, 213, 136, 0.15);
    border: 1px solid rgba(252, 213, 136, 0.3);
    color: rgba(252, 213, 136, 0.9);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 2rem;
    z-index: 10;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.carousel-btn:hover {
    background: rgba(252, 213, 136, 0.3);
    border-color: rgba(252, 213, 136, 0.5);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(252, 213, 136, 0.3);
}

.carousel-btn.prev {
    left: 0;
}

.carousel-btn.next {
    right: 0;
}

.script-card {
    min-width: 220px;
    max-width: 220px;
    background: var(--bg-glass);
    border: 1px solid var(--border-mirror);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.script-card:hover {
    border-color: rgba(252, 213, 136, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(252, 213, 136, 0.1);
}

.script-card h4 {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    margin: 0;
    color: var(--text-main);
    flex: 1;
}

.script-info {
    flex-shrink: 0;
    margin-left: 0.5rem;
    color: rgba(252, 213, 136, 0.6);
    cursor: help;
    transition: all 0.3s ease;
}

.script-info:hover {
    color: rgba(252, 213, 136, 1);
    transform: scale(1.2);
}

.script-info svg {
    display: block;
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(252, 213, 136, 0.15);
    border: 1px solid rgba(252, 213, 136, 0.3);
    border-radius: 50%;
    color: rgba(252, 213, 136, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    background: rgba(252, 213, 136, 0.3);
    border-color: rgba(252, 213, 136, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(252, 213, 136, 0.3);
}

.script-categories {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Portfolio Carousel */
.portfolio-carousel .project-item {
    min-width: 200px;
    max-width: 200px;
    height: 120px;
    background: var(--bg-glass);
    border: 1px solid var(--border-mirror);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.portfolio-carousel .project-item:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-5px);
}

.portfolio-carousel img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(0.8);
    transition: filter 0.3s ease;
}

.portfolio-carousel .project-item:hover img {
    filter: brightness(1);
}

/* ===========================================
   ABOUT GRID
   =========================================== */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* ===========================================
   CONTACT GRID
   =========================================== */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.contact-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-mirror);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.contact-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-5px);
}

.contact-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.contact-icon svg {
    width: 48px;
    height: 48px;
    transition: all 0.3s ease;
}

.contact-card:hover .contact-icon svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(252, 213, 136, 0.5));
}

.contact-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.contact-link {
    color: var(--text-main);
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.contact-link:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* ===========================================
   FOOTER
   =========================================== */
footer {
    padding: 3rem 2rem 2rem;
    text-align: center;
    border-top: 1px solid var(--border-mirror);
    margin-top: 6rem;
}

/* ===========================================
   FOOTER
   =========================================== */
footer {
    margin-top: 3rem;
    padding: 2rem 20px 2rem 20px;
    background: rgba(255,255,255,0.02);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-text {
    color: var(--text-muted);
    margin: 1.5rem auto 0.8rem auto;
    text-align: center;
    max-width: 900px;
    font-size: 0.9rem;
}

.copyright {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    opacity: 0.7;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1024px) {
    header {
        padding: 1rem 2rem;
    }
    
    .hero-title {
        font-size: 4rem;
    }
    
    .v3-stats {
        gap: 3rem;
    }
    
    .v3-number {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    nav {
        display: none;
    }
    
    header {
        padding: 1rem 1.5rem;
    }
    
    .logo {
        font-size: 1.2rem;
    }
    
    .logo-img {
        height: 30px;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-desc {
        font-size: 1rem;
    }
    
    .container {
        padding: 0 1.5rem;
    }
    
    .container[id] {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    .v3-stats {
        gap: 2rem;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .v3-item {
        text-align: center;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .carousel-container {
        padding: 0 60px;
    }
    
    .carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 1.8rem;
    }
    
    .script-card {
        min-width: 280px;
        max-width: 280px;
    }
    
    .portfolio-carousel .project-item {
        min-width: 150px;
        max-width: 150px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .section-title {
        font-size: 0.7rem;
    }
    
    .v3-number {
        font-size: 2.5rem;
    }
    
    .accordion-header {
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .accordion-body {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }
    
    .info-box {
        padding: 1.5rem;
    }
    
    .price-card {
        padding: 1.5rem;
    }
}


/* ===========================================
   TECH SCATTER BACKGROUND ICONS (SPREAD OUT + NO OVERLAP)
   =========================================== */

.tech-scatter{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.tech-icon{
    position: absolute;
    width: clamp(52px, 6vw, 84px);
    height: clamp(52px, 6vw, 84px);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.16;
    filter: blur(0.2px);
    transform: rotate(-10deg);
    mix-blend-mode: screen;
    will-change: transform, top, left;
    transition: transform .25s ease;
}

.tech-icon.d2{
    width: clamp(44px, 5vw, 68px);
    height: clamp(44px, 5vw, 68px);
    opacity: 0.13;
    transform: rotate(12deg);
}

/* Base icon images (data-uris defined below in CSS) */

/* Base icon images */
.tech-icon.java { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='rgba(255,255,255,0.025)' d='M52.581 67.817s-3.284 1.911 2.341 2.557c6.814.778 10.297.666 17.805-.753 0 0 1.979 1.237 4.735 2.309-16.836 7.213-38.104-.418-24.881-4.113zM50.522 58.402s-3.684 2.729 1.945 3.311c7.28.751 13.027.813 22.979-1.103 0 0 1.373 1.396 3.536 2.157-20.352 5.954-43.021.469-28.46-4.365z'/%3E%3Cpath fill='rgba(255,255,255,0.025)' d='M67.865 42.431c4.151 4.778-1.088 9.074-1.088 9.074s10.533-5.437 5.696-12.248c-4.519-6.349-7.982-9.502 10.771-20.378.001 0-29.438 7.35-15.379 23.552z'/%3E%3Cpath fill='rgba(255,255,255,0.025)' d='M90.132 74.781s2.432 2.005-2.678 3.555c-9.716 2.943-40.444 3.831-48.979.117-3.066-1.335 2.687-3.187 4.496-3.576 1.887-.409 2.965-.334 2.965-.334-3.412-2.403-22.055 4.719-9.469 6.762 34.324 5.563 62.567-2.506 53.665-6.524z'/%3E%3C/svg%3E"); }
.tech-icon.php { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='rgba(255,255,255,0.025)' d='M64 33.039c-33.74 0-61.094 13.862-61.094 30.961s27.354 30.961 61.094 30.961 61.094-13.862 61.094-30.961-27.354-30.961-61.094-30.961zm-15.897 36.993c-1.458 1.364-3.077 1.927-4.86 2.507-1.783.581-4.052.461-6.811.461h-6.253l-1.733 10h-7.301l6.515-34h14.04c4.224 0 7.305 1.215 9.242 3.432 1.937 2.217 2.519 5.364 1.747 9.337-.319 1.637-.856 3.159-1.614 4.515-.759 1.357-1.75 2.624-2.972 3.748zm21.311 2.968l2.881-14.42c.328-1.688.208-2.942-.361-3.555-.57-.614-1.782-1.025-3.635-1.025h-5.79l-3.731 19h-7.244l6.515-33h7.244l-1.732 9h6.453c4.061 0 6.861.815 8.402 2.231s2.003 3.356 1.387 6.528l-3.031 15.241h-7.358zm40.259-11.178c-.318 1.637-.856 3.133-1.613 4.488-.758 1.357-1.748 2.598-2.971 3.722-1.458 1.364-3.078 1.927-4.86 2.507-1.782.581-4.053.461-6.812.461h-6.253l-1.732 10h-7.301l6.514-34h14.041c4.224 0 7.305 1.215 9.241 3.432 1.935 2.217 2.518 5.418 1.746 9.39zM95.919 54h-5.001l-2.727 14h4.442c2.942 0 5.136-.29 6.576-1.4 1.442-1.108 2.413-2.828 2.918-5.421.484-2.491.264-4.434-.66-5.458-.925-1.024-2.774-1.721-5.548-1.721zM38.934 54h-5.002l-2.727 14h4.441c2.943 0 5.136-.29 6.577-1.4 1.441-1.108 2.413-2.828 2.917-5.421.484-2.491.264-4.434-.66-5.458s-2.772-1.721-5.546-1.721z'/%3E%3C/svg%3E"); }
.tech-icon.python { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20128%20128%27%3E%3Cpath%20fill%3D%27rgba%28255%2C255%2C255%2C0.025%29%27%20d%3D%27M63%2014c-22%200-20%2010-20%2010v10h40V25s2-11-20-11zm-12%207a4%204%200%201%201%200%208%204%204%200%200%201%200-8z%27/%3E%3Cpath%20fill%3D%27rgba%28255%2C255%2C255%2C0.025%29%27%20d%3D%27M65%20114c22%200%2020-10%2020-10V94H45v10s-2%2010%2020%2010zm12-7a4%204%200%201%201%200-8%204%204%200%200%201%200%208z%27/%3E%3Cpath%20fill%3D%27rgba%28255%2C255%2C255%2C0.02%29%27%20d%3D%27M45%2044c-20%200-18%2014-18%2014v16s-1%2014%2018%2014h38c20%200%2018-14%2018-14V58s2-14-18-14H45z%27/%3E%3C/svg%3E"); }
.tech-icon.js { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20128%20128%27%3E%3Cpath%20fill%3D%27rgba%28255%2C255%2C255%2C0.02%29%27%20d%3D%27M20%2020h88v88H20z%27/%3E%3Cpath%20fill%3D%27rgba%28255%2C255%2C255%2C0.04%29%27%20d%3D%27M52%2092c0%2010-6%2016-16%2016-6%200-10-2-12-5l6-8c2%202%203%203%206%203%203%200%205-2%205-6V52h11v40zm22%2016c-10%200-16-5-19-11l10-6c2%204%204%207%209%207%204%200%207-2%207-5%200-4-3-5-8-7l-3-1c-9-4-15-9-15-19%200-9%207-16%2018-16%208%200%2013%203%2017%2010l-9%206c-2-4-4-5-8-5-3%200-5%202-5%205%200%203%202%205%207%207l3%201c11%205%2017%209%2017%2020%200%2011-9%2017-21%2017z%27/%3E%3C/svg%3E"); }
.tech-icon.mysql { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20128%20128%27%3E%3Cpath%20fill%3D%27rgba%28255%2C255%2C255%2C0.025%29%27%20d%3D%27M22%2088c8-28%2022-46%2042-54%2012-5%2026-6%2042-2-12%203-22%208-30%2015-9%208-16%2018-22%2032-7%2015-14%2020-32%209z%27/%3E%3Cpath%20fill%3D%27rgba%28255%2C255%2C255%2C0.02%29%27%20d%3D%27M46%2092c-6%2012-10%2018-10%2018h12l7-14%207%2014h12S70%2099%2066%2092c-5%203-10%204-20%200z%27/%3E%3C/svg%3E"); }
.tech-icon.linux { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20128%20128%27%3E%3Cpath%20fill%3D%27rgba%28255%2C255%2C255%2C0.02%29%27%20d%3D%27M64%2018c-14%200-22%2018-22%2034%200%2010-8%2014-8%2028%200%2018%2014%2030%2030%2030s30-12%2030-30c0-14-8-18-8-28%200-16-8-34-22-34z%27/%3E%3Cpath%20fill%3D%27rgba%28255%2C255%2C255%2C0.035%29%27%20d%3D%27M52%2056a6%206%200%201%200%200.01%200zM76%2056a6%206%200%201%200%200.01%200z%27/%3E%3C/svg%3E"); }
.tech-icon.docker { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20128%20128%27%3E%3Cpath%20fill%3D%27rgba%28255%2C255%2C255%2C0.02%29%27%20d%3D%27M20%2072h10V60H20v12zm14%200h10V60H34v12zm14%200h10V60H48v12zm14%200h10V60H62v12zm14%200h10V60H76v12zm14%200h10V60H90v12z%27/%3E%3Cpath%20fill%3D%27rgba%28255%2C255%2C255%2C0.025%29%27%20d%3D%27M24%2078c2%2020%2018%2032%2040%2032%2024%200%2042-14%2046-34%206%200%2010-4%2012-10-6-2-10-2-14%202-2-4-6-8-10-10-2%208-2%2014%202%2020-4%2012-16%2022-34%2022-16%200-28-8-32-22H24z%27/%3E%3C/svg%3E"); }
.tech-icon.nginx { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20128%20128%27%3E%3Cpath%20fill%3D%27rgba%28255%2C255%2C255%2C0.02%29%27%20d%3D%27M64%2012l46%2026v52l-46%2026-46-26V38l46-26z%27/%3E%3Cpath%20fill%3D%27rgba%28255%2C255%2C255%2C0.035%29%27%20d%3D%27M46%2086V42h10l16%2022V42h10v44H72L56%2064v22H46z%27/%3E%3C/svg%3E"); }

/* Positions (include center area) */
.tech-icon.php { bottom: 12%; right: 8%; }

/* Duplicates spread (middle-heavy) */
/* Global dim */
.tech-icon { opacity: 0.9; }
.tech-icon::after { content: ""; }


/* ===========================================
   PARTNERS (в футере)
   =========================================== */
.partners{
    margin: 2rem auto 1.5rem auto;
    max-width: 1100px;
    padding: 0 20px;
}
.partners h3.section-title{
    font-size: 1.3rem;
    margin-bottom: 12px;
}
.partners-note{
    text-align: center;
    max-width: 820px;
    margin: 0.5rem auto 1.2rem auto;
    color: rgba(255,255,255,0.65);
    font-size: 0.9rem;
    line-height: 1.5;
}
.partners-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 900px){
    .partners-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
    .partners-grid{ grid-template-columns: 1fr; }
}
.partner-card{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
    backdrop-filter: blur(8px);
}
.partner-card:hover{
    transform: translateY(-2px);
    border-color: rgba(252,213,136,0.22);
    background: rgba(255,255,255,0.055);
}
.partner-name{
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.92);
    font-size: 0.95rem;
}
.partner-desc{
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    line-height: 1.4;
}
.partner-card.tg{
    border-color: rgba(252,213,136,0.25);
    background: rgba(252,213,136,0.06);
}


/* ===========================================
   BACKGROUND SILHOUETTES (Lineage2-like architecture)
   =========================================== */
@media (max-width: 900px){
    }

/* ===========================================
   GLASS / FROSTED BACKGROUND SYSTEM
   =========================================== */
body {
    background:
        radial-gradient(1200px 800px at 20% 20%, rgba(255,255,255,0.06), transparent 60%),
        radial-gradient(1000px 700px at 80% 30%, rgba(120,180,255,0.06), transparent 60%),
        radial-gradient(900px 600px at 50% 85%, rgba(180,120,255,0.05), transparent 65%),
        var(--bg-deep);
}

body::before{
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.8%27%20numOctaves%3D%272%27/%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%271%200%200%200%200%20%200%201%200%200%200%20%200%200%201%200%200%20%200%200%200%20.35%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%2523n%29%27%20opacity%3D%27.25%27/%3E%3C/svg%3E");
    background-size: 220px 220px;
    opacity: 0.6;
    mix-blend-mode: overlay;
    z-index: -2;
}

/* Glass cards */
.glass,
.info-box,
.service-card,
.portfolio-card,
.partners-card {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.03)
    );
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    box-shadow:
        0 8px 24px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Secondary subtitles – elegant & restrained */
.portfolio-subtitle,
.scripts-intro {
    font-size: 0.85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-top: 12px;
    position: relative;
}

.portfolio-subtitle::after,
.scripts-intro::after {
    content: "";
    display: block;
    width: 42px;
    height: 1px;
    margin-top: 10px;
    background: linear-gradient(90deg, rgba(255,255,255,0.6), transparent);
}


/* ===========================================
   LAYOUT RHYTHM FIXES
   =========================================== */
.container{
    margin: 48px auto;
}
.section-title{
    margin-bottom: 28px;
}
.features-section{
    margin-top: 18px;
}
.pricing-grid{
    gap: 18px;
}
.price-card{
    transition: transform .25s ease, box-shadow .25s ease;
}
.price-card:hover{
    transform: translateY(-2px);
}

/* ===========================================
   ACCORDION SMOOTH OPEN/CLOSE
   =========================================== */
.accordion-content{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .45s ease, opacity .30s ease, transform .30s ease;
}
.accordion-item.is-open .accordion-content{
    opacity: 1;
    transform: translateY(0);
}
.accordion-intro{
    margin: 2px 0 14px;
    color: rgba(255,255,255,0.75);
    line-height: 1.55;
}


/* ===========================================
   SUBTLE BACKGROUND GRID (ABOVE TECH LOGOS)
   =========================================== */
.grid-bg::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    /* Real honeycomb hexagonal pattern */
    background-image: 
        repeating-linear-gradient(0deg, 
            transparent, 
            transparent 43.3px,
            rgba(255, 255, 255, 0.04) 43.3px, 
            rgba(255, 255, 255, 0.04) 44.3px,
            transparent 44.3px,
            transparent 86.6px),
        repeating-linear-gradient(60deg, 
            transparent, 
            transparent 43.3px,
            rgba(255, 255, 255, 0.045) 43.3px, 
            rgba(255, 255, 255, 0.045) 44.3px,
            transparent 44.3px,
            transparent 86.6px),
        repeating-linear-gradient(120deg, 
            transparent, 
            transparent 43.3px,
            rgba(255, 255, 255, 0.045) 43.3px, 
            rgba(255, 255, 255, 0.045) 44.3px,
            transparent 44.3px,
            transparent 86.6px);
    background-size: 100% 100%;
    opacity: 0.60;
    mix-blend-mode: screen;
    z-index: 2; /* above logos */
}
.grid-bg{ position: fixed; inset:0; z-index:-1; background: transparent; }

/* content should sit above background layers */
main, header, footer, .container{ position:relative; z-index:5; }


/* ===========================================
   STICKY HEADER
   =========================================== */
.site-header{
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    background: rgba(10,12,18,0.55);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
body{
    scroll-padding-top: 92px; /* for anchor jumps */
}
.hero{
    padding-top: 22px; /* keep visual spacing, header is sticky */
}


/* ===========================================
   HOVER GLOW TUNING (slightly dimmer)
   =========================================== */
.price-card:hover,
.card:hover,
.accordion-item:hover{
    box-shadow: 0 10px 30px rgba(0,0,0,0.28) !important;
}
.accordion-header:hover{
    background: rgba(255,255,255,0.04) !important;
}
nav a:hover{
    text-shadow: 0 0 10px rgba(255,255,255,0.10);
    opacity: 0.92;
}
.lang-btn:hover{
    filter: brightness(0.98);
}


/* Additional tech icons (SVG) */
.tech-icon.apache { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%202%20A30%2030%200%201%201%2031.9%202%20Z%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20opacity%3D%220.9%22/%3E%3Ctext%20x%3D%2232%22%20y%3D%2238%22%20text-anchor%3D%22middle%22%20font-family%3D%22Inter,Arial%22%20font-size%3D%2218%22%20fill%3D%22white%22%20opacity%3D%220.95%22%3EAP%3C/text%3E%3C/svg%3E"); }
.tech-icon.debian { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%202%20A30%2030%200%201%201%2031.9%202%20Z%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20opacity%3D%220.9%22/%3E%3Ctext%20x%3D%2232%22%20y%3D%2238%22%20text-anchor%3D%22middle%22%20font-family%3D%22Inter,Arial%22%20font-size%3D%2218%22%20fill%3D%22white%22%20opacity%3D%220.95%22%3EDEB%3C/text%3E%3C/svg%3E"); }
.tech-icon.ubuntu { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%202%20A30%2030%200%201%201%2031.9%202%20Z%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20opacity%3D%220.9%22/%3E%3Ctext%20x%3D%2232%22%20y%3D%2238%22%20text-anchor%3D%22middle%22%20font-family%3D%22Inter,Arial%22%20font-size%3D%2218%22%20fill%3D%22white%22%20opacity%3D%220.95%22%3EUB%3C/text%3E%3C/svg%3E"); }
.tech-icon.html { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%202%20L60%2010%20V36%20C60%2050%2048%2060%2032%2062%20C16%2060%204%2050%204%2036%20V10%20Z%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20opacity%3D%220.9%22/%3E%3Ctext%20x%3D%2232%22%20y%3D%2238%22%20text-anchor%3D%22middle%22%20font-family%3D%22Inter,Arial%22%20font-size%3D%2218%22%20fill%3D%22white%22%20opacity%3D%220.95%22%3EHTML%3C/text%3E%3C/svg%3E"); }
.tech-icon.css { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%202%20L60%2010%20V36%20C60%2050%2048%2060%2032%2062%20C16%2060%204%2050%204%2036%20V10%20Z%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20opacity%3D%220.9%22/%3E%3Ctext%20x%3D%2232%22%20y%3D%2238%22%20text-anchor%3D%22middle%22%20font-family%3D%22Inter,Arial%22%20font-size%3D%2218%22%20fill%3D%22white%22%20opacity%3D%220.95%22%3ECSS%3C/text%3E%3C/svg%3E"); }
.tech-icon.node { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M32%202%20L56%2016%20V48%20L32%2062%20L8%2048%20V16%20Z%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20opacity%3D%220.9%22/%3E%3Ctext%20x%3D%2232%22%20y%3D%2238%22%20text-anchor%3D%22middle%22%20font-family%3D%22Inter,Arial%22%20font-size%3D%2218%22%20fill%3D%22white%22%20opacity%3D%220.95%22%3ENODE%3C/text%3E%3C/svg%3E"); }

/* ===========================================
   TECH ICONS FROM /assets/img/background/icon/
   =========================================== */
.tech-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.25;
    pointer-events: none;
    animation: float 20s ease-in-out infinite;
}

.tech-icon.cloudflare { background-image: url('../img/background/icon/cloudflare-svgrepo-com.svg'); }
.tech-icon.css3 { background-image: url('../img/background/icon/css3-01-svgrepo-com.svg'); }
.tech-icon.database { background-image: url('../img/background/icon/database-svgrepo-com.svg'); }
.tech-icon.debian2 { background-image: url('../img/background/icon/debian-svgrepo-com.svg'); }
.tech-icon.html5 { background-image: url('../img/background/icon/html5-01-svgrepo-com.svg'); }
.tech-icon.jar { background-image: url('../img/background/icon/jar-file-format-symbol-svgrepo-com.svg'); }
.tech-icon.javascript { background-image: url('../img/background/icon/java-script-logo-svgrepo-com.svg'); }
.tech-icon.java2 { background-image: url('../img/background/icon/java-svgrepo-com.svg'); }
.tech-icon.intellij { background-image: url('../img/background/icon/jb-intellij-idea-svgrepo-com.svg'); }
.tech-icon.jetbrains { background-image: url('../img/background/icon/jetbrains-svgrepo-com.svg'); }
.tech-icon.js2 { background-image: url('../img/background/icon/js-svgrepo-com.svg'); }
.tech-icon.linux2 { background-image: url('../img/background/icon/linux-svgrepo-com.svg'); }
.tech-icon.mysql2 { background-image: url('../img/background/icon/mysql-svgrepo-com.svg'); }
.tech-icon.node2 { background-image: url('../img/background/icon/node-svgrepo-com.svg'); }
.tech-icon.nuclear1 { background-image: url('../img/background/icon/nuclear-1-svgrepo-com.svg'); }
.tech-icon.nuclear2 { background-image: url('../img/background/icon/nuclear-mark-2-svgrepo-com.svg'); }
.tech-icon.php2 { background-image: url('../img/background/icon/php-svgrepo-com.svg'); }
.tech-icon.python2 { background-image: url('../img/background/icon/python-svgrepo-com.svg'); }
.tech-icon.server { background-image: url('../img/background/icon/server-svgrepo-com.svg'); }
.tech-icon.ubuntu2 { background-image: url('../img/background/icon/ubuntu-svgrepo-com.svg'); }

/* Positioning for scattered icons */
.tech-icon:nth-child(1) { top: 8%; left: 6%; animation-delay: 0s; }
.tech-icon:nth-child(2) { top: 15%; right: 8%; animation-delay: -2s; }
.tech-icon:nth-child(3) { top: 25%; left: 12%; animation-delay: -4s; }
.tech-icon:nth-child(4) { top: 35%; right: 15%; animation-delay: -1s; }
.tech-icon:nth-child(5) { top: 45%; left: 8%; animation-delay: -3s; }
.tech-icon:nth-child(6) { top: 55%; right: 10%; animation-delay: -5s; }
.tech-icon:nth-child(7) { top: 65%; left: 14%; animation-delay: -2.5s; }
.tech-icon:nth-child(8) { top: 75%; right: 12%; animation-delay: -4.5s; }
.tech-icon:nth-child(9) { top: 20%; left: 25%; animation-delay: -1.5s; }
.tech-icon:nth-child(10) { top: 40%; right: 20%; animation-delay: -3.5s; }
.tech-icon:nth-child(11) { top: 60%; left: 22%; animation-delay: -2.8s; }
.tech-icon:nth-child(12) { top: 80%; right: 18%; animation-delay: -4.2s; }
.tech-icon:nth-child(13) { top: 10%; left: 40%; animation-delay: -1.2s; }
.tech-icon:nth-child(14) { top: 30%; right: 35%; animation-delay: -3.7s; }
.tech-icon:nth-child(15) { top: 50%; left: 45%; animation-delay: -2.2s; }
.tech-icon:nth-child(16) { top: 70%; right: 40%; animation-delay: -4.8s; }
.tech-icon:nth-child(17) { top: 12%; right: 25%; animation-delay: -1.8s; }
.tech-icon:nth-child(18) { top: 38%; left: 30%; animation-delay: -3.2s; }
.tech-icon:nth-child(19) { top: 58%; right: 28%; animation-delay: -2.6s; }
.tech-icon:nth-child(20) { top: 78%; left: 35%; animation-delay: -4.4s; }

@keyframes float {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.25;
    }
    25% { 
        transform: translate(10px, -15px) rotate(5deg);
        opacity: 0.35;
    }
    50% { 
        transform: translate(-5px, -10px) rotate(-3deg);
        opacity: 0.20;
    }
    75% { 
        transform: translate(15px, 5px) rotate(7deg);
        opacity: 0.30;
    }
}

/* ===========================================
   SEO FOOTER
   =========================================== */


.seo-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: rgba(252, 213, 136, 0.95);
    margin-bottom: 2rem;
    text-align: center;
}








@media (max-width: 768px) {




@media (max-width: 768px) {

/* ===========================================
   SEO FOOTER
   =========================================== */
.seo-footer {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3rem 2rem 2rem;
    margin-top: 2rem;
}

.seo-content {
    max-width: 1200px;
    margin: 0 auto;
}

.seo-footer .footer-text {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    font-size: 1rem;
    text-align: justify;
    margin: 0;
}

@media (max-width: 768px) {
    .seo-footer {
        padding: 2rem 1.5rem 1.5rem;
    }
    
    .seo-footer .footer-text {
        font-size: 0.95rem;
        text-align: left;
    }
}