/* ============================================================================
   SERVE INNOVATE — Homepage-only components
   Sections that exist only on index.html (hero, showcase, services accordion,
   process tabs, why, about visual, marquee, projects, blog cards).
   Kept out of theme.css so these rules can never leak onto other pages.
   ============================================================================ */
/* ============ HERO ============ */
.hero{position:relative;padding:160px 0 90px;min-height:100vh;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;width:100%}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.5rem);font-weight:800;margin-bottom:24px}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line i{display:inline-block;font-style:normal;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
.hero p.lead{font-size:1.12rem;color:#b7d2f2;max-width:520px;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:42px}
.stats{display:flex;gap:34px;flex-wrap:wrap}
.stat .n{font-family:'Space Grotesk';font-size:2rem;font-weight:700;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{font-size:.82rem;color:#8fb4dd;letter-spacing:.04em}
@keyframes rise{to{transform:translateY(0)}}

/* ===== HERO SERVICE SHOWCASE (right) ===== */
.showcase{position:relative;height:560px;perspective:1600px;margin-top:30px}
.sc-stack{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.sc-card{position:absolute;inset:0;border-radius:26px;padding:24px 30px;display:flex;flex-direction:column;justify-content:flex-start;
  background:linear-gradient(160deg,#0c2c5e,#04122b 70%);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow-glow);opacity:0;visibility:hidden;transform:translateY(40px) rotateX(8deg) scale(.94);
  transition:opacity .7s var(--ease),transform .7s var(--ease),visibility 0s linear .7s;pointer-events:none}
.sc-card.active{opacity:1;visibility:visible;transform:translateY(0) rotateX(0) scale(1);pointer-events:auto;transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s}
.sc-card.exit{opacity:0;visibility:visible;transform:translateY(-32px) rotateX(-8deg) scale(.95);transition:opacity .36s var(--ease),transform .36s var(--ease),visibility 0s linear .36s}
.sc-top{display:flex;align-items:center;justify-content:space-between}
.sc-icon{width:62px;height:62px;border-radius:18px;background:var(--grad-blue);display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(57,167,255,.7);position:relative;overflow:hidden}
.sc-icon svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:1.8}
.sc-num{font-family:'Space Grotesk';font-size:2.8rem;font-weight:700;color:rgba(98,198,255,.14)}
/* ===== SHOWCASE SCREEN (animated SVG art inside each card) ===== */
.sc-screen{position:relative;width:100%;height:184px;border-radius:18px;margin:14px 0 4px;overflow:hidden;
  background:linear-gradient(160deg,rgba(7,32,68,.9),rgba(2,10,26,.96));
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 rgba(169,224,255,.08),0 18px 40px -22px rgba(0,0,0,.7)}
.sc-screen::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(169,224,255,.10) 48%,transparent 58%);
  transform:translateX(-120%)}
.sc-card.active .sc-screen::before{animation:scSheen 2.6s var(--ease) .5s forwards}
@keyframes scSheen{to{transform:translateX(120%)}}
.sc-screen svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sc-screen .glow{position:absolute;width:140px;height:140px;border-radius:50%;filter:blur(46px);opacity:.55;
  background:radial-gradient(circle,var(--sky-400),transparent 70%);top:-30px;right:-20px;pointer-events:none}
/* draw / reveal animations triggered when the card is active */
.sc-card.active .sc-screen .anim-draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  animation:scDraw 1.5s var(--ease) .35s forwards}
@keyframes scDraw{to{stroke-dashoffset:0}}
.sc-card.active .sc-screen .anim-bar{transform:scaleY(0);transform-origin:bottom;animation:scBar .8s var(--ease) forwards}
@keyframes scBar{to{transform:scaleY(1)}}
.sc-card.active .sc-screen .anim-fade{opacity:0;animation:scFade .7s ease forwards}
@keyframes scFade{to{opacity:1}}
.sc-card.active .sc-screen .anim-pop{transform:scale(0);transform-origin:center;animation:scPop .6s var(--ease) forwards}
@keyframes scPop{to{transform:scale(1)}}
.sc-card.active .sc-screen .chip-in{opacity:0;transform:translateX(16px);animation:scChip .55s var(--ease) forwards}
@keyframes scChip{to{opacity:1;transform:translateX(0)}}
.sc-screen .floaty{animation:scFloat 4s ease-in-out infinite}
@keyframes scFloat{50%{transform:translateY(-6px)}}
.sc-screen .pulse-dot{animation:scPulse 2s ease-in-out infinite}
@keyframes scPulse{50%{opacity:.35;r:2}}
.sc-screen .dash-move{stroke-dasharray:6 7;animation:scDash 1.1s linear infinite}
@keyframes scDash{to{stroke-dashoffset:-26}}
.sc-card h3{font-size:1.6rem;margin:8px 0 8px}
.sc-card p{color:#bcd6f5;font-size:.92rem;margin-bottom:14px;line-height:1.5}
.sc-tags{display:flex;flex-wrap:wrap;gap:7px}
.sc-tags span{font-size:.74rem;padding:5px 11px;border-radius:8px;background:rgba(98,198,255,.1);border:1px solid var(--glass-line);color:var(--sky-200)}
.sc-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:'Space Grotesk';font-weight:600;color:var(--sky-300)}
.sc-link svg{width:18px;height:18px;transition:.3s}
.sc-link:hover svg{transform:translateX(5px)}
/* progress dots */
.sc-dots{position:absolute;bottom:-46px;left:50%;transform:translateX(-50%);display:flex;gap:10px}
.sc-dot{width:38px;height:5px;border-radius:4px;background:rgba(98,198,255,.18);cursor:pointer;overflow:hidden;position:relative}
.sc-dot span{position:absolute;inset:0;width:0;background:var(--grad-blue);border-radius:4px}
.sc-dot.active span{animation:fill 5s linear forwards}
@keyframes fill{to{width:100%}}
/* ===== center-top animated service label ===== */
.svc-label{position:absolute;top:-30px;left:50%;transform:translateX(-50%);z-index:6;
  display:inline-flex;align-items:center;gap:10px;padding:11px 22px;border-radius:100px;
  background:linear-gradient(120deg,rgba(8,30,64,.92),rgba(12,46,96,.85));
  border:1px solid rgba(98,210,255,.4);backdrop-filter:blur(12px);
  box-shadow:0 14px 40px -14px rgba(65,196,255,.6),inset 0 1px 0 rgba(180,225,255,.14);
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.96rem;letter-spacing:-.01em;white-space:nowrap;
  animation:labelFloat 5s ease-in-out infinite}
@keyframes labelFloat{50%{transform:translateX(-50%) translateY(-5px)}}
.svc-label::before{content:"";position:absolute;inset:0;border-radius:100px;pointer-events:none;overflow:hidden;
  background:linear-gradient(110deg,transparent 30%,rgba(169,230,255,.35) 50%,transparent 70%);
  background-size:200% 100%;background-position:-100% 0;
  animation:labelShine 3.2s ease-in-out infinite}
@keyframes labelShine{0%{background-position:-100% 0}60%,100%{background-position:200% 0}}
.svc-label-dot{width:9px;height:9px;border-radius:50%;background:#41c4ff;box-shadow:0 0 14px #41c4ff,0 0 4px #fff;flex-shrink:0;
  animation:labelDot 1.8s ease-in-out infinite}
@keyframes labelDot{50%{transform:scale(.6);opacity:.5}}
.svc-label-text{background:linear-gradient(100deg,#7ed6ff,#a9e6ff 50%,#41c4ff);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.svc-label-text.swap{animation:labelSwap .5s var(--ease)}
@keyframes labelSwap{0%{opacity:0;transform:translateY(8px) rotateX(40deg);filter:blur(3px)}100%{opacity:1;transform:none;filter:none}}
@keyframes floaty{50%{transform:translateY(-16px)}}

/* ============ SERVICES — EXPANDING PANEL SHOWCASE (fully animated) ============ */
#services{position:relative;overflow:hidden}
.svc-flow{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.svc-flow::before{content:"";position:absolute;inset:-10%;
  background:
    radial-gradient(1200px 540px at 50% -8%,rgba(57,167,255,.20),transparent 60%),
    radial-gradient(760px 520px at 12% 40%,rgba(31,143,224,.12),transparent 60%),
    radial-gradient(760px 520px at 88% 70%,rgba(98,210,255,.12),transparent 60%),
    linear-gradient(180deg,rgba(9,38,80,.45),rgba(5,18,40,.15) 55%,transparent)}
.svc-flow svg{position:absolute;inset:0;width:100%;height:100%}
.flow-line{fill:none;stroke-width:1.4;stroke-linecap:round;opacity:.5;stroke-dasharray:14 22;animation:flowDash 9s linear infinite}
@keyframes flowDash{to{stroke-dashoffset:-360}}
.flow-node{fill:#62c8ff;opacity:0;animation:flowNode 6s ease-in-out infinite}
@keyframes flowNode{0%,100%{opacity:.15;r:2}50%{opacity:.9;r:3.4}}

/* the accordion row */
.svc-accordion{display:flex;gap:16px;position:relative;z-index:1;height:480px}
.panel{position:relative;border-radius:22px;overflow:hidden;cursor:pointer;flex:1 1 0;min-width:0;
  background:linear-gradient(165deg,rgba(16,50,104,.6),rgba(6,20,46,.8));
  border:1px solid rgba(98,210,255,.18);
  transition:flex-grow .7s cubic-bezier(.22,1,.36,1),border-color .5s,box-shadow .5s;
  box-shadow:inset 0 1px 0 rgba(180,225,255,.06)}
.panel.active{flex-grow:4.4;border-color:rgba(98,210,255,.5);
  box-shadow:0 30px 80px -34px rgba(65,196,255,.55),inset 0 1px 0 rgba(180,225,255,.14)}
/* moving gradient sheen across active panel */
.panel.active::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(169,230,255,.10) 50%,transparent 60%);
  transform:translateX(-120%);animation:panelSheen 3.4s ease-in-out .3s infinite}
@keyframes panelSheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
/* number watermark */
.panel .p-num{position:absolute;top:18px;right:22px;font-family:'Space Grotesk';font-weight:700;font-size:3.4rem;
  color:rgba(98,210,255,.12);z-index:1;transition:.5s}
.panel.active .p-num{color:rgba(98,210,255,.22)}

/* collapsed state: vertical icon + rotated title */
.p-collapsed{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  padding:26px 0;z-index:2;transition:opacity .4s}
.panel.active .p-collapsed{opacity:0;pointer-events:none}
.p-collapsed .p-ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(150deg,rgba(65,196,255,.2),rgba(31,143,224,.1));border:1px solid rgba(98,210,255,.36);transition:.5s}
.panel:hover .p-ic{background:linear-gradient(135deg,#1f8fe0,#41c4ff);box-shadow:0 12px 26px -8px rgba(65,196,255,.6)}
.p-collapsed .p-ic svg{width:28px;height:28px;stroke:#7ed6ff;fill:none;stroke-width:1.8;transition:.4s}
.panel:hover .p-ic svg{stroke:#fff}
.p-collapsed .p-vtitle{writing-mode:vertical-rl;transform:rotate(180deg);margin-top:26px;
  font-family:'Space Grotesk';font-weight:600;font-size:1.04rem;letter-spacing:.02em;color:#cfe7ff;white-space:nowrap}
.p-collapsed .p-vdot{margin-top:auto;width:8px;height:8px;border-radius:50%;background:#41c4ff;box-shadow:0 0 12px #41c4ff;animation:labelDot 1.8s ease-in-out infinite}

/* expanded content */
.p-expanded{position:absolute;inset:0;padding:30px 32px;display:flex;flex-direction:column;z-index:3;
  opacity:0;pointer-events:none;transition:opacity .5s .15s}
.panel.active .p-expanded{opacity:1;pointer-events:auto}
.p-expanded .p-ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(135deg,#1f8fe0,#41c4ff);box-shadow:0 14px 30px -8px rgba(65,196,255,.6)}
.p-expanded .p-ic svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.8}
.p-expanded h3{font-size:1.6rem;letter-spacing:-.02em;margin-bottom:10px;white-space:nowrap;
  opacity:0;transform:translateY(14px)}
.panel.active .p-expanded h3{animation:pUp .55s var(--ease) .2s forwards}
.p-expanded p{color:#c2dcf7;font-size:.96rem;line-height:1.6;max-width:430px;
  opacity:0;transform:translateY(14px)}
.panel.active .p-expanded p{animation:pUp .55s var(--ease) .3s forwards}
@keyframes pUp{to{opacity:1;transform:none}}
.p-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;opacity:0;transform:translateY(14px)}
.panel.active .p-expanded .p-tags{animation:pUp .55s var(--ease) .38s forwards}
.p-tags span{font-size:.78rem;padding:6px 13px;border-radius:9px;background:rgba(65,196,255,.12);
  border:1px solid rgba(98,210,255,.3);color:#a9e6ff}
.p-art{flex:1;margin:18px 0 16px;border-radius:16px;position:relative;overflow:hidden;min-height:120px;
  background:linear-gradient(150deg,rgba(6,22,48,.7),rgba(12,44,94,.4));border:1px solid rgba(98,210,255,.16);
  opacity:0;transform:scale(.96)}
.panel.active .p-expanded .p-art{animation:pArt .7s var(--ease) .25s forwards}
@keyframes pArt{to{opacity:1;transform:none}}
.p-art svg{position:absolute;inset:0;width:100%;height:100%}
.p-more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:11px 20px;border-radius:11px;
  font-family:'Space Grotesk';font-weight:600;font-size:.88rem;color:#06122b;
  background:linear-gradient(135deg,#41c4ff,#7ed6ff);box-shadow:0 12px 26px -10px rgba(65,196,255,.7);
  position:relative;overflow:hidden;opacity:0;transform:translateY(14px);transition:transform .3s,box-shadow .3s}
.panel.active .p-expanded .p-more{animation:pUp .55s var(--ease) .46s forwards}
.p-more::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-130%);transition:.6s}
.p-more:hover::after{transform:translateX(130%)}
.p-more:hover{transform:translateY(-2px)!important;box-shadow:0 18px 34px -10px rgba(65,196,255,.9)}
.p-more svg{width:15px;height:15px;stroke:#06122b}
/* art animation primitives (run when panel active) */
.panel.active .p-art .a-draw{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);animation:scDraw 1.4s var(--ease) .5s forwards}
.panel.active .p-art .a-bar{transform:scaleY(0);transform-origin:bottom;animation:scBar .7s var(--ease) .5s forwards}
.panel.active .p-art .a-pop{transform:scale(0);transform-origin:center;animation:scPop .6s var(--ease) .5s forwards}
.panel.active .p-art .a-fade{opacity:0;animation:scFade .7s ease .5s forwards}
.p-art .a-float{animation:scFloat 4s ease-in-out infinite}
.p-art .a-dash{stroke-dasharray:5 7;animation:scDash 1.1s linear infinite}
.p-art .a-pulse{animation:scPulse 2s ease-in-out infinite}
@media(max-width:880px){
  .svc-accordion{flex-direction:column;height:auto}
  .panel{flex:none;min-height:78px}
  .panel.active{min-height:520px}
  .p-collapsed{flex-direction:row;padding:0 24px;gap:18px;justify-content:flex-start}
  .p-collapsed .p-vtitle{writing-mode:horizontal-tb;transform:none;margin-top:0}
  .p-collapsed .p-vdot{margin-top:0;margin-left:auto}
  .p-expanded h3,.p-expanded p{white-space:normal}
}

/* ============ PROCESS TABS ============ */
.proc-tabs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
.ptab{display:flex;align-items:center;gap:11px;padding:14px 22px;border-radius:14px;cursor:pointer;background:rgba(12,44,94,.4);border:1px solid var(--glass-line);font-family:'Space Grotesk';font-weight:600;font-size:.96rem;color:#bcd6f5;transition:.35s var(--ease);position:relative;overflow:hidden}
.ptab .ti{width:30px;height:30px;border-radius:9px;background:rgba(98,198,255,.12);display:grid;place-items:center;transition:.35s}
.ptab .ti svg{width:17px;height:17px;stroke:var(--sky-300);fill:none;stroke-width:1.9;transition:.35s}
.ptab:hover{transform:translateY(-3px);border-color:rgba(98,198,255,.4)}
.ptab.active{background:var(--grad-blue);color:#fff;border-color:transparent;box-shadow:var(--shadow-glow)}
.ptab.active .ti{background:rgba(255,255,255,.2)}
.ptab.active .ti svg{stroke:#fff}
.proc-panel{display:none;animation:panelIn .7s var(--ease)}
.proc-panel.show{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.proc-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;background:linear-gradient(160deg,rgba(20,58,116,.5),rgba(8,26,56,.6));border:1px solid rgba(120,180,250,.2);border-radius:26px;padding:46px;box-shadow:0 24px 60px -34px rgba(0,0,0,.7),inset 0 1px 0 rgba(180,220,255,.08)}
.proc-info h3{font-size:2rem;margin-bottom:14px}
.proc-info p{color:#c2dbf6;margin-bottom:24px}
.proc-feats{display:flex;flex-wrap:wrap;gap:9px}
.proc-feats span{font-size:.82rem;padding:7px 13px;border-radius:9px;background:var(--pv-soft,rgba(98,198,255,.12));border:1px solid var(--pv-bd,rgba(98,198,255,.28));color:var(--pv-ink,#cfeaff)}
/* process service visual */
.proc-visual{margin-top:28px;height:150px;border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(12,44,94,.55),rgba(6,22,48,.75));border:1px solid var(--pv-bd,rgba(120,180,250,.2));
  box-shadow:inset 0 1px 0 rgba(180,220,255,.08)}
.proc-visual::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;filter:blur(46px);opacity:.4;top:-40px;right:-30px;background:radial-gradient(circle,var(--pv-ink,#62c6ff),transparent 70%);pointer-events:none}
.proc-visual svg{position:absolute;inset:0;width:100%;height:100%}
.proc-panel.show .proc-visual .m-draw{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);animation:scDraw 1.4s var(--ease) .25s forwards}
.proc-panel.show .proc-visual .m-bar{transform:scaleY(0);transform-origin:bottom;animation:scBar .75s var(--ease) forwards}
.proc-panel.show .proc-visual .m-pop{transform:scale(0);transform-origin:center;animation:scPop .6s var(--ease) forwards}
.proc-panel.show .proc-visual .m-fade{opacity:0;animation:scFade .7s ease forwards}
.proc-visual .m-float{animation:scFloat 4s ease-in-out infinite}
.proc-visual .m-dash{stroke-dasharray:5 7;animation:scDash 1.1s linear infinite}
.proc-visual .m-pulse{animation:scPulse 2s ease-in-out infinite}
/* per-service accent vars for process panels */
.pv-blue{--pv-soft:rgba(57,167,255,.14);--pv-bd:rgba(98,198,255,.34);--pv-ink:#62c6ff}
.pv-cyan{--pv-soft:rgba(65,196,255,.14);--pv-bd:rgba(98,210,255,.34);--pv-ink:#62c8ff}
.pv-teal{--pv-soft:rgba(52,224,208,.13);--pv-bd:rgba(52,224,208,.34);--pv-ink:#34e0d0}
.pv-violet{--pv-soft:rgba(138,123,255,.15);--pv-bd:rgba(154,140,255,.36);--pv-ink:#a99bff}
/* steps */
.steps{position:relative;padding-left:6px}
.step{position:relative;padding:0 0 26px 56px;}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:18px;top:38px;bottom:-4px;width:2px;background:linear-gradient(var(--sky-400),transparent)}
.step:last-child::before{display:none}
.step .sn{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:11px;background:var(--grad-blue);display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:.95rem;color:#fff;box-shadow:0 8px 22px -8px rgba(57,167,255,.7);transform:scale(0);animation:pop .5s var(--ease) forwards}
.proc-panel.show .step:nth-child(1) .sn{animation-delay:.1s}
.proc-panel.show .step:nth-child(2) .sn{animation-delay:.22s}
.proc-panel.show .step:nth-child(3) .sn{animation-delay:.34s}
.proc-panel.show .step:nth-child(4) .sn{animation-delay:.46s}
.proc-panel.show .step:nth-child(5) .sn{animation-delay:.58s}
@keyframes pop{to{transform:scale(1)}}
.step h4{font-size:1.08rem;margin-bottom:4px}
.step p{color:#9fc0e6;font-size:.9rem;margin:0}

/* ============ WHY / FEATURES ============ */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why{position:relative;border-radius:22px;padding:38px 30px;background:linear-gradient(165deg,rgba(12,44,94,.4),rgba(4,18,43,.55));border:1px solid var(--glass-line);transition:.45s var(--ease);overflow:hidden}
.why:hover{transform:translateY(-8px);border-color:rgba(98,198,255,.4);box-shadow:var(--shadow-glow)}
.why .wi{width:70px;height:70px;border-radius:18px;background:var(--grad-blue);display:grid;place-items:center;margin-bottom:24px;box-shadow:0 14px 30px -10px rgba(57,167,255,.6)}
.why .wi svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:1.7}
.why h3{font-size:1.32rem;margin-bottom:12px}
.why p{color:#a9c6e8;font-size:.95rem}
.why .ghost{position:absolute;right:-10px;bottom:-30px;font-family:'Space Grotesk';font-size:7rem;font-weight:700;color:rgba(98,198,255,.05);line-height:1}

/* ============ ABOUT ============ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about-visual{position:relative;height:440px;border-radius:26px;overflow:hidden;border:1px solid var(--glass-line);background:linear-gradient(160deg,rgba(12,44,94,.6),rgba(4,18,43,.8))}
.about-visual .layer{position:absolute;border-radius:20px;background:linear-gradient(135deg,rgba(47,123,240,.25),rgba(57,167,255,.08));border:1px solid var(--glass-line)}
.av1{inset:30px;animation:floaty 8s ease-in-out infinite}
.av2{inset:70px;background:linear-gradient(135deg,rgba(57,167,255,.18),transparent);animation:floaty 10s ease-in-out infinite reverse}
.about-visual .core{position:absolute;inset:0;display:grid;place-items:center}
.about-visual .core .ring{position:absolute;border:1px dashed rgba(98,198,255,.3);border-radius:50%;animation:spin 22s linear infinite}
.r1{width:340px;height:340px}.r2{width:238px;height:238px;animation-direction:reverse;animation-duration:16s}
@keyframes spin{to{transform:rotate(360deg)}}
.about-visual .logo-core{position:relative;width:340px;height:340px;display:grid;place-items:center;z-index:2}
/* soft cool glow that lifts the white disc off the navy */
.about-visual .logo-core::after{content:"";position:absolute;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(120,180,255,.28) 0%,rgba(57,123,220,.12) 50%,transparent 74%);filter:blur(18px);z-index:-1;animation:logoPulse 4.8s ease-in-out infinite}
.about-visual .logo-core::before{content:"";position:absolute;width:262px;height:262px;border-radius:50%;box-shadow:0 22px 55px rgba(4,16,40,.55);z-index:-1}
.about-visual .logo-core img{position:relative;width:248px;height:248px;object-fit:contain}
.about-list{margin:24px 0 30px;display:grid;gap:14px}
.about-list li{display:flex;gap:13px;align-items:flex-start;list-style:none;color:#bcd6f5;font-size:.98rem}
.about-list .ck{flex:none;width:24px;height:24px;border-radius:7px;background:var(--grad-blue);display:grid;place-items:center;margin-top:2px}
.about-list .ck svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3}

/* ============ MARQUEE ============ */
.marquee{overflow:hidden;border-top:1px solid var(--glass-line);border-bottom:1px solid var(--glass-line);padding:30px 0;background:rgba(4,18,43,.4)}
.mq-track{display:flex;gap:64px;width:max-content;animation:scroll 26s linear infinite}
.mq-track span{font-family:'Space Grotesk';font-weight:600;font-size:1.15rem;color:#6f9ccb;white-space:nowrap;display:flex;align-items:center;gap:14px}
.mq-track span::before{content:"✦";color:var(--sky-400)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ PROJECTS ============ */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proj{position:relative;border-radius:22px;padding:34px 28px;background:linear-gradient(165deg,rgba(12,44,94,.45),rgba(4,18,43,.6));border:1px solid var(--glass-line);overflow:hidden;transition:.45s var(--ease)}
.proj:hover{transform:translateY(-8px);box-shadow:var(--shadow-glow);border-color:rgba(98,198,255,.4)}
.proj .tagp{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-400);font-weight:600;font-family:'Space Grotesk'}
.proj h3{font-size:1.3rem;margin:14px 0 12px}
.proj p{color:#a9c6e8;font-size:.92rem}
.proj .arr{position:absolute;top:30px;right:28px;width:42px;height:42px;border-radius:12px;background:rgba(98,198,255,.1);border:1px solid var(--glass-line);display:grid;place-items:center;transition:.4s}
.proj:hover .arr{background:var(--grad-blue);transform:rotate(45deg)}
.proj .arr svg{width:18px;height:18px;stroke:var(--sky-300);fill:none;stroke-width:2;transition:.4s}
.proj:hover .arr svg{stroke:#fff}

/* ============ CTA ============ */
.cta-box{position:relative;border-radius:32px;padding:80px 50px;text-align:center;overflow:hidden;background:linear-gradient(135deg,rgba(26,95,212,.9),rgba(10,44,94,.95));border:1px solid rgba(98,198,255,.3)}
.cta-box::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 400px at 50% -20%,rgba(57,167,255,.4),transparent 70%)}
.cta-box h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:18px;position:relative}
.cta-box p{color:#d3e6ff;max-width:560px;margin:0 auto 32px;position:relative}
.cta-box .btn{position:relative}

/* ============ BLOG ============ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{border-radius:20px;overflow:hidden;background:linear-gradient(165deg,rgba(12,44,94,.4),rgba(4,18,43,.55));border:1px solid var(--glass-line);transition:.45s var(--ease)}
.post:hover{transform:translateY(-8px);border-color:rgba(98,198,255,.4);box-shadow:var(--shadow-glow)}
.post .pimg{height:160px;background:linear-gradient(135deg,rgba(47,123,240,.4),rgba(57,167,255,.12));position:relative;overflow:hidden;display:grid;place-items:center}
.post .pimg svg{width:54px;height:54px;stroke:rgba(255,255,255,.55);fill:none;stroke-width:1.4}
.post .pbody{padding:24px}
.post .pcat{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-400);font-weight:600;font-family:'Space Grotesk'}
.post h3{font-size:1.08rem;margin:10px 0;line-height:1.3}
.post p{color:#a9c6e8;font-size:.88rem;margin-bottom:14px}
.post .rm{font-family:'Space Grotesk';font-weight:600;font-size:.86rem;color:var(--sky-300);display:inline-flex;gap:7px;align-items:center}


/* ============ RESPONSIVE (homepage sections) ============ */
/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .hero-grid,.proc-inner,.about-grid{grid-template-columns:1fr}
  .showcase{height:460px;margin-top:30px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid,.proj-grid,.blog-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .svc-grid{grid-template-columns:1fr}
  .stats{gap:22px}
  .proc-inner{padding:28px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.sc-card.active{opacity:1}}


/* ============================================================================
   PAGE LOADER — homepage only.
   Lives here rather than theme.css because index.html is the only page
   that renders #loader; the other pages load straight into content.
   ============================================================================ */
/* ============ PAGE LOADER (logo reveal) ============ */
#loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:radial-gradient(700px 500px at 50% 45%,#06183a,#020a1a 75%);transition:opacity .7s ease,visibility .7s}
#loader.done{opacity:0;visibility:hidden}
.loader-logo{position:relative;display:grid;place-items:center}
.loader-logo img{width:120px;height:120px;object-fit:contain;opacity:0;transform:scale(.4) rotate(-25deg);animation:logoIn 1s var(--ease) .15s forwards;filter:drop-shadow(0 10px 30px rgba(57,167,255,.6))}
.loader-logo .halo{position:absolute;width:170px;height:170px;border-radius:50%;border:1.5px dashed rgba(98,198,255,.4);animation:spin 5s linear infinite,fadeHalo 1s ease .4s both}
.loader-logo .halo.b{width:220px;height:220px;border-color:rgba(47,123,240,.25);animation:spin 7s linear infinite reverse,fadeHalo 1s ease .55s both}
.loader-name{margin-top:26px;font-family:'Space Grotesk';font-weight:700;font-size:1.25rem;letter-spacing:.04em;opacity:0;animation:fadeUp .7s ease .7s forwards}
.loader-name b{color:#fff}.loader-name span{color:var(--sky-300);margin-left:.28em}
.loader-bar{margin-top:18px;width:180px;height:3px;border-radius:3px;background:rgba(98,198,255,.15);overflow:hidden;opacity:0;animation:fadeUp .5s ease .8s forwards}
.loader-bar i{display:block;height:100%;width:0;background:var(--grad-blue);animation:loadFill 1.1s ease .85s forwards}
@keyframes logoIn{60%{transform:scale(1.12) rotate(6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes fadeHalo{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes loadFill{to{width:100%}}
/* logo entrance in navbar after load */
.logo .mark img.intro{animation:navLogoIn .8s var(--ease) both}
@keyframes navLogoIn{from{opacity:0;transform:scale(.3) rotate(-20deg)}to{opacity:1;transform:none}}