/*
Theme Name: Cyber Shell
Theme URI: https://cybershell.it.com/
Author: Cyber Shell
Author URI: https://cybershell.it.com/
Description: Premium responsive corporate theme for Cyber Shell IT, digital, AI, cloud and BPO services.
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cyber-shell
*/
:root{--bg:#050b1a;--bg2:#0a1630;--cy:#22d3ee;--bl:#2563eb;--tx:#e6f1ff;--mu:#9db3d1;--lt:#f3f7fc;--ink:#0b1a33;--r:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tx)}
img{max-width:100%;height:auto}a{color:var(--cy)}.wrap{width:min(1180px,100% - 2rem);margin:auto}.center{text-align:center}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:8px;z-index:99}
:focus-visible{outline:3px solid var(--cy);outline-offset:2px}
.hdr{position:sticky;top:0;z-index:50;background:rgba(5,11,26,.85);backdrop-filter:blur(12px);border-bottom:1px solid #16264a}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.logo{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-weight:700;font-size:1.2rem}.logo img{background:none;border-radius:0;padding:0}
nav#menu{display:flex;align-items:center;gap:1.4rem}nav#menu>a,.dd>a{color:var(--tx);text-decoration:none;font-weight:500}nav#menu>a:hover,.dd>a:hover{color:var(--cy)}
.dd{position:relative}.mega{position:absolute;right:-120px;top:100%;display:none;grid-template-columns:1fr 1fr;gap:2rem;padding:1.4rem;background:var(--bg2);border:1px solid #1d3163;border-radius:var(--r);width:560px;box-shadow:0 20px 50px #0008}
.dd:hover .mega,.dd:focus-within .mega{display:grid}.mega h3{margin:0 0 .5rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}.mega h3 a{color:var(--cy);text-decoration:none}.mega div>a{display:block;color:var(--tx);text-decoration:none;padding:.25rem 0}.mega div>a:hover{color:var(--cy)}
.btn{display:inline-block;background:linear-gradient(135deg,var(--cy),var(--bl));color:#031024;font-weight:700;padding:.85rem 1.5rem;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font-size:1rem;min-height:44px;box-shadow:0 0 24px #22d3ee44;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 34px #22d3ee88}.btn.ghost{background:transparent;color:var(--cy);border:1px solid var(--cy);box-shadow:none}.btn.sm{padding:.55rem 1rem;font-size:.9rem}
.burger{display:none;background:none;border:1px solid #1d3163;border-radius:10px;width:46px;height:46px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}.burger i{width:22px;height:2px;background:#fff}
.hero{position:relative;overflow:hidden;padding:clamp(3rem,8vw,6.5rem) 0;background:radial-gradient(circle at 80% 20%,#0d2a5c,var(--bg) 60%)}
.hg{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;position:relative;z-index:1}
h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.12;margin:.3rem 0 1rem;background:linear-gradient(90deg,#fff,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(1.5rem,3.2vw,2.3rem);margin:0 0 1rem}h3{margin:.2rem 0 .4rem}.lead{font-size:1.15rem;color:var(--mu)}.sub{color:var(--mu);max-width:720px}
.crumb{font-size:.85rem;color:var(--mu)}.crumb a{color:var(--mu)}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;animation:float 12s ease-in-out infinite}.o1{width:320px;height:320px;background:var(--bl);top:-80px;left:-60px}.o2{width:260px;height:260px;background:var(--cy);bottom:-80px;right:10%;animation-delay:-5s}
.viz svg{width:100%;max-width:380px;display:block;margin:auto}.net{stroke-width:1.2;opacity:.7;transform-origin:150px 150px;animation:spin 60s linear infinite}
@keyframes float{50%{transform:translate(30px,25px)}}@keyframes spin{to{transform:rotate(360deg)}}
.sec{padding:clamp(3rem,7vw,5rem) 0}.sec.lt{background:var(--lt);color:var(--ink)}.sec.lt .sub,.sec.lt .card p{color:#4a5d7a}.sec.dark{background:var(--bg2)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;margin-top:1.5rem}.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{display:block;padding:1.5rem;border-radius:var(--r);background:rgba(255,255,255,.05);border:1px solid #1d3163;color:inherit;text-decoration:none;backdrop-filter:blur(8px);transition:transform .25s,box-shadow .25s,border-color .25s}
.lt .card{background:#fff;border-color:#dbe5f3}.card:hover{transform:translateY(-5px);border-color:var(--cy);box-shadow:0 14px 34px #22d3ee22}.card p{margin:.2rem 0;color:var(--mu);font-size:.95rem}
.ic{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 .4rem;border-radius:12px;background:linear-gradient(135deg,var(--cy),var(--bl));color:#031024;font-weight:800;font-size:.9rem}.more{display:block;margin-top:.7rem;color:var(--cy);font-weight:600;font-size:.9rem}.lt .more{color:var(--bl)}
.step b{font-size:2rem;color:var(--cy)}.two{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.tick{list-style:none;padding:0;margin:0}.tick li{padding:.4rem 0 .4rem 1.8rem;position:relative}.tick li:before{content:"✓";position:absolute;left:0;color:var(--bl);font-weight:800}
.faq details{background:#fff;border:1px solid #dbe5f3;border-radius:12px;padding:1rem 1.2rem;margin:.7rem 0}.faq summary{cursor:pointer;font-weight:600}
.cta{text-align:center;background:linear-gradient(135deg,#0a2a66,#0b5f86)}
.form{display:grid;gap:1rem}.form label{display:grid;gap:.3rem;font-weight:600}.form input,.form select,.form textarea{padding:.8rem;border-radius:10px;border:1px solid #b9c8de;font:inherit;width:100%}
.ci{list-style:none;padding:0}.ci li{padding:.3rem 0}.lt a{color:var(--bl)}
.ftr{background:#030712;padding:3rem 0 1rem;border-top:1px solid #16264a}.fg{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}.ftr h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cy)}.ftr a{display:block;color:var(--mu);text-decoration:none;padding:.15rem 0}.ftr a:hover{color:var(--cy)}.ftr .logo{display:flex;align-items:center;gap:.6rem;color:#fff;padding:0;font-size:1.2rem;font-weight:700}.ftr .logo img{flex:none;display:block}.ftr .logo:hover{color:#fff}.ftr ul{list-style:none;padding:0;margin:0;color:var(--mu)}.ftr p{color:var(--mu)}.soc a{display:inline-block;margin-right:.5rem;border:1px solid #1d3163;border-radius:50%;width:36px;height:36px;line-height:34px;text-align:center}.mt{margin-top:1rem}.copy{text-align:center;border-top:1px solid #16264a;margin-top:2rem;padding-top:1rem;font-size:.85rem}
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}.rv.in{opacity:1;transform:none}
@media(max-width:900px){.hg,.two,.fg{grid-template-columns:1fr}.viz{display:none}.burger{display:flex}
nav#menu{position:absolute;left:0;right:0;top:100%;background:var(--bg2);flex-direction:column;align-items:stretch;padding:1rem;display:none;max-height:80vh;overflow:auto}nav#menu.open{display:flex}
nav#menu>a,.dd>a{padding:.6rem 0}.mega{position:static;display:grid;grid-template-columns:1fr;width:auto;box-shadow:none;border:0;padding:0 0 0 1rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}

/* WordPress additions */
.admin-bar .hdr{top:32px}
@media(max-width:782px){.admin-bar .hdr{top:46px}}
.wp-block-button .btn{color:#031024}
.error-404{padding:6rem 0;text-align:center}

/* Page-specific hero animations (SVGs live in /viz) */
.viz svg .fb{transform-box:fill-box;transform-origin:center}.viz svg .ft{transform-box:fill-box;transform-origin:50% 0}
.v-spin{animation:v-spin 30s linear infinite}.v-cr{animation:v-spinr 30s linear infinite}.v-gear{animation:v-spin 24s linear infinite}.v-gearr{animation:v-spinr 16s linear infinite}
.v-pulse{animation:v-pulse 2.6s ease-in-out infinite}.v-ripple{animation:v-ripple 2.8s ease-out infinite}
.v-flow{stroke-dasharray:5 7;animation:v-flow 1.2s linear infinite}
.v-tile{opacity:0;animation:v-tile 3s ease-in-out infinite}
.v-float{animation:v-float 4s ease-in-out infinite}.v-rise{animation:v-rise 3.6s ease-out infinite;opacity:0;transform-box:fill-box;transform-origin:center}
.v-pop{animation:v-pop 6s ease-out infinite}.v-blink{animation:v-blink 2.4s ease-in-out infinite}
.v-mer{animation:v-mer 6s linear infinite}.v-build{animation:v-build 6s ease-in-out infinite}
.v-jump{animation:v-jump 3s ease-in-out infinite}.v-move{animation:v-move 3s linear infinite}.v-coin{animation:v-coin 1.6s ease-in-out infinite}
.v-draw{stroke-dasharray:1;animation:v-draw 4.5s ease-in-out infinite}
.v-star{opacity:0;animation:v-star 4.2s ease-out infinite}.v-eye{animation:v-eye 4s ease-in-out infinite}.v-dot{animation:v-dot 1s ease-in-out infinite}
.v-flap{animation:v-flap 5s ease-in-out infinite}.v-letter{opacity:0;animation:v-letter 5s ease-in-out infinite}
.v-check{stroke-dasharray:1;stroke-dashoffset:1;animation:v-check 5s ease-in-out infinite}.v-conv{opacity:0;animation:v-conv 3.6s ease-in-out infinite}
@keyframes v-spin{to{transform:rotate(360deg)}}@keyframes v-spinr{to{transform:rotate(-360deg)}}
@keyframes v-pulse{50%{transform:scale(1.12)}}
@keyframes v-ripple{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.8);opacity:0}}
@keyframes v-flow{to{stroke-dashoffset:-12}}
@keyframes v-tile{0%,100%{opacity:0}35%{opacity:.55}}
@keyframes v-float{50%{transform:translateY(-9px)}}
@keyframes v-rise{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-70px) scale(1.15)}}
@keyframes v-pop{0%{opacity:0;transform:translateY(12px) scale(.85)}8%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes v-blink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes v-mer{0%,100%{transform:scaleX(1)}25%,75%{transform:scaleX(.71)}50%{transform:scaleX(.02)}}
@keyframes v-build{0%{opacity:0;transform:translateY(10px) scale(.96)}15%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes v-jump{0%,48%,82%,100%{transform:translateY(0)}65%{transform:translateY(-58px)}}
@keyframes v-move{from{transform:translateX(0)}to{transform:translateX(-330px)}}
@keyframes v-coin{50%{transform:scaleX(.15)}}
@keyframes v-draw{0%{stroke-dashoffset:1;opacity:1}55%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes v-star{0%{opacity:0;transform:scale(.4)}12%,75%{opacity:1;transform:scale(1)}90%,100%{opacity:0}}
@keyframes v-eye{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes v-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-6px);opacity:1}}
@keyframes v-flap{0%,12%{transform:scaleY(1)}28%,72%{transform:scaleY(-.95)}88%,100%{transform:scaleY(1)}}
@keyframes v-letter{0%,20%{transform:translateY(0);opacity:0}28%{opacity:1}45%,68%{transform:translateY(-64px);opacity:1}82%,100%{transform:translateY(0);opacity:0}}
@keyframes v-check{0%{stroke-dashoffset:1;opacity:1}12%,82%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes v-conv{0%{transform:translateX(0);opacity:0}10%{opacity:1}75%{transform:translateX(150px);opacity:1}88%,100%{transform:translateX(168px) scale(.5);opacity:0}}
.v-pop,.v-build,.v-rise,.v-star,.v-check,.v-conv,.v-letter,.v-draw,.v-tile,.v-ripple{animation-fill-mode:backwards}
@media(prefers-reduced-motion:reduce){.viz svg *{animation:none!important}.v-tile{opacity:.25}.v-letter,.v-conv,.v-rise{opacity:0}.v-star{opacity:1}.v-check{stroke-dashoffset:0}.v-ripple{opacity:.3}}