:root {--bg-gradient:linear-gradient(180deg,#e9f3fb 0%,#f4f9fd 400px,#edf4fa 100%); --surface:#ffffff; --azure-dark:#004e89; --azure-primary:#0077b6; --azure-mid:#0096c7; --azure-light:#48cae4; --azure-soft:#e0f2fe; --azure-ice:#f0f9ff; --metal-gradient:linear-gradient(145deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%); --metal-border:#cbd5e1; --metal-border-light:#e2e8f0; --text-head:#0b2545; --text-body:#2c4257; --text-muted:#5c768d; --shadow-card:0 10px 25px -5px rgba(0, 119, 182, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04); --shadow-hover:0 20px 35px -8px rgba(0, 119, 182, 0.22), 0 10px 15px -3px rgba(0, 78, 137, 0.1); --radius:14px}
* {box-sizing:border-box; margin:0; padding:0}
body {margin:0; padding:0; top:0 !important; font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; background:var(--bg-gradient); color:var(--text-body); line-height:1.7; min-height:100vh; display:flex; flex-direction:column}
h1, h2, h3, h4, .brand-font {font-family:'Space Grotesk', 'Plus Jakarta Sans', sans-serif}
main {flex:1; max-width:1280px; margin:0 auto; padding:3.5rem 1.5rem; width:100%}
header {background:linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(241, 245, 249, 0.94) 100%); border-bottom:1px solid var(--metal-border); box-shadow:0 4px 14px rgba(11, 37, 69, 0.04); position:sticky; top:0; z-index:1000; backdrop-filter:blur(10px)}
.header-wrap {max-width:1280px; margin:0 auto; padding:0.9rem 2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem}
.brand {display:flex; align-items:center; gap:0.6rem; text-decoration:none; font-size:1.7rem; font-weight:800; letter-spacing:-0.03em}
.brand-gradient {background:linear-gradient(135deg,#0077b6 0%,#004e89 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.brand-pill {font-size:0.7rem; font-weight:700; letter-spacing:0.08em; background:var(--metal-gradient); border:1px solid #94a3b8; color:#334155; padding:0.2rem 0.6rem; border-radius:6px; text-transform:uppercase; box-shadow:inset 0 1px 1px #fff}
nav ul {display:flex; list-style:none; gap:0.75rem; flex-wrap:wrap}
nav a {color:var(--text-body); text-decoration:none; font-size:0.95rem; font-weight:600; padding:0.5rem 1rem; border-radius:8px; transition:all 0.2s ease}
nav a:hover, nav a.active {color:var(--azure-dark); background:var(--azure-soft)}
.hero {text-align:center; padding:4.5rem 2rem; background:radial-gradient(120% 120% at 50% 10%,#ffffff 40%,#e2f1fc 100%); border:1px solid var(--metal-border-light); border-radius:18px; box-shadow:var(--shadow-card); margin-bottom:4rem; position:relative; overflow:hidden}
.hero::before {content:""; position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:450px; height:120px; background:linear-gradient(90deg,#48cae4 0%,#0077b6 100%); opacity:0.15; filter:blur(50px); border-radius:50%; pointer-events:none}
.hero-badge {display:inline-flex; align-items:center; gap:0.4rem; font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--azure-dark); background:var(--azure-soft); border:1px solid #bae6fd; padding:0.4rem 1.1rem; border-radius:30px; margin-bottom:1.5rem}
.hero h1 {font-size:3rem; font-weight:800; color:var(--text-head); letter-spacing:-0.04em; margin-bottom:1.25rem; line-height:1.15}
.hero-lead {font-size:1.25rem; color:var(--text-muted); max-width:860px; margin:0 auto; line-height:1.7}
.btn-launch, .btn-portal, .btn-submit {display:inline-flex; align-items:center; gap:0.5rem; text-decoration:none; font-family:inherit; font-weight:700; color:#ffffff; background:linear-gradient(135deg,#0077b6 0%,#004e89 100%); border-radius:8px; border:none; cursor:pointer; box-shadow:0 4px 14px rgba(0, 119, 182, 0.25); transition:all 0.2s ease}
.btn-launch {font-size:1.05rem; padding:0.85rem 2rem}
.btn-portal {font-size:0.92rem; font-weight:600; padding:0.65rem 1.35rem; box-shadow:0 4px 10px rgba(0,119,182,0.25)}
.btn-submit {width:100%; justify-content:center; font-size:1rem; padding:0.85rem 1.5rem}
.btn-launch:hover, .btn-portal:hover, .btn-submit:hover {background:linear-gradient(135deg,#0096c7 0%,#0077b6 100%); box-shadow:0 6px 18px rgba(0, 119, 182, 0.35); transform:translateY(-2px)}
.services-grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(360px,1fr)); gap:2rem; margin-bottom:5rem}
.card {background:var(--surface); border:1px solid var(--metal-border); border-radius:var(--radius); box-shadow:var(--shadow-card); display:flex; flex-direction:column; overflow:hidden; transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease}
.card:hover {transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:var(--azure-mid)}
.card-media {height:170px; width:100%; position:relative; overflow:hidden; background-color:#cbd5e1}
.card-media img {width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; display:block}
.card:hover .card-media img {transform:scale(1.06)}
.card-badge {position:absolute; top:1rem; left:1rem; background:rgba(11,37,69,0.85); backdrop-filter:blur(6px); color:#ffffff; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; padding:0.35rem 0.75rem; border-radius:20px; border:1px solid rgba(255, 255, 255, 0.2)}
.card-content {padding:1.8rem; display:flex; flex-direction:column; flex:1}
.card h2 {font-size:1.35rem; color:var(--text-head); margin-bottom:0.75rem; font-weight:700; letter-spacing:-0.02em}
.card p {font-size:0.95rem; color:var(--text-body); line-height:1.6; margin-bottom:1.6rem; flex:1}
.card-action {border-top:1px solid #f1f5f9; padding-top:1.25rem; display:flex; justify-content:flex-start}
.feed-card {background:var(--surface); border:1px solid var(--metal-border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:2.5rem; margin-bottom:3rem}
.feed-card h2 {font-size:1.6rem; color:var(--text-head); margin-bottom:1.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem}
.feed-badge {font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--azure-primary); background:var(--azure-soft); border:1px solid #bae6fd; padding:0.25rem 0.7rem; border-radius:20px}
.feed-list, .news-list, .audiobook-list, .games-list, .gadgets-list, .history-list, .wiki-list, .scripts-list, .movies-list, .stiri-list {list-style:none; display:flex; flex-direction:column; gap:1.25rem}
.feed-item, .news-item, .audiobook-item, .game-item, .gadget-item, .history-item, .wiki-item, .script-item, .movie-item, .stiri-item {display:flex; align-items:center; padding-bottom:1.25rem; border-bottom:1px solid #f1f5f9; gap:1.25rem}
.feed-item:last-child, .news-item:last-child, .audiobook-item:last-child, .game-item:last-child, .gadget-item:last-child, .history-item:last-child, .wiki-item:last-child, .script-item:last-child, .movie-item:last-child, .stiri-item:last-child {border-bottom:none; padding-bottom:0}
.news-thumb-link, .audiobook-thumb-link, .game-thumb-link, .gadget-thumb-link, .history-thumb-link, .wiki-thumb-link, .script-thumb-link, .movie-thumb-link, .stiri-thumb-link {display:block; width:90px; height:65px; flex-shrink:0; border-radius:8px; overflow:hidden; background:#e2e8f0; border:1px solid var(--metal-border)}
.news-thumb, .audiobook-thumb, .game-thumb, .gadget-thumb, .history-thumb, .wiki-thumb, .script-thumb, .movie-thumb, .stiri-thumb {width:100%; height:100%; object-fit:cover; transition:transform 0.25s ease; display:block}
.news-thumb-link:hover .news-thumb, .audiobook-thumb-link:hover .audiobook-thumb, .game-thumb-link:hover .game-thumb, .gadget-thumb-link:hover .gadget-thumb, .history-thumb-link:hover .history-thumb, .wiki-thumb-link:hover .wiki-thumb, .script-thumb-link:hover .script-thumb, .movie-thumb-link:hover .movie-thumb, .stiri-thumb-link:hover .stiri-thumb {transform:scale(1.08)}
.news-body, .audiobook-body, .game-body, .gadget-body, .history-body, .wiki-body, .script-body, .movie-body, .stiri-body {flex:1; display:flex; flex-direction:column; gap:0.25rem}
.news-title, .audiobook-title, .game-title, .gadget-title, .history-title, .wiki-title, .script-title, .movie-title, .stiri-title {font-size:1.05rem; font-weight:600; color:var(--text-head); text-decoration:none; transition:color 0.2s ease; line-height:1.4}
.news-title:hover, .audiobook-title:hover, .game-title:hover, .gadget-title:hover, .history-title:hover, .wiki-title:hover, .script-title:hover, .movie-title:hover, .stiri-title:hover {color:var(--azure-primary)}
.news-date, .audiobook-date, .game-date, .gadget-date, .history-date, .wiki-date, .script-date, .movie-date, .stiri-date {font-size:0.8rem; color:var(--text-muted)}
.feed-state {font-size:0.95rem; color:var(--text-muted); font-style:italic}
.catalog-card {background:var(--surface); border:1px solid var(--metal-border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:2.5rem; margin-bottom:3rem}
.catalog-card h2 {font-size:1.6rem; color:var(--text-head); margin-bottom:0.5rem}
.catalog-card p.catalog-intro {font-size:0.95rem; color:var(--text-muted); margin-bottom:1.75rem}
.category-grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:1.25rem}
.category-item {background:var(--azure-ice); border:1px solid #bae6fd; border-radius:10px; padding:1.25rem; text-decoration:none; display:flex; flex-direction:column; justify-content:space-between; transition:all 0.2s ease}
.category-item:hover {transform:translateY(-3px); border-color:var(--azure-primary); box-shadow:0 6px 16px rgba(0,119,182,0.15); background:#ffffff}
.cat-title {font-size:1.05rem; font-weight:700; color:var(--azure-dark); margin-bottom:0.4rem}
.cat-desc {font-size:0.85rem; color:var(--text-body); line-height:1.4; margin-bottom:0.75rem; flex:1}
.cat-link-text {font-size:0.8rem; font-weight:700; color:var(--azure-primary); text-transform:uppercase; letter-spacing:0.05em}
.content-card, .seo-overview {background:var(--surface); border:1px solid var(--metal-border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:3.5rem 3rem; margin-bottom:3rem; line-height:1.85}
.content-card h2, .seo-overview h2 {font-size:1.85rem; color:var(--text-head); margin-bottom:1rem; letter-spacing:-0.02em}
.content-card h3, .seo-overview h3 {font-size:1.35rem; color:var(--azure-dark); margin-top:2.2rem; margin-bottom:0.75rem; letter-spacing:-0.01em}
.content-card p, .seo-overview p {margin-bottom:1.35rem; font-size:1.02rem; color:var(--text-body)}
.content-card ul, .seo-overview ul {margin:1.25rem 0 1.75rem 1.75rem; color:var(--text-body)}
.content-card li, .seo-overview li {margin-bottom:0.6rem}
.feature-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.5rem; margin:2rem 0}
.feature-box {background:var(--azure-ice); border:1px solid #bae6fd; border-radius:10px; padding:1.5rem; display:flex; flex-direction:column; justify-content:space-between}
.feature-box h3, .feature-box h4 {color:var(--azure-dark); font-size:1.1rem; margin-bottom:0.5rem}
.feature-box p {font-size:0.92rem; color:var(--text-body); margin-bottom:0; line-height:1.5}
.callout-box {background:var(--metal-gradient); border-left:4px solid var(--azure-primary); border-radius:0 8px 8px 0; padding:1.5rem; margin:2rem 0; color:var(--text-head)}
.tech-specs {background:#f8fafc; border:1px solid var(--metal-border); border-radius:8px; padding:1.5rem; margin:1.5rem 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:1.25rem}
.tech-spec-item span.label {display:block; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--azure-primary); margin-bottom:0.25rem}
.tech-spec-item span.value {font-size:0.98rem; font-weight:600; color:var(--text-head)}
.contact-layout {display:grid; grid-template-columns:1fr 1.3fr; gap:2.5rem; margin-bottom:3.5rem}
.info-card, .form-card {background:var(--surface); border:1px solid var(--metal-border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:2.5rem}
.info-card h2, .form-card h2 {font-size:1.6rem; color:var(--text-head); margin-bottom:1rem; letter-spacing:-0.02em}
.info-card p {color:var(--text-body); margin-bottom:1.5rem; font-size:0.98rem}
.contact-details {list-style:none; margin-top:1.5rem; display:flex; flex-direction:column; gap:1.25rem}
.detail-item {display:flex; flex-direction:column}
.detail-label {font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--azure-primary); margin-bottom:0.2rem}
.detail-val {font-size:1.05rem; color:var(--text-head); font-weight:600}
.detail-val a {color:var(--azure-dark); text-decoration:none}
.detail-val a:hover {text-decoration:underline}
.form-group {margin-bottom:1.35rem; display:flex; flex-direction:column}
label {font-size:0.9rem; font-weight:600; color:var(--text-head); margin-bottom:0.4rem}
input, select, textarea {width:100%; padding:0.75rem 1rem; font-family:inherit; font-size:0.95rem; color:var(--text-body); background-color:#f8fafc; border:1px solid var(--metal-border); border-radius:8px; transition:border-color 0.2s, box-shadow 0.2s}
input:focus, select:focus, textarea:focus {outline:none; border-color:var(--azure-primary); background-color:#ffffff; box-shadow:0 0 0 3px rgba(0,119,182,0.15)}
textarea {resize:vertical; min-height:140px}
footer {background:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%); border-top:1px solid var(--metal-border); padding:3.5rem 1.5rem; margin-top:5rem}
.footer-wrap {max-width:1280px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:1.75rem; text-align:center}
.footer-links {display:flex; flex-wrap:wrap; justify-content:center; gap:1.75rem; list-style:none}
.footer-links a {color:var(--text-body); text-decoration:none; font-weight:600; font-size:0.95rem; transition:color 0.2s}
.footer-links a:hover {color:var(--azure-primary)}
.copyright {font-size:0.88rem; color:var(--text-muted)}
.translatecontainer {position:fixed; bottom:10px; right:10px; z-index:9; background:#fff; padding:15px; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.15); border:1px solid #ddd; transition:all 0.3s ease; font-family:sans-serif; min-width:250px; display:flex; flex-direction:column; gap:10px}
.tr-close-btn {position:absolute; top:5px; right:10px; cursor:pointer; font-size:20px; font-weight:bold; color:#999; z-index:10}
.tr-close-btn:hover {color:#333}
.translatecontainer.hidden-tr {width:40px; height:40px; min-width:40px; padding:0 !important; border-radius:50%; cursor:pointer; overflow:hidden; display:inline-flex; align-items:center !important; justify-content:center; background:unset; box-shadow:0 4px 15px rgba(0,0,0,0.15); border:unset}
.translatecontainer.hidden-tr .tr-content-wrap {display:none}
.tr-toggle-icon {display:none; font-size:20px; align-items:center; justify-content:center}
.tr-toggle-icon svg {filter:drop-shadow(1px 1px 0 rgba(255,255,255,1))}
.translatecontainer.hidden-tr .tr-toggle-icon {display:flex}
#trflags {display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; padding-top:10px}
#trflags span svg {cursor:pointer; border-radius:3px; transition:transform 0.2s}
#trflags span svg:hover {transform:scale(1.1)}
.tr-bottom-row {display:flex; align-items:center; gap:8px}
#translator {flex:1; padding:5px; border-radius:4px; border:1px solid #ccc; font-size:13px; height:38px}
.tr-action-link {width:32px; height:32px; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:#fff; transition:border-color 0.2s; flex-shrink:0; margin:5px}
.tr-action-link:hover {border-color:#007bff}
#google_translate_element2, .skiptranslate {display:none !important}
#google_translate label {color:#666}
.cookie-consent-banner {position:fixed; bottom:20px; left:20px; right:20px; background:#fff; padding:15px 24px; box-shadow:0 10px 30px rgba(0,0,0,0.8); border-radius:12px; z-index:1000000; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; border:1px solid var(--border-subtle); font-family:system-ui, -apple-system, sans-serif; font-size:14px; animation:cookieFadeInUp 0.5s ease-out}
.cookie-consent-text {margin:0; line-height:1.5; flex:1}
.cookie-consent-text a {text-decoration:underline}
.cookie-accept-btn {color:#000; border:none; padding:10px 20px; border-radius:6px; cursor:pointer; font-weight:600; font-size:13px; transition:background 0.2s, transform 0.1s; white-space:nowrap}
.cookie-accept-btn:hover {color:white; background:linear-gradient(135deg,#0077b6 0%,#004e89 100%)}
.cookie-accept-btn:active {transform:scale(0.97)}
.ticker-wrap {width:100%; overflow:hidden; margin-top:2rem; padding:0.75rem 0; position:relative; mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent); -webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)}
.ticker-track {display:flex; width:max-content; animation:ticker-scroll 140s linear infinite}
.ticker-wrap:hover .ticker-track {animation-play-state:paused}
.ticker-group {display:flex; align-items:center; gap:1.5rem; padding-right:1.5rem; list-style:none; margin:0}
.ticker-item {display:inline-flex; align-items:center; gap:0.85rem; background:var(--surface); border:1px solid var(--metal-border); padding:0.45rem 1rem 0.45rem 0.5rem; border-radius:50px; white-space:nowrap; flex-shrink:0}
.ticker-thumb {width:36px; height:36px; border-radius:50%; object-fit:cover; display:block}
.ticker-title {font-size:0.92rem; font-weight:600; color:var(--text-head); text-decoration:none; transition:color 0.2s ease}
.ticker-title:hover {color:var(--azure-primary)}

@keyframes ticker-scroll {
0% {transform:translateX(0)}
100% {transform:translateX(-50%)}
}
@media (max-width: 860px) {
.contact-layout {grid-template-columns:1fr}
}

@media (max-width: 768px) {
.hero h1 {font-size:2.1rem}
.services-grid {grid-template-columns:1fr}
.content-card, .seo-overview, .feed-card, .catalog-card, .info-card, .form-card {padding:2rem 1.5rem}
.category-grid {grid-template-columns:1fr}
.news-item, .audiobook-item, .game-item, .gadget-item, .history-item, .wiki-item, .script-item, .movie-item, .stiri-item {gap:0.9rem}
.news-thumb-link, .audiobook-thumb-link, .game-thumb-link, .gadget-thumb-link, .history-thumb-link, .wiki-thumb-link, .script-thumb-link, .movie-thumb-link, .stiri-thumb-link {width:75px; height:55px}
}