/* ==========================================================================
   FYP Bridge — Main Stylesheet
   ========================================================================== */

:root{
  --ink:#0a0e14;
  --ink-soft:#0f1520;
  --panel:#141b28;
  --paper:#e9edf5;
  --muted:#8996a8;
  --line:#212b3a;
  --accent:#f2a93b;
  --accent-2:#35d0a6;
  --accent-3:#5aa0ff;
  --whatsapp:#25d366;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --container:1180px;
  --header-h: 76px;
  color-scheme: dark;
}
@media (max-width:880px){ :root{ --header-h: 62px; } }

*{box-sizing:border-box; margin:0; padding:0;}
html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  overflow-x:hidden;
  max-width:100vw;
}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
  position:relative;
}

/* ==========================================================================
   Background texture + orbs
   ========================================================================== */
.bg-texture{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 520px at 18% -8%, rgba(53,208,166,.09), transparent 60%),
    radial-gradient(ellipse 800px 520px at 88% 12%, rgba(90,160,255,.08), transparent 60%),
    radial-gradient(ellipse 1000px 700px at 50% 115%, rgba(242,169,59,.06), transparent 60%),
    var(--ink);
}
.bg-texture::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 20%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 80% 65% at 50% 20%, #000 0%, transparent 75%);
}

.orb-field{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;}
.orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.28;}
.orb-1{width:520px; height:520px; top:-180px; left:-120px; background:radial-gradient(circle, var(--accent-2), transparent 70%); animation:drift1 26s ease-in-out infinite;}
.orb-2{width:460px; height:460px; top:20%; right:-160px; background:radial-gradient(circle, var(--accent-3), transparent 70%); animation:drift2 32s ease-in-out infinite;}
.orb-3{width:420px; height:420px; bottom:-160px; left:30%; background:radial-gradient(circle, var(--accent), transparent 70%); opacity:.18; animation:drift3 30s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(60px,80px) scale(1.15);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-70px,60px) scale(1.1);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(50px,-40px) scale(1.2);}}
@media (max-width:720px){ .orb{filter:blur(60px); opacity:.2;} }

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  .orb{animation:none;}
}

img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; cursor:pointer;}

.wrap{max-width:var(--container); margin:0 auto; padding:0 24px;}
section{padding:112px 0;}
@media (max-width:720px){ section{padding:72px 0;} }

h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-0.01em; color:#fff;}
h1{font-size:clamp(2.2rem, 5.2vw, 4rem); font-weight:700;}
h2{font-size:clamp(1.75rem, 3.4vw, 2.7rem);}
h3{font-size:1.25rem;}
p{color:var(--muted);}
.lede{font-size:1.125rem; max-width:560px;}

.mono{font-family:var(--font-mono);}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head p{margin-top:14px; font-size:1.05rem;}
.section-kicker{font-family:var(--font-mono); font-size:0.85rem; color:var(--accent-2); display:flex; align-items:center; gap:10px;}
.section-kicker::before{content:""; width:0; height:1px; background:var(--accent-2); display:inline-block; transition:width .7s ease .1s;}
.reveal.in .section-kicker::before{width:20px;}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:8px; font-weight:600; font-size:0.97rem;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .55s ease;
}
.btn:hover::before{left:130%;}
.btn-whatsapp{background:var(--whatsapp); color:#04150c; box-shadow:0 0 0 0 rgba(37,211,102,.5);}
.btn-whatsapp:hover{box-shadow:0 8px 24px -6px rgba(37,211,102,.55); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--paper); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--accent-3); color:#fff; background:rgba(90,160,255,.06);}
.btn-sm{padding:10px 18px; font-size:0.88rem;}

.gradient-text{
  background:linear-gradient(100deg, var(--accent-2), var(--accent-3) 60%, var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation:gradientShift 6s ease-in-out infinite;
}
@keyframes gradientShift{0%,100%{background-position:0% center;} 50%{background-position:100% center;}}

.icon-wa{width:18px; height:18px; flex:none;}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding-top:env(safe-area-inset-top, 0px);
  background:rgba(10,14,20,.72);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.02), 0 12px 32px -28px rgba(0,0,0,.9);
}
header::before{
  content:"";
  position:absolute; inset:0;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:-1;
  pointer-events:none;
}

nav{
  display:flex; align-items:center; gap:20px;
  padding:0 28px; max-width:var(--container); margin:0 auto;
  height:var(--header-h);
  position:relative;
}
nav > .menu-toggle{ order:0; flex:none; }
nav > .brand      { order:1; margin-right:auto; min-width:0; }
nav > .nav-links  { order:2; }
nav > .nav-cta    { order:3; margin-left:8px; }

.brand{
  display:flex; align-items:center; gap:11px;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  color:#fff; letter-spacing:-.01em;
  transition:opacity .15s ease;
  min-width:0;
}
.brand > span:last-child{ min-width:0; overflow:hidden; }
.brand:hover{opacity:.9;}
.brand-mark{
  width:36px; height:36px; border-radius:9px;
  background:linear-gradient(145deg, var(--accent-3), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; color:#08101c; font-size:0.95rem;
  box-shadow:0 6px 20px -8px rgba(53,208,166,.55);
  flex:none;
}
.brand small{
  display:block; font-family:var(--font-mono); font-weight:400;
  font-size:0.62rem; color:var(--muted); letter-spacing:.06em; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.nav-links{display:flex; align-items:center; gap:4px;}
.nav-links li{display:flex;}
.nav-links a{
  display:inline-flex; align-items:center;
  font-size:0.9rem; color:var(--muted); font-weight:500;
  padding:10px 14px; border-radius:8px;
  transition:color .15s ease, background .15s ease;
  position:relative;
}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.035);}
.nav-links a:hover::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px;
  height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent-2), var(--accent-3));
}
.nav-cta{display:flex; align-items:center; gap:10px;}

.menu-toggle{
  display:none; flex-direction:column; gap:5px;
  width:40px; height:40px; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:10px;
  transition:background .15s ease, border-color .15s ease;
}
.menu-toggle:hover{background:rgba(255,255,255,.04); border-color:var(--line);}
.menu-toggle span{width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ==========================================================================
   Quick nav (bottom bar on mobile)
   ========================================================================== */
.quick-nav{ display:none; }

@media (max-width:880px){
  .quick-nav{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    position:absolute;
    left:0; right:0;
    top:100vh;
    top:100dvh;
    transform:translateY(-100%);
    z-index:96;
    background:rgba(10,14,20,.86);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    gap:6px;
  }
  .quick-nav a{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:6px 2px; background:none; border:none;
    color:var(--muted); font-family:var(--font-body);
    font-size:0.66rem; font-weight:500; text-align:center;
    transition:color .15s ease;
  }
  .quick-nav svg{ width:21px; height:21px; color:currentColor; transition:transform .15s ease; }
  .quick-nav a.active{ color:var(--accent-2); }
  .quick-nav a:active svg{ transform:scale(.88); }
  .quick-nav .qn-3{ display:none !important; }

  body{ padding-bottom:calc(66px + env(safe-area-inset-bottom, 0px)); }
  .fab-wa{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)); right:16px; }
  .chatbot{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   Mobile menu (dropdown from header)
   ========================================================================== */
@media (max-width:880px){
  nav{padding:0 16px; gap:8px;}

  .nav-links{
    position:fixed;
    top:var(--header-h); left:0; right:0;
    width:auto;
    background:var(--ink-soft);
    flex-direction:column; justify-content:flex-start;
    padding:16px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    gap:0;
    transform:translateY(-110%);
    transition:transform .32s cubic-bezier(.2,.7,.3,1);
    border-bottom:1px solid var(--line);
    box-shadow:0 30px 50px -22px rgba(0,0,0,.85);
    overflow-y:auto;
    overscroll-behavior:contain;
    max-height:calc(100vh - var(--header-h));
    max-height:calc(100dvh - var(--header-h));
    z-index:99;
  }
  .nav-links.open{ transform:translateY(0); }

  .nav-links li{width:100%;}
  .nav-links a:not(.btn){
    display:flex; align-items:center; gap:14px;
    width:100%; padding:14px 6px; border-radius:0;
    border-bottom:1px solid var(--line);
    font-size:1.02rem; color:var(--paper);
  }
  .nav-links a:not(.btn):hover{background:rgba(255,255,255,.03);}
  .nav-links a:not(.btn):hover::after{display:none;}

  .nav-ico{display:block; flex:none; width:19px; height:19px; color:var(--accent-2);}
  .nav-cta .btn-ghost{display:none;}
  .nav-cta .btn-whatsapp{width:42px; height:42px; padding:0; border-radius:50%; gap:0;}
  .nav-cta .btn-whatsapp .btn-label{display:none;}
  .nav-cta .btn-whatsapp .icon-wa{width:19px; height:19px;}
  .menu-toggle{display:flex;}

  .brand-mark{width:32px; height:32px; font-size:0.85rem;}
  .brand{font-size:1.02rem;}
  .brand small{font-size:0.58rem;}
  .brand > span:last-child{ max-width:140px; }

  .nav-links-cta{
    display:flex; flex-direction:column; gap:10px;
    margin-top:16px; padding-top:16px;
  }
  .nav-links-cta .btn{width:100%;}

  body.nav-open{overflow:hidden;}
}
@media (min-width:881px){
  .nav-ico{display:none;}
  .nav-links-cta{display:none;}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{padding:172px 0 100px;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;}
@media (max-width:940px){ .hero-grid{grid-template-columns:1fr; gap:48px;} .hero{padding:130px 0 60px;} }
@media (max-width:560px){ .hero{padding:120px 0 50px;} }

.eyebrow-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.78rem;
  color:var(--accent);
  border:1px solid rgba(242,169,59,.35);
  background:rgba(242,169,59,.08);
  padding:6px 12px; border-radius:999px; margin-bottom:22px;
}
.eyebrow-chip .dot{width:6px; height:6px; border-radius:50%; background:var(--accent-2); animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}

.hero h1{margin-bottom:22px;}
.hero h1 .accent-word{color:var(--accent-2);}
.hero h1 .accent-word.gradient-text{color:transparent;}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}
.platform-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:40px;}
.platform-chip{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; border:1px solid var(--line); border-radius:8px;
  font-size:0.85rem; font-family:var(--font-mono); color:var(--paper);
  animation:floatYsoft 6s ease-in-out infinite;
}
.platform-chip:nth-child(2){animation-delay:.6s;}
.platform-chip:nth-child(3){animation-delay:1.2s;}
.platform-chip .sw{width:8px; height:8px; border-radius:2px;}

/* ==========================================================================
   3D ANIMATED TECH TOOL — Hero visual
   ========================================================================== */
.tech3d-wrap{
  display:flex; flex-direction:column; align-items:center; gap:28px;
  perspective:1200px;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.tech3d-stage{
  width:100%;
  max-width:440px;
  aspect-ratio:1 / 1;
  position:relative;
  perspective:1100px;
  perspective-origin:50% 50%;
  overflow:hidden;
  border-radius:12px;
}

.tech3d-scene{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  animation:tech3d-sceneSpin 22s linear infinite;
}

@keyframes tech3d-sceneSpin{
  from { transform: rotateX(-22deg) rotateY(0deg); }
  to   { transform: rotateX(-22deg) rotateY(360deg); }
}

.tech3d-cube{
  position:absolute;
  top:50%; left:50%;
  width:150px; height:150px;
  margin:-75px 0 0 -75px;
  transform-style:preserve-3d;
  animation:tech3d-cubeSpin 14s linear infinite;
}
@keyframes tech3d-cubeSpin{
  from { transform: rotateX(0deg) rotateY(0deg); }
  to   { transform: rotateX(360deg) rotateY(360deg); }
}

.cube-face{
  position:absolute;
  width:150px; height:150px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(53,208,166,.55);
  background:linear-gradient(135deg, rgba(53,208,166,.10), rgba(90,160,255,.08));
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  font-family:var(--font-mono); font-size:1.6rem; font-weight:600;
  letter-spacing:.06em; color:var(--paper);
  text-shadow:0 0 12px rgba(53,208,166,.8);
  box-shadow:
    inset 0 0 40px rgba(53,208,166,.12),
    0 0 20px rgba(53,208,166,.12);
}
.cube-face.front  { transform: translateZ(75px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(75px); }
.cube-face.right  { transform: rotateY(90deg)  translateZ(75px); border-color:rgba(242,169,59,.55);  text-shadow:0 0 12px rgba(242,169,59,.85); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(75px); border-color:rgba(90,160,255,.55); text-shadow:0 0 12px rgba(90,160,255,.85); }
.cube-face.top    { transform: rotateX(90deg)  translateZ(75px); border-color:rgba(53,208,166,.75);  color:var(--accent-2); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(75px); border-color:rgba(242,169,59,.4);   color:var(--accent); }

.tech3d-ring{
  position:absolute; top:50%; left:50%;
  border-radius:50%;
  border:1.2px solid transparent;
  transform-style:preserve-3d;
  pointer-events:none;
}
.ring-1{
  width:260px; height:260px; margin:-130px 0 0 -130px;
  border-top-color:var(--accent-2);
  border-right-color:rgba(53,208,166,.25);
  animation:tech3d-ringA 9s linear infinite;
}
.ring-2{
  width:320px; height:320px; margin:-160px 0 0 -160px;
  border-top-color:var(--accent);
  border-left-color:rgba(242,169,59,.25);
  animation:tech3d-ringB 13s linear infinite reverse;
}
.ring-3{
  width:380px; height:380px; margin:-190px 0 0 -190px;
  border-top-color:var(--accent-3);
  border-bottom-color:rgba(90,160,255,.25);
  animation:tech3d-ringC 17s linear infinite;
}
@keyframes tech3d-ringA{
  from{ transform: rotateX(72deg) rotateZ(0deg); }
  to  { transform: rotateX(72deg) rotateZ(360deg); }
}
@keyframes tech3d-ringB{
  from{ transform: rotateX(-58deg) rotateY(38deg) rotateZ(0deg); }
  to  { transform: rotateX(-58deg) rotateY(38deg) rotateZ(360deg); }
}
@keyframes tech3d-ringC{
  from{ transform: rotateY(68deg) rotateZ(0deg); }
  to  { transform: rotateY(68deg) rotateZ(360deg); }
}

.tech3d-glow{
  position:absolute; top:50%; left:50%;
  width:340px; height:340px; margin:-170px 0 0 -170px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(53,208,166,.22), transparent 62%),
    radial-gradient(circle, rgba(90,160,255,.12), transparent 70%);
  filter:blur(24px);
  animation:tech3d-glowPulse 5s ease-in-out infinite;
  pointer-events:none;
  transform:translateZ(-120px);
}
@keyframes tech3d-glowPulse{
  0%,100%{ opacity:.75; transform:translateZ(-120px) scale(1); }
  50%    { opacity:1;   transform:translateZ(-120px) scale(1.08); }
}

.tech3d-labels{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:100%;}
.tech3d-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  border:1px solid var(--line); border-radius:999px;
  font-family:var(--font-mono); font-size:.78rem; color:var(--muted);
  background:rgba(20,27,40,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.tech3d-chip i{
  width:7px; height:7px; border-radius:50%; display:inline-block;
  animation:tech3d-dot 2.2s ease-in-out infinite;
}
.tech3d-chip[data-hue="php"] i{ background:var(--accent);   box-shadow:0 0 10px var(--accent); }
.tech3d-chip[data-hue="ktl"] i{ background:var(--accent-2); box-shadow:0 0 10px var(--accent-2); animation-delay:.4s; }
.tech3d-chip[data-hue="py"]  i{ background:var(--accent-3); box-shadow:0 0 10px var(--accent-3); animation-delay:.8s; }
@keyframes tech3d-dot{
  0%,100%{ transform:scale(1);   opacity:1; }
  50%    { transform:scale(1.5); opacity:.55; }
}

@media (max-width:940px){
  .tech3d-stage{ max-width:360px; }
  .tech3d-cube, .cube-face{ width:130px; height:130px; }
  .tech3d-cube{ margin:-65px 0 0 -65px; }
  .cube-face.front  { transform: translateZ(65px); }
  .cube-face.back   { transform: rotateY(180deg) translateZ(65px); }
  .cube-face.right  { transform: rotateY(90deg)  translateZ(65px); }
  .cube-face.left   { transform: rotateY(-90deg) translateZ(65px); }
  .cube-face.top    { transform: rotateX(90deg)  translateZ(65px); }
  .cube-face.bottom { transform: rotateX(-90deg) translateZ(65px); }
  .ring-1{ width:220px; height:220px; margin:-110px 0 0 -110px; }
  .ring-2{ width:270px; height:270px; margin:-135px 0 0 -135px; }
  .ring-3{ width:320px; height:320px; margin:-160px 0 0 -160px; }
  .tech3d-glow{ width:280px; height:280px; margin:-140px 0 0 -140px; }
}
@media (max-width:560px){
  .tech3d-wrap{ gap:20px; overflow:visible; }
  .tech3d-stage{ max-width:260px; overflow:hidden; }
  .tech3d-cube, .cube-face{ width:110px; height:110px; }
  .tech3d-cube{ margin:-55px 0 0 -55px; }
  .cube-face.front  { transform: translateZ(55px); }
  .cube-face.back   { transform: rotateY(180deg) translateZ(55px); }
  .cube-face.right  { transform: rotateY(90deg)  translateZ(55px); }
  .cube-face.left   { transform: rotateY(-90deg) translateZ(55px); }
  .cube-face.top    { transform: rotateX(90deg)  translateZ(55px); }
  .cube-face.bottom { transform: rotateX(-90deg) translateZ(55px); }
  .cube-face{ font-size:1.2rem; }
  .ring-1{ width:170px; height:170px; margin:-85px 0 0 -85px; }
  .ring-2{ width:200px; height:200px; margin:-100px 0 0 -100px; }
  .ring-3{ width:240px; height:240px; margin:-120px 0 0 -120px; }
  .tech3d-glow{ width:220px; height:220px; margin:-110px 0 0 -110px; }
  .tech3d-chip{ font-size:.7rem; padding:6px 10px; }
}

@media (prefers-reduced-motion: reduce){
  .tech3d-scene, .tech3d-cube, .tech3d-ring, .tech3d-glow, .tech3d-chip i{
    animation:none !important;
  }
  .tech3d-scene{ transform: rotateX(-22deg) rotateY(28deg); }
}

/* ==========================================================================
   Reveal
   ========================================================================== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

.reveal-left  { transform:translateX(-30px) translateY(0); }
.reveal-left.in{ transform:translateX(0) translateY(0); }
.reveal-right { transform:translateX(30px) translateY(0); }
.reveal-right.in{ transform:translateX(0) translateY(0); }
.reveal-scale { transform:translateY(14px) scale(.9); }
.reveal-scale.in{ transform:translateY(0) scale(1); }
.reveal-rotate{ transform:translateY(20px) rotate(-3deg); }
.reveal-rotate.in{ transform:translateY(0) rotate(0deg); }
.reveal-left, .reveal-right, .reveal-scale, .reveal-rotate{
  transition:opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1);
}

/* ==========================================================================
   Stats strip
   ========================================================================== */
.stats-strip{padding:56px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
@media (max-width:720px){ .stats-grid{grid-template-columns:repeat(2,1fr); gap:36px 20px;} }
.stat-num{font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,4vw,2.6rem); color:#fff;}
.stat-num .unit{font-size:0.6em; color:var(--accent-2);}
.stat-label{font-family:var(--font-mono); font-size:0.78rem; color:var(--muted); margin-top:6px;}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee-section{padding:0; overflow:hidden; border-bottom:1px solid var(--line);}
.marquee-track{display:flex; width:max-content; animation:marquee 28s linear infinite; padding:22px 0;}
.marquee-section:hover .marquee-track{animation-play-state:paused;}
.marquee-item{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:0.88rem; color:var(--muted);
  padding:0 28px; border-right:1px solid var(--line); white-space:nowrap;
}
.marquee-item .sw{width:6px; height:6px; border-radius:50%; background:var(--accent-2);}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

/* ==========================================================================
   Services
   ========================================================================== */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:900px){ .services-grid{grid-template-columns:1fr;} }
.service-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:32px;
  transition:border-color .2s ease, transform .2s ease;
}
.service-card:hover{border-color:var(--card-hue, var(--accent-3)); transform:translateY(-4px);}
.service-card .tag{
  display:inline-block; font-family:var(--font-mono); font-size:0.75rem;
  padding:4px 10px; border-radius:6px; margin-bottom:18px; color:var(--ink);
}
.service-card h3{margin-bottom:10px;}
.service-card p{font-size:0.95rem; margin-bottom:18px;}
.service-card .stack{display:flex; flex-wrap:wrap; gap:8px;}
.service-card .stack span{
  font-family:var(--font-mono); font-size:0.75rem; color:var(--muted);
  border:1px solid var(--line); padding:4px 9px; border-radius:6px;
}
.card-web{--card-hue:var(--accent);}   .card-web .tag{background:var(--accent);}
.card-app{--card-hue:var(--accent-2);} .card-app .tag{background:var(--accent-2);}
.card-desk{--card-hue:var(--accent-3);} .card-desk .tag{background:var(--accent-3);}

/* ==========================================================================
   Portfolio
   ========================================================================== */
.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:940px){ .portfolio-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .portfolio-grid{grid-template-columns:1fr;} }

.p-card{
  background:var(--ink-soft); border:1px solid var(--line); border-radius:12px; padding:24px;
  position:relative; overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
.p-card:hover{border-color:var(--line);}
.p-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--pb, var(--accent)), transparent, var(--pb, var(--accent)));
  background-size:220% 100%;
  animation:shimmerBar 3.2s linear infinite;
}
@keyframes shimmerBar{ 0%{background-position:0% 0;} 100%{background-position:-220% 0;} }
.p-card .p-badge{
  font-family:var(--font-mono); font-size:0.7rem; color:var(--pb, var(--accent));
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; display:block;
}
.p-card h4{font-family:var(--font-display); font-size:1.05rem; color:#fff; margin-bottom:8px; font-weight:600;}
.p-card p{font-size:0.87rem; margin:0;}
.pb-web{--pb:var(--accent);} .pb-app{--pb:var(--accent-2);} .pb-desk{--pb:var(--accent-3);}

.portfolio-3d-stage{
  perspective:1900px;
  perspective-origin:50% 45%;
  padding:14px 0;
}
.portfolio-3d-stage .p-card{
  transform-style:preserve-3d;
  will-change:transform, box-shadow;
  transition:box-shadow .35s ease, border-color .25s ease;
  backface-visibility:hidden;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.7);
}
.portfolio-3d-stage .p-card:hover{border-color:var(--pb, var(--accent));}
.portfolio-3d-stage .p-card::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 45%);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.portfolio-3d-stage .p-card:hover::after{opacity:1;}

@media (max-width:940px){ .portfolio-3d-stage{perspective:1400px;} }
@media (max-width:720px){ .portfolio-3d-stage{perspective:1100px; padding:6px 0;} }
@media (prefers-reduced-motion: reduce){
  .portfolio-3d-stage .p-card{ transform:none !important; transition:none; }
}

/* ==========================================================================
   Process
   ========================================================================== */
.process-list{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.process-item{
  display:grid; grid-template-columns:64px 1fr; gap:24px;
  padding:28px 0; border-bottom:1px solid var(--line);
}
@media (max-width:560px){
  .process-item{ grid-template-columns:40px 1fr; gap:16px; padding:22px 0; }
}
.process-item .num{font-family:var(--font-mono); font-size:1.1rem; color:var(--accent-2);}
.process-item h4{color:#fff; font-family:var(--font-display); font-size:1.08rem; margin-bottom:6px;}
.process-item p{font-size:0.94rem; max-width:520px;}

/* ==========================================================================
   Why us
   ========================================================================== */
.why-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
@media (max-width:820px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }
.why-cell{background:var(--ink-soft); padding:30px 26px; transition:transform .3s ease, background .3s ease;}
.why-cell:hover{transform:translateY(-4px); background:rgba(255,255,255,.02);}
.why-cell svg{width:22px; height:22px; color:var(--accent-2); margin-bottom:16px;}
.why-cell h4{color:#fff; font-size:1rem; margin-bottom:8px; font-family:var(--font-display);}
.why-cell p{font-size:0.9rem;}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-panel{
  background:linear-gradient(155deg, var(--panel), var(--ink-soft));
  border:1px solid var(--line); border-radius:20px; padding:56px; text-align:center;
  position:relative; overflow:hidden;
}
.contact-panel::after{
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(53,208,166,.16), transparent 70%);
  top:-160px; right:-140px; pointer-events:none;
}
.contact-panel h2{max-width:640px; margin:0 auto 16px;}
.contact-panel p{max-width:520px; margin:0 auto 34px;}
.contact-meta{
  display:flex; flex-wrap:wrap; gap:28px; justify-content:center;
  margin-top:38px; font-family:var(--font-mono); font-size:0.88rem; color:var(--muted);
}
.contact-meta div{display:flex; align-items:center; gap:8px;}
.contact-meta svg{width:16px; height:16px; color:var(--accent-2);}

@media (max-width:640px){
  .contact-panel{padding:32px 20px;}
  .contact-meta{gap:16px; font-size:0.78rem;}
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{border-top:1px solid var(--line); padding:48px 0 calc(38px + env(safe-area-inset-bottom, 0px));}
.foot-grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:flex-start;}
.foot-links{display:flex; gap:28px; flex-wrap:wrap;}
.foot-links a{font-size:0.88rem; color:var(--muted); transition:color .15s ease;}
.foot-links a:hover{color:#fff;}
.foot-copy{font-size:0.82rem; color:var(--muted); margin-top:28px;}
.foot-seo{font-size:0.78rem; color:#4c586b; margin-top:10px; max-width:760px; line-height:1.7;}

@media (max-width:1024px){
  .foot-grid{flex-direction:column; align-items:flex-start; gap:26px;}
  .foot-links{gap:22px;}
}
@media (max-width:720px){
  footer{padding:40px 0 calc(90px + env(safe-area-inset-bottom, 0px));}
  .foot-grid{gap:24px;}
  .foot-links{display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; width:100%;}
  .foot-links a{font-size:.86rem;}
  .foot-copy{font-size:.78rem; margin-top:22px;}
  .foot-seo{font-size:.72rem; line-height:1.65;}
}
@media (max-width:400px){
  .foot-links{grid-template-columns:1fr;}
}

/* ==========================================================================
   Floating WhatsApp
   ========================================================================== */
.fab-wa{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:90;
  width:58px; height:58px; border-radius:50%; background:var(--whatsapp);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.6);
  animation:fab-pulse 2.6s ease-in-out infinite;
}
.fab-wa svg{width:28px; height:28px; color:#04150c;}
@keyframes fab-pulse{
  0%,100%{box-shadow:0 10px 30px -8px rgba(37,211,102,.6);}
  50%    {box-shadow:0 10px 30px -4px rgba(37,211,102,.9), 0 0 0 10px rgba(37,211,102,.08);}
}

/* ==========================================================================
   Chatbot
   ========================================================================== */
.chatbot{position:fixed; left:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:95;}

.chat-toggle{
  position:relative; width:58px; height:58px; border-radius:50%;
  border:1px solid var(--line); background:var(--panel);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
  transition:transform .2s ease, border-color .2s ease;
}
.chat-toggle:hover{transform:translateY(-2px); border-color:var(--accent-3);}
.chat-toggle svg{width:26px; height:26px; color:var(--accent-2);}
.chat-toggle .chat-close-icon{display:none;}
.chatbot.open .chat-toggle .chat-open-icon{display:none;}
.chatbot.open .chat-toggle .chat-close-icon{display:block;}

.chat-badge{
  position:absolute; top:-3px; right:-3px; width:19px; height:19px; border-radius:50%;
  background:var(--accent); color:#1a1100;
  font-family:var(--font-mono); font-size:0.68rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  animation:badgeBounce 2.2s ease-in-out infinite;
}
@keyframes badgeBounce{0%,80%,100%{transform:scale(1);} 90%{transform:scale(1.18);}}
.chatbot.open .chat-badge{display:none;}

.chat-peek{
  position:absolute; left:70px; bottom:12px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:10px 14px; font-size:0.85rem; color:var(--paper);
  white-space:nowrap; box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
  opacity:0; transform:translateX(-8px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.chat-peek.show{opacity:1; transform:translateX(0); pointer-events:auto;}
@media (max-width:480px){ .chat-peek{display:none;} }

.chat-panel{
  position:absolute; left:0; bottom:74px;
  width:340px; max-width:calc(100vw - 40px);
  max-height:min(70vh, 500px);
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.75);
  opacity:0; transform:translateY(16px) scale(.97); pointer-events:none;
  transform-origin:bottom left;
  transition:opacity .22s ease, transform .22s ease;
}
.chatbot.open .chat-panel{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}

.chat-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.chat-header-info{display:flex; align-items:center; gap:12px;}
.chat-avatar{
  width:36px; height:36px; border-radius:9px; flex:none;
  background:linear-gradient(145deg, var(--accent-2), var(--accent-3));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:0.8rem; color:#08101c;
}
.chat-header-info strong{font-size:0.92rem; color:#fff; font-family:var(--font-display);}
.chat-status{color:var(--muted); font-size:0.76rem; display:flex; align-items:center; gap:6px; margin-top:2px;}
.online-dot{width:6px; height:6px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 3px rgba(53,208,166,.18);}
.chat-close{background:none; border:none; color:var(--muted); font-size:1.4rem; line-height:1; padding:4px;}
.chat-close:hover{color:#fff;}

.chat-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth;}
.chat-body::-webkit-scrollbar{width:6px;}
.chat-body::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px;}

.msg{max-width:86%; font-size:0.88rem; line-height:1.5; padding:11px 14px; border-radius:12px; animation:msgIn .25s ease;}
@keyframes msgIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.msg-bot{align-self:flex-start; background:var(--ink-soft); border:1px solid var(--line); color:var(--paper); border-bottom-left-radius:3px;}
.msg-user{align-self:flex-end; background:linear-gradient(135deg, var(--accent-2), var(--accent-3)); color:#08101c; font-weight:500; border-bottom-right-radius:3px;}

.typing{
  align-self:flex-start; display:flex; gap:4px; padding:13px 16px;
  background:var(--ink-soft); border:1px solid var(--line); border-radius:12px; border-bottom-left-radius:3px;
}
.typing span{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:typingDot 1.1s infinite ease-in-out;}
.typing span:nth-child(2){animation-delay:.15s;}
.typing span:nth-child(3){animation-delay:.3s;}
@keyframes typingDot{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}

.chat-options{display:flex; flex-direction:column; gap:8px; align-self:flex-start; width:100%;}
.chat-opt{
  text-align:left; background:var(--ink-soft); border:1px solid var(--line); color:var(--paper);
  padding:10px 14px; border-radius:9px; font-size:0.85rem; font-family:var(--font-body);
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.chat-opt:hover{border-color:var(--accent-2); background:rgba(53,208,166,.07); transform:translateX(2px);}

.chat-footer{padding:12px 18px; border-top:1px solid var(--line); background:rgba(255,255,255,.015);}
.chat-footer a{font-size:0.8rem; color:var(--accent-2); font-family:var(--font-mono);}
.chat-footer a:hover{color:var(--accent);}

@media (max-width:480px){
  .chatbot{left:14px; bottom:calc(84px + env(safe-area-inset-bottom, 0px));}
  .chat-panel{width:calc(100vw - 28px); left:0;}
}

/* ==========================================================================
   Sub-page: breadcrumb, page header, sys3d
   ========================================================================== */
.page-header{
  padding:150px 0 60px;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
@media (max-width:880px){ .page-header{padding:120px 0 48px;} }
.page-header .wrap{ position:relative; z-index:1; }

.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.8rem; color:var(--muted);
  margin-bottom:22px;
}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--accent-2);}
.breadcrumb span{color:#4c586b;}
.page-header h1{max-width:760px;}
.page-header .lede{max-width:640px; margin-top:16px;}

/* 3D floating layers in page header */
.page-header-sys3d{
  position:absolute;
  right:4%;
  top:50%;
  transform:translateY(-50%);
  width:240px;
  height:240px;
  pointer-events:none;
  perspective:900px;
  z-index:0;
}
.sys3d, .sys3d-inner{
  position:absolute; inset:0;
  transform-style:preserve-3d;
}
.sys3d-inner{ animation:sys3dSpin 18s linear infinite; }
@keyframes sys3dSpin{
  from{ transform: rotateX(-15deg) rotateY(0deg); }
  to  { transform: rotateX(-15deg) rotateY(360deg); }
}
.sys3d-layer{
  position:absolute; inset:0;
  border-radius:50%;
  border:1.5px solid transparent;
}
.sys3d-layer-1{
  border-top-color:var(--accent-2);
  border-right-color:rgba(53,208,166,.3);
  transform:rotateX(70deg);
  animation:sys3dSpin1 8s linear infinite;
}
.sys3d-layer-2{
  border-top-color:var(--accent);
  border-left-color:rgba(242,169,59,.3);
  transform:rotateX(-60deg) rotateY(40deg);
  animation:sys3dSpin2 12s linear infinite reverse;
}
.sys3d-layer-3{
  border-top-color:var(--accent-3);
  border-bottom-color:rgba(90,160,255,.3);
  transform:rotateY(70deg);
  animation:sys3dSpin3 10s linear infinite;
}
@keyframes sys3dSpin1{
  from{ transform: rotateX(70deg) rotateZ(0deg); }
  to  { transform: rotateX(70deg) rotateZ(360deg); }
}
@keyframes sys3dSpin2{
  from{ transform: rotateX(-60deg) rotateY(40deg) rotateZ(0deg); }
  to  { transform: rotateX(-60deg) rotateY(40deg) rotateZ(360deg); }
}
@keyframes sys3dSpin3{
  from{ transform: rotateY(70deg) rotateZ(0deg); }
  to  { transform: rotateY(70deg) rotateZ(360deg); }
}
@media (max-width:880px){
  .page-header-sys3d{ right:-60px; opacity:.45; width:200px; height:200px; }
}
@media (max-width:560px){
  .page-header-sys3d{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .sys3d-inner, .sys3d-layer{ animation:none !important; }
}

/* ==========================================================================
   Prose content
   ========================================================================== */
.prose{max-width:760px;}
.prose h2{margin-top:44px; margin-bottom:14px; font-size:1.5rem;}
.prose h3{margin-top:28px; margin-bottom:10px; color:#fff;}
.prose p{margin-bottom:14px;}
.prose ul{margin:0 0 18px 0; display:flex; flex-direction:column; gap:8px;}
.prose ul li{position:relative; padding-left:22px; color:var(--muted); font-size:0.96rem;}
.prose ul li::before{content:"›"; position:absolute; left:0; color:var(--accent-2); font-family:var(--font-mono);}
.prose a{ color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ color:var(--accent); }

/* ==========================================================================
   Idea grid
   ========================================================================== */
.idea-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:28px 0 40px;}
@media (max-width:680px){ .idea-grid{grid-template-columns:1fr;} }
.idea-card{
  background:var(--ink-soft); border:1px solid var(--line); border-radius:10px; padding:18px 20px;
  display:flex; align-items:flex-start; gap:12px;
  transition:opacity .6s ease, transform .3s ease, border-color .2s ease;
}
.idea-card:hover{transform:translateY(-3px); border-color:var(--line);}
.idea-num{font-family:var(--font-mono); font-size:0.8rem; color:var(--accent-2); flex:none; padding-top:2px;}
.idea-card h4{font-size:0.96rem; color:#fff; font-family:var(--font-display); font-weight:600; margin-bottom:4px;}
.idea-card p{font-size:0.84rem; margin:0;}

/* ==========================================================================
   Pricing table
   ========================================================================== */
.price-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:28px 0 12px; }
.price-table{width:100%; border-collapse:collapse; margin:0; font-size:0.92rem; min-width:560px;}
.price-table th, .price-table td{padding:16px 18px; text-align:left; border-bottom:1px solid var(--line);}
.price-table th{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.03em; font-weight:500;
}
.price-table td{color:var(--paper);}
.price-table tr td:first-child{font-family:var(--font-display); font-weight:600; color:#fff;}
.price-tier-tag{
  display:inline-block; font-family:var(--font-mono); font-size:0.72rem;
  padding:3px 9px; border-radius:6px;
  background:var(--ink-soft); border:1px solid var(--line); color:var(--accent-2);
}
.price-note{
  font-size:0.85rem; color:var(--muted);
  border-left:2px solid var(--accent); padding:12px 16px;
  background:var(--ink-soft); border-radius:0 8px 8px 0; margin-top:20px;
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list{display:flex; flex-direction:column; gap:12px;}
.faq-item{background:var(--ink-soft); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.faq-q{
  width:100%; text-align:left; padding:18px 20px;
  background:none; border:none; color:#fff;
  font-family:var(--font-display); font-size:0.98rem; font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-q::after{
  content:"+"; font-family:var(--font-mono); font-size:1.2rem;
  color:var(--accent-2); transition:transform .25s ease; flex:none;
}
.faq-item.open .faq-q::after{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{padding:0 20px 20px; color:var(--muted); font-size:0.9rem;}

/* ==========================================================================
   Cross-link cards
   ========================================================================== */
.crosslink-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:820px){ .crosslink-grid{grid-template-columns:1fr;} }
.crosslink-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px;
  display:block; transition:transform .3s ease, border-color .2s ease;
}
.crosslink-card:hover{transform:translateY(-3px); border-color:var(--accent-3);}
.crosslink-card .tag{font-family:var(--font-mono); font-size:0.72rem; color:var(--accent-2); margin-bottom:8px; display:block;}
.crosslink-card h4{color:#fff; font-size:0.98rem; margin-bottom:6px;}
.crosslink-card p{font-size:0.84rem; margin:0;}

/* ==========================================================================
   Scroll progress bar
   ========================================================================== */
.scroll-progress{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(255,255,255,.06); overflow:hidden;
}
.scroll-progress-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent-2), var(--accent-3));
  transition:width .08s linear;
}

/* ==========================================================================
   Selection & focus
   ========================================================================== */
::selection{background:var(--accent-2); color:#06110d;}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px;}

/* ==========================================================================
   Floating motion utilities
   ========================================================================== */
@keyframes floatY{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}
@keyframes floatYsoft{0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);}}
.float-slow{animation:floatY 4.6s ease-in-out infinite;}
.float-soft{animation:floatYsoft 5.4s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
  .float-slow, .float-soft, .platform-chip{animation:none;}
}

/* ==========================================================================
   v12 fixes: mobile 3D cube, clean header, call button, no bottom quick-nav
   ========================================================================== */
.quick-nav{ display:none !important; }
.page-header-sys3d .tech3d-stage{ overflow:visible; border-radius:0; }
.tech3d-scene, .tech3d-cube{ -webkit-transform-style:preserve-3d; transform-style:preserve-3d; }
.cube-face{ -webkit-backface-visibility:visible; backface-visibility:visible; }

/* header (desktop) */
nav{ gap:14px; }
.nav-links{ gap:2px; }
.nav-links a{ white-space:nowrap; }
.nav-links a[aria-current="page"]{ color:#fff; }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent-2), var(--accent-3));
}
.nav-cta .btn{ white-space:nowrap; }
@media (min-width:881px) and (max-width:1120px){
  nav{ padding:0 18px; gap:10px; }
  .nav-links a{ padding:9px 9px; font-size:.84rem; }
  .nav-links a[aria-current="page"]::after, .nav-links a:hover::after{ left:9px; right:9px; }
  .nav-cta .btn-ghost{ display:none; }
}

/* 3D cube now visible on phones: sits in the flow under the intro text */
@media (max-width:880px){
  .page-header-sys3d{
    position:relative; right:auto; top:auto; transform:none;
    width:240px; height:240px; margin:34px auto 0; opacity:1;
  }
  body{ padding-bottom:0; }
  .chatbot{ bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width:560px){
  .page-header-sys3d{ display:block; width:210px; height:210px; margin-top:28px; }
  .page-header-sys3d .tech3d-stage{ max-width:210px; }
  .chatbot{ left:14px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
}
  /* =========================================================================
     FLOATING CALL BAR — in front of the chatbot (higher z-index)
     ========================================================================= */
  .call-fab{
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 97;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent) 0%, #ff8c00 100%);
    color: #1a1100;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: .01em;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
      0 12px 32px -10px rgba(242,169,59,.7),
      0 0 0 0 rgba(242,169,59,.45);
    animation: call-fab-pulse 2.6s ease-in-out infinite;
    transition: transform .18s ease, box-shadow .18s ease;
    white-space: nowrap;
  }
  .call-fab:hover{
    transform: translateY(-2px) scale(1.03);
    box-shadow:
      0 18px 40px -10px rgba(242,169,59,.85),
      0 0 0 0 rgba(242,169,59,.45);
  }
  .call-fab:active{ transform: translateY(0) scale(.98); }
  .call-fab svg{
    width: 18px; height: 18px; flex: none;
    color: #1a1100;
  }
  .call-fab .call-num{
    display: inline-block;
    font-weight: 700;
  }

  @keyframes call-fab-pulse{
    0%, 100%{
      box-shadow:
        0 12px 32px -10px rgba(242,169,59,.7),
        0 0 0 0 rgba(242,169,59,.45);
    }
    50%{
      box-shadow:
        0 12px 32px -6px rgba(242,169,59,.9),
        0 0 0 12px rgba(242,169,59,0);
    }
  }

  @media (max-width: 880px){
    .call-fab{
      right: 14px;
      bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      padding: 11px 16px 11px 14px;
      font-size: 0.82rem;
      gap: 8px;
    }
    .call-fab svg{ width: 16px; height: 16px; }
  }

  @media (max-width: 360px){
    .call-fab .call-label{ display: none; }
    .call-fab{ padding: 12px; }
    .call-fab svg{ width: 20px; height: 20px; }
  }

  @media (prefers-reduced-motion: reduce){
    .call-fab{ animation: none !important; }
  }

/* ==========================================================================
   v13 desktop header fix: hide mobile-only CTA row, keep brand text visible
   ========================================================================== */
@media (min-width:881px){
  .nav-links li.nav-links-cta{ display:none !important; }
  nav > .brand{ flex:none; margin-right:auto; }
  .brand > span:last-child{ overflow:visible; max-width:none; }
  .brand small{ overflow:visible; text-overflow:clip; }
  nav{ gap:18px; }
  .nav-links{ gap:2px; }
  .nav-cta{ margin-left:10px; gap:10px; }
}
@media (min-width:881px) and (max-width:1120px){
  .brand small{ display:none; }
}


/* ---- Brand icon (graduation cap + code mark) ---- */
.brand-mark, .chat-avatar{ background:none; padding:0; overflow:visible; }
.brand-mark{ box-shadow:0 8px 22px -10px rgba(79,127,232,.75); }
.brand-mark img, .chat-avatar img{ width:100%; height:100%; display:block; border-radius:inherit; }

/* ---- "Install app" popup (mobile only, injected by assets/pwa.js) ---- */
.pwa-backdrop{
  position:fixed; inset:0; z-index:10040; background:rgba(4,8,16,.55);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.pwa-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:10050;
  padding:0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  transform:translateY(115%); transition:transform .5s cubic-bezier(.2,.85,.25,1);
  pointer-events:none;
}
.pwa-sheet.show{ transform:none; pointer-events:auto; }
.pwa-wrap.show .pwa-backdrop{ opacity:1; pointer-events:auto; }
.pwa-card{
  position:relative; max-width:480px; margin:0 auto; padding:20px 18px 16px;
  background:linear-gradient(180deg,#172033 0%,#0f1520 100%);
  border:1px solid rgba(90,160,255,.28); border-radius:22px;
  box-shadow:0 -24px 70px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset;
  color:var(--paper);
}
.pwa-card::before{
  content:""; position:absolute; top:8px; left:50%; width:38px; height:4px; margin-left:-19px;
  border-radius:4px; background:rgba(255,255,255,.18);
}
.pwa-x{
  position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.07); color:var(--muted); font-size:1.3rem; line-height:1;
  border:0; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.pwa-head{ display:flex; gap:14px; align-items:center; margin-top:10px; padding-right:30px; }
.pwa-icon{ width:56px; height:56px; border-radius:14px; flex:none; box-shadow:0 10px 26px -10px rgba(79,127,232,.8); }
.pwa-title{ font-family:var(--font-display); font-weight:700; font-size:1.12rem; color:#fff; letter-spacing:-.01em; }
.pwa-sub{ font-size:.8rem; color:var(--muted); margin-top:3px; line-height:1.4; }
.pwa-perks{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 4px; list-style:none; padding:0; }
.pwa-perks li{
  font-size:.76rem; color:var(--paper); padding:6px 11px; border-radius:999px;
  background:rgba(90,160,255,.12); border:1px solid rgba(90,160,255,.22);
}
.pwa-steps{ margin:14px 0 2px; padding:14px 14px 4px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.pwa-steps ol{ margin:0 0 10px 18px; padding:0; display:flex; flex-direction:column; gap:10px; }
.pwa-steps li{ display:list-item; list-style:decimal; font-size:.88rem; color:var(--paper); line-height:1.45; padding-left:2px; }
.pwa-steps b{ color:#fff; }
.pwa-actions{ display:flex; gap:10px; margin-top:16px; }
.pwa-btn{
  font-family:var(--font-display); font-weight:600; font-size:.98rem; border-radius:14px;
  padding:14px 16px; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.pwa-btn-main{
  flex:1; color:#06101c;
  background:linear-gradient(135deg,#2f7bff 0%,#35d0a6 100%);
  box-shadow:0 12px 28px -12px rgba(53,208,166,.7);
}
.pwa-btn-main:active{ transform:scale(.98); }
.pwa-btn-ghost{ background:transparent; color:var(--muted); border:1px solid var(--line); }
.pwa-open .chat-peek{ display:none !important; }
@media (prefers-reduced-motion: reduce){
  .pwa-sheet, .pwa-backdrop{ transition:none; }
}

.pwa-steps li svg{ display:inline-block; vertical-align:-3px; margin:0 2px; }


/* ==========================================================================
   Brand wordmark
   ========================================================================== */
.brand-word{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.2rem; line-height:1.05; letter-spacing:-.025em; color:#fff; }
.brand-word em{ font-style:normal; background:linear-gradient(90deg,var(--accent-3),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-word small{ -webkit-text-fill-color:var(--muted); margin-top:3px; }
.brand-mark{ border-radius:11px; }
@media (min-width:721px){ .brand-mark{ width:42px; height:42px; } .brand{ gap:12px; } }
@media (max-width:720px){ .brand-word{ font-size:1.05rem; } }

/* ==========================================================================
   Homepage hero
   ========================================================================== */
.hero-pro{ position:relative; padding:128px 0 76px; border-bottom:1px solid var(--line); overflow:hidden; }
.hero-pro::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 75% at 72% 42%,#000,transparent 78%); mask-image:radial-gradient(ellipse 70% 75% at 72% 42%,#000,transparent 78%);
}
.hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:36px; align-items:center; }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px; max-width:100%;
  padding:7px 14px 7px 12px; border-radius:999px;
  border:1px solid rgba(90,160,255,.32); background:rgba(90,160,255,.08);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.015em; color:var(--paper);
}
.hero-badge .pulse{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent-2); animation:hvPulse 2.2s infinite; }
@keyframes hvPulse{ 0%{box-shadow:0 0 0 0 rgba(53,208,166,.55);} 70%{box-shadow:0 0 0 10px rgba(53,208,166,0);} 100%{box-shadow:0 0 0 0 rgba(53,208,166,0);} }
.hero-title{ font-size:clamp(1.55rem,3vw,2.5rem); line-height:1.16; letter-spacing:-.022em; font-weight:700; margin:18px 0 14px; max-width:600px; }
.hero-title .grad{ background:linear-gradient(90deg,var(--accent-3),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lede{ font-size:.98rem; line-height:1.68; max-width:530px; }
.hero-lede strong{ color:#fff; font-weight:600; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 24px; }
.hero-trust{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 20px; max-width:540px; margin:0; padding:20px 0 0; border-top:1px solid var(--line); }
.hero-trust li{ display:flex; align-items:center; gap:9px; font-size:.84rem; color:var(--paper); }
.hero-trust svg{ width:19px; height:19px; flex:none; color:var(--accent-2); }

.hero-visual{ position:relative; width:100%; max-width:540px; aspect-ratio:1/1; justify-self:end; }
.hv-glow{ position:absolute; inset:6%; border-radius:50%; background:radial-gradient(circle,rgba(90,160,255,.30),rgba(53,208,166,.12) 46%,transparent 70%); filter:blur(8px); }
.hv-ring{ position:absolute; inset:5%; border-radius:50%; border:1px dashed rgba(255,255,255,.14); animation:hvSpin 70s linear infinite; }
.hv-ring.r2{ inset:19%; border:1px solid rgba(53,208,166,.2); animation-duration:100s; animation-direction:reverse; }
@keyframes hvSpin{ to{ transform:rotate(360deg); } }
.hv-core{ position:absolute; left:50%; top:50%; width:56%; aspect-ratio:1/1; transform:translate(-50%,-50%); }
.hv-core .tech3d-stage{ max-width:none; width:100%; overflow:visible; border-radius:0; }
.hv-layer{ position:absolute; will-change:transform; }
.hv-layer img{ display:block; width:100%; height:auto; filter:drop-shadow(0 20px 26px rgba(0,0,0,.5)); animation:hvFloat 7s ease-in-out infinite; }
@keyframes hvFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.hv-web{ left:-7%; top:2%; width:42%; }
.hv-phone{ right:8%; top:-6%; width:31%; }
.hv-mon{ right:-9%; bottom:5%; width:44%; }
.hv-db{ left:0; bottom:-3%; width:33%; }
.hv-chip-a{ left:-3%; top:47%; }
.hv-chip-b{ right:-1%; top:45%; }
.hv-chip{
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  padding:9px 14px; border-radius:12px; font-family:var(--font-mono); font-size:.72rem; color:var(--paper);
  background:rgba(15,21,32,.74); border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 16px 32px -14px rgba(0,0,0,.85); animation:hvFloat 8s ease-in-out infinite;
}
.hv-chip b{ font-family:var(--font-display); font-size:1rem; color:#fff; }
.hv-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-2); }
.hv-chip .dot.amb{ background:var(--accent); }

@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:30px; }
  .hero-visual{ justify-self:center; max-width:460px; }
  .hero-pro{ padding:108px 0 56px; }
}
@media (max-width:560px){
  .hero-badge{ font-size:.66rem; }
  .hero-cta .btn{ flex:1 1 100%; justify-content:center; }
  .hero-trust{ grid-template-columns:1fr 1fr; gap:10px 12px; }
  .hero-trust li{ font-size:.78rem; align-items:flex-start; }
  .hv-chip{ display:none; }
  .hero-visual{ max-width:360px; }
}

/* ==========================================================================
   3D technology showcase
   ========================================================================== */
.tech-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; perspective:1300px; }
@media (max-width:980px){ .tech-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .tech-grid{ grid-template-columns:1fr; gap:16px; } }
.tech-card{
  position:relative; display:flex; flex-direction:column; padding:18px 20px 22px; border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)); border:1px solid var(--line);
  transform-style:preserve-3d; will-change:transform;
}
.tech-card.reveal{ transition:opacity .6s ease, transform .16s ease-out, border-color .25s ease, box-shadow .3s ease; }
.tech-card::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(90,160,255,.17),transparent 62%); }
.tech-card:hover{ border-color:rgba(90,160,255,.42); box-shadow:0 34px 60px -32px rgba(0,0,0,.95), 0 0 0 1px rgba(90,160,255,.1) inset; }
.tech-card:hover::before{ opacity:1; }
.tech-art{ position:relative; height:196px; margin:-4px -6px 12px; display:flex; align-items:center; justify-content:center; border-radius:14px;
  background:radial-gradient(circle at 50% 78%,rgba(90,160,255,.2),transparent 66%); }
.tech-float{ height:100%; animation:hvFloat 7s ease-in-out infinite; }
.tech-card:nth-child(2n) .tech-float{ animation-delay:-2.3s; } .tech-card:nth-child(3n) .tech-float{ animation-delay:-4.6s; }
.tech-art img{ display:block; height:100%; width:auto; filter:drop-shadow(0 18px 22px rgba(0,0,0,.5)); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.tech-card:hover .tech-art img{ transform:translateZ(46px) scale(1.07); }
.tech-card .tag{ align-self:flex-start; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.07em; padding:4px 9px; border-radius:6px; margin-bottom:10px; }
.tag-ind{ color:var(--accent-3); border:1px solid rgba(90,160,255,.35); background:rgba(90,160,255,.08); }
.tag-tel{ color:var(--accent-2); border:1px solid rgba(53,208,166,.35); background:rgba(53,208,166,.08); }
.tag-amb{ color:var(--accent); border:1px solid rgba(242,169,59,.35); background:rgba(242,169,59,.08); }
.tech-card h3{ font-size:1.12rem; margin-bottom:8px; }
.tech-card p{ font-size:.9rem; line-height:1.6; margin-bottom:14px; }
.tech-card .stack{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.tech-card .stack span{ font-family:var(--font-mono); font-size:.7rem; color:var(--paper); padding:4px 9px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid var(--line); }
.tech-link{ margin-top:auto; font-family:var(--font-mono); font-size:.8rem; color:var(--accent-2); }
@media (max-width:600px){ .tech-art{ height:176px; } }

@media (prefers-reduced-motion: reduce){
  .hv-layer img, .hv-chip, .tech-float, .hv-ring, .hero-badge .pulse{ animation:none !important; }
}

@media (max-width:720px){
  .brand > span:last-child{ max-width:200px; }
  .brand-word small{ font-size:.55rem; letter-spacing:.045em; }
}


/* ==========================================================================
   Platform cards (What we build) - premium treatment
   ========================================================================== */
.service-card{
  --hue-rgb:90,160,255; position:relative; display:flex; flex-direction:column; overflow:hidden;
  padding:0 26px 26px; border-radius:22px; border:1px solid rgba(var(--hue-rgb),.22);
  background:linear-gradient(180deg,rgba(var(--hue-rgb),.09) 0%,rgba(15,21,32,.92) 38%,rgba(10,14,20,.96) 100%);
  box-shadow:0 30px 60px -38px rgba(0,0,0,.9);
  transition:opacity .6s ease, border-color .25s ease, box-shadow .3s ease, transform .2s ease-out;
}
.card-web{ --hue-rgb:242,169,59; } .card-app{ --hue-rgb:53,208,166; } .card-desk{ --hue-rgb:90,160,255; }
.service-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,transparent,rgb(var(--hue-rgb)),transparent); opacity:.85; }
.service-card:hover{ border-color:rgba(var(--hue-rgb),.6); box-shadow:0 40px 70px -36px rgba(0,0,0,.95), 0 0 46px -12px rgba(var(--hue-rgb),.35); }
.sc-art{ position:relative; height:190px; margin:0 -26px 18px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 70% 80% at 50% 85%,rgba(var(--hue-rgb),.30),transparent 70%); }
.sc-art::after{ 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:26px 26px; -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 60%,#000,transparent); mask-image:radial-gradient(ellipse 60% 70% at 50% 60%,#000,transparent); pointer-events:none; }
.sc-num{ position:absolute; left:24px; top:14px; font-family:var(--font-mono); font-weight:600; font-size:2.6rem; line-height:1; color:rgba(var(--hue-rgb),.22); letter-spacing:-.04em; }
.sc-float{ position:relative; z-index:1; height:100%; animation:hvFloat 7s ease-in-out infinite; }
.card-app .sc-float{ animation-delay:-2.3s; } .card-desk .sc-float{ animation-delay:-4.6s; }
.sc-float img{ display:block; height:100%; width:auto; filter:drop-shadow(0 18px 22px rgba(0,0,0,.55)); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.service-card:hover .sc-float img{ transform:scale(1.08) translateY(-4px); }
.service-card .tag{ background:rgba(var(--hue-rgb),.14) !important; color:rgb(var(--hue-rgb)); border:1px solid rgba(var(--hue-rgb),.4); letter-spacing:.07em; font-size:.7rem; margin-bottom:14px; align-self:flex-start; }
.service-card h3{ font-size:1.3rem; margin-bottom:10px; }
.service-card p{ line-height:1.62; }
.sc-points{ display:flex; flex-direction:column; gap:9px; margin:0 0 18px; padding:16px 0 0; border-top:1px solid rgba(255,255,255,.08); }
.sc-points li{ display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--paper); }
.sc-points svg{ flex:none; width:20px; height:20px; padding:3px; border-radius:50%; color:rgb(var(--hue-rgb)); background:rgba(var(--hue-rgb),.14); }
.service-card .stack{ margin-bottom:22px; }
.service-card .stack span{ background:rgba(255,255,255,.04); }
.sc-cta{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 18px; border-radius:12px; font-family:var(--font-display); font-weight:600; font-size:.92rem; color:#fff;
  background:rgba(var(--hue-rgb),.12); border:1px solid rgba(var(--hue-rgb),.45); transition:background .25s ease, color .25s ease, transform .2s ease;
}
.sc-cta i{ font-style:normal; transition:transform .25s ease; }
.sc-cta:hover{ background:rgb(var(--hue-rgb)); color:#07101c; }
.sc-cta:hover i{ transform:translateX(5px); }
@media (prefers-reduced-motion: reduce){ .sc-float{ animation:none; } }


/* ==========================================================================
   Popular FYP topics - icon cards + filter (mobile-first refinements)
   ========================================================================== */
.pc-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 30px; }
.pc-chip{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--paper);
  background:rgba(255,255,255,.04); border:1px solid var(--line); -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.pc-chip b{ font-family:var(--font-mono); font-weight:500; font-size:.72rem; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--muted); }
.pc-chip:hover{ border-color:rgba(90,160,255,.5); }
.pc-chip:active{ transform:scale(.97); }
.pc-chip.active{ color:#07101c; border-color:transparent; background:linear-gradient(135deg,var(--accent-3),var(--accent-2)); }
.pc-chip.active b{ background:rgba(7,16,28,.16); color:#07101c; }

.p-card{
  --pb-rgb:242,169,59; border-radius:18px; padding:22px; border:1px solid rgba(var(--pb-rgb),.2);
  background:linear-gradient(165deg,rgba(var(--pb-rgb),.08) 0%,rgba(15,21,32,.95) 46%,rgba(10,14,20,.97) 100%);
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"icon badge" "title title" "desc desc" "link link"; align-items:center; column-gap:14px;
}
.pb-web{ --pb-rgb:242,169,59; } .pb-app{ --pb-rgb:53,208,166; } .pb-desk{ --pb-rgb:90,160,255; }
.p-card:hover{ border-color:rgba(var(--pb-rgb),.55); }
.pc-icon{
  grid-area:icon; display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:15px;
  color:rgb(var(--pb-rgb)); background:linear-gradient(145deg,rgba(var(--pb-rgb),.22),rgba(var(--pb-rgb),.06));
  border:1px solid rgba(var(--pb-rgb),.4); box-shadow:0 12px 26px -12px rgba(var(--pb-rgb),.7), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.pc-icon svg{ width:26px; height:26px; }
.p-card:hover .pc-icon{ transform:translateY(-3px) rotate(-6deg) scale(1.06); }
.p-card .p-badge{ grid-area:badge; justify-self:end; margin:0; padding:4px 10px; border-radius:999px; font-size:.66rem; letter-spacing:.06em;
  color:rgb(var(--pb-rgb)); background:rgba(var(--pb-rgb),.1); border:1px solid rgba(var(--pb-rgb),.3); }
.p-card h4{ grid-area:title; margin:18px 0 8px; font-size:1.1rem; }
.p-card p{ grid-area:desc; font-size:.9rem; line-height:1.6; margin:0 0 16px; }
.pc-link{
  grid-area:link; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:0 14px; border-radius:12px;
  font-family:var(--font-mono); font-size:.8rem; color:rgb(var(--pb-rgb)); background:rgba(var(--pb-rgb),.08); border:1px solid rgba(var(--pb-rgb),.28);
  transition:background .25s ease, color .25s ease; -webkit-tap-highlight-color:transparent;
}
.pc-link i{ font-style:normal; transition:transform .25s ease; }
.pc-link:hover{ background:rgb(var(--pb-rgb)); color:#07101c; }
.pc-link:hover i{ transform:translateX(4px); }
.p-card[hidden]{ display:none; }

@media (max-width:900px){
  .p-card.float-soft{ animation:none !important; }
  .portfolio-grid > .reveal{ transform:translateY(16px); }
  .portfolio-grid > .reveal.in{ transform:none; }
}
@media (max-width:640px){
  .portfolio-grid{ gap:12px; }
  .p-card{ padding:16px; column-gap:14px; row-gap:0; grid-template-columns:50px 1fr; grid-template-areas:"icon badge" "icon title" "icon desc" "link link"; align-items:start; }
  .pc-icon{ width:46px; height:46px; border-radius:14px; align-self:start; }
  .p-card .p-badge{ justify-self:start; margin-bottom:8px; }
  .p-card h4{ margin:0 0 6px; font-size:1.02rem; }
  .p-card p{ font-size:.86rem; margin:0 0 12px; }
  .pc-link{ margin-top:2px; }
  .pc-filters{ gap:8px; margin-bottom:22px; }
  .pc-chip{ padding:0 14px; font-size:.84rem; }
}


/* ==========================================================================
   FYP Bridge brand: real icon + logo
   ========================================================================== */
.brand-word em{ background:linear-gradient(90deg,#2f7bff,#62b3ff); -webkit-background-clip:text; background-clip:text; }
.brand-mark{ background:none; box-shadow:none; border-radius:0; }
.brand-mark img, .chat-avatar img{ border-radius:0; filter:drop-shadow(0 6px 14px rgba(47,123,255,.5)); }
.chat-avatar{ background:none; box-shadow:none; }
.pwa-icon{ border-radius:0; box-shadow:none; filter:drop-shadow(0 10px 22px rgba(47,123,255,.6)); }
.foot-logo{ display:inline-block; }
.foot-logo img{ display:block; width:190px; height:auto; max-width:100%; }
@media (max-width:720px){ .foot-logo img{ width:170px; } }
.tech-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:980px){ .tech-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .tech-art{ height:150px; } }
@media (max-width:720px){ .tech-grid{ grid-template-columns:1fr; } .tech-card{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:0 14px; padding:14px; } .tech-art{ width:96px; height:96px; margin:0; flex:none; } .tech-card .tag, .tech-card h3, .tech-card p, .tech-link{ flex:1 1 calc(100% - 112px); } .tech-card .tag{ flex:0 0 auto; margin:0 0 6px; } .tech-card h3{ margin:0 0 4px; font-size:1rem; } .tech-card p{ margin:0 0 6px; font-size:.84rem; } }

/* technology cards: compact picture-left layout on phones */
@media (max-width:720px){
  .tech-card{ display:grid; grid-template-columns:92px 1fr; grid-template-areas:"art tag" "art title" "art desc" "art link"; column-gap:14px; row-gap:0; align-items:center; padding:14px; }
  .tech-art{ grid-area:art; width:92px; height:92px; margin:0; align-self:center; }
  .tech-card .tag{ grid-area:tag; justify-self:start; margin:0 0 6px; }
  .tech-card h3{ grid-area:title; margin:0 0 4px; font-size:1rem; }
  .tech-card p{ grid-area:desc; margin:0 0 6px; font-size:.84rem; line-height:1.5; }
  .tech-link{ grid-area:link; margin:0; }
}

/* header uses the full logo (same as footer) */
.brand-logo{ display:block; height:70px; width:auto; max-width:none; }
.brand > span:last-child{ max-width:none; }
@media (max-width:720px){ .brand-logo{ height:58px; } }