/* ==========================================
   Shiffera Master Stylesheet — Combined
   All CSS inlined (no @import waterfall)
   base + layout + components + utilities + responsive
========================================== */

/* ══════════════════════════════════════════
   BASE — Reset + Variables + Typography
══════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg-dark);color:var(--text-main);font-family:var(--font-main);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
:root{
  --bg-dark:#08090d;
  --bg-glass:#0d1018;
  --text-main:#ffffff;
  --accent-main:#ff3b30;
  --font-main:'Cascadia Code',monospace;
  --font-mono:'Cascadia Mono',monospace;
  --max-width:1200px;
  --transition:0.2s ease-in-out;
}
body{background:linear-gradient(180deg,var(--bg-glass) 0%,var(--bg-dark) 100%);background-attachment:fixed}
h1,h2,h3,h4,h5,h6{font-family:var(--font-mono);color:var(--text-main);font-weight:600;line-height:1.3}
p{margin-bottom:1rem;color:var(--text-main);font-size:1rem}
a{color:var(--accent-main);text-decoration:none;transition:var(--transition)}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
@media(max-width:480px){p{font-size:.9rem}}

/* Themes */
[data-theme="shiffera"]{--bg-dark:#08090d;--bg-glass:#0d1018;--text-main:#ffffff;--accent-main:#ff3b30}
[data-theme="dos"]{--bg-dark:#08090d;--bg-glass:#0d1018;--text-main:#5a5a5a;--accent-main:#a9a9a9}
[data-theme="ps"]{--bg-dark:#012456;--bg-glass:#01306a;--text-main:#ffffff;--accent-main:#1e90ff}
[data-theme="vsc"]{--bg-dark:#1e1e1e;--bg-glass:#252526;--text-main:#ffffff;--accent-main:#007acc}
[data-theme="terminal"]{--bg-dark:#08090d;--bg-glass:#0d1018;--text-main:#007e00;--accent-main:#18a000}

/* ══════════════════════════════════════════
   LAYOUT — Header + Footer + Containers
══════════════════════════════════════════ */
.skip-link{position:absolute;top:-999px;left:-999px;opacity:0;pointer-events:none}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:9999;opacity:1;pointer-events:auto;background:var(--accent-main);color:#fff;padding:.5rem 1rem;border-radius:4px;font-size:.9rem}

.container{width:90%;max-width:var(--max-width);margin:0 auto;box-sizing:border-box}

/* Header — #header div is the fixed container (works even before JS injection) */
#header{position:fixed;top:0;left:0;width:100%;z-index:1000}
header{position:relative;top:auto;left:auto;width:100%;background:var(--bg-dark);border-bottom:1px solid var(--accent-main);color:var(--text-main)}
/* Announcement inside #header is also relative (container handles fixed) */
#header .announcement-bar{position:relative;top:auto;z-index:auto}
/* When #header contains announcement bar, header is pushed down automatically */
.top-bar{height:30px}
.main-bar{height:70px}
.top-bar{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;font-size:.9rem}
.top-bar .contact-info a{margin-right:1rem;color:var(--text-main);transition:var(--transition)}
.top-bar .contact-info a:hover{color:var(--accent-main)}
header .social-links{display:flex;gap:1rem}
header .social-links a{color:var(--text-main);transition:transform .2s ease,color .2s ease}
header .social-links a:hover{transform:scale(1.2);color:var(--accent-main)}
.main-bar{display:flex;justify-content:space-between;align-items:center;padding:.8rem 0}
.logo-link{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.logo-link span{color:#fff;font-family:var(--font-mono);font-weight:bold}
.logo-link img{height:100px;width:auto;max-width:160px}
.desktop-nav ul{list-style:none;display:flex;gap:1.5rem}
.desktop-nav a{color:var(--text-main);font-family:var(--font-mono);font-weight:bold;transition:var(--transition)}
.desktop-nav a:hover{color:var(--accent-main)}
.hamburger{display:none;flex-direction:column;cursor:pointer;gap:5px}
.hamburger span{width:25px;height:3px;background:var(--text-main);transition:var(--transition)}
.mobile-nav{display:none;background:var(--bg-glass);padding:1rem}
.mobile-nav ul{list-style:none;display:flex;flex-direction:column;gap:1rem}
.mobile-nav a{color:var(--text-main);font-family:var(--font-mono)}
@media(max-width:768px){
  .top-bar .contact-info a[href^="mailto"],header .social-links{display:none!important}
}

/* Mobile nav compact */
.mobile-nav.compact{display:none;position:absolute;top:100%;left:0;width:100%;background:#0d1018;border-top:1px solid #1e2535;z-index:9999}
.mobile-nav.compact.active{display:block}
.mobile-nav.full{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0d1018;padding-top:4rem;z-index:9999;transform:translateY(-100%);transition:transform .4s ease-in-out}
.mobile-nav.full.active{display:block;transform:translateY(0)}
.mobile-nav.full ul{list-style:none;margin:0;padding:0}
.mobile-nav.full li{border-bottom:1px solid #1e2535}
.mobile-nav.full li a{display:block;padding:16px 20px;font-size:1.1rem;color:#fff;transition:background .3s ease}
.mobile-nav.full li a:hover{background:var(--accent-main);color:#fff}

/* Footer */
footer{background:var(--bg-dark);color:var(--text-main);padding:1rem 0;border-top:1px solid var(--accent-main);position:relative;z-index:10}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;align-items:flex-start}
.footer-section h4{color:var(--accent-main);margin-bottom:1rem;font-family:var(--font-mono);font-size:1.1rem;border-bottom:1px solid #1e2535;padding-bottom:.4rem}
.footer-section ul{list-style:none;padding:0;margin:0}
.footer-section ul li{display:flex;justify-content:flex-start;align-items:center;padding:.2rem 0;font-family:var(--font-mono)}
.footer-section a{font-size:.95rem;color:var(--text-main);text-decoration:none;transition:var(--transition)}
.footer-section a:hover{color:var(--accent-main)}
footer .social-links{margin-top:1rem;display:flex;gap:1rem;justify-content:flex-start}
footer .social-links a{color:var(--text-main);font-size:1rem;transition:transform .2s ease,color .2s ease}
footer .social-links a:hover{transform:scale(1.2);color:var(--accent-main)}
.footer-bottom{margin-top:1rem;text-align:center;font-size:.85rem;border-top:1px solid #1e2535;padding-top:1rem;opacity:.8}

/* Clients slider — legacy class (kept for backwards compat) */
.clients-slider{overflow:hidden;position:relative;width:100%}
.clients-slider .slide-track{display:flex;width:max-content;animation:scroll 40s linear infinite}
.clients-slider:hover .slide-track,.clients-slider:focus-within .slide-track{animation-play-state:paused}
.clients-slider a{display:inline-block;margin:0 2rem}
.clients-slider img{height:60px;width:auto;filter:grayscale(100%);transition:filter .3s ease}
.clients-slider img:hover{filter:grayscale(0%)}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* New dynamic slider — pause on hover (v2.9.3) */
.clients-slider-wrap:hover .clients-slider-track,
.clients-slider-wrap:focus-within .clients-slider-track {
  animation-play-state: paused;
}

/* Body padding for fixed #header container (JS updates dynamically after injection) */
body{padding-top:101px}
@media(max-width:991px){body{padding-top:100px}}
@media(max-width:767px){body{padding-top:70px}}

/* ══════════════════════════════════════════
   COMPONENTS — Buttons + Cards + Forms + Sections
══════════════════════════════════════════ */

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem 1.2rem;font-family:var(--font-mono);font-size:.95rem;border:2px solid var(--accent-main);background:transparent;color:var(--accent-main);cursor:pointer;transition:all .3s ease;border-radius:4px;vertical-align:middle;line-height:1.4;text-decoration:none}
.btn:hover{background:var(--accent-main);color:#fff!important;text-decoration:none}
.btn-filled{padding:.6rem 1.2rem;font-family:var(--font-mono);font-size:.95rem;border:2px solid var(--accent-main);background:var(--accent-main);color:#fff;border-radius:4px;transition:.3s ease;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;vertical-align:middle;line-height:1.4;text-decoration:none}
.btn-filled:hover{opacity:.9;text-decoration:none}
.btn-red{border-color:var(--accent-red);background:var(--accent-red);color:#fff}
.btn-red:hover{opacity:.9}

/* Cards */
.card{background:#141820;border:1px solid #1e2535;border-radius:8px;padding:1.5rem;color:var(--text-main);transition:var(--transition);text-align:center}
.card:hover{border-color:var(--accent-main);transform:translateY(-4px)}
.card h3{color:var(--text-main);margin-bottom:.8rem;font-size:1.2rem;font-weight:600;transition:color .3s ease}
.card:hover h3{color:var(--accent-main)}
.card i{font-size:2rem;color:var(--accent-main);margin-bottom:1rem}
.card p{font-size:.95rem;opacity:.9;margin-bottom:1rem}
.card .btn{margin-top:1rem;display:inline-block}

/* Forms */
form input,form textarea,form select{width:100%;padding:.7rem;margin-bottom:1rem;border:1px solid #1e2535;border-radius:4px;background:#0c1018;color:var(--text-main);font-family:var(--font-main)}
form input:focus,form textarea:focus,form select:focus{outline:none;border-color:var(--accent-main);box-shadow:0 0 0 2px rgba(255,255,255,.2)}

/* Intro overlay */
.intro-overlay{position:fixed;inset:0;z-index:9999;background:#08090d;display:flex;align-items:center;justify-content:center}
.intro-video{width:100%;height:100%;object-fit:contain}
.skip-intro{position:absolute;bottom:2rem;right:2rem;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4);padding:.5rem 1.2rem;border-radius:4px;cursor:pointer;font-size:.9rem}

/* Hero */
.hero{position:relative;width:100%;height:min(100vh,56.25vw);min-height:420px;overflow:hidden;background:var(--bg-dark)}
.hero-slider{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}
.hero-slider picture{width:100%;height:100%;position:absolute;top:0;left:0;display:block}
.hero-slider img{width:100%;height:100%;object-fit:cover;object-position:center center;position:absolute;top:0;left:0;opacity:0;transition:opacity 1s ease-in-out}
.hero-slide.active{opacity:1;z-index:1}
.hero-content{margin-top:2rem;padding:2rem 1rem;color:var(--text-main);max-width:900px}
.hero-content h1{font-size:2.5rem;margin-bottom:1rem;color:var(--accent-main)}
.hero-content p{font-size:1.1rem;margin-bottom:2rem;opacity:.95}
.hero-buttons{display:flex;justify-content:center;gap:1.2rem;flex-wrap:wrap}

/* Floating buttons responsive */
.floating-btn.whatsapp,#backToTop,.theme-picker{transition:all .3s ease-in-out}
@media(max-width:768px){.floating-btn.whatsapp{bottom:90px;right:25px}#backToTop{bottom:30px;right:25px}.theme-picker{bottom:150px;right:25px;left:auto}}
@media(max-width:480px){.floating-btn.whatsapp{bottom:80px;right:20px}#backToTop{bottom:20px;right:20px}.theme-picker{bottom:140px;right:20px}}

/* Services grid */
.services{padding:4rem 0;background:#0d1018}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media(max-width:1024px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.services-grid{grid-template-columns:1fr}}
.services-grid .card{text-align:center;padding:2rem 1.5rem;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.services-grid .card p{flex-grow:1;margin-bottom:1rem}
.services-grid .card .btn{margin-top:auto;align-self:center}

/* Features */
.features{padding:4rem 0;background:#0c0f18}
.features-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}

/* History */
.history{padding:4rem 0;background:#0d1018}
.history .facts{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}
.history .fact{background:#141820;border:1px solid #1e2535;padding:2rem;border-radius:8px;width:200px;text-align:center;color:var(--text-main);transition:var(--transition)}
.history .fact:hover{border-color:var(--accent-main);transform:translateY(-4px)}
.history .fact h3{font-size:2rem;color:var(--text-main);transition:color .3s ease}
.history .fact:hover h3{color:var(--accent-main)}
.history .fact p{margin-top:.5rem;font-size:.9rem;opacity:.9}

/* Dropdowns */
.desktop-nav .dropdown{position:relative}
.desktop-nav .dropdown-menu{display:none;position:absolute;top:100%;left:0;background:#0d1018;min-width:200px;border:1px solid #1e2535}
.desktop-nav .dropdown:hover .dropdown-menu{display:block}
.desktop-nav .dropdown-menu li a{display:block;padding:8px 14px;font-size:14px;color:#ddd}
.desktop-nav .dropdown-menu li a:hover{background:var(--accent-main);color:#fff}
.mobile-nav .dropdown.open>.dropdown-menu{display:block}

/* About */
.about{display:flex;align-items:center;justify-content:center;gap:3rem;padding:5rem 0}
.about-image{flex:1;display:flex;justify-content:center;align-items:center}
.about-image img{max-width:250px;animation:float 4s ease-in-out infinite}
.about-content{flex:1}
.about-content h2{color:var(--accent-main);margin-bottom:1rem}
.about-content p{margin-bottom:1.5rem;line-height:1.6}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-30px)}100%{transform:translateY(0)}}
@media(max-width:992px){.about{flex-direction:column;text-align:center}.about-image{margin-bottom:1.5rem}}

/* Stats */
#stats{padding:4rem 0;text-align:center}
.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;margin-top:2rem}
.stat{background:#141820;border:1px solid #1e2535;border-radius:8px;padding:1.5rem;width:180px;text-align:center;transition:var(--transition)}
.stat:hover{border-color:var(--accent-main);transform:translateY(-4px)}
.stat h3{font-size:2rem;color:var(--text-main);transition:color .3s ease}
.stat:hover h3{color:var(--accent-main)}
.stat p{margin-top:.5rem;font-size:.9rem}

/* Technologies slider */
#technologies{background-color:var(--bg-dark);padding:60px 0}
.section-title{text-align:center!important;font-size:2em;margin-bottom:40px;color:var(--text-main);font-family:var(--font-mono,monospace)}
.section-title .highlight{color:var(--accent-main)}

/* ── Clients marquee (keyframes here because footer loads via JS innerHTML) ── */
@keyframes shiffera-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.clients-slider-wrap:hover .clients-slider-track{animation-play-state:paused!important}
.tech-slider{overflow:hidden;position:relative;height:100px}
.slide-track{display:flex;width:max-content;min-width:100%;animation:scroll 40s linear infinite}
.slide{width:160px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.slide img{width:45px;height:45px;margin-bottom:8px;filter:brightness(0) invert(1);opacity:.8;transition:.3s ease}
.slide img:hover{opacity:1;transform:scale(1.15)}
.tech-name{font-size:.9rem;color:var(--text-main);font-family:var(--font-mono);margin-top:4px}
@media(prefers-reduced-motion:reduce){.slide-track{animation:none}}

/* Domain search */
#domain-search{padding:4rem 1.5rem;background:var(--bg-dark)}
.domain-search-wrap{max-width:600px;margin:0 auto;text-align:center}
.domain-search-wrap h2{font-size:2rem;margin-bottom:.6rem;color:var(--accent-main)}
.domain-search-wrap p{color:#7a8fa6;margin-bottom:1.8rem;white-space:nowrap}
@media(max-width:768px){.domain-search-wrap p{white-space:normal}}
.domain-search-box{display:flex;align-items:stretch;width:100%}
.domain-search-box input{flex:1;height:56px;padding:0 1.25rem;background:#0c0f18;border:2px solid #1e2535;border-right:none;border-radius:10px 0 0 10px;color:#e2e8f0;font-size:1rem;font-family:var(--font-main);outline:none;transition:border .2s}
.domain-search-box input:focus{border-color:var(--accent-main)}
.domain-search-box button{height:56px;padding:0 1.5rem;background:var(--accent-main);color:#fff;border:none;border-radius:0 10px 10px 0;font-size:1rem;font-family:var(--font-main);font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity .2s;display:flex;align-items:center;justify-content:center;gap:.4rem}
.domain-search-box button:hover{opacity:.85}
.domain-result{max-width:560px;margin:1.5rem auto 0;padding:1.25rem 1.5rem;border-radius:10px;font-size:.95rem;text-align:left;overflow:hidden;word-break:break-word;word-wrap:break-word}
.domain-result .d-desc{color:#a7b0b8;font-size:.88rem;margin:.5rem 0 0;line-height:1.5}
.domain-result .d-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.85rem}
.domain-result.available{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.3)}
.domain-result.taken{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.3)}
.domain-result .d-name{font-size:1.1rem;font-weight:700;font-family:monospace;margin-bottom:.5rem}
.d-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .75rem;border-radius:20px;font-size:.82rem;font-weight:600;margin-bottom:.85rem}
.d-badge.avail{background:rgba(74,222,128,.2);color:#4ade80}
.d-badge.taken{background:rgba(248,113,113,.2);color:#f87171}
.d-wa-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.25rem;background:#25d366;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:.9rem;transition:background .2s;margin-top:.75rem}
.d-wa-btn:hover{background:#1db954;text-decoration:none}
.btn-profile-dl{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .9rem;border:1px solid var(--accent-main);border-radius:6px;color:var(--accent-main);font-size:.82rem;font-weight:600;text-decoration:none;transition:all .2s;white-space:nowrap}
.btn-profile-dl:hover{background:var(--accent-main);color:#fff;text-decoration:none}
.btn-profile-dl i{font-size:.9rem}
@media(max-width:992px){.btn-profile-dl span{display:none}}
.dr-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.1rem;border-radius:8px;font-weight:600;font-size:.87rem;text-decoration:none;transition:all .2s}
.dr-wa{background:#25d366;color:#fff}.dr-wa:hover{background:#1db954;text-decoration:none}
.dr-host{background:var(--accent-main);color:#fff}.dr-host:hover{opacity:.85;text-decoration:none}
.domain-tlds{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;justify-items:center;margin-top:1.2rem}
.domain-tlds span{padding:.3rem .65rem;background:#0c0f18;border:1px solid #1e2535;border-radius:20px;font-size:.8rem;color:#7a8fa6;text-align:center;cursor:default}
.domain-tlds span:hover{background:#0f1115;border-color:var(--accent-main);color:var(--accent-main)}

/* Section utilities */
.section-sub{text-align:center;color:#7a8fa6;margin:-0.5rem auto 2.5rem;max-width:620px;font-size:1rem;line-height:1.6}
.section-dark{background:#060810;padding:5rem 0}
.cta{padding:5rem 0;background:var(--bg-dark);text-align:center}
.cta h2{margin-bottom:.8rem}
.cta p{color:#7a8fa6;margin-bottom:2rem}
.cta-buttons{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap}
.cta .btn-filled,.cta .btn{margin:0}

/* Why Us */
#why-us{padding:5rem 0;background:var(--bg-dark)}
.why-us-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2rem}
.why-card{background:#0c0f18;border:1px solid #1e2535;border-radius:12px;padding:2rem 1.5rem;text-align:center;transition:all .3s ease}
.why-card:hover{border-color:var(--accent-main);transform:translateY(-4px)}
.why-card i{font-size:2.2rem;color:var(--accent-main);margin-bottom:1rem;display:block}
.why-card h3{color:var(--text-main);font-size:1.1rem;margin-bottom:.8rem;transition:color .3s}
.why-card:hover h3{color:var(--accent-main)}
.why-card p{font-size:.9rem;color:#7a8fa6;line-height:1.6}
@media(max-width:1024px){.why-us-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.why-us-grid{grid-template-columns:1fr}}

/* Steps */
#how-we-work{padding:5rem 0;background:#0c0f18}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:2rem}
.step-card{background:#0c0f18;border:1px solid #1e2535;border-radius:12px;padding:2rem 1.5rem;text-align:center;transition:all .3s ease}
.step-card:hover{border-color:var(--accent-main);transform:translateY(-4px)}
.step-num{font-size:2.8rem;font-weight:900;color:var(--accent-main);opacity:.2;line-height:1;margin-bottom:.4rem;font-family:var(--font-mono)}
.step-card i{font-size:1.8rem;color:var(--accent-main);margin-bottom:.8rem;display:block}
.step-card h3{color:var(--text-main);font-size:1.1rem;margin-bottom:.8rem;transition:color .3s}
.step-card:hover h3{color:var(--accent-main)}
.step-card p{font-size:.9rem;color:#7a8fa6;line-height:1.6}
@media(max-width:1024px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.steps-grid{grid-template-columns:1fr}}

/* Industries */
#industries{padding:5rem 0;background:var(--bg-dark)}
.industries-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.industry-card{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:1.6rem 1rem;background:#0c0f18;border:1px solid #1e2535;border-radius:8px;text-align:center;transition:border-color .3s,transform .3s}
.industry-card:hover{border-color:var(--accent-main);transform:translateY(-4px)}
.industry-card i{font-size:2rem;color:var(--accent-main)}
.industry-card span{font-size:.95rem;color:var(--text-main);font-weight:500}
@media(max-width:768px){.industries-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.industries-grid{grid-template-columns:repeat(2,1fr)}}

/* Blog preview */
#blog-preview{padding:5rem 0;background:#0c0f18}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.blog-card{background:#0c0f18;border:1px solid #1e2535;border-radius:12px;overflow:hidden;transition:all .3s ease}
.blog-card:hover{border-color:var(--accent-main);transform:translateY(-4px)}
.blog-img{height:160px;background:linear-gradient(135deg,#0f0f0f,#0c0f18);display:flex;align-items:center;justify-content:center}
.blog-img i{color:var(--accent-main);opacity:.35}
.blog-body{padding:1.4rem}
.blog-tag{display:inline-block;padding:.2rem .65rem;background:rgba(255,59,48,.12);color:var(--accent-main);border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:.7rem;text-transform:uppercase;letter-spacing:.05em}
.blog-body h3{color:var(--text-main);font-size:.98rem;margin-bottom:.5rem;line-height:1.4;transition:color .3s}
.blog-card:hover .blog-body h3{color:var(--accent-main)}
.blog-body p{font-size:.87rem;color:#7a8fa6;margin-bottom:1rem;line-height:1.5}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.blog-grid{grid-template-columns:1fr}}

/* Certifications */
#certifications{padding:4rem 0;background:var(--bg-dark);border-top:1px solid #1e2535}
.certs-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;margin-top:2rem}
.cert-item{display:flex;align-items:center;justify-content:center;gap:.6rem;background:#0c0f18;border:1px solid #1e2535;border-radius:50px;padding:.6rem 0;min-width:190px;transition:all .3s ease}
.cert-item:hover{border-color:var(--accent-main);background:#0f0f0f}
.cert-item i{font-size:1.2rem;color:var(--accent-main)}
.cert-item span{font-size:.88rem;color:var(--text-main);font-weight:500}

/* Page hero (inner pages) */
.page-hero{padding:7rem 1.5rem 4rem;text-align:center}
.page-hero .breadcrumb{font-size:.82rem;color:#556a7f;margin-bottom:1.2rem;letter-spacing:.04em}
.page-hero .breadcrumb a{color:var(--accent-main);text-decoration:none}
.page-hero .breadcrumb a:hover{text-decoration:underline}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);color:#fff;margin-bottom:1rem}
.page-hero p{font-size:1.05rem;color:#8fa5b8;max-width:580px;margin:0 auto;line-height:1.7}

/* About page */
.about-story{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding:5rem 0}
.about-story-img{position:relative;display:flex;align-items:center;justify-content:center}
.about-story-img img{max-width:320px;width:100%;height:auto;display:block;margin:auto}
.about-story-badge{display:none}
.about-story-text h2{font-size:2rem;color:#fff;margin-bottom:.5rem}
.about-story-text p{color:#8fa5b8;line-height:1.8;margin-bottom:1.2rem}
#mvv,#team{padding:5rem 0}
.mvv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;padding:1rem 0 4rem}
.mvv-card{background:#0c0f18;border:1px solid #1e2535;border-radius:12px;padding:2.2rem 1.8rem;transition:transform .3s,border-color .3s,box-shadow .3s}
.mvv-card:hover{transform:translateY(-6px);border-color:var(--accent-main);box-shadow:0 8px 32px rgba(255,59,48,.12)}
.mvv-icon{width:52px;height:52px;border-radius:50%;background:rgba(255,59,48,.1);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem}
.mvv-icon i{font-size:1.4rem;color:var(--accent-main)}
.mvv-card h3{font-size:1.15rem;color:#fff;margin-bottom:.8rem}
.mvv-card p{color:#7a8fa6;line-height:1.7;font-size:.93rem}
.milestones-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:3rem 0 4rem}
.milestone{background:linear-gradient(135deg,#0c0f18 0%,#141820 100%);border:1px solid #1e2535;border-radius:12px;padding:2rem 1.5rem;text-align:center;transition:border-color .3s,transform .3s}
.milestone:hover{border-color:var(--accent-main);transform:translateY(-4px)}
.milestone .num{font-size:2.4rem;font-weight:800;color:var(--accent-main);line-height:1;margin-bottom:.4rem}
.milestone .label{color:#8fa5b8;font-size:.88rem}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;padding:1rem 0 4rem}
.team-card{background:#0c0f18;border:1px solid #1e2535;border-radius:12px;overflow:hidden;text-align:center;transition:transform .3s,border-color .3s,box-shadow .3s}
.team-card:hover{transform:translateY(-6px);border-color:var(--accent-main);box-shadow:0 8px 32px rgba(255,59,48,.1)}
.team-card .avatar{width:100%;height:200px;background:linear-gradient(135deg,#0c0f18 0%,#141820 100%);display:flex;align-items:center;justify-content:center}
.team-card .avatar i{font-size:4rem;color:rgba(255,59,48,.4)}
.team-card .avatar img{width:100%;height:100%;object-fit:cover}
.team-card .team-info{padding:1.2rem 1rem 1.4rem}
.team-card .team-name{font-size:1rem;color:#fff;font-weight:700;margin-bottom:.3rem}
.team-card .team-role{font-size:.82rem;color:var(--accent-main);margin-bottom:.8rem}
.team-card .team-social a{color:#556a7f;margin:0 .3rem;font-size:.9rem;transition:color .2s}
.team-card .team-social a:hover{color:var(--accent-main)}
@media(max-width:1024px){.team-grid{grid-template-columns:repeat(2,1fr)}.milestones-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.about-story{grid-template-columns:1fr;gap:2rem}.mvv-grid{grid-template-columns:1fr}}
@media(max-width:576px){.team-grid{grid-template-columns:1fr}.milestones-grid{grid-template-columns:repeat(2,1fr)}}

/* Services page */
#solutions-list,#solutions-vs-services,#why-solutions,#solutions-industries{padding:5rem 0}
#cloud-overview,#cloud-deliverables,#cloud-process,#why-cloud,#related-cloud,
#hosting-features,#hosting-plans,#why-hosting,
#ec-overview,#ec-deliverables,#ec-process,#why-ec,#related-ec,
#dr-overview,#dr-deliverables,#dr-process,#why-dr,#related-dr,
#email-overview,#email-deliverables,#email-process,#why-email,#related-email,
#products-overview,#products-lineup,#products-features{padding:5rem 0}
#branding-overview,#branding-deliverables,#branding-process,#why-branding,#related-services,
#dm-overview,#dm-deliverables,#dm-process,#why-dm,#related-dm,
#it-overview,#it-deliverables,#it-process,#why-it,#related-it,
#wd-overview,#wd-deliverables,#wd-process,#why-wd,#related-wd,
#app-overview,#app-deliverables,#app-process,#why-apps,#related-apps,
#bi-overview,#bi-deliverables,#bi-process,#why-bi,#related-bi{padding:5rem 0}
.overview-body{max-width:780px;margin:1.5rem auto 0;text-align:center}
.overview-body p{color:#8fa5b8;line-height:1.8;margin-bottom:1.2rem}
.branding-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid #1e2535}
.branding-stat{text-align:center}
.branding-stat strong{display:block;font-size:2rem;font-weight:800;color:var(--accent-main);font-family:var(--font-mono);line-height:1.1}
.branding-stat span{font-size:.85rem;color:#7a8fa6;margin-top:.3rem;display:block}
@media(max-width:576px){.branding-stats{grid-template-columns:repeat(2,1fr)}}
.services-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:2rem}
@media(max-width:1024px){.services-cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.services-cards-grid{grid-template-columns:1fr}}
.services-cards-grid .card{display:flex;flex-direction:column;text-align:center;padding:2rem 1.5rem}
.services-cards-grid .card p{flex-grow:1;margin-bottom:1rem}
.services-cards-grid .card .btn{margin-top:auto;align-self:center}
#services-overview,#services-list,#why-services{padding:5rem 0}

/* Hosting plans */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
@media(max-width:1024px){.plans-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.plans-grid{grid-template-columns:1fr}}
.plan{background:#0c0f18;border:1px solid #1e2535;border-radius:8px;display:flex;flex-direction:column;transition:border-color .3s,transform .3s;overflow:hidden}
.plan:hover{border-color:var(--accent-main);transform:translateY(-4px)}
.plan.plan-featured{border-color:var(--accent-main)}
.plan-head{padding:1.4rem 1.5rem 1rem;border-bottom:1px solid #1e2535;text-align:center}
.plan-badge{display:inline-block;background:var(--accent-main);color:#fff;font-size:.7rem;font-weight:700;padding:.15rem .6rem;border-radius:4px;margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.06em}
.plan-title{font-size:1.15rem;font-weight:700;color:var(--text-main)}
.plan-body{padding:1.5rem;flex-grow:1}
.plan-price{text-align:center;margin-bottom:.4rem}
.plan-price .usd{font-size:2.2rem;font-weight:800;color:var(--accent-main);font-family:var(--font-mono)}
.plan-price .curr{font-size:1rem;vertical-align:super}
.plan-price .sep{margin:0 .4rem;color:#444}
.plan-price .aed{font-size:.95rem;color:#7a8fa6}
.plan-period{text-align:center;font-size:.82rem;color:#556a7f;margin-bottom:1.2rem}
.plan-feats{list-style:none;padding:0;margin:0}
.plan-feats li{padding:.42rem 0;border-bottom:1px solid #1a1a1e;font-size:.875rem;color:#8fa5b8;display:flex;align-items:flex-start;gap:.5rem}
.plan-feats li::before{content:"✓";color:var(--accent-main);font-weight:700;flex-shrink:0}
.plan-foot{padding:1.2rem 1.5rem 1.5rem;text-align:center}
.plan-note{font-size:.72rem;color:#445;margin-top:.6rem}
.hosting-features{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2rem}
.hosting-feat{text-align:center;padding:1.4rem 1rem;background:#0c0f18;border:1px solid #1e2535;border-radius:8px;transition:border-color .3s}
.hosting-feat:hover{border-color:var(--accent-main)}
.hosting-feat i{font-size:1.8rem;color:var(--accent-main);margin-bottom:.8rem;display:block}
.hosting-feat h4{color:var(--text-main);font-size:.95rem;margin-bottom:.4rem}
.hosting-feat p{font-size:.82rem;color:#7a8fa6;line-height:1.5}
@media(max-width:768px){.hosting-features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.hosting-features{grid-template-columns:1fr}}

/* Clients page */
#clients-stats,#clients-logos,#clients-testimonials,#clients-industries,#clients-why{padding:5rem 0}
.clients-logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2rem}
@media(max-width:1024px){.clients-logo-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.clients-logo-grid{grid-template-columns:repeat(2,1fr)}}
.client-logo-card{background:#0c0f18;border:1px solid #1e2535;border-radius:8px;padding:1.4rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem;transition:border-color .3s,transform .3s}
.client-logo-card:hover{border-color:var(--accent-main);transform:translateY(-3px)}
.client-logo-card .client-icon{width:48px;height:48px;border-radius:50%;background:rgba(255,59,48,.1);display:flex;align-items:center;justify-content:center}
.client-logo-card .client-icon i{font-size:1.3rem;color:var(--accent-main)}
.client-logo-card .client-name{font-size:.9rem;font-weight:600;color:var(--text-main)}
.client-logo-card .client-industry{font-size:.75rem;color:#556a7f}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:2rem}
@media(max-width:1024px){.testimonials-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.testimonials-grid{grid-template-columns:1fr}}
.testimonial-card{background:#0c0f18;border:1px solid #1e2535;border-radius:8px;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:1rem;transition:border-color .3s}
.testimonial-card:hover{border-color:var(--accent-main)}
.testimonial-stars{color:var(--accent-main);font-size:.9rem;letter-spacing:2px}
.testimonial-quote{font-size:.95rem;color:#8fa5b8;line-height:1.75;flex-grow:1;font-style:italic}
.testimonial-quote::before{content:"\201C";font-size:1.4rem;color:var(--accent-main);vertical-align:-.2em;margin-right:.2rem}
.testimonial-author{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.author-avatar{width:44px;height:44px;border-radius:50%;background:rgba(255,59,48,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.author-avatar i{font-size:1.1rem;color:var(--accent-main)}
.author-info .author-name{font-size:.9rem;font-weight:600;color:var(--text-main)}
.author-info .author-company{font-size:.78rem;color:#556a7f}

/* Blog */
#blog-listing{padding:5rem 0}
#post-content{padding:0}
#contact-quick{padding:0 0 5rem}

/* ══════════════════════════════════════════
   UTILITIES — Helper Classes
══════════════════════════════════════════ */
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}
.text-uppercase{text-transform:uppercase}.text-bold{font-weight:bold}.text-accent{color:var(--accent-main)}
.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-center{display:flex;justify-content:center;align-items:center}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}
.grid{display:grid}.grid-2{grid-template-columns:repeat(2,1fr);gap:1.5rem}
.grid-3{grid-template-columns:repeat(3,1fr);gap:1.5rem}.grid-4{grid-template-columns:repeat(4,1fr);gap:1.5rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.p-1{padding:.5rem}.p-2{padding:1rem}.p-3{padding:1.5rem}.m-auto{margin:auto}
.w-100{width:100%}.h-100{height:100%}
.text-green{color:var(--accent-green,#4ade80)}.text-blue{color:var(--accent-blue,#38bdf8)}
.text-red{color:var(--accent-red,#f87171)}.text-yellow{color:var(--accent-yellow,#fbbf24)}
.hidden{display:none}.block{display:block}.inline-block{display:inline-block}
.rounded{border-radius:6px}.rounded-lg{border-radius:12px}
.border{border:1px solid #333}.border-green{border:1px solid var(--accent-green,#4ade80)}
.border-accent{border:1px solid var(--accent-main)}

/* ══════════════════════════════════════════
   RESPONSIVE — Media Queries
══════════════════════════════════════════ */
@media(max-width:360px){.hero{aspect-ratio:360/330;height:auto;min-height:unset}}
@media(max-width:767px){
  .hero{height:56.25vw;min-height:200px}
  .hero-slider img{object-fit:cover}
  .hero-content{margin-top:0;padding:2rem 1.2rem;text-align:center}
  .hero-content h1{font-size:1.7rem}
  .hero-content p{font-size:.95rem}
}
@media(max-width:320px){.hero-content h1{font-size:1.3rem}.hero-content p{font-size:.82rem}.hero-content .btn{font-size:.75rem;padding:.4rem .8rem}}
@media(max-width:375px){.hero-content h1{font-size:1.5rem}}
@media(max-width:576px){
  .hero-content .btn{margin:.5rem auto;display:inline-block}
  .services-grid{grid-template-columns:1fr}.features-list{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:1rem}.footer-section{text-align:left}
  footer .social-links{justify-content:flex-start}
  .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
  .stat{width:auto;padding:1rem}.stat h3{font-size:1.5rem}.stat p{font-size:.8rem}
  #why-us,#services,#how-we-work,#industries,#blog-preview,#certifications,#technologies,#mvv,.section-dark{padding:3rem 0}
  .cta{padding:2.5rem 0}
}
@media(max-width:768px){
  .top-bar{flex-direction:column;text-align:center;gap:.3rem}
  .main-bar{flex-direction:row;justify-content:space-between;position:relative}
  .desktop-nav{display:none}.hamburger{display:flex}
  .mobile-nav{display:none;position:absolute;top:100%;left:0;width:100%;background:#111;padding:1rem 0;z-index:1000;border-top:1px solid #222}
  .mobile-nav.active{display:block}
  .mobile-nav li{border-bottom:1px solid #222}
  .mobile-nav li a{display:block;padding:12px 20px;color:var(--accent-main)}
  .mobile-nav li a:hover{background:#222;color:#fff}
  .mobile-nav .dropdown-menu{display:none;background:#0d0d0d;padding-left:20px}
  .mobile-nav .dropdown.open>.dropdown-menu{display:block}
  .mobile-nav .dropdown-menu li a{font-size:.95rem;padding:10px 16px}
  .footer-grid{grid-template-columns:1fr;gap:1.5rem}
  header .social-links{display:flex;justify-content:center;margin-top:.5rem}
  #backToTop,.floating-btn.whatsapp,.theme-picker{bottom:20px!important;right:20px!important;left:auto!important}
}
@media(min-width:768px)and(max-width:820px){.hero{height:55vh}.container{max-width:95%}}
@media(min-width:821px)and(max-width:1024px){.hero{height:65vh}}
@media(min-width:577px)and(max-width:1024px){.container{max-width:900px}.services-grid,.features-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1366px){.container{max-width:1180px;padding:0 20px}.hero-content h1{font-size:2.4rem}}
@media(min-width:1440px){.container{max-width:1320px;margin:0 auto}.hero-content h1{font-size:2.6rem}}
@media(min-width:1920px){.container{max-width:1600px}.hero-content h1{font-size:3rem}}
@media(max-width:768px){.services-grid,.features-list{grid-template-columns:1fr}}
@media(max-width:480px){.hero-content h1{font-size:1.6rem}.card{padding:1rem}}
@media(max-width:1200px){.hero-content h1{font-size:2rem}.hero-content p{font-size:.9rem}}

/* ── Announcement Bar ────────────────────────────────────────────────────── */
.announcement-bar{position:fixed;top:0;left:0;width:100%;z-index:1100;padding:.55rem 0;font-size:.85rem;text-align:center}
.announcement-bar .ann-inner{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;padding:0 2.5rem;position:relative}
.announcement-bar .ann-link{color:inherit;text-decoration:underline;font-weight:500}
.ann-dismiss{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:1rem;line-height:1;opacity:.7;color:inherit;padding:.25rem}
.ann-dismiss:hover{opacity:1}
.ann-info   {background:#1a3a5c;color:#93c5fd;border-bottom:1px solid #1e40af}
.ann-warning{background:#3b2a04;color:#fde68a;border-bottom:1px solid #d97706}
.ann-success{background:#052e16;color:#86efac;border-bottom:1px solid #16a34a}
/* With new #header fixed container, announcement is stacked above header naturally */
/* body.has-announcement header top is no longer needed — #header contains both */
body.has-announcement{padding-top:calc(100px + var(--ann-height,40px))}
@media(max-width:640px){.announcement-bar{font-size:.78rem}.announcement-bar .ann-inner{padding:0 2rem}}

/* ════════════════════════════════
   SHINY BLACK — أسود لامع
   Glossy obsidian surface effect
════════════════════════════════ */
:root{
  /* Core shiny-black palette */
  --shine-bg:rgba(8,9,14,0.96);
  --shine-bg-surface:rgba(12,14,20,0.92);
  --shine-border:rgba(255,255,255,0.10);
  --shine-border-subtle:rgba(255,255,255,0.05);
  --shine-highlight:rgba(255,255,255,0.06);   /* top-edge light reflection */
  --shine-blur:blur(24px) saturate(200%);
  /* Deep shadow for obsidian depth */
  --shine-shadow:
    0 2px 1px rgba(255,255,255,0.04) inset,   /* top highlight */
    0 -1px 1px rgba(0,0,0,0.8) inset,          /* bottom depth */
    0 8px 32px rgba(0,0,0,0.7),
    0 2px 8px rgba(0,0,0,0.5);
  --shine-shadow-hover:
    0 2px 1px rgba(255,255,255,0.07) inset,
    0 -1px 1px rgba(0,0,0,0.9) inset,
    0 16px 48px rgba(0,0,0,0.75),
    0 4px 16px rgba(255,59,48,0.15);
}

/* Body — deep black with subtle specular gradient */
body{
  background:
    radial-gradient(ellipse 60% 35% at 20% 0%,  rgba(255,59,48,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 30% at 80% 100%, rgba(56,189,248,0.04) 0%, transparent 55%),
    linear-gradient(160deg, #04050a 0%, #060709 50%, #050608 100%) !important;
  background-attachment:fixed !important;
}

/* Header — polished black bar */
header{
  background:linear-gradient(180deg,
    rgba(16,18,26,0.97) 0%,
    rgba(10,11,18,0.98) 100%) !important;
  backdrop-filter:var(--shine-blur);
  -webkit-backdrop-filter:var(--shine-blur);
  border-bottom:1px solid var(--shine-border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 4px 24px rgba(0,0,0,0.7),
    0 1px 0 rgba(255,255,255,0.03);
}

/* Mobile nav */
.mobile-nav.compact,.mobile-nav.full{
  background:rgba(6,7,12,0.97) !important;
  backdrop-filter:var(--shine-blur);
  -webkit-backdrop-filter:var(--shine-blur);
  box-shadow:0 8px 32px rgba(0,0,0,0.8);
}

/* Dropdown */
.desktop-nav .dropdown-menu{
  background:linear-gradient(180deg,rgba(14,16,24,0.98) 0%,rgba(10,12,18,0.99) 100%) !important;
  backdrop-filter:var(--shine-blur);
  -webkit-backdrop-filter:var(--shine-blur);
  border:1px solid var(--shine-border) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 40px rgba(0,0,0,0.8);
}

/* Footer */
footer{
  background:linear-gradient(0deg,
    rgba(4,5,9,0.99) 0%,
    rgba(10,12,18,0.97) 100%) !important;
  backdrop-filter:var(--shine-blur);
  -webkit-backdrop-filter:var(--shine-blur);
  border-top:1px solid var(--shine-border) !important;
  box-shadow:0 -6px 32px rgba(0,0,0,0.6), 0 -1px 0 rgba(255,255,255,0.04);
}

/* Cards — shiny obsidian surface */
.card,.why-card,.step-card,.industry-card,.blog-card,
.stat,.history .fact,.mvv-card,.milestone,.team-card,
.plan,.cert-item,.testimonial-card,.client-logo-card,
.hosting-feat{
  background:linear-gradient(145deg,
    rgba(16,19,28,0.95) 0%,
    rgba(10,13,20,0.97) 60%,
    rgba(8,10,16,0.98) 100%) !important;
  backdrop-filter:var(--shine-blur);
  -webkit-backdrop-filter:var(--shine-blur);
  border:1px solid var(--shine-border) !important;
  box-shadow:var(--shine-shadow);
  position:relative;
}
/* Top-edge specular reflection on all cards */
.card::before,.why-card::before,.step-card::before,
.mvv-card::before,.milestone::before,.team-card::before,.plan::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0.05) 0%,transparent 40%);
  z-index:0;
}

/* Hover — brighter reflection + red glow */
.card:hover,.why-card:hover,.step-card:hover,.industry-card:hover,
.blog-card:hover,.stat:hover,.history .fact:hover,.mvv-card:hover,
.milestone:hover,.team-card:hover,.plan:hover,.cert-item:hover,
.client-logo-card:hover,.testimonial-card:hover,.hosting-feat:hover{
  border-color:rgba(255,59,48,0.45) !important;
  box-shadow:var(--shine-shadow-hover);
  background:linear-gradient(145deg,
    rgba(20,24,34,0.96) 0%,
    rgba(14,17,26,0.98) 60%,
    rgba(10,13,20,0.99) 100%) !important;
}

/* Sections */
.services{background:rgba(7,8,13,0.70) !important}
.features{background:rgba(6,7,11,0.70) !important}
.section-dark{background:rgba(3,4,7,0.85) !important}
.cta{background:rgba(6,7,12,0.80) !important}

/* Domain search input */
.domain-search-box input{
  background:rgba(6,8,14,0.95) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--shine-border) !important;
  box-shadow:0 2px 1px rgba(255,255,255,0.04) inset, 0 4px 12px rgba(0,0,0,0.5);
}
.domain-search-box input:focus{
  border-color:var(--accent-main) !important;
  box-shadow:0 0 0 3px rgba(255,59,48,0.10) !important;
}

/* Domain result */
.domain-result{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Form inputs — shiny */
form input,form textarea,form select{
  background:rgba(6,8,14,0.92) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--shine-border) !important;
  box-shadow:0 2px 1px rgba(255,255,255,0.03) inset, 0 4px 12px rgba(0,0,0,0.4) !important;
}
form input:focus,form textarea:focus,form select:focus{
  border-color:rgba(255,59,48,0.55) !important;
  box-shadow:0 0 0 3px rgba(255,59,48,0.08) !important;
}

/* CTA section */
.cta{background:rgba(8,9,13,0.55) !important}

/* Intro overlay — glass */
.intro-overlay{background:rgba(6,7,11,0.97) !important}

/* Plan featured highlight */
.plan.plan-featured{border-color:rgba(255,59,48,0.50) !important}

/* Announcement bar */
.ann-info   {background:rgba(26,58,92,0.85) !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ann-warning{background:rgba(59,42,4,0.85)  !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ann-success{background:rgba(5,46,22,0.85)  !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ════════════════════════════════
   VISUAL POLISH — Software Company Grade
════════════════════════════════ */

/* ── Animated subtle grid mesh on body ─────────────────────── */
body::before{
  content:'';
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,59,48,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,59,48,0.025) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 100%);
  animation:gridDrift 20s linear infinite;
}
@keyframes gridDrift{
  0%  {background-position:0 0}
  100%{background-position:60px 60px}
}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}

/* Ensure content above pseudo-element */
body > *{position:relative;z-index:1}

/* ── Section title accent line ──────────────────────────────── */
.section-title{
  position:relative;display:inline-block;
}
.section-title::after{
  content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  width:40px;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-main),transparent);
  border-radius:2px;
}

/* ── Glowing accent buttons ─────────────────────────────────── */
.btn-filled{
  position:relative;overflow:hidden;
  box-shadow:0 0 20px rgba(255,59,48,0.25), 0 4px 12px rgba(0,0,0,0.4) !important;
  transition:all .3s cubic-bezier(.22,1,.36,1) !important;
}
.btn-filled::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 60%);
  pointer-events:none;
}
.btn-filled:hover{
  box-shadow:0 0 32px rgba(255,59,48,0.45), 0 8px 20px rgba(0,0,0,0.5) !important;
  transform:translateY(-2px) !important;
}

/* ── Section divider glow ───────────────────────────────────── */
section + section::before,
.section-dark + section::before{
  content:'';display:block;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,59,48,0.15) 30%,rgba(255,59,48,0.25) 50%,rgba(255,59,48,0.15) 70%,transparent 100%);
  margin:0;
}

/* ── Fancy scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(255,59,48,0.6),rgba(255,59,48,0.2));
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{background:rgba(255,59,48,0.8)}

/* ── Text selection ─────────────────────────────────────────── */
::selection{background:rgba(255,59,48,0.30);color:#fff}

/* ── Focus rings ────────────────────────────────────────────── */
:focus-visible{
  outline:2px solid rgba(255,59,48,0.7);
  outline-offset:3px;
  border-radius:4px;
}

/* ── Smooth image loading ───────────────────────────────────── */
img{transition:opacity .4s ease}
img[loading]{opacity:0}
img.loaded{opacity:1}

/* ── Hero content layering (particles canvas sits under text) ── */
.hero-content{position:relative;z-index:2}
.hero-slider{z-index:0}

/* ── Cursor glow on interactive elements ───────────────────── */
@media(hover:hover){
  .btn,.btn-filled,.card,.why-card,.step-card,.plan{cursor:pointer}
}

/* ── Center ALL direct-child h2 in section containers (v2.7) ── */
section > .container > h2,
section > .container > p.section-sub {
  text-align: center !important;
}

/* ── About logo float animations (v2.9: !important guards) ── */
/* Homepage About section */
.about-image img {
  animation: float 4s ease-in-out infinite !important;
}
/* /about page story section */
.about-story-img img {
  animation: float 5s ease-in-out infinite !important;
  filter: drop-shadow(0 8px 24px rgba(255,59,48,0.18));
}

/* ════════════════════════════════
   Authored by: < Eng.Mazen Kazzara />
   { "title":"CTO","co-title":"Founder"}
════════════════════════════════ */