/* ============================================================
   DevHive Studio — Core Design System
   ============================================================ */
:root{
  --navy:#001727;
  --navy-2:#04263b;
  --navy-3:#073049;
  --teal:#00bdc3;
  --sky:#03aae1;
  --blue:#0277d4;
  --ink:#0b1f2e;
  --slate:#5b7385;
  --mist:#f4f8fb;
  --mist-2:#eef4f9;
  --line:#e3ecf3;
  --white:#ffffff;
  --grad: linear-gradient(120deg,var(--teal),var(--sky) 55%,var(--blue));
  --grad-soft: linear-gradient(120deg,#e6fbfc,#e8f5ff);
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:28px;
  --shadow-sm:0 4px 18px rgba(2,40,70,.06);
  --shadow:0 18px 50px rgba(2,40,70,.10);
  --shadow-lg:0 40px 90px rgba(2,40,70,.18);
  --maxw:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  --display:"Bricolage Grotesque",sans-serif;
  --body:"Manrope",sans-serif;
  --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);line-height:1.05;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.container{max-width:var(--maxw);margin:0 auto;padding-left:26px;padding-right:26px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--grad);border-radius:2px}
.eyebrow.light{color:var(--teal)}
.section{padding:110px 0;position:relative}
.section.tight{padding:80px 0}
.bg-mist{background:var(--mist)}
.bg-navy{background:var(--navy);color:#dceaf2}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.center{text-align:center}
.lead{font-size:19px;color:var(--slate);max-width:640px}
.center .lead{margin-left:auto;margin-right:auto}
.bg-navy .lead{color:#9fb8c8}
.sec-head{max-width:720px;margin-bottom:54px}
.sec-head.center{margin-left:auto;margin-right:auto}
h2.title{font-size:clamp(30px,4.4vw,50px)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-weight:700;font-size:15.5px;
  padding:15px 28px;border-radius:50px;border:0;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;
  position:relative;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 30px rgba(3,140,200,.35)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(3,140,200,.45)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--sky);color:var(--blue);transform:translateY(-3px)}
.bg-navy .btn-ghost{color:#fff;border-color:rgba(255,255,255,.25)}
.bg-navy .btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-arrow{transition:transform .3s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(5px)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:18px 0;transition:background .25s ease,padding .3s var(--ease),box-shadow .3s ease;
}
.site-header.scrolled{
  background:rgba(8,14,24,.94);backdrop-filter:blur(14px);
  padding:11px 0;box-shadow:0 8px 30px rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;font-size:22px}
.brand .mark{width:40px;height:44px;flex:none;object-fit:contain}
.brand .wordmark{display:flex;flex-direction:column;line-height:.95}
.brand .wordmark b{color:var(--navy)}
.brand .wordmark span{font-size:13.5px;font-weight:700;color:var(--sky);letter-spacing:.02em}
.site-header:not(.scrolled) .nav.on-dark .wordmark b{color:#fff}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none}
.nav-links>li>a{
  display:block;padding:10px 15px;border-radius:10px;font-weight:600;font-size:15px;
  color:var(--ink);transition:color .25s,background .25s;
}
.nav.on-dark:not(.force-light) .nav-links>li>a{color:#e7f1f8}
.site-header.scrolled .nav .nav-links>li>a{color:#e7f1f8}
.site-header.scrolled .nav-links>li>a:hover,.site-header.scrolled .nav-links>li>a.active{color:var(--teal)}
.site-header.scrolled .brand .wordmark b{color:#fff}
.nav-links>li>a:hover,.nav-links>li>a.active{color:var(--blue)}
.nav.on-dark:not(.force-light) .nav-links>li>a:hover{color:var(--teal);background:rgba(255,255,255,.08)}
.has-drop{position:relative}
.has-drop>a::after{content:"";margin:0}
.has-drop .srv-i{display:inline-block;margin-left:5px;transform:rotate(90deg);transition:transform .3s var(--ease);font-style:normal;opacity:.75}
.has-drop.open .srv-i{transform:rotate(-90deg)}
.drop{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(10px);
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);
  padding:14px;width:740px;
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
/* opens on CLICK now (.open class via JS), not on hover */
.has-drop.open .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-head{margin:0 0 8px}
.drop-all{display:flex !important;flex-direction:column;gap:1px;padding:11px 13px;border-radius:12px;
  background:var(--grad-soft);text-decoration:none}
.drop-all b{font-size:14px;color:var(--ink);font-family:var(--body);font-weight:800}
.drop-all small{font-size:11.5px;color:var(--blue);font-weight:600}
.drop-all:hover{filter:brightness(.98)}
.drop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.drop a{display:flex;gap:11px;align-items:center;padding:9px 11px;border-radius:12px;transition:background .2s}
.drop a:hover{background:var(--mist)}
.drop a .di{width:34px;height:34px;flex:none;border-radius:10px;background:var(--grad-soft);display:grid;place-items:center;color:var(--blue)}
.drop a .di svg{width:18px;height:18px}
.drop a .dt{min-width:0}
.drop a b{display:block;font-size:13.5px;line-height:1.2;color:var(--ink);font-family:var(--body);font-weight:700}
.drop a small{display:block;color:var(--slate);font-size:11.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:26px;height:2.5px;background:var(--ink);border-radius:3px;transition:.3s}
.nav.on-dark:not(.force-light) .burger span{background:#fff}
.site-header.scrolled .burger span{background:#fff}

/* mobile nav — compact & professional */
.mobile-nav{
  display:none;
  position:fixed;inset:0;background:var(--navy);z-index:1100;
  padding:84px 24px 36px;overflow-y:auto;
}
.mobile-nav.open{display:block;animation:drawerIn .42s var(--ease)}
.mobile-nav>a{display:flex;align-items:center;color:#eaf3fa;font-family:var(--display);font-size:18px;font-weight:700;padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.07);transition:color .2s}
.mobile-nav>a:hover,.mobile-nav>a:active{color:var(--teal)}
/* Services accordion */
.m-acc{border-bottom:1px solid rgba(255,255,255,.07)}
.m-acc-top{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;cursor:pointer;
  color:#eaf3fa;font-family:var(--display);font-size:18px;font-weight:700;padding:15px 4px;text-align:left}
.m-acc-top .m-caret{font-size:20px;line-height:1;opacity:.7;transform:rotate(90deg);transition:transform .3s var(--ease)}
.m-acc-top.open .m-caret{transform:rotate(-90deg);color:var(--teal)}
.m-acc-panel{max-height:0;overflow:hidden;transition:max-height .38s var(--ease)}
.m-acc-panel .sub{display:block;color:#9fb8c8;font-family:var(--body);font-size:14.5px;font-weight:600;
  padding:11px 4px 11px 16px;border-bottom:1px solid rgba(255,255,255,.05);text-decoration:none;transition:color .2s}
.m-acc-panel .sub:last-child{border-bottom:0}
.m-acc-panel .sub:hover{color:var(--teal)}
.m-acc-panel .sub-all{color:#fff;font-weight:700;font-family:var(--display)}
.mclose{position:absolute;top:24px;right:22px;background:none;border:0;color:#fff;font-size:32px;cursor:pointer;line-height:1}

/* ---------- Hero base ---------- */
.hero{position:relative;overflow:hidden;color:#fff;
  background:
   radial-gradient(1000px 620px at 80% -8%,rgba(0,189,195,.26),transparent 55%),
   radial-gradient(900px 720px at 10% 22%,rgba(2,119,212,.22),transparent 55%),
   radial-gradient(760px 620px at 96% 85%,rgba(3,170,225,.16),transparent 55%),
   linear-gradient(155deg,#04293f 0%,#021b2d 46%,#010e19 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url(../img/grain.png);background-size:240px;opacity:.06;mix-blend-mode:overlay;animation:grainShift 7s steps(5) infinite}
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,14,25,.45),transparent 16%),radial-gradient(130% 120% at 50% 32%,transparent 52%,rgba(1,11,20,.6))}
@keyframes grainShift{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,-2%)}80%{transform:translate(4%,3%)}100%{transform:translate(0,0)}}
.hero .container{position:relative;z-index:3}
.hero-pad{padding:170px 0 110px}
.hero h1{font-size:clamp(40px,6.4vw,76px);color:#fff;line-height:1}
.hero p.lead{color:#a9c3d4;font-size:clamp(17px,2vw,21px);margin-top:24px}
.hero .scene{position:absolute;inset:0;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:8px 16px;border-radius:50px;font-size:13.5px;font-weight:600;color:#cfe6f2;margin-bottom:26px;font-family:var(--mono);letter-spacing:.04em}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(0,189,195,.6);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,189,195,.55)}70%{box-shadow:0 0 0 12px rgba(0,189,195,0)}100%{box-shadow:0 0 0 0 rgba(0,189,195,0)}}
.hero-cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;margin-top:54px;flex-wrap:wrap}
.hero-stats .hs b{font-family:var(--display);font-size:34px;color:#fff;display:block;line-height:1}
.hero-stats .hs span{font-size:13px;color:#8fb0c4;font-weight:600}
.glow-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;z-index:1}

/* ---------- Reveal animation ---------- */
.js .reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.card .ic{width:54px;height:58px;margin-bottom:20px;color:var(--blue)}
.card h3{font-size:21px;margin-bottom:10px}
.card p{color:var(--slate);font-size:15.5px}
.card .more{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:var(--blue);font-weight:700;font-size:14.5px}
.card .more svg{transition:transform .3s}
.card:hover .more svg{transform:translateX(4px)}
.bg-navy .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
.bg-navy .card:hover{background:rgba(255,255,255,.07);box-shadow:none}
.bg-navy .card p{color:#9fb8c8}

.feature-card{position:relative;overflow:hidden}
.feature-card::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .4s;z-index:0}
.feature-card>*{position:relative;z-index:1}
.num-badge{font-family:var(--mono);font-size:13px;color:var(--blue);font-weight:700}

/* stat strip */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat b{font-family:var(--display);font-size:clamp(36px,5vw,56px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;line-height:1}
.stat span{color:var(--slate);font-weight:600;font-size:14.5px}
.bg-navy .stat span{color:#9fb8c8}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:relative}
.step .n{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:18px;margin-bottom:18px}
.step h3{font-size:18px;margin-bottom:8px}
.step p{color:var(--slate);font-size:14.5px}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.flip>div:first-child{order:2}
.media-frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.media-frame img{width:100%;height:100%;object-fit:cover}

/* check list */
.checks{list-style:none;display:grid;gap:14px;margin-top:8px}
.checks li{display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--ink)}
.bg-navy .checks li{color:#cfe0ea}
.checks li .ck{flex:none;width:26px;height:26px;border-radius:8px;background:var(--grad-soft);color:var(--blue);display:grid;place-items:center;margin-top:2px}
.bg-navy .checks li .ck{background:rgba(0,189,195,.16);color:var(--teal)}

/* tag pills */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{font-family:var(--mono);font-size:13px;font-weight:600;padding:9px 16px;border-radius:50px;background:var(--mist);border:1px solid var(--line);color:var(--ink)}
.bg-navy .pill{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#cfe0ea}

/* testimonials */
.quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px;position:relative}
.quote-card .qm{font-family:var(--display);font-size:64px;line-height:.4;color:var(--teal);opacity:.35}
.quote-card p{font-size:17.5px;color:var(--ink);margin:14px 0 24px;font-weight:500}
.who{display:flex;align-items:center;gap:14px}
.who .av{width:48px;height:48px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700}
.who b{display:block;font-family:var(--body);font-size:15px}
.who span{color:var(--slate);font-size:13px}

/* CTA band */
.cta-band{background:radial-gradient(120% 140% at 100% 0%,#0a2740 0%,var(--navy) 45%,#020d16 100%);border-radius:var(--radius-lg);padding:70px;text-align:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.cta-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:42px 42px;-webkit-mask:radial-gradient(120% 120% at 0% 100%,#000,transparent 70%);mask:radial-gradient(120% 120% at 0% 100%,#000,transparent 70%);opacity:.5}
.cta-band::after{content:"";position:absolute;width:460px;height:460px;left:-120px;bottom:-180px;border-radius:50%;background:radial-gradient(circle,rgba(106,92,255,.22),transparent 68%);filter:blur(20px)}
.cta-band h2{color:#fff;font-size:clamp(28px,4vw,46px);position:relative;z-index:2}
.cta-band p{color:#9fb8c8;position:relative;z-index:2;max-width:560px;margin:16px auto 0}
.cta-band .hero-cta{justify-content:center;position:relative;z-index:2}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line);padding:6px 0}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;background:none;border:0;cursor:pointer;padding:22px 0;font-family:var(--display);font-weight:700;font-size:19px;text-align:left;color:var(--ink)}
.faq-q .pm{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:.3s;color:var(--blue)}
.faq-item.open .pm{background:var(--grad);color:#fff;border-color:transparent;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a p{padding:0 0 22px;color:var(--slate)}

/* logo marquee */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:60px;width:max-content;animation:scroll 28s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee .m-item{font-family:var(--display);font-weight:700;font-size:24px;color:var(--slate);opacity:.7;white-space:nowrap;display:flex;align-items:center;gap:10px}

/* footer */
.site-footer{background:var(--navy);color:#9fb8c8;padding:80px 0 30px;position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;position:relative;z-index:2}
.site-footer h4{color:#fff;font-family:var(--body);font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px;font-weight:700}
.site-footer a{display:block;padding:6px 0;color:#9fb8c8;font-size:15px;transition:color .2s}
.site-footer a:hover{color:var(--teal)}
.foot-brand p{margin:18px 0;font-size:15px;max-width:300px}
.foot-social{display:flex;gap:12px}
.foot-social a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.06);display:grid;place-items:center;padding:0;color:#cfe0ea}
.foot-social a:hover{background:var(--grad);color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.09);margin-top:54px;padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px}
.foot-newsletter input{width:100%;padding:14px 16px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font-family:var(--body);margin-bottom:12px}
.foot-newsletter input::placeholder{color:#7e9bad}

/* contact form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{
  padding:15px 17px;border-radius:12px;border:1.5px solid var(--line);background:#fff;
  font-family:var(--body);font-size:15.5px;color:var(--ink);transition:border-color .25s,box-shadow .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--sky);box-shadow:0 0 0 4px rgba(3,170,225,.12)}
.field textarea{resize:vertical;min-height:130px}

/* info tiles */
.info-tile{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.info-tile .it{width:48px;height:48px;flex:none;border-radius:12px;background:var(--grad-soft);color:var(--blue);display:grid;place-items:center}
.info-tile b{display:block;font-family:var(--display);font-size:16px}
.info-tile span{color:var(--slate);font-size:14.5px}

/* breadcrumb */
.crumb{font-family:var(--mono);font-size:13px;color:#8fb0c4;letter-spacing:.06em;margin-bottom:22px}
.crumb a:hover{color:var(--teal)}

svg.ic-stroke{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ===== Responsive ===== */
@media(max-width:1024px){
  .hero-grid,.split{grid-template-columns:1fr;gap:40px}
  .split.flip>div:first-child{order:0}
  .g4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:flex}
}
@media(max-width:640px){
  body{font-size:16px}
  .section{padding:74px 0}
  .g2,.g3,.g4,.form-grid{grid-template-columns:1fr}
  .stats-strip,.steps{grid-template-columns:1fr 1fr}
  .hero-pad{padding:140px 0 80px}
  .cta-band{padding:46px 26px}
  .foot-grid{grid-template-columns:1fr}
  .hero-stats{gap:24px}
  .container{padding-left:20px;padding-right:20px}
}

/* ============================================================
   HERO SCENE ANIMATIONS (unique per page)
   ============================================================ */
.scene .float{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes floaty2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-30px) rotate(8deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinR{to{transform:rotate(-360deg)}}
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(30px,-20px)}100%{transform:translate(0,0)}}
@keyframes dash{to{stroke-dashoffset:0}}
@keyframes fade-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:.25}}
@keyframes nodeglow{0%,100%{opacity:.4;r:3}50%{opacity:1;r:5}}
@keyframes sweep{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes scan-y{0%{top:0}100%{top:100%}}
@keyframes wave{0%{transform:scale(.4);opacity:.8}100%{transform:scale(2.2);opacity:0}}
@keyframes typing{from{width:0}to{width:100%}}
@keyframes barUp{from{transform:scaleY(.1)}to{transform:scaleY(1)}}

.hex-accent{position:absolute;inset:0;z-index:1;opacity:.5}
.hex-accent path{stroke:rgba(120,210,235,.16);stroke-width:1.5;fill:none}
.hex-accent .ha-drift{animation:haDrift 24s ease-in-out infinite}
@keyframes haDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
.hero .glow-a{width:560px;height:560px;background:radial-gradient(circle,rgba(0,189,195,.42),transparent 70%);top:40px;right:-120px;animation:drift1 18s ease-in-out infinite}
.hero .glow-b{width:520px;height:520px;background:radial-gradient(circle,rgba(2,119,212,.38),transparent 70%);bottom:-160px;left:-120px;animation:drift2 22s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,40px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-30px)}}

/* floating hex chips */
.hexchip{position:absolute;width:84px;height:92px;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);backdrop-filter:blur(4px)}
.hexchip svg{width:38px;height:38px;color:var(--teal)}

/* rotating words */
.rotator{display:inline-block;position:relative;vertical-align:bottom;height:1.05em;overflow:hidden}
.rotator span{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rotw 16s cubic-bezier(.76,0,.24,1) infinite}
@keyframes rotw{0%,22%{transform:translateY(0)}25%,47%{transform:translateY(-100%)}
  50%,72%{transform:translateY(-200%)}75%,100%{transform:translateY(-300%)}}

/* code window */
.codewin{background:#04263b;border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;font-family:var(--mono);font-size:13.5px}
.codewin .bar{display:flex;gap:7px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.codewin .bar i{width:11px;height:11px;border-radius:50%;display:block}
.codewin .bar i:nth-child(1){background:#ff5f57}.codewin .bar i:nth-child(2){background:#febc2e}.codewin .bar i:nth-child(3){background:#28c840}
.codewin pre{padding:20px;color:#9fb8c8;line-height:1.8;overflow:hidden}
.codewin .ln{display:block;opacity:0;animation:fade-up .5s forwards}
.codewin .k{color:#5bd1ff}.codewin .s{color:#7be0c0}.codewin .c{color:#5b7385}.codewin .f{color:#ffd479}
.cursor::after{content:"▋";color:var(--teal);animation:blink 1s steps(1) infinite}

/* phone mock */
.phone{width:230px;height:470px;border-radius:38px;background:#04263b;border:8px solid #0b3350;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;margin:0 auto}
.phone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:110px;height:24px;background:#0b3350;border-radius:0 0 16px 16px;z-index:3}
.phone .screen{position:absolute;inset:8px;border-radius:30px;background:linear-gradient(160deg,#062a44,#021c2f);overflow:hidden}
.phone-card{position:absolute;left:14px;right:14px;height:60px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);animation:fade-up .6s forwards;opacity:0}

/* scanning shield */
.scanbox{position:relative;width:280px;height:280px;margin:0 auto}
.scanline{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--teal),transparent);animation:scan-y 2.4s ease-in-out infinite;box-shadow:0 0 16px var(--teal)}

/* neural net */
.neural circle{fill:var(--sky)}
.neural .nl{stroke:rgba(120,210,235,.3);stroke-width:1;stroke-dasharray:4 5;animation:dash 3s linear infinite}

/* orbit */
.orbit-wrap{position:relative;width:360px;height:360px;margin:0 auto}
.orbit{position:absolute;inset:0;border:1px dashed rgba(255,255,255,.18);border-radius:50%;animation:spin 24s linear infinite}
.orbit.o2{inset:48px;animation-duration:18s;animation-direction:reverse}
.orbit.o3{inset:96px;animation-duration:14s}
.orbit .planet{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:54px;height:58px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);color:var(--teal)}
.orbit-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:96px;height:104px;display:grid;place-items:center;background:var(--grad);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);color:#fff;box-shadow:0 0 50px rgba(0,189,195,.5)}

/* bars chart hero */
.bars{display:flex;align-items:flex-end;gap:14px;height:200px}
.bars .b{width:40px;border-radius:10px 10px 0 0;background:var(--grad);transform-origin:bottom;animation:barUp 1.2s var(--ease) forwards}

/* pulse rings (contact) */
.pulse-wrap{position:relative;width:300px;height:300px;margin:0 auto;display:grid;place-items:center}
.pulse-ring{position:absolute;width:120px;height:120px;border-radius:50%;border:2px solid var(--teal);animation:wave 3s ease-out infinite}

/* gears */
.gear{animation:spin 12s linear infinite;transform-origin:center;color:var(--teal)}
.gear.r{animation:spinR 9s linear infinite;color:var(--sky)}

/* timeline draw */
.tl-path{stroke:url(#tlg);stroke-width:3;fill:none;stroke-dasharray:1400;stroke-dashoffset:1400;animation:dash 3s var(--ease) forwards}

/* moving conveyor */
@keyframes conveyor{to{transform:translateX(-120px)}}
.belt{display:flex;gap:20px;animation:conveyor 4s linear infinite}

/* ---------- Inline icon sizing safety ---------- */
.btn svg{width:18px;height:18px;flex:none}
.more svg{width:16px;height:16px;flex:none}
.marquee .m-item svg{width:18px;height:18px;flex:none}
.crumb svg{width:14px;height:14px;flex:none;vertical-align:-2px}

/* ---------- Wordmark + hero ghost button context fixes ---------- */
.site-footer .wordmark b{color:#fff}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.hero .btn-ghost:hover{border-color:var(--teal);color:var(--teal)}

/* ---------- CTA band ghost button visibility (was dark-on-dark) ---------- */
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.30)}
.cta-band .btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.cta-band .hex-net{opacity:.12}

/* ============================================================
   NEW UNIQUE HERO ANIMATIONS (v2)
   ============================================================ */
@keyframes popIn{0%{opacity:0;transform:translateY(14px) scale(.96)}100%{opacity:1;transform:none}}
.assemble > *{opacity:0;animation:popIn .7s var(--ease) forwards}

/* Frosted glass window (home build + web app dashboard) */
.glasswin{position:relative;max-width:440px;margin-left:auto;border-radius:20px;overflow:hidden;
  background:rgba(10,32,50,.55);border:1px solid rgba(120,200,235,.18);
  box-shadow:0 30px 70px rgba(0,0,0,.45);backdrop-filter:blur(10px)}
.glasswin .gw-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
.glasswin .gw-bar i{width:11px;height:11px;border-radius:50%}
.gw-bar i:nth-child(1){background:#ff5f57}.gw-bar i:nth-child(2){background:#febc2e}.gw-bar i:nth-child(3){background:#28c840}
.gw-bar span{margin-left:auto;font:600 12px var(--mono);color:#6d8aa0}
.gw-body{padding:18px;display:grid;gap:12px}
.ui-row{height:14px;border-radius:7px;background:rgba(255,255,255,.10)}
.ui-row.grad{background:var(--grad);width:55%}
.ui-row.w70{width:70%}.ui-row.w40{width:40%}
.ui-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ui-cards .uc{height:64px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center}
.ui-cards .uc svg{width:24px;height:24px;color:var(--teal)}
.ui-chart{display:flex;align-items:flex-end;gap:8px;height:90px;padding-top:8px}
.ui-chart b{flex:1;background:var(--grad);border-radius:6px 6px 0 0;transform-origin:bottom;transform:scaleY(0);animation:barGrow .8s var(--ease) forwards}
@keyframes barGrow{to{transform:scaleY(1)}}

/* Radar sweep (cybersecurity) */
.radar{position:relative;width:300px;height:300px;margin:0 auto}
.radar .ring{position:absolute;inset:0;border:1px solid rgba(120,210,235,.18);border-radius:50%}
.radar .ring.r2{inset:38px}.radar .ring.r3{inset:78px}
.radar .sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(0,189,195,.0) 0deg,rgba(0,189,195,.35) 50deg,transparent 60deg);
  animation:spin 4s linear infinite}
.radar .blip{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal);animation:blink 4s infinite}
.radar .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:82px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,var(--teal),var(--blue));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.radar .core svg{width:34px;height:34px}

/* Pipeline / workflow (automation + devops) */
.pipe{position:relative;max-width:420px;margin:0 auto;padding:20px 0}
.pipe .track{position:relative;display:flex;justify-content:space-between;align-items:center}
.pipe .track::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;background:rgba(120,200,235,.22)}
.pipe .node{position:relative;z-index:2;width:62px;height:68px;display:grid;place-items:center;color:#fff;
  background:rgba(10,32,50,.85);border:1px solid rgba(120,200,235,.25);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.pipe .node svg{width:26px;height:26px;color:var(--teal)}
.pipe .node.lit{animation:nodeLit 3.2s infinite}
@keyframes nodeLit{0%,100%{box-shadow:0 0 0 rgba(0,189,195,0)}}
.pipe .token{position:absolute;top:50%;left:8%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--teal);box-shadow:0 0 16px var(--teal);animation:tok 3.2s linear infinite}
@keyframes tok{0%{left:8%}100%{left:92%}}
.pipe .labels{display:flex;justify-content:space-between;margin-top:14px;font:600 12px var(--mono);color:#7fa3ba}
.pipe .labels span{width:62px;text-align:center}

/* Design canvas (UI/UX) */
.canvas{position:relative;max-width:420px;margin:0 auto;height:300px;border-radius:18px;
  background:rgba(10,32,50,.5);border:1px solid rgba(120,200,235,.18);overflow:hidden;backdrop-filter:blur(8px)}
.canvas .art{position:absolute;border-radius:10px;animation:popIn .7s var(--ease) forwards;opacity:0}
.canvas .a1{left:24px;top:24px;width:120px;height:80px;background:var(--grad)}
.canvas .a2{left:160px;top:24px;width:96px;height:36px;background:rgba(255,255,255,.12)}
.canvas .a3{left:160px;top:70px;width:140px;height:34px;background:rgba(255,255,255,.08)}
.canvas .a4{left:24px;top:120px;width:90px;height:90px;border-radius:50%;background:rgba(3,170,225,.25);border:1px solid var(--sky)}
.canvas .a5{left:140px;top:128px;width:160px;height:14px;border-radius:7px;background:rgba(255,255,255,.14)}
.canvas .a6{left:140px;top:158px;width:120px;height:14px;border-radius:7px;background:rgba(255,255,255,.10)}
.canvas .swatch{position:absolute;bottom:18px;left:24px;display:flex;gap:8px}
.canvas .swatch i{width:22px;height:22px;border-radius:6px;animation:popIn .6s var(--ease) forwards;opacity:0}
.canvas .cursor-ui{position:absolute;width:18px;height:18px;color:#fff;animation:curMove 5s ease-in-out infinite}
@keyframes curMove{0%{left:40px;top:60px}25%{left:200px;top:50px}50%{left:180px;top:150px}75%{left:70px;top:170px}100%{left:40px;top:60px}}

/* Chat thread (contact) */
.chat{max-width:360px;margin:0 auto;display:grid;gap:12px}
.chat .bub{max-width:78%;padding:13px 16px;border-radius:16px;font-size:14px;opacity:0;animation:popIn .6s var(--ease) forwards}
.chat .them{justify-self:start;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);color:#dcebf6;border-bottom-left-radius:4px}
.chat .me{justify-self:end;background:var(--grad);color:#fff;border-bottom-right-radius:4px}
.chat .typing{justify-self:start;display:flex;gap:5px;padding:14px 16px;background:rgba(255,255,255,.08);border-radius:16px;border-bottom-left-radius:4px;opacity:0;animation:popIn .6s var(--ease) forwards}
.chat .typing i{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:blink 1.4s infinite}
.chat .typing i:nth-child(2){animation-delay:.2s}.chat .typing i:nth-child(3){animation-delay:.4s}

/* About: outcomes dashboard card */
.statcard{max-width:400px;margin-left:auto;border-radius:20px;padding:24px;
  background:rgba(10,32,50,.55);border:1px solid rgba(120,200,235,.18);backdrop-filter:blur(10px);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.statcard .sc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.statcard .sc-head b{font:700 15px var(--display);color:#fff}
.statcard .sc-head em{font:600 12px var(--mono);color:var(--teal);font-style:normal}
.statcard .line{display:flex;align-items:flex-end;gap:10px;height:120px}
.statcard .line b{flex:1;background:var(--grad);border-radius:6px 6px 0 0;transform-origin:bottom;transform:scaleY(0);animation:barGrow .9s var(--ease) forwards}
.statcard .chips{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.statcard .chips span{font:600 12px var(--mono);color:#bcd; padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}

/* ============================================================
   HERO ANIMATIONS v3  (unique, non-terminal concepts)
   ============================================================ */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes softpulse{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes drawline{to{stroke-dashoffset:0}}

/* HOME — honeycomb hive wave */
.hive{width:100%;max-width:480px;margin-left:auto;display:block}
.hive .cell{fill:rgba(255,255,255,.03);stroke:rgba(120,205,235,.22);stroke-width:1.5;
  animation:hiveWave 5s ease-in-out infinite}
.hive .cell.core{fill:url(#hiveGrad);stroke:none;filter:drop-shadow(0 0 18px rgba(0,189,195,.6))}
@keyframes hiveWave{0%,100%{fill:rgba(255,255,255,.03);stroke:rgba(120,205,235,.18)}
  45%,55%{fill:rgba(0,189,195,.16);stroke:rgba(0,189,195,.65)}}
.hive .spark{fill:var(--teal);opacity:0;animation:hiveSpark 5s ease-in-out infinite}
@keyframes hiveSpark{0%,100%{opacity:0}50%{opacity:.9}}

/* SERVICES — hub & spoke */
.hub{position:relative;width:100%;max-width:440px;height:380px;margin:0 auto}
.hub svg{position:absolute;inset:0;width:100%;height:100%}
.hub .spoke{stroke:rgba(120,205,235,.3);stroke-width:1.5;stroke-dasharray:4 5;animation:dashmove 3s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-18}}
.hub .chip{position:absolute;width:62px;height:68px;display:grid;place-items:center;color:#fff;transform:translate(-50%,-50%);
  background:rgba(10,32,50,.7);border:1px solid rgba(120,205,235,.25);backdrop-filter:blur(4px);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);animation:floatY 6s ease-in-out infinite}
.hub .chip svg{width:26px;height:26px;color:var(--teal)}
.hub .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:104px;height:114px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(155deg,var(--teal),var(--blue));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 0 50px rgba(0,189,195,.45)}
.hub .core svg{width:42px;height:42px}

/* ABOUT — team constellation */
.constel{position:relative;width:100%;max-width:440px;height:360px;margin-left:auto}
.constel svg{position:absolute;inset:0;width:100%;height:100%}
.constel svg line{stroke:rgba(120,205,235,.28);stroke-width:1.5;animation:softpulse 4s ease-in-out infinite}
.constel .cnode{position:absolute;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  font:800 20px var(--display);color:#fff;transform:translate(-50%,-50%);
  background:linear-gradient(155deg,var(--teal),var(--blue));box-shadow:0 14px 30px rgba(0,0,0,.4);animation:floatY 6s ease-in-out infinite}
.constel .cnode.alt{background:rgba(10,32,50,.8);border:1px solid rgba(120,205,235,.3);color:var(--teal)}

/* PORTFOLIO — floating project cards */
.floatcards{position:relative;width:100%;max-width:460px;height:380px;margin-left:auto}
.floatcards .fc{position:absolute;width:210px;border-radius:18px;overflow:hidden;
  background:rgba(10,32,50,.7);border:1px solid rgba(120,205,235,.2);box-shadow:0 24px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(6px);animation:floatY 7s ease-in-out infinite}
.floatcards .fc .thumb{height:96px;background:var(--grad)}
.floatcards .fc .meta{padding:14px}
.floatcards .fc .meta i{display:block;height:9px;width:62%;border-radius:5px;background:rgba(255,255,255,.35)}
.floatcards .fc .meta i.s{width:40%;margin-top:8px;background:var(--teal)}
.floatcards .fc1{top:10px;left:0;animation-delay:0s;z-index:2}
.floatcards .fc2{top:90px;right:0;animation-delay:1s;z-index:3}
.floatcards .fc3{bottom:0;left:40px;animation-delay:2s;z-index:1}

/* CONTACT — paper plane along path */
.planefly{position:relative;width:100%;max-width:440px;height:340px;margin-left:auto}
.planefly svg{position:absolute;inset:0;width:100%;height:100%}
.planefly .path{stroke:rgba(120,205,235,.4);stroke-width:2;stroke-dasharray:5 7;fill:none;animation:dashmove 3s linear infinite}
.planefly .pin{position:absolute;width:84px;height:92px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(155deg,var(--teal),var(--blue));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 0 44px rgba(0,189,195,.5)}
.planefly .pin svg{position:static;width:36px;height:36px}
.planefly .plane{color:#fff;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}

/* DEVICES — responsive web (custom web) */
.devices{position:relative;width:100%;max-width:440px;height:330px;margin:0 auto;display:flex;align-items:flex-end;justify-content:center;gap:18px}
.devices .dv{border:2px solid rgba(120,205,235,.3);border-radius:14px;background:rgba(10,32,50,.5);padding:10px;overflow:hidden;animation:floatY 6s ease-in-out infinite}
.devices .desktop{width:230px;height:170px;animation-delay:0s}
.devices .phone2{width:78px;height:160px;border-radius:18px;animation-delay:.8s}
.devices .dv .ln{height:10px;border-radius:5px;background:rgba(255,255,255,.12);margin-bottom:8px}
.devices .dv .ln.g{background:var(--grad);width:60%}
.devices .dv .ln.s{width:80%}
.devices .dv .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.devices .dv .grid2 b{height:34px;border-radius:8px;background:rgba(255,255,255,.07)}

/* DASHBOARD — web app */
.dash{width:100%;max-width:440px;margin-left:auto;border-radius:20px;padding:22px;
  background:rgba(10,32,50,.55);border:1px solid rgba(120,205,235,.2);backdrop-filter:blur(10px);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.dash .row1{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.dash .tile{border-radius:12px;padding:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.dash .tile b{font:800 22px var(--display);color:#fff}
.dash .tile span{font:600 11px var(--mono);color:var(--teal)}
.dash svg{width:100%;height:90px}
.dash .chartline{stroke:url(#dashGrad);stroke-width:3;fill:none;stroke-dasharray:600;stroke-dashoffset:600;animation:drawline 2s ease forwards .4s}

/* PAGE BLOCKS — wordpress */
.pageblocks{width:100%;max-width:330px;margin:0 auto;border-radius:18px;padding:16px;
  background:rgba(10,32,50,.55);border:1px solid rgba(120,205,235,.2);backdrop-filter:blur(8px);display:grid;gap:10px}
.pageblocks .blk{border-radius:10px;opacity:0;transform:translateY(12px);animation:popIn .6s var(--ease) forwards}
.pageblocks .blk.head{height:38px;background:var(--grad)}
.pageblocks .blk.text{height:16px;background:rgba(255,255,255,.12)}
.pageblocks .blk.text.s{width:70%}
.pageblocks .blk.media{height:64px;background:rgba(255,255,255,.07);border:1px dashed rgba(120,205,235,.3)}

/* GEARS — automation */
.gears{position:relative;width:100%;max-width:380px;margin:0 auto}
.gears svg .g1{animation:spin 8s linear infinite;transform-origin:96px 92px}
.gears svg .g2{animation:spinR 6s linear infinite;transform-origin:210px 74px}
.gears svg .g3{animation:spin 5s linear infinite;transform-origin:262px 156px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinR{to{transform:rotate(-360deg)}}
.gears .belt2{overflow:hidden;margin-top:8px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(120,205,235,.15)}
.gears .belt2 .run{display:flex;gap:18px;padding:12px;animation:beltrun 5s linear infinite}
@keyframes beltrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gears .belt2 .it{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(0,189,195,.12);color:var(--teal)}

/* SHOP — ecommerce */
.shop{position:relative;width:100%;max-width:420px;height:330px;margin:0 auto}
.shop .prod{position:absolute;width:120px;border-radius:14px;padding:12px;background:rgba(10,32,50,.7);border:1px solid rgba(120,205,235,.2);animation:floatY 6s ease-in-out infinite}
.shop .prod .ph{height:56px;border-radius:9px;background:var(--grad);opacity:.85}
.shop .prod .l{height:8px;border-radius:4px;background:rgba(255,255,255,.3);margin-top:10px}
.shop .prod .l.s{width:50%;background:var(--teal);margin-top:6px}
.shop .cart{position:absolute;right:6px;bottom:10px;width:84px;height:84px;border-radius:20px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(155deg,var(--teal),var(--blue));box-shadow:0 0 40px rgba(0,189,195,.45)}
.shop .cart svg{width:36px;height:36px}
.shop .cart .badge{position:absolute;top:-8px;right:-8px;min-width:26px;height:26px;border-radius:50%;background:#fff;color:var(--blue);
  font:800 13px var(--display);display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.shop .fly{position:absolute;width:22px;height:22px;border-radius:6px;background:var(--teal);animation:fly 3s ease-in-out infinite}
@keyframes fly{0%{left:40px;top:40px;opacity:0;transform:scale(.6)}15%{opacity:1}60%{left:300px;top:230px;opacity:1;transform:scale(.8)}70%,100%{opacity:0}}

/* ============================================================
   v3 OVERRIDE — premium dark + unified hex-orbit system
   ============================================================ */

/* ----- Hero background: clean, premium, no patterns ----- */
.hero{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(1100px 700px at 92% -10%,rgba(0,189,195,.18),transparent 55%) !important;
  background-color:#010c16 !important;
  background-image:
    radial-gradient(1100px 700px at 92% -10%,rgba(0,189,195,.20),transparent 55%),
    radial-gradient(900px 800px at -5% 100%,rgba(2,119,212,.18),transparent 55%),
    linear-gradient(180deg,#01151f 0%,#010a14 100%) !important}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(255,255,255,.04),transparent 70%) !important;
  background-image:none !important;animation:none !important}
.hero::after{content:"";position:absolute;top:0;left:0;right:0;bottom:auto;height:220px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,8,15,.85),transparent) !important;inset:auto 0 auto 0 !important}
.hex-accent,.hex-net{display:none !important}
.hero .glow-orb{display:none !important}

/* ----- Hide old animation containers we no longer use ----- */
.glasswin,.statcard,.canvas,.chat,.pipe,.codewin,.hexchip.float,.orbit-wrap,.scanbox,.neural,.phone,.bars,.belt,.ui-cards,.ui-chart,.ui-row{
  /* legacy classes — overridden where still referenced; safe to remove */
}

/* ============================================================
   HEX-ORBIT system — unified abstract hero visual
   Centered emblem + rings + nodes + sweep + blips
   ============================================================ */
.hxorbit{position:relative;width:380px;max-width:100%;aspect-ratio:1;margin:0 auto;animation:floatY 7s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.hxorbit .ring{position:absolute;inset:0;border:1px solid rgba(120,210,235,.14);border-radius:50%}
.hxorbit .ring.r2{inset:50px}
.hxorbit .ring.r3{inset:108px}
.hxorbit .ring.spin{animation:spin 28s linear infinite}
.hxorbit .ring.spin2{animation:spinR 38s linear infinite}

.hxorbit .sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 270deg,rgba(0,189,195,.28) 350deg,transparent 360deg);
  -webkit-mask:radial-gradient(circle,transparent 28%,#000 30%);
  mask:radial-gradient(circle,transparent 28%,#000 30%);
  animation:spin 6s linear infinite;pointer-events:none}

.hxorbit .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:110px;height:122px;display:grid;place-items:center;color:#fff;z-index:6;
  background:linear-gradient(160deg,var(--teal),var(--blue));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  filter:drop-shadow(0 14px 40px rgba(0,189,195,.32))}
.hxorbit .core svg{width:46px;height:46px;color:#fff}
.hxorbit .core::after{content:"";position:absolute;inset:-14px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,189,195,.4),transparent 65%);z-index:-1;
  animation:corePulse 3s ease-in-out infinite}
@keyframes corePulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}

.hxorbit .node{position:absolute;width:62px;height:68px;display:grid;place-items:center;color:#fff;z-index:5;
  background:rgba(8,28,46,.92);border:1px solid rgba(120,200,235,.30);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  backdrop-filter:blur(6px);animation:nodePulse 3.6s ease-in-out infinite;transform:translate(-50%,-50%)}
.hxorbit .node svg{width:26px;height:26px;color:var(--teal)}
@keyframes nodePulse{0%,100%{filter:drop-shadow(0 0 0 rgba(0,189,195,0))}50%{filter:drop-shadow(0 0 18px rgba(0,189,195,.55))}}

.hxorbit .blip{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 14px var(--teal);animation:blipFade 4s ease-in-out infinite;transform:translate(-50%,-50%)}
@keyframes blipFade{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.5)}50%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.hxorbit .conns{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hxorbit .conns line{stroke:rgba(120,210,235,.20);stroke-width:1;stroke-dasharray:3 6;
  animation:dashFlow 4s linear infinite}
@keyframes dashFlow{to{stroke-dashoffset:-90}}

/* Variant: pulse-only (contact) — concentric expanding rings, no nodes */
.hxorbit.pulse .ring{animation:pulseExpand 3s ease-out infinite;border-color:rgba(120,210,235,.32);inset:0}
.hxorbit.pulse .ring.r2{animation-delay:1s}
.hxorbit.pulse .ring.r3{animation-delay:2s}
@keyframes pulseExpand{0%{transform:scale(.35);opacity:0}15%{opacity:.9}100%{transform:scale(1.05);opacity:0}}

/* Variant: neural (AI) — keep neural net rendering compatible */
.neural{display:block;max-width:380px;margin:0 auto;animation:floatY 7s ease-in-out infinite}
.neural .nl{stroke:rgba(120,210,235,.18);stroke-width:1;stroke-dasharray:3 4;animation:dashFlow 6s linear infinite}
.neural circle{fill:var(--teal);filter:drop-shadow(0 0 8px var(--teal))}

/* Cybersecurity radar — preserved (user liked) */
.radar{position:relative;width:360px;max-width:100%;aspect-ratio:1;margin:0 auto;animation:floatY 7s ease-in-out infinite}
.radar .ring{position:absolute;inset:0;border:1px solid rgba(120,210,235,.18);border-radius:50%}
.radar .ring.r2{inset:50px}.radar .ring.r3{inset:108px}
.radar .sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 270deg,rgba(0,189,195,.32) 350deg,transparent 360deg);
  animation:spin 4s linear infinite;
  -webkit-mask:radial-gradient(circle,transparent 28%,#000 30%);mask:radial-gradient(circle,transparent 28%,#000 30%)}
.radar .blip{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 12px var(--teal);animation:blink 4s infinite}
.radar .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:96px;height:106px;
  display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,var(--teal),var(--blue));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  filter:drop-shadow(0 14px 36px rgba(0,189,195,.36))}
.radar .core svg{width:40px;height:40px}

/* ============================================================
   Compact 3-col dropdown — fits in viewport even with 12 items
   ============================================================ */
.drop{padding:18px !important;width:820px !important;border-radius:20px !important}
.drop .drop-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:4px !important}
.drop a{padding:10px 12px !important;border-radius:12px !important;gap:11px !important;align-items:center !important}
.drop a .di{width:38px !important;height:38px !important;border-radius:11px !important}
.drop a .di svg{width:18px !important;height:18px !important}
.drop a b{font-size:13.5px !important;line-height:1.25 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
.drop a small{display:none !important}
.drop-foot{margin-top:10px !important;padding:12px !important;border-top:1px solid var(--line) !important}

/* Static rotator-replacement word stays in brand gradient */
.flawless-word{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}

/* ============================================================
   v4 — Per-page themes + unique service mockup animations
   ============================================================ */

/* ---------- Per-page color themes (override hero bg only) ---------- */
body.theme-mobile .hero{background:
  radial-gradient(900px 700px at 88% -10%,rgba(124,77,255,.30),transparent 55%),
  radial-gradient(800px 700px at -5% 100%,rgba(70,40,180,.30),transparent 55%),
  linear-gradient(180deg,#211849 0%,#170f37 100%) !important}
body.theme-web .hero{background:
  radial-gradient(900px 700px at 92% -10%,rgba(0,189,195,.28),transparent 55%),
  radial-gradient(800px 700px at -5% 100%,rgba(2,119,212,.22),transparent 55%),
  linear-gradient(180deg,#022a3f 0%,#011624 100%) !important}
body.theme-wp .hero{background:
  radial-gradient(900px 700px at 92% -10%,rgba(46,170,110,.26),transparent 55%),
  radial-gradient(800px 700px at -5% 100%,rgba(20,110,80,.30),transparent 55%),
  linear-gradient(180deg,#0a2a22 0%,#06180f 100%) !important}
body.theme-webapp .hero{background:
  radial-gradient(900px 700px at 92% -10%,rgba(124,92,255,.30),transparent 55%),
  radial-gradient(800px 700px at -5% 100%,rgba(70,40,180,.26),transparent 55%),
  linear-gradient(180deg,#1a1340 0%,#0d0a2a 100%) !important}
body.theme-auto .hero{background:
  radial-gradient(900px 700px at 92% -10%,rgba(0,200,140,.28),transparent 55%),
  radial-gradient(800px 700px at -5% 100%,rgba(8,90,70,.30),transparent 55%),
  linear-gradient(180deg,#0a2c22 0%,#05231b 100%) !important}
body.theme-cyber .hero{background:
  radial-gradient(900px 700px at 92% -10%,rgba(232,52,52,.28),transparent 55%),
  radial-gradient(800px 700px at -5% 100%,rgba(120,20,20,.30),transparent 55%),
  linear-gradient(180deg,#2a0d0d 0%,#1a0808 100%) !important}
body.theme-m365 .hero{background:
  radial-gradient(900px 700px at 92% -10%,rgba(2,119,212,.32),transparent 55%),
  radial-gradient(800px 700px at -5% 100%,rgba(8,52,120,.30),transparent 55%),
  linear-gradient(180deg,#06224a 0%,#031432 100%) !important}
body.theme-uiux .hero{background:
  radial-gradient(900px 700px at 92% -10%,rgba(168,85,247,.30),transparent 55%),
  radial-gradient(800px 700px at -5% 100%,rgba(100,40,180,.28),transparent 55%),
  linear-gradient(180deg,#2a113f 0%,#1c0a2e 100%) !important}
body.theme-cloud .hero{background:
  radial-gradient(900px 700px at 92% -10%,rgba(0,189,195,.22),transparent 55%),
  radial-gradient(800px 700px at -5% 100%,rgba(50,100,220,.24),transparent 55%),
  linear-gradient(180deg,#0a1f3a 0%,#061427 100%) !important}
body.theme-ecom .hero{background:
  radial-gradient(900px 700px at 92% -10%,rgba(245,160,40,.26),transparent 55%),
  radial-gradient(800px 700px at -5% 100%,rgba(150,80,20,.28),transparent 55%),
  linear-gradient(180deg,#2e1a08 0%,#1d1004 100%) !important}
body.theme-ai .hero{background:
  radial-gradient(900px 700px at 92% -10%,rgba(0,189,195,.32),transparent 55%),
  radial-gradient(800px 700px at -5% 100%,rgba(8,80,100,.30),transparent 55%),
  linear-gradient(180deg,#062028 0%,#03131a 100%) !important}
body.theme-digital .hero{background:
  radial-gradient(900px 700px at 92% -10%,rgba(232,72,140,.28),transparent 55%),
  radial-gradient(800px 700px at -5% 100%,rgba(120,30,80,.30),transparent 55%),
  linear-gradient(180deg,#2c0a23 0%,#1b0617 100%) !important}

/* Theme accent colour token used by SVGs */
body.theme-mobile{--accent:#a78bfa}
body.theme-web{--accent:#00bdc3}
body.theme-wp{--accent:#2eaa6e}
body.theme-webapp{--accent:#7c5cff}
body.theme-auto{--accent:#10d18a}
body.theme-cyber{--accent:#ef4a4a}
body.theme-m365{--accent:#4a9aff}
body.theme-uiux{--accent:#c084fc}
body.theme-cloud{--accent:#5dd6da}
body.theme-ecom{--accent:#f5a524}
body.theme-ai{--accent:#00d9e0}
body.theme-digital{--accent:#ec4899}

/* Floating dot trail used in most heros */
.dot-trail{position:absolute;display:flex;gap:8px;align-items:center}
.dot-trail span{width:11px;height:11px;border-radius:50%;background:var(--accent,#00bdc3);box-shadow:0 0 12px currentColor;color:var(--accent,#00bdc3);
  opacity:0;animation:trailFade 2.6s ease-out infinite}
.dot-trail span:nth-child(2){animation-delay:.15s}
.dot-trail span:nth-child(3){animation-delay:.30s}
.dot-trail span:nth-child(4){animation-delay:.45s}
.dot-trail span:nth-child(5){animation-delay:.60s}
.dot-trail span:nth-child(6){animation-delay:.75s}
.dot-trail span:nth-child(7){animation-delay:.90s}
@keyframes trailFade{0%{opacity:0;transform:scale(.5)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}

/* Generic mockup container */
.mock{position:relative;width:560px;max-width:100%;margin-left:auto;animation:floatY 7s ease-in-out infinite}
.mock .frm{border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);backdrop-filter:blur(6px)}
.mock .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;
  font:600 12px var(--mono);color:#dde;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.mock .caption{margin-top:18px;text-align:center;padding:12px 16px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);max-width:80%;margin-left:auto;margin-right:auto}
.mock .caption b{display:block;color:#fff;font:700 15px var(--display)}
.mock .caption span{display:block;color:#9fb8c8;font:600 12px var(--mono);margin-top:4px}
.mock .stat{padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);text-align:center}
.mock .stat b{display:block;color:#fff;font:700 22px var(--display);background:none;-webkit-text-fill-color:initial}
.mock .stat span{display:block;color:#9fb8c8;font:600 10px var(--mono);margin-top:3px;text-transform:uppercase;letter-spacing:.04em}

/* ---------- Mobile App: phone + dashboard ---------- */
.m-phone{position:relative;width:220px;height:430px;margin:0 auto;
  border-radius:38px;border:2px solid rgba(255,255,255,.32);
  background:rgba(0,0,0,.4);padding:14px}
.m-phone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:54px;height:6px;border-radius:4px;background:rgba(255,255,255,.18)}
.m-phone .screen{height:100%;border-radius:24px;background:rgba(255,255,255,.04);padding:24px 16px;display:flex;flex-direction:column;align-items:center;gap:14px}
.m-phone h4{font:700 16px var(--display);color:#cfb8ff;margin-top:6px}
.m-phone .pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.m-phone .pcards i{aspect-ratio:1;border-radius:8px;background:rgba(167,139,250,.3)}
.m-phone .pdial{width:140px;height:140px;border-radius:50%;border:2px dashed rgba(167,139,250,.35);position:relative;margin-top:8px}
.m-phone .pdial::after{content:"";position:absolute;inset:18px;border-radius:50%;border:1px solid rgba(167,139,250,.3)}
.m-phone .pbars{display:flex;align-items:flex-end;gap:6px;height:54px;width:100%;justify-content:center;position:absolute;bottom:34%;left:0}
.m-phone .pbars i{width:14px;background:linear-gradient(180deg,#a78bfa,#7c3aed);border-radius:3px;animation:barG 1.2s var(--ease) infinite alternate}
@keyframes barG{from{height:30%}to{height:100%}}
.m-phone .pbars i:nth-child(1){height:50%;animation-delay:.1s}
.m-phone .pbars i:nth-child(2){height:80%;animation-delay:.25s}
.m-phone .pbars i:nth-child(3){height:60%;animation-delay:.4s}
.m-phone .pbars i:nth-child(4){height:90%;animation-delay:.55s}
.m-phone .pbars i:nth-child(5){height:70%;animation-delay:.7s}

/* ---------- Web Dev: browser mockup ---------- */
.bw{border-radius:16px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.16);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.bw-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.bw-bar i{width:11px;height:11px;border-radius:50%}.bw-bar i:nth-child(1){background:#ff5f57}.bw-bar i:nth-child(2){background:#febc2e}.bw-bar i:nth-child(3){background:#28c840}
.bw-bar .url{flex:1;margin-left:14px;padding:6px 14px;border-radius:8px;background:rgba(255,255,255,.07);font:600 12px var(--mono);color:#9fc6d8;display:flex;align-items:center;gap:8px}
.bw-bar .url::before{content:"";width:8px;height:8px;border-radius:50%;background:#28c840}
.bw-body{padding:18px 20px}
.bw-nav{display:flex;align-items:center;gap:18px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06)}
.bw-nav .lg{display:flex;align-items:center;gap:8px;font:700 13px var(--display);color:#fff}
.bw-nav .lg i{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,var(--teal),var(--blue))}
.bw-nav .ln{display:flex;gap:14px;font:600 12px var(--body);color:#9fc6d8;margin-left:auto}
.bw-nav .ln span:nth-child(2){color:#fff}
.bw-nav .cta{padding:6px 14px;border-radius:6px;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;font:700 11px var(--body)}
.bw-hero{padding:16px 0}
.bw-hero .l1{height:8px;width:50%;border-radius:4px;background:linear-gradient(90deg,var(--teal),var(--blue));margin-bottom:10px}
.bw-hero .l2{height:6px;width:80%;border-radius:3px;background:rgba(255,255,255,.18);margin-bottom:6px}
.bw-hero .l3{height:6px;width:65%;border-radius:3px;background:rgba(255,255,255,.10)}
.bw-hero .btns{display:flex;gap:8px;margin-top:14px}
.bw-hero .btns a{padding:7px 14px;border-radius:6px;font:700 11px var(--body)}
.bw-hero .btns a:first-child{background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff}
.bw-hero .btns a:last-child{border:1px solid rgba(255,255,255,.2);color:#cde}
.bw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.bw-cards i{height:64px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);position:relative}
.bw-cards i::before{content:"";position:absolute;top:10px;left:10px;width:18px;height:18px;border-radius:5px;background:rgba(0,189,195,.45)}
.bw-cards i::after{content:"";position:absolute;bottom:14px;left:10px;right:10px;height:5px;border-radius:3px;background:rgba(255,255,255,.14)}
.bw-inspect{margin-top:10px;padding:8px 12px;border-radius:8px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.10);font:600 11px var(--mono);color:#9fc6d8}
.bw-inspect b{color:var(--teal);font-weight:700}
.bw-inspect em{color:#febc2e;font-style:normal}
.bw-inspect i{color:#fff;font-style:normal;animation:blink 1s infinite}
.bw-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);font:600 11px var(--mono);color:#9fc6d8}
.bw-foot .ok{color:#28c840}.bw-foot .ok::before{content:"●";margin-right:4px}

/* ---------- WordPress: post mockup ---------- */
.wp{border-radius:16px;border:1px solid rgba(86,168,255,.45);background:rgba(20,40,80,.4);padding:20px;backdrop-filter:blur(6px)}
.wp .head{padding:14px;border-radius:8px;background:linear-gradient(90deg,rgba(86,168,255,.4),rgba(86,168,255,.25));font:700 15px var(--display);color:#cfe2ff;text-align:center;margin-bottom:14px}
.wp .feat{height:110px;border-radius:8px;border:1.5px dashed rgba(86,168,255,.5);display:grid;place-items:center;color:#86b6ff;font:600 13px var(--mono);margin-bottom:14px}
.wp .lines{padding:10px;border-radius:8px;background:rgba(86,168,255,.08);border:1px solid rgba(86,168,255,.18);margin-bottom:14px}
.wp .lines i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.18);margin-bottom:5px}
.wp .lines i:last-child{width:60%;margin-bottom:0}
.wp .pcards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.wp .pcard{padding:14px;border-radius:8px;border:1px solid #d97757;background:rgba(217,119,87,.10);text-align:center}
.wp .pcard b{display:block;font:600 11px var(--mono);color:#d97757;margin-bottom:4px}
.wp .pcard span{font:700 16px var(--display);color:#fff}
.wp .cta{padding:11px;border-radius:8px;background:linear-gradient(90deg,rgba(86,168,255,.55),rgba(50,120,220,.5));text-align:center;font:700 13px var(--display);color:#fff;border:1px solid rgba(86,168,255,.6)}

/* ---------- Web App: chart + stats ---------- */
.wa-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.wa-stats .stat{padding:14px 12px}
.wa-stats .stat b{font-size:18px;background:linear-gradient(135deg,#5cb6ff,#10d18a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wa-legend{display:flex;gap:14px;font:600 11px var(--mono);color:#9fc6d8;margin-bottom:4px}
.wa-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle}
.wa-legend .a i{background:#5cb6ff}.wa-legend .b i{background:#10d18a}
.wa-chart{width:100%;height:200px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);padding:12px;position:relative}
.wa-chart svg{width:100%;height:100%;overflow:visible}
.wa-chart .grid line{stroke:rgba(255,255,255,.06);stroke-width:1}
.wa-chart .ln1{fill:none;stroke:#5cb6ff;stroke-width:2.5;stroke-dasharray:600;stroke-dashoffset:600;animation:drawLine 2.2s var(--ease) forwards}
.wa-chart .ln2{fill:none;stroke:#10d18a;stroke-width:2.5;stroke-dasharray:600;stroke-dashoffset:600;animation:drawLine 2.4s .2s var(--ease) forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.wa-chart circle{fill:#fff;opacity:0;animation:fadeIn .4s forwards}
.wa-chart .meta{position:absolute;top:8px;left:14px;font:600 11px var(--mono);color:#9fc6d8}
.wa-chart .axis{position:absolute;font:600 10px var(--mono);color:#7a99ad}
.wa-chart .ya{left:-2px;top:50%;transform:rotate(-90deg) translateX(50%);transform-origin:left center}
.wa-chart .xa{right:6px;bottom:4px}

/* ---------- Automation: SVG flow ---------- */
.au-flow{position:relative;width:520px;max-width:100%;height:340px;margin:0 auto}
.au-flow svg{width:100%;height:100%;overflow:visible}
.au-flow .nd{fill:rgba(16,209,138,.10);stroke:#10d18a;stroke-width:1.6}
.au-flow .nd.cir{stroke-width:2.4}
.au-flow .lnk{stroke:#10d18a;stroke-width:1.8;fill:none;stroke-dasharray:4 5;animation:dashFlow 2s linear infinite}
.au-flow text{font:600 11px var(--mono);fill:#bff0d8}
.au-flow text.lbl{font-size:11px;fill:#fff;font-weight:700}
.au-flow text.sub{font-size:9px;fill:#86d8a8}
.au-flow .ok{fill:#10d18a;animation:nodeLitGreen 2.5s infinite}
@keyframes nodeLitGreen{0%,100%{filter:drop-shadow(0 0 0 rgba(16,209,138,0))}50%{filter:drop-shadow(0 0 14px rgba(16,209,138,.7))}}

/* ---------- Cybersecurity: radar with shield (red theme) ---------- */
.cy-scene{position:relative;width:560px;max-width:100%;margin-left:auto}
.cy-chips{display:flex;flex-direction:column;gap:10px;position:absolute;left:0;top:20px}
.cy-chips .chip{align-self:flex-start;color:#fcc;background:rgba(239,74,74,.12);border-color:rgba(239,74,74,.35)}
.cy-chips .chip i{width:8px;height:8px;border-radius:50%;background:#ef4a4a;box-shadow:0 0 8px #ef4a4a;animation:blink 1.4s infinite}
.cy-radar{width:330px;height:330px;margin:0 auto;position:relative}
.cy-radar::before,.cy-radar::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(239,74,74,.22)}
.cy-radar::after{inset:50px;border-color:rgba(239,74,74,.18)}
.cy-radar .ring3{position:absolute;inset:100px;border-radius:50%;border:1px solid rgba(239,74,74,.14)}
.cy-radar .sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 270deg,rgba(239,74,74,.42) 350deg,transparent 360deg);
  -webkit-mask:radial-gradient(circle,transparent 28%,#000 30%);mask:radial-gradient(circle,transparent 28%,#000 30%);
  animation:spin 5s linear infinite}
.cy-radar .scanline{position:absolute;top:50%;left:50%;width:50%;height:2px;background:linear-gradient(90deg,#ef4a4a,transparent);transform-origin:left center;animation:scanrot 4s linear infinite}
@keyframes scanrot{to{transform:rotate(360deg)}}
.cy-radar .shield{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:120px}
.cy-radar .shield svg{width:100%;height:100%}
.cy-radar .blip{position:absolute;width:10px;height:10px;border-radius:50%;animation:blipPulse 3s ease-in-out infinite}
.cy-radar .blip.b1{background:#ff8585;box-shadow:0 0 16px #ff8585;top:28%;right:14%;animation-delay:.5s}
.cy-radar .blip.b2{background:#ff6a6a;box-shadow:0 0 16px #ff6a6a;bottom:32%;right:36%;animation-delay:2s}
@keyframes blipPulse{0%,100%{transform:scale(.5);opacity:.3}50%{transform:scale(1);opacity:1}}
.cy-threats{position:absolute;right:0;top:10px;padding:14px 18px;border-radius:12px;border:1px solid rgba(239,74,74,.4);background:rgba(40,8,8,.7);min-width:160px}
.cy-threats h5{font:600 11px var(--mono);color:#fcc;margin-bottom:6px;text-transform:uppercase}
.cy-threats .zero{font:800 32px var(--display);color:#ef4a4a;text-align:center;margin-bottom:8px}
.cy-threats .ck{font:600 11px var(--mono);color:#86efac;margin-top:4px}

/* ---------- Microsoft 365: hex grid ---------- */
.m365{position:relative;width:520px;max-width:100%;margin:0 auto}
.m365-stage{position:relative;height:520px}
.m365 .hx{position:absolute;width:110px;height:120px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,rgba(74,154,255,.18),rgba(74,154,255,.06));
  border:1.5px solid rgba(74,154,255,.45);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  text-align:center;animation:hexPop .6s var(--ease) backwards}
@keyframes hexPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.m365 .hx .ico{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:#fff;font:800 12px var(--display);margin-bottom:4px}
.m365 .hx span{font:600 10px var(--mono);color:#cfe2ff}
.m365 .hx.center{background:linear-gradient(160deg,#3b82f6,#1d4ed8);width:128px;height:140px;border-color:transparent;z-index:5;
  filter:drop-shadow(0 12px 36px rgba(74,154,255,.4))}
.m365 .hx.azure .ico{background:#f97316}
.m365 .hx.excel .ico{background:#16a34a}
.m365 .hx.outlook .ico{background:#2563eb}
.m365 .hx.share .ico{background:#0891b2}
.m365 .hx.teams .ico{background:#8b5cf6}
.m365 .hx.drive .ico{background:#3b82f6}
.m365 .conn{position:absolute;inset:0;pointer-events:none}
.m365 .conn line{stroke:rgba(74,154,255,.35);stroke-width:1.2;stroke-dasharray:3 4;animation:dashFlow 3s linear infinite}

/* ---------- UI/UX: design tool mockup ---------- */
.ux{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start}
.ux .panel{padding:12px 14px;border-radius:12px;border:1px solid rgba(168,85,247,.35);background:rgba(40,16,60,.55);text-align:center}
.ux .panel h5{font:600 10px var(--mono);color:#c4a3ff;margin-bottom:10px;text-transform:uppercase}
.ux .colors i{display:block;width:30px;height:24px;border-radius:6px;margin-bottom:6px}
.ux .colors i:nth-child(1){background:#a855f7}.ux .colors i:nth-child(2){background:#ec4899}
.ux .colors i:nth-child(3){background:#3b82f6}.ux .colors i:nth-child(4){background:#06b6d4}.ux .colors i:nth-child(5){background:#10b981}
.ux .type b{display:block;font:800 22px var(--display);color:#fff;line-height:1}
.ux .type span{display:block;font:600 9px var(--mono);color:#c4a3ff;margin-top:6px}
.ux .frame{border-radius:14px;border:1px dashed rgba(168,85,247,.45);background:rgba(40,16,60,.4);padding:18px;position:relative}
.ux .frame::before{content:"Frame 1 — 200×260";position:absolute;top:-9px;left:18px;font:600 10px var(--mono);color:#c4a3ff;background:rgba(40,16,60,.9);padding:0 8px}
.ux .frame .h{height:8px;background:rgba(255,255,255,.18);border-radius:4px;margin-bottom:10px}
.ux .frame .h.b{width:70%}
.ux .frame .l{height:6px;background:rgba(255,255,255,.10);border-radius:3px;margin-bottom:5px}
.ux .frame .l.w50{width:50%}.ux .frame .l.w80{width:80%}.ux .frame .l.w35{width:35%}
.ux .frame .btn-x{display:inline-block;padding:6px 16px;border-radius:18px;background:#ec4899;color:#fff;font:700 11px var(--body);margin:10px 0}
.ux .frame .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.ux .frame .grid3 i{height:34px;border-radius:6px;background:rgba(168,85,247,.18);border:1px solid rgba(168,85,247,.3)}
.ux .frame .selected{position:absolute;top:62px;right:62px;width:32px;height:24px;border:1.5px dashed #f0abfc}
.ux .frame .selected::before,.ux .frame .selected::after{content:"";position:absolute;width:5px;height:5px;background:#f0abfc;border-radius:1px}
.ux .frame .selected::before{top:-3px;left:-3px}.ux .frame .selected::after{bottom:-3px;right:-3px}

/* ---------- Cloud & DevOps: topology graph ---------- */
.dv{position:relative;width:560px;max-width:100%;height:400px;margin-left:auto}
.dv svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dv svg line{stroke:rgba(93,214,218,.35);stroke-width:1.4;stroke-dasharray:3 4;animation:dashFlow 3s linear infinite}
.dv .nd{position:absolute;width:74px;height:74px;border-radius:50%;border:1.5px solid #5dd6da;
  background:rgba(93,214,218,.10);display:grid;place-items:center;color:#dff8fa;font:600 10px var(--mono);text-align:center;line-height:1.1;
  box-shadow:0 0 24px rgba(93,214,218,.25);animation:cloudPulse 3s ease-in-out infinite}
@keyframes cloudPulse{0%,100%{box-shadow:0 0 12px rgba(93,214,218,.18)}50%{box-shadow:0 0 28px rgba(93,214,218,.5)}}
.dv .nd.lb{background:rgba(20,184,166,.18);border-color:#2dd4bf}
.dv .nd.app{background:rgba(99,102,241,.16);border-color:#818cf8;color:#e0e7ff;width:62px;height:62px;font-size:9px}
.dv .nd.db{background:rgba(217,70,239,.14);border-color:#e879f9;width:54px;height:54px;font-size:9px;color:#fae8ff}
.dv .nd.edge{background:rgba(34,197,94,.16);border-color:#22c55e;color:#dcfce7}
.dv .chip{position:absolute;color:#dff8fa;background:rgba(93,214,218,.08);border-color:rgba(93,214,218,.35)}
.dv .stat-flag{position:absolute;top:0;right:0;padding:8px 18px;border-radius:10px;border:1.5px solid #22c55e;background:rgba(34,197,94,.12);text-align:center}
.dv .stat-flag b{display:block;color:#86efac;font:800 18px var(--display)}
.dv .stat-flag span{display:block;color:#bbf7d0;font:600 10px var(--mono);text-transform:uppercase}

/* ---------- E-Commerce: funnel ---------- */
.ec{position:relative;width:500px;max-width:100%;margin-left:auto}
.ec .funnel{display:flex;flex-direction:column;align-items:center;gap:8px}
.ec .lvl{padding:18px 32px;background:linear-gradient(180deg,rgba(245,165,36,.22),rgba(245,165,36,.10));border:1.5px solid rgba(245,165,36,.45);font:700 16px var(--display);color:#fff;clip-path:polygon(8% 0,92% 0,82% 100%,18% 100%);text-align:center;min-width:280px;animation:fadeIn .6s var(--ease) backwards}
.ec .lvl:nth-child(2){min-width:240px;animation-delay:.15s}
.ec .lvl:nth-child(3){min-width:200px;animation-delay:.3s}
.ec .lvl:nth-child(4){min-width:160px;animation-delay:.45s}
.ec .lvl:nth-child(5){min-width:120px;background:rgba(34,197,94,.18);border-color:#22c55e;color:#86efac;animation-delay:.6s}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ec .cvr{position:absolute;right:-10px;bottom:90px;padding:6px 14px;border-radius:18px;background:rgba(34,197,94,.18);border:1px solid #22c55e;font:600 12px var(--mono);color:#86efac}
.ec .rev{position:absolute;right:-30px;bottom:0;padding:10px 18px;border-radius:12px;border:1.5px solid #22c55e;background:rgba(34,197,94,.12);text-align:center}
.ec .rev b{display:block;color:#86efac;font:800 22px var(--display)}
.ec .rev span{display:block;color:#bbf7d0;font:600 10px var(--mono);text-transform:uppercase}
.ec .pchips{position:absolute;left:-10px;bottom:0;display:flex;flex-direction:column;gap:8px}

/* ---------- AI/ML: neural network ---------- */
.nn{width:560px;max-width:100%;height:380px;margin-left:auto;position:relative}
.nn svg{width:100%;height:100%;overflow:visible}
.nn svg .ln{stroke:rgba(0,217,224,.30);stroke-width:1.2;stroke-dasharray:3 4;animation:dashFlow 3s linear infinite}
.nn svg .ln.hot{stroke:#00d9e0;stroke-width:1.8;animation:dashFlow 1.4s linear infinite}
.nn svg .nd{fill:rgba(0,217,224,.15);stroke:#00d9e0;stroke-width:1.6}
.nn svg .out{fill:rgba(0,217,224,.30);stroke:#00d9e0;stroke-width:2}
.nn svg text{font:600 11px var(--mono);fill:#bff0f5}

/* ---------- Digital Strategy: growth chart + rankings ---------- */
.ds{width:580px;max-width:100%;margin-left:auto;position:relative}
.ds .legend{display:flex;gap:14px;font:600 11px var(--mono);color:#fce7f3;margin-bottom:8px}
.ds .legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle}
.ds .legend .a i{background:#ec4899}.ds .legend .b i{background:#a855f7}.ds .legend .c i{background:#f59e0b}
.ds .chart{width:100%;height:220px;border-radius:12px;border:1px solid rgba(236,72,153,.28);background:rgba(50,8,30,.35);padding:14px;position:relative}
.ds .chart svg{width:100%;height:100%}
.ds .chart svg .ln1{fill:none;stroke:#ec4899;stroke-width:2.5;stroke-dasharray:800;stroke-dashoffset:800;animation:drawLine 2.4s var(--ease) forwards}
.ds .chart svg .ln2{fill:none;stroke:#a855f7;stroke-width:2.5;stroke-dasharray:800;stroke-dashoffset:800;animation:drawLine 2.6s .2s var(--ease) forwards}
.ds .chart svg .ln3{fill:none;stroke:#f59e0b;stroke-width:2.5;stroke-dasharray:800;stroke-dashoffset:800;animation:drawLine 2.8s .4s var(--ease) forwards}
.ds .chart svg circle{fill:#fff;opacity:0;animation:fadeIn .4s 2.6s forwards}
.ds .chart .axis-y{position:absolute;left:6px;font:600 10px var(--mono);color:#fbb6ce}
.ds .chart .axis-x{position:absolute;bottom:4px;font:600 10px var(--mono);color:#fbb6ce}
.ds .rankings{position:absolute;top:14px;right:14px;padding:12px 14px;border-radius:10px;background:rgba(50,8,30,.85);border:1px solid rgba(236,72,153,.4);min-width:220px}
.ds .rankings h5{font:600 11px var(--mono);color:#fbb6ce;margin-bottom:8px;text-transform:uppercase;text-align:center}
.ds .rankings .row{display:flex;justify-content:space-between;gap:14px;font:600 11px var(--mono);color:#fce7f3;padding:3px 0}
.ds .rankings .row em{color:#86efac;font-style:normal}
.ds .rankings .row strong{color:#fbbf24}

/* ============================================================
   AI CHATBOT WIDGET
   ============================================================ */
.dhbot{position:fixed;bottom:24px;right:24px;z-index:200;font-family:var(--body)}
.dhbot-toggle{width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--teal),var(--blue));
  display:grid;place-items:center;color:#fff;
  box-shadow:0 14px 36px rgba(0,189,195,.45);position:relative;
  transition:transform .25s var(--ease)}
.dhbot-toggle:hover{transform:translateY(-4px) scale(1.03)}
.dhbot-toggle img{filter:brightness(0) invert(1);width:34px;height:38px}
.dhbot-teaser{position:absolute;bottom:78px;right:4px;width:248px;background:#fff;border-radius:16px;
  padding:14px 16px 14px;box-shadow:0 22px 50px rgba(0,30,60,.26);border:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);transform-origin:bottom right;
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;z-index:201}
.dhbot-teaser.show{opacity:1;visibility:visible;transform:none}
.dhbot-teaser b{display:block;font:700 13.5px var(--display);color:var(--ink);margin-bottom:3px}
.dhbot-teaser p{margin:0;font-size:12.5px;color:var(--slate);line-height:1.45}
.dhbot-teaser .tz-close{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  border:0;background:var(--mist);color:var(--slate);cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center}
.dhbot-teaser .tz-close:hover{background:var(--line);color:var(--ink)}
.dhbot-teaser::after{content:"";position:absolute;bottom:-7px;right:26px;width:14px;height:14px;background:#fff;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.dhbot-dot{position:absolute;top:6px;right:6px;width:14px;height:14px;border-radius:50%;background:#22c55e;border:2px solid #fff;animation:pulse 2.2s infinite}
.dhbot-panel{position:absolute;bottom:80px;right:0;width:360px;max-width:calc(100vw - 40px);
  max-height:calc(100vh - 120px);display:flex;flex-direction:column;
  border-radius:20px;background:#fff;box-shadow:0 30px 80px rgba(0,30,60,.30);
  overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px);
  transition:opacity .35s var(--ease),visibility .35s var(--ease),transform .35s var(--ease)}
.dhbot.open .dhbot-panel{opacity:1;visibility:visible;transform:translateY(0)}
.dhbot.open .dhbot-toggle{transform:scale(.92)}
.dhbot-head{display:flex;align-items:center;gap:12px;padding:18px 18px 16px;
  background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff}
.dhbot-head img{filter:brightness(0) invert(1)}
.dhbot-name b{display:block;font:700 15px var(--display);line-height:1.1}
.dhbot-name span{display:flex;align-items:center;gap:6px;font:600 11px var(--body);opacity:.9;margin-top:3px}
.dhbot-online{width:8px;height:8px;border-radius:50%;background:#86efac;box-shadow:0 0 0 0 rgba(134,239,172,.6);animation:pulse 2s infinite}
.dhbot-close{margin-left:auto;background:rgba(255,255,255,.18);border:0;color:#fff;
  width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:22px;line-height:1;display:grid;place-items:center}
.dhbot-close:hover{background:rgba(255,255,255,.28)}
.dhbot-body{flex:1;min-height:140px;max-height:340px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f6fafd}
.dhbot-msg{max-width:82%;padding:10px 14px;border-radius:14px;font:500 13.5px var(--body);line-height:1.45;animation:msgIn .35s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dhbot-msg.bot{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid #e3ecf3;border-bottom-left-radius:5px}
.dhbot-msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;border-bottom-right-radius:5px}
.dhbot-typing{align-self:flex-start;display:flex;gap:5px;padding:13px 16px;background:#fff;border:1px solid #e3ecf3;border-radius:14px;border-bottom-left-radius:5px}
.dhbot-typing i{width:7px;height:7px;border-radius:50%;background:#9fc6d8;animation:blink 1.3s infinite}
.dhbot-typing i:nth-child(2){animation-delay:.2s}.dhbot-typing i:nth-child(3){animation-delay:.4s}
.dhbot-foot{padding:14px 16px;background:#fff;border-top:1px solid #e3ecf3}
.dhbot-quick{display:flex;flex-wrap:wrap;gap:7px}
.dhbot-quick button{padding:8px 13px;border-radius:18px;border:1px solid var(--line);background:#f6fafd;cursor:pointer;
  font:600 12.5px var(--body);color:var(--ink);transition:all .2s}
.dhbot-quick button:hover{border-color:var(--teal);color:var(--teal);background:#fff}
.dhbot-quick a{padding:8px 13px;border-radius:18px;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;font:700 12.5px var(--body)}
@media (max-width:640px){.dhbot{bottom:16px;right:16px}.dhbot-panel{width:calc(100vw - 32px)}}

/* ============================================================
   COMPARISON TABLE component (How We Stack Up)
   ============================================================ */
.cmp{margin-top:48px;border-radius:16px;border:1px solid var(--line);background:#fff;overflow:hidden}
.cmp table{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:18px 22px;text-align:left;font:600 14.5px var(--body);color:var(--ink)}
.cmp th{background:#f6fafd;font:700 13.5px var(--display);color:var(--ink);border-bottom:1px solid var(--line);text-align:center}
.cmp th:first-child{text-align:left}
.cmp td{border-bottom:1px solid var(--line);text-align:center}
.cmp td:first-child{text-align:left;font-weight:700}
.cmp tr:last-child td{border-bottom:0}
.cmp .you{background:#f0fdfa}
.cmp .yes{color:#0ea58a;font-weight:700}
.cmp .no{color:#dc2626;font-weight:700}
.cmp .neutral{color:#d97706;font-weight:700}
.cmp .recommend-tag{display:inline-block;margin-top:4px;padding:3px 10px;border-radius:12px;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;font:700 10.5px var(--body)}


/* ---------- Service hero caption/badge: stack label + sublabel ---------- */
.caption b{display:block;font-family:var(--display);font-size:15px;color:#fff;line-height:1.3}
.caption span{display:block;font-family:var(--mono);font-size:12px;color:#9fb8c8;margin-top:3px;line-height:1.3}
.mock .caption{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:12px 16px;text-align:center}
/* per-theme accent for service hero heading + diagram accents */
body[class*="theme-"] .hero h1 .grad-text,
body[class*="theme-"] .flawless-word{
  background:linear-gradient(120deg,var(--accent),#fff 140%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================================================
   Comparison table ("How We Stack Up")
   ============================================================ */
.cmp{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}
.cmp th,.cmp td{padding:18px 22px;text-align:center;font-size:15px;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--display);font-size:16px;color:var(--ink);background:var(--mist);padding:22px}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td:first-child,.cmp th:first-child{text-align:left;font-weight:700;color:var(--ink)}
.cmp .col-us{background:linear-gradient(180deg,rgba(0,189,195,.08),rgba(2,119,212,.05))}
.cmp thead .col-us{position:relative}
.cmp .us-badge{display:inline-block;margin-top:6px;font:700 11px var(--mono);color:#fff;
  background:var(--navy);padding:3px 10px;border-radius:20px;letter-spacing:.04em}
.cmp .yes{color:#0a9; font-weight:600}
.cmp .no{color:#e1577a;font-weight:600}
.cmp .mid{color:#c8862a;font-weight:600}
.cmp .col-us td, .cmp td.col-us{color:var(--navy);font-weight:700}
@media(max-width:760px){.cmp{font-size:13px}.cmp th,.cmp td{padding:12px 10px}.cmp thead th{padding:14px 10px;font-size:13px}}

/* ============================================================
   Process v2 — vertical numbered steps with connecting line
   ============================================================ */
.proc{max-width:760px;margin:0 auto;position:relative}
.proc::before{content:"";position:absolute;left:31px;top:30px;bottom:30px;width:2px;
  background:linear-gradient(180deg,var(--teal),var(--blue));opacity:.3}
.proc .pstep{display:flex;gap:24px;padding:18px 0;position:relative}
.proc .pnum{flex:none;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;
  font:800 20px var(--display);color:#fff;background:linear-gradient(150deg,var(--teal),var(--blue));
  box-shadow:0 10px 26px rgba(0,189,195,.3);position:relative;z-index:2}
.proc .ptext h3{font-size:20px;margin:6px 0 6px}
.proc .ptext p{color:var(--slate);max-width:600px}
@media(max-width:640px){.proc::before{left:25px}.proc .pnum{width:52px;height:52px;font-size:17px;border-radius:16px}}

/* ============================================================
   v4 — UNIQUE main-page hero visuals (NO orbit) + fixes
   ============================================================ */
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pop4{0%{opacity:0;transform:translateY(18px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes grow4{to{transform:scaleY(1)}}
@keyframes flow4{to{left:calc(100% - 26px)}}
@keyframes draw4{to{stroke-dashoffset:0}}
.vis{position:relative;width:460px;max-width:100%;margin:0 auto;animation:fl 7s ease-in-out infinite}
.vis .pp>*{opacity:0;animation:pop4 .7s var(--ease) forwards}

/* HOME — build pipeline: Idea→Design→Build→Launch */
.pipeflow{display:flex;flex-direction:column;gap:18px;width:420px;max-width:100%;margin:0 auto}
.pf-track{position:relative;display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.pf-track::before{content:"";position:absolute;left:26px;right:26px;top:50%;height:2px;background:rgba(120,200,235,.2)}
.pf-line{position:absolute;left:26px;top:50%;height:2px;background:linear-gradient(90deg,var(--teal),var(--blue));width:0;animation:pfgrow 4s ease-in-out infinite}
@keyframes pfgrow{0%{width:0}60%,100%{width:calc(100% - 52px)}}
.pf-node{position:relative;z-index:2;width:58px;height:64px;display:grid;place-items:center;color:#fff;
  background:rgba(8,28,46,.95);border:1px solid rgba(120,200,235,.3);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);animation:pfpulse 4s ease-in-out infinite}
.pf-node svg{width:24px;height:24px;color:var(--teal)}
.pf-node:nth-child(2){animation-delay:1s}.pf-node:nth-child(3){animation-delay:2s}.pf-node:nth-child(4){animation-delay:3s}
@keyframes pfpulse{0%,100%{box-shadow:0 0 0 rgba(0,189,195,0)}25%{box-shadow:0 0 22px rgba(0,189,195,.6)}}
.pf-tok{position:absolute;top:50%;left:26px;width:12px;height:12px;margin-top:-6px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 16px var(--teal);animation:flow4 4s linear infinite}
.pf-labels{display:flex;justify-content:space-between;font:600 12px var(--mono);color:#9fb8c8}
.pf-labels span{width:58px;text-align:center}
.pf-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:8px}
.pf-cards .pfc{height:70px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  display:grid;place-items:center}
.pf-cards .pfc svg{width:26px;height:26px;color:var(--sky)}
.pf-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.pf-bar i{display:block;height:100%;background:var(--grad);width:0;animation:pfbar 4s ease-in-out infinite}
@keyframes pfbar{0%{width:0}60%,100%{width:88%}}

/* ABOUT — metrics dashboard card */
.dash{width:420px;max-width:100%;margin:0 auto;border-radius:22px;padding:26px;
  background:rgba(8,26,44,.62);border:1px solid rgba(120,200,235,.18);backdrop-filter:blur(12px);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.dash-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.dash-h b{font:700 16px var(--display);color:#fff}
.dash-h em{font:600 12px var(--mono);font-style:normal;color:#34d399}
.dash-bars{display:flex;align-items:flex-end;gap:12px;height:130px;margin-bottom:18px}
.dash-bars i{flex:1;background:var(--grad);border-radius:7px 7px 0 0;transform-origin:bottom;transform:scaleY(0);animation:grow4 .9s var(--ease) forwards}
.dash-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.dash-stats div{text-align:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.dash-stats b{display:block;font:800 20px var(--display);color:#fff}
.dash-stats span{font:600 10px var(--mono);color:#9fb8c8}

/* SERVICES — lighting service tile grid */
.tilegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:380px;max-width:100%;margin:0 auto}
.tilegrid .tg{aspect-ratio:1;border-radius:16px;display:grid;place-items:center;
  background:rgba(8,26,44,.7);border:1px solid rgba(120,200,235,.2);animation:tgpulse 3.5s ease-in-out infinite}
.tilegrid .tg svg{width:30px;height:30px;color:var(--teal)}
@keyframes tgpulse{0%,100%{box-shadow:0 0 0 rgba(0,189,195,0);border-color:rgba(120,200,235,.2)}
  50%{box-shadow:0 0 20px rgba(0,189,195,.4);border-color:rgba(0,189,195,.5)}}

/* PORTFOLIO — fanned project image cards */
.fan{position:relative;width:440px;max-width:100%;height:360px;margin:0 auto}
.fan .fcard{position:absolute;width:260px;height:300px;border-radius:18px;overflow:hidden;left:50%;top:20px;
  border:1px solid rgba(120,200,235,.22);box-shadow:0 26px 60px rgba(0,0,0,.5);background:#0a2032;animation:fl 7s ease-in-out infinite}
.fan .fcard img{width:100%;height:100%;object-fit:cover;opacity:.92}
.fan .fcard:nth-child(1){transform:translateX(-50%) rotate(-9deg) translateX(-70px);z-index:1;animation-delay:.4s}
.fan .fcard:nth-child(2){transform:translateX(-50%) rotate(0deg);z-index:3;animation-delay:0s}
.fan .fcard:nth-child(3){transform:translateX(-50%) rotate(9deg) translateX(70px);z-index:2;animation-delay:.8s}

/* OUR STORY — timeline path */
.tline{position:relative;width:420px;max-width:100%;margin:0 auto;padding-left:20px}
.tline::before{content:"";position:absolute;left:26px;top:8px;bottom:8px;width:2px;background:rgba(120,200,235,.2)}
.tline .tprog{position:absolute;left:26px;top:8px;width:2px;height:0;background:linear-gradient(180deg,var(--teal),var(--blue));animation:tgrow 4s ease-in-out infinite}
@keyframes tgrow{0%{height:0}70%,100%{height:calc(100% - 16px)}}
.tline .tnode{position:relative;display:flex;gap:18px;align-items:flex-start;padding:11px 0}
.tline .tdot{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(8,26,44,.9);border:2px solid var(--teal);
  display:grid;place-items:center;font:700 11px var(--mono);color:var(--teal);z-index:2;animation:tdot 3s ease-in-out infinite}
@keyframes tdot{0%,100%{box-shadow:0 0 0 rgba(0,189,195,0)}50%{box-shadow:0 0 14px rgba(0,189,195,.6)}}
.tline .tc b{display:block;color:#fff;font:700 15px var(--display)}
.tline .tc span{font:500 13px var(--body);color:#9fb8c8}

/* CONTACT — chat bubbles */
.chatv{width:380px;max-width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.chatv .cb{max-width:80%;padding:13px 16px;border-radius:16px;font-size:14px;line-height:1.4;opacity:0;animation:pop4 .6s var(--ease) forwards}
.chatv .ci{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#dcebf6;border-bottom-left-radius:4px}
.chatv .co{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:4px}
.chatv .ctyp{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:rgba(255,255,255,.07);border-radius:16px;border-bottom-left-radius:4px;opacity:0;animation:pop4 .6s var(--ease) forwards}
.chatv .ctyp i{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:blink 1.4s infinite}
.chatv .ctyp i:nth-child(2){animation-delay:.2s}.chatv .ctyp i:nth-child(3){animation-delay:.4s}

/* ---- M365 + ECOM overlap FIX: contain visual, caption below as block ---- */
.m365,.ec{position:relative}
.m365 .caption,.ec .caption{position:static !important;transform:none !important;margin:22px auto 0 !important;
  bottom:auto !important;left:auto !important;max-width:340px !important}
.ec .pchips{display:none !important}
.ec [style*="top:0;right:0"]{display:none !important}
.m365 ._trail,.ec ._trail{display:none}

.tline .tprog{opacity:1}
.tilegrid .tg{opacity:1}

.m365-stage{position:relative;height:430px;width:100%;max-width:520px;margin:0 auto}
.m365 .caption{position:static !important;transform:none !important;margin:18px auto 0 !important;max-width:340px}

/* ---------- Chatbot input field ---------- */
.dhbot-input{display:flex;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.dhbot-input input{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:22px;padding:10px 16px;font:14px var(--body);color:var(--ink);outline:none;transition:border-color .2s}
.dhbot-input input:focus{border-color:var(--teal)}
.dhbot-input button{flex:none;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(0,189,195,.35);transition:transform .15s}
.dhbot-input button:hover{transform:scale(1.06)}
.dhbot-input button:active{transform:scale(.96)}

/* ============================================================
   MAIN-PAGE HERO ANIMATIONS — unique per page (non-orbit)
   ============================================================ */

/* ----- HOME: floating product card mosaic ----- */
.mosaic{position:relative;width:520px;max-width:100%;aspect-ratio:1.05;margin:0 auto}
.mosaic .card{position:absolute;border-radius:18px;padding:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(120,200,235,.20);backdrop-filter:blur(10px);
  box-shadow:0 18px 40px rgba(0,0,0,.35);animation:floatY 7s ease-in-out infinite,fadeIn .8s var(--ease) backwards}
.mosaic .card h4{font:700 13px var(--display);color:#fff;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.mosaic .card h4 svg{width:18px;height:18px;color:var(--teal)}
.mosaic .card .ln{height:8px;border-radius:4px;background:rgba(255,255,255,.10);margin:6px 0}
.mosaic .card .ln.lg{height:12px;background:linear-gradient(90deg,var(--teal),var(--blue))}
.mosaic .c1{left:0;top:8%;width:55%;animation-delay:.1s,.0s}
.mosaic .c2{right:0;top:0;width:48%;animation-delay:1s,.2s}
.mosaic .c3{left:8%;bottom:6%;width:50%;animation-delay:2s,.4s}
.mosaic .c4{right:4%;bottom:14%;width:46%;animation-delay:.5s,.6s}
.mosaic .c5{left:38%;top:42%;width:34%;animation-delay:1.5s,.8s;display:grid;place-items:center;text-align:center}
.mosaic .c5 .big{font:800 30px var(--display);background:linear-gradient(120deg,var(--teal),var(--sky),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.mosaic .c5 small{display:block;font:600 11px var(--mono);color:#9fb8c8;margin-top:4px}
.mosaic .bars{display:flex;align-items:flex-end;gap:6px;height:42px;margin-top:8px}
.mosaic .bars b{flex:1;background:linear-gradient(180deg,var(--teal),var(--blue));border-radius:4px 4px 0 0;transform-origin:bottom;animation:barGrow 1s var(--ease) backwards}
.mosaic .bars b:nth-child(1){animation-delay:.5s;height:50%}
.mosaic .bars b:nth-child(2){animation-delay:.6s;height:72%}
.mosaic .bars b:nth-child(3){animation-delay:.7s;height:60%}
.mosaic .bars b:nth-child(4){animation-delay:.8s;height:90%}

/* ----- ABOUT: team / collaboration network ----- */
.team-net{position:relative;width:520px;max-width:100%;aspect-ratio:1.1;margin:0 auto}
.team-net svg{position:absolute;inset:0;width:100%;height:100%}
.team-net svg line{stroke:rgba(120,200,235,.25);stroke-width:1.5;stroke-dasharray:4 5;animation:dashFlow 4s linear infinite}
.team-net .avatar{position:absolute;width:78px;height:78px;border-radius:50%;
  background:linear-gradient(160deg,var(--teal),var(--blue));
  display:grid;place-items:center;font:800 22px var(--display);color:#fff;
  box-shadow:0 12px 30px rgba(0,189,195,.30);border:3px solid rgba(255,255,255,.18);
  animation:floatY 6s ease-in-out infinite,fadeIn .8s var(--ease) backwards;transform:translate(-50%,-50%);z-index:2}
.team-net .avatar small{display:block;margin-top:6px;font:600 9px var(--mono);color:#fff;letter-spacing:.04em;text-align:center;line-height:1.2}
.team-net .a1{left:50%;top:14%;background:linear-gradient(160deg,#00bdc3,#0277d4);animation-delay:.0s,.1s}
.team-net .a2{left:18%;top:38%;background:linear-gradient(160deg,#8b5cf6,#3b82f6);animation-delay:1s,.3s}
.team-net .a3{left:82%;top:38%;background:linear-gradient(160deg,#06b6d4,#0277d4);animation-delay:.4s,.5s}
.team-net .a4{left:50%;top:52%;background:linear-gradient(160deg,#00bdc3,#22c55e);animation-delay:1.5s,.7s;width:108px;height:108px;font-size:30px}
.team-net .a5{left:22%;top:78%;background:linear-gradient(160deg,#f59e0b,#ec4899);animation-delay:.7s,.9s}
.team-net .a6{left:78%;top:78%;background:linear-gradient(160deg,#0277d4,#1e1b4b);animation-delay:1.2s,1.1s}
.team-net .pulse{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal);transform:translate(-50%,-50%);animation:blink 2s infinite}

/* ----- SERVICES: service constellation tiles ----- */
.constel{position:relative;width:520px;max-width:100%;aspect-ratio:1;margin:0 auto}
.constel .tile{position:absolute;width:78px;height:86px;display:grid;place-items:center;color:#fff;
  background:rgba(8,28,46,.85);border:1px solid rgba(120,200,235,.30);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  backdrop-filter:blur(6px);transform:translate(-50%,-50%);
  animation:tileLight 4s ease-in-out infinite,fadeIn .6s var(--ease) backwards}
.constel .tile svg{width:30px;height:30px;color:var(--teal)}
@keyframes tileLight{0%,100%{filter:drop-shadow(0 0 0 rgba(0,189,195,0))}50%{filter:drop-shadow(0 0 16px rgba(0,189,195,.55))}}
.constel .center{width:130px;height:144px;background:linear-gradient(160deg,var(--teal),var(--blue));border-color:transparent}
.constel .center svg{width:42px;height:42px;color:#fff}
.constel .conn{position:absolute;inset:0}
.constel .conn line{stroke:rgba(120,200,235,.18);stroke-width:1;stroke-dasharray:3 5;animation:dashFlow 5s linear infinite}

/* ----- PORTFOLIO: stacked window deck ----- */
.deck{position:relative;width:540px;max-width:100%;aspect-ratio:1.2;margin:0 auto;perspective:1000px}
.deck .win{position:absolute;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(120,200,235,.20);box-shadow:0 30px 60px rgba(0,0,0,.4);
  backdrop-filter:blur(8px);animation:floatY 8s ease-in-out infinite,fadeIn .8s var(--ease) backwards}
.deck .win .bar{display:flex;gap:6px;padding:10px 14px;background:rgba(0,0,0,.18);border-bottom:1px solid rgba(255,255,255,.05)}
.deck .win .bar i{width:9px;height:9px;border-radius:50%}
.deck .win .bar i:nth-child(1){background:#ff5f57}.deck .win .bar i:nth-child(2){background:#febc2e}.deck .win .bar i:nth-child(3){background:#28c840}
.deck .win .content{padding:14px}
.deck .win .ln{height:10px;border-radius:5px;background:rgba(255,255,255,.12);margin:6px 0}
.deck .win .ln.grad{background:linear-gradient(90deg,var(--teal),var(--blue))}
.deck .win .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.deck .win .grid div{height:42px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.deck .w1{left:0;top:24%;width:55%;transform:rotate(-5deg);z-index:1;animation-delay:.2s,.0s}
.deck .w2{left:22%;top:12%;width:60%;transform:rotate(2deg);z-index:2;animation-delay:1s,.3s}
.deck .w3{right:0;top:30%;width:52%;transform:rotate(7deg);z-index:3;animation-delay:.5s,.6s}

/* ----- OUR STORY: winding journey path ----- */
.journey{position:relative;width:540px;max-width:100%;aspect-ratio:1.1;margin:0 auto}
.journey svg{width:100%;height:100%}
.journey .path-line{fill:none;stroke:url(#jgrad);stroke-width:3;stroke-dasharray:8 6;
  animation:pathDash 6s linear infinite}
@keyframes pathDash{to{stroke-dashoffset:-200}}
.journey .milestone{position:absolute;transform:translate(-50%,-50%);z-index:3}
.journey .mdot{width:48px;height:54px;display:grid;place-items:center;color:#fff;font:800 13px var(--mono);
  background:linear-gradient(160deg,var(--teal),var(--blue));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 8px 22px rgba(0,189,195,.36)}
.journey .mlabel{font:600 11px var(--display);color:#fff;text-align:center;margin-top:8px;white-space:nowrap}
.journey .m1{left:8%;top:88%}.journey .m2{left:32%;top:62%}.journey .m3{left:50%;top:78%}
.journey .m4{left:72%;top:42%}.journey .m5{left:90%;top:14%}
.journey .traveler{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 20px var(--teal),0 0 40px var(--teal);
  offset-path:path("M 70 510 C 200 480 230 360 290 360 S 480 280 540 80");
  animation:traverse 8s linear infinite}
@keyframes traverse{to{offset-distance:100%}}

/* ----- CONTACT: animated message in flight ----- */
.msg{position:relative;width:480px;max-width:100%;aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.msg .core{width:140px;height:154px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,var(--teal),var(--blue));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 20px 50px rgba(0,189,195,.45);position:relative;z-index:4}
.msg .core svg{width:54px;height:54px}
.msg .core::after{content:"";position:absolute;inset:-22px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,189,195,.5),transparent 65%);z-index:-1;animation:corePulse 3s ease-in-out infinite}
.msg .wave{position:absolute;border-radius:50%;border:2px solid var(--teal);
  width:100%;height:100%;animation:waveOut 3s ease-out infinite;opacity:0}
.msg .wave.w2{animation-delay:1s}.msg .wave.w3{animation-delay:2s}
@keyframes waveOut{0%{transform:scale(.35);opacity:.8;border-width:3px}100%{transform:scale(1.1);opacity:0;border-width:1px}}
.msg .bub{position:absolute;padding:10px 14px;border-radius:14px;font:600 12px var(--mono);color:#fff;
  background:rgba(0,189,195,.14);border:1px solid rgba(0,189,195,.35);backdrop-filter:blur(6px);z-index:5;
  animation:floatY 6s ease-in-out infinite,fadeIn .6s var(--ease) backwards}
.msg .b1{top:10%;left:8%;animation-delay:.4s,.0s}
.msg .b2{top:14%;right:8%;animation-delay:1.1s,.4s}
.msg .b3{bottom:14%;left:14%;animation-delay:.7s,.8s}
.msg .b4{bottom:8%;right:6%;animation-delay:1.4s,1.2s}

/* ----- WHY JOIN US — career rocket trajectory ----- */
.rocket-vis{position:relative;width:520px;max-width:100%;aspect-ratio:1;margin:0 auto}
.rocket-vis svg{width:100%;height:100%}
.rocket-vis .trail{fill:none;stroke:url(#rkgrad);stroke-width:3;stroke-dasharray:6 6;animation:pathDash 5s linear infinite}
.rocket-vis .stars circle{fill:#fff;animation:blink 3s infinite}
.rocket-vis .level{position:absolute;padding:9px 14px;border-radius:24px;
  background:rgba(8,28,46,.85);border:1px solid rgba(120,200,235,.25);
  font:600 12px var(--mono);color:#fff;backdrop-filter:blur(6px);transform:translate(-50%,-50%);z-index:3;
  animation:floatY 6s ease-in-out infinite,fadeIn .7s var(--ease) backwards}
.rocket-vis .lv1{left:18%;top:82%;animation-delay:.2s,.0s}
.rocket-vis .lv2{left:38%;top:60%;animation-delay:.7s,.3s}
.rocket-vis .lv3{left:58%;top:42%;animation-delay:1.2s,.6s}
.rocket-vis .lv4{left:80%;top:18%;animation-delay:.4s,.9s;background:linear-gradient(135deg,var(--teal),var(--blue));border-color:transparent}
.rocket-vis .ship{position:absolute;width:62px;height:68px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,var(--teal),var(--blue));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 14px 36px rgba(0,189,195,.45);
  top:14%;left:84%;transform:translate(-50%,-50%);z-index:4;animation:floatY 4s ease-in-out infinite}
.rocket-vis .ship svg{width:26px;height:26px}

/* ----- WHY JOIN US — perks grid ----- */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.perk{padding:28px 24px;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(2,32,55,.05);transition:transform .25s,box-shadow .25s}
.perk:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(2,32,55,.10)}
.perk .pi{width:48px;height:54px;display:grid;place-items:center;margin-bottom:14px;color:#fff;
  background:linear-gradient(160deg,var(--teal),var(--blue));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.perk .pi svg{width:22px;height:22px}
.perk h3{font-size:18px;margin:0 0 8px}
.perk p{color:var(--slate);font-size:14.5px;line-height:1.55}
@media(max-width:880px){.perks{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.perks{grid-template-columns:1fr}}

/* ----- WHY JOIN US — positions list ----- */
.positions{display:grid;gap:14px}
.position{display:flex;align-items:center;gap:18px;padding:22px 26px;border-radius:16px;background:#fff;border:1px solid var(--line);transition:border-color .2s}
.position:hover{border-color:var(--teal)}
.position .pchip{flex:none;padding:5px 12px;border-radius:20px;font:700 11px var(--mono);background:var(--mist);color:var(--blue);letter-spacing:.04em}
.position .pinfo{flex:1;min-width:0}
.position .pinfo b{display:block;font:700 17px var(--display);color:var(--ink)}
.position .pinfo span{display:block;color:var(--slate);font-size:13px;margin-top:2px}
.position .pmeta{flex:none;font:600 13px var(--mono);color:var(--slate)}
.position .papply{flex:none;padding:9px 18px;border-radius:24px;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;font-weight:700;font-size:14px;text-decoration:none;transition:transform .2s}
.position .papply:hover{transform:translateY(-2px)}
@media(max-width:760px){.position{flex-wrap:wrap}.position .pmeta{order:3;flex-basis:100%}}

/* ============================================================
   v4: Dropdown professional 3-col grouped redesign
   ============================================================ */
.drop{padding:24px !important;width:920px !important;border-radius:22px !important;
  box-shadow:0 30px 80px rgba(2,32,55,.16) !important;border:1px solid #e6edf3 !important}
.drop .drop-grid{grid-template-columns:repeat(3,1fr) !important;gap:18px !important}
.dcol{display:flex;flex-direction:column;gap:2px}
.dcol-h{margin:0 0 10px;padding:0 12px 8px;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.10em;color:var(--blue);border-bottom:1px solid #eef3f7}
.drop a{padding:11px 12px !important;border-radius:10px !important;align-items:flex-start !important;gap:12px !important}
.drop a:hover{background:linear-gradient(135deg,rgba(0,189,195,.06),rgba(2,119,212,.04)) !important}
.drop a .di{width:38px !important;height:38px !important;border-radius:10px !important;background:linear-gradient(135deg,rgba(0,189,195,.10),rgba(2,119,212,.10)) !important;color:var(--blue) !important}
.drop a .di svg{width:18px !important;height:18px !important}
.drop a b{font-size:13.5px !important;line-height:1.3 !important;color:var(--ink) !important;display:block !important}
.drop a small{display:block !important;font:500 11.5px var(--body) !important;color:var(--slate) !important;margin-top:2px;line-height:1.35 !important;white-space:normal !important}

.drop-foot-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid #eef3f7}
.drop-foot{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px !important;
  border-radius:12px !important;font:700 13.5px var(--body) !important;text-decoration:none;transition:all .2s;border:0 !important;margin:0 !important}
.drop-foot{background:#0f2237 !important;color:#fff !important}
.drop-foot:hover{background:var(--navy) !important;transform:translateY(-1px)}
.drop-foot-2{background:linear-gradient(135deg,var(--teal),var(--blue)) !important;color:#fff !important}
.drop-foot-2:hover{filter:brightness(1.06);transform:translateY(-1px)}
.drop-foot svg{width:15px;height:15px;flex:none}

/* Services link affordance — arrow + active hint */
.srv-i{display:inline-block;font-style:normal;font-weight:700;margin-left:4px;transform:rotate(90deg);font-size:14px;color:var(--teal);transition:transform .2s}
.has-drop:hover .srv-i{transform:rotate(270deg)}
.has-drop>a{position:relative}
.has-drop>a::after{content:"";position:absolute;left:50%;bottom:-4px;width:0;height:2px;background:var(--teal);transition:width .25s,left .25s}
.has-drop:hover>a::after{width:80%;left:10%}

/* Reposition dropdown so it doesn't run off-screen on right */
.drop{left:50% !important;transform:translateX(-50%) translateY(10px) !important;max-width:calc(100vw - 32px)}
.has-drop:hover .drop{transform:translateX(-50%) translateY(0) !important}

@media(max-width:1024px){.drop{width:calc(100vw - 32px) !important}.drop .drop-grid{grid-template-columns:1fr 1fr !important}}
@media(max-width:640px){.drop .drop-grid{grid-template-columns:1fr !important}}

/* ============================================================
   v4: Stats strip — replace cyan-on-navy with white+cyan accent
   ============================================================ */
.stats-strip{background:var(--ink) !important}
.stats-strip .num{color:#fff !important;font-family:var(--display) !important}
.stats-strip .num::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-right:14px;vertical-align:middle;box-shadow:0 0 12px var(--teal)}
.stats-strip .lbl{color:#9bb4c6 !important;font-family:var(--mono) !important;text-transform:uppercase;font-size:11.5px;letter-spacing:.10em}

/* ============================================================
   v4: CTA band variants — break monotony per page
   ============================================================ */
.cta-band.v2{background:radial-gradient(120% 140% at 0% 0%,#0a2740 0%,var(--navy) 45%,#020d16 100%);color:#fff;text-align:left;padding:60px 54px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.cta-band.v2::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:42px 42px;-webkit-mask:radial-gradient(120% 120% at 100% 0%,#000,transparent 70%);mask:radial-gradient(120% 120% at 100% 0%,#000,transparent 70%);opacity:.5}
.cta-band.v2::after{content:"";position:absolute;width:420px;height:420px;right:-80px;top:-140px;border-radius:50%;background:radial-gradient(circle,rgba(0,189,195,.28),transparent 68%);filter:blur(20px)}
.cta-band.v2 > *{position:relative;z-index:2}
.cta-band.v2 .eyebrow.light{color:var(--teal)}
.cta-band.v2 h2{color:#fff}.cta-band.v2 p{color:#9fb8c8}
.cta-band.v2 .hex-net{display:none}
.cta-band.v2 .btn-primary{background:var(--grad);color:#fff}
.cta-band.v2 .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.cta-band.v2 .btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.cta-band.v2 .cta-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:30px}
.cta-band.v2 .cta-row > div:first-child{flex:1;min-width:260px;text-align:left}
.cta-band.v3{background:#fff;border:1px solid var(--line);color:var(--ink)}
.cta-band.v3 h2{color:var(--ink)}.cta-band.v3 p{color:var(--slate)}
.cta-band.v3 .hex-net{display:none}
.cta-band.v3 .btn-ghost{color:var(--blue);border-color:var(--blue)}

/* ============================================================
   v4: Reduce icon spam — image-led perk cards
   ============================================================ */
.perk-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.perk-row{display:flex;gap:24px;padding:30px;border:1px solid var(--line);background:#fff;transition:background .2s}
.perk-row + .perk-row{border-top:0}
.perk-row:nth-child(odd){border-right:0}
.perk-row:hover{background:var(--mist)}
.perk-row .pn{flex:none;font:800 36px var(--display);background:linear-gradient(135deg,var(--teal),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;width:60px}
.perk-row h3{font-size:18px;margin:0 0 6px}
.perk-row p{color:var(--slate);font-size:14.5px;line-height:1.55;margin:0}
@media(max-width:760px){.perk-grid{grid-template-columns:1fr}.perk-row{border-right:1px solid var(--line) !important}.perk-row + .perk-row{border-top:0}}
.perk-grid{border-radius:18px;overflow:hidden}

/* ============================================================
   v4: M365 redesigned — clean integration stack
   ============================================================ */
.m365v2{position:relative;width:480px;max-width:100%;margin:0 auto;align-self:start}
.m365v2 .hub{display:inline-flex;align-items:center;justify-content:center;padding:18px 28px;border-radius:18px;
  background:linear-gradient(135deg,#0078d4,#005a9e);color:#fff;gap:14px;
  box-shadow:0 20px 50px rgba(0,120,212,.35);position:relative;z-index:5;
  margin:0 auto 36px;width:fit-content;min-height:0;height:auto}
.m365v2 .hub b{font:800 24px var(--display);letter-spacing:-.01em}
.m365v2 .hub span{font:600 12px var(--mono);opacity:.9;text-transform:uppercase;letter-spacing:.08em}
.m365v2 .apps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;z-index:3}
.m365v2 .app{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(120,200,235,.20);backdrop-filter:blur(4px);
  animation:fadeIn .6s var(--ease) backwards}
.m365v2 .app .aic{width:34px;height:34px;flex:none;border-radius:8px;display:grid;place-items:center;color:#fff;font:800 13px var(--display)}
.m365v2 .app .at{font:700 13.5px var(--display);color:#fff;line-height:1.2}
.m365v2 .app .ai-excel{background:linear-gradient(135deg,#21a366,#107c41)}
.m365v2 .app .ai-out{background:linear-gradient(135deg,#0078d4,#005a9e)}
.m365v2 .app .ai-sp{background:linear-gradient(135deg,#038387,#005a5c)}
.m365v2 .app .ai-team{background:linear-gradient(135deg,#6264a7,#4b4c89)}
.m365v2 .app .ai-od{background:linear-gradient(135deg,#0364b8,#024a8a)}
.m365v2 .app .ai-az{background:linear-gradient(135deg,#0089d6,#005a9e)}
.m365v2 .app:nth-child(1){animation-delay:.2s}.m365v2 .app:nth-child(2){animation-delay:.35s}
.m365v2 .app:nth-child(3){animation-delay:.5s}.m365v2 .app:nth-child(4){animation-delay:.65s}
.m365v2 .app:nth-child(5){animation-delay:.8s}.m365v2 .app:nth-child(6){animation-delay:.95s}
.m365v2 .lines{position:absolute;left:50%;top:62px;width:2px;height:30px;background:linear-gradient(180deg,var(--teal),transparent);transform:translateX(-50%);z-index:1;animation:dashFlow 3s linear infinite}
.m365v2 .badge{margin-top:24px;text-align:center;padding:12px 18px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(120,200,235,.14)}
.m365v2 .badge b{display:block;font:700 14px var(--display);color:#fff}
.m365v2 .badge span{display:block;font:600 11.5px var(--mono);color:#9fb8c8;margin-top:3px;letter-spacing:.04em}

/* ---------- Apply page: file upload widget ---------- */
.file-upload{position:relative}
.file-upload input[type=file]{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}
.file-label{display:flex;align-items:center;gap:14px;padding:18px 20px;border:2px dashed var(--line);border-radius:12px;background:var(--mist);cursor:pointer;transition:all .2s}
.file-label:hover,.file-upload:has(input:focus) .file-label{border-color:var(--teal);background:rgba(0,189,195,.04)}
.file-ic{font-size:28px;line-height:1}
.file-tx b{display:block;color:var(--ink);font-size:14.5px;font-family:var(--display);font-weight:700}
.file-tx small{display:block;color:var(--slate);font-size:12.5px;margin-top:2px}
.file-upload.has-file .file-label{border-style:solid;border-color:var(--teal);background:rgba(0,189,195,.06)}
.file-upload.has-file .file-tx b{color:var(--teal)}

/* ===== Looping ambient animation for ecommerce & m365 service visuals ===== */
.ec .lvl{animation:fadeIn .6s var(--ease) backwards, ecPulse 3.4s ease-in-out infinite}
.ec .lvl:nth-child(2){animation-delay:.15s,.3s}
.ec .lvl:nth-child(3){animation-delay:.3s,.6s}
.ec .lvl:nth-child(4){animation-delay:.45s,.9s}
.ec .lvl:nth-child(5){animation-delay:.6s,1.2s}
@keyframes ecPulse{0%,100%{transform:translateY(0);box-shadow:0 0 0 rgba(245,165,36,0)}50%{transform:translateY(-4px);box-shadow:0 10px 26px -10px rgba(245,165,36,.45)}}
.ec .rev{animation:ecPulse 3.4s ease-in-out infinite 1.5s}

.m365v2 .app{animation:fadeIn .6s var(--ease) backwards, m365Float 4s ease-in-out infinite}
.m365v2 .app:nth-child(1){animation-delay:.2s,0s}.m365v2 .app:nth-child(2){animation-delay:.35s,.3s}
.m365v2 .app:nth-child(3){animation-delay:.5s,.6s}.m365v2 .app:nth-child(4){animation-delay:.65s,.9s}
.m365v2 .app:nth-child(5){animation-delay:.8s,1.2s}.m365v2 .app:nth-child(6){animation-delay:.95s,1.5s}
@keyframes m365Float{0%,100%{transform:translateY(0);border-color:rgba(120,200,235,.20)}50%{transform:translateY(-5px);border-color:rgba(0,189,195,.5)}}
.m365v2 .hub{animation:m365Glow 3s ease-in-out infinite}
@keyframes m365Glow{0%,100%{box-shadow:0 0 0 rgba(0,189,195,0)}50%{box-shadow:0 0 30px -6px rgba(0,189,195,.5)}}

/* ===== Per-theme accent tint for hero visuals (distinct colours) ===== */
body.theme-wp .bw-nav .lg i,body.theme-wp .bw-nav .cta,body.theme-wp .bw-hero .l1,body.theme-wp .bw-hero .btns a:first-child,
body.theme-webapp .bw-nav .lg i,body.theme-webapp .bw-nav .cta,body.theme-webapp .bw-hero .l1,body.theme-webapp .bw-hero .btns a:first-child{
  background:linear-gradient(135deg,var(--accent),#ffffff22)!important}
body.theme-wp .mock .stat b,body.theme-webapp .mock .stat b{color:#fff}
body.theme-wp .chip,body.theme-webapp .chip{border-color:color-mix(in srgb,var(--accent) 60%,transparent)!important;color:var(--accent)!important}
body.theme-wp .mock,body.theme-webapp .mock{box-shadow:0 30px 80px -30px color-mix(in srgb,var(--accent) 50%,transparent)}

/* ============================================================
   GLOBAL MOBILE RESPONSIVENESS LAYER  (added — applies site-wide)
   Fixes: horizontal overflow, grid blowout, oversized hero
   headings, fixed-width hero visuals running off-screen.
   ============================================================ */
@media(max-width:768px){
  /* 1) Hard stop any sideways scrolling anywhere on the site */
  html{overflow-x:clip}
  body{max-width:100%;overflow-x:hidden}
  /* closed mobile drawer must not extend the page width — remove from layout */
  .mobile-nav:not(.open){display:none}
  .mobile-nav.open{display:block;animation:drawerIn .42s var(--ease)}

  /* 2) Grid blowout guard: let 2-col grids actually shrink to 1 col
        (children with big intrinsic width were stretching tracks) */
  .hero-grid,.split,.svp-glance,.ov2,.ft2,.svp-feat,.proof-grid{grid-template-columns:1fr!important}
  .hero-grid>*,.split>*,.svp-glance>*,.ov2>*,.ft2>*{min-width:0;max-width:100%}

  /* 3) Hero headings: scale down so long single words (e.g. "Cybersecurity")
        never overflow; allow wrapping */
  .hero h1{font-size:clamp(30px,8.2vw,44px)!important;line-height:1.06;overflow-wrap:normal;word-break:normal;hyphens:none}
  .hero .lead{font-size:16px;max-width:100%}

  /* 4) Any hero visual / scene must fit the screen, never push width */
  .hero-visual,.hero-visual>*,.scene,.cy-scene,.svp-at,.svp-ov,
  .ai-scene,.web-scene,.cloud-scene,.mobile-scene,.ux-scene,.wp-scene{
    max-width:100%!important;width:100%!important;margin-left:0!important}
  .cy-scene{min-height:360px!important}

  /* 5) Tables that are too wide -> let them scroll instead of overflowing page */
  .about .cmp{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* 6) Comfortable, consistent side padding everywhere */
  .container{padding-left:18px;padding-right:18px}
}

@media(max-width:480px){
  .hero h1{font-size:clamp(27px,8.4vw,38px)!important}
  .section{padding:60px 0}
  .btn{padding:12px 18px}
  /* stat rows / button rows wrap nicely instead of overflowing */
  .hero-cta,.cy-stats{flex-wrap:wrap;gap:14px}
  .cy-stats{gap:18px 26px}
}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}