/* =========================================
   HKSolutions — app.css (FULL) — FIX SPACING
   ✅ Fix: big space between HERO and ABOUT
   - Removed invalid negative padding on About
   - Hero right min-height is now adaptive (clamp)
   - Added small hero padding-bottom for tighter flow
   Structure unchanged
   ========================================= */

/* ===== Root tokens (brand) ===== */
:root{
  --container: 1180px;

  --radius-xl: 26px;
  --radius-lg: 22px;
  --radius-md: 18px;

  /* Brand palette (logo-based) */
  --primary-cyan: #4DB6B1;
  --primary-blue: #4DB6B1;
  --primary-dark: #0A0F1E;
  --primary-light: #F7FBFF;

  --accent: var(--primary-cyan);
  --accent2: var(--primary-blue);
}

/* ===== DARK (premium deep) ===== */
html[data-theme="dark"]{
  --bg: #040506;
  --bg2:#040506;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --muted2: rgba(255,255,255,.46);

  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.07);

  --glass: rgba(255,255,255,.055);
  --glass2: rgba(255,255,255,.085);

  --shadow: 0 28px 90px rgba(0,0,0,.70);
  --shadow2: 0 22px 70px rgba(0,0,0,.55);

  --gridA: rgba(85, 112, 132, 0.045);
  --dotA: rgba(78, 166, 188, 0.986);
}

/* ===== LIGHT (soft / not tiring) ===== */
html[data-theme="light"]{
  /* background base: warm-neutral off-white */
  --bg: #DBDBDB;
  --bg2:#DBDBDB;

  --text: rgba(12,14,18,.92);
  --muted: rgba(12,14,18,.62);
  --muted2: rgba(12,14,18,.48);

  /* softer borders */
  --stroke: rgba(12,14,18,.09);
  --stroke2: rgba(12,14,18,.06);

  /* glass softer (less “grey”) */
  --glass: rgba(255,255,255,.72);
  --glass2: rgba(255,255,255,.86);

  --shadow: 0 22px 60px rgba(16,20,24,.09);
  --shadow2: 0 16px 45px rgba(16,20,24,.07);

  /* grid/dots MUCH lighter */
  --gridA: rgba(12,14,18,.035);
  /* --dotA: rgba(12,14,18,.035); */
  /* --dotA: rgba(12,14,18,.12); */
  --dotA: rgba(0, 201, 210, .14);
}

/* Make BG effects subtle in light */
html[data-theme="light"] .bg__grid{ opacity:.14; }
html[data-theme="light"] .bg__dots{ opacity:.28;filter: contrast(1.05); }

/* Replace “dark green” glow in light with clean brand glow */
html[data-theme="light"] .bg__glow{
  opacity:.18;
  filter: blur(110px);
}
html[data-theme="light"] .bg__glow--a{ background: rgba(0, 201, 210, .18); }
html[data-theme="light"] .bg__glow--b{ background: rgba(26, 107, 255, .14); }

/* If your particles look noisy in light */
html[data-theme="light"] #particles{ opacity:.22; }

/* Optional: keep body purely flat */
html[data-theme="light"] body{ background: var(--bg); }

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

.container{
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
}

/* ===== Reveal ===== */
.section{ position: relative; padding:30px 0; }

.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ===== Background fixed ===== */
.bg{ position: fixed; inset:0; z-index:-3; pointer-events:none; }

.bg__grid{
  position:absolute; inset:-1px;
  background-image:
    linear-gradient(to right, var(--gridA) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gridA) 1px, transparent 1px);
  background-size:84px 84px;
  opacity:.20;
}

.bg__dots{
  position:absolute; inset:-1px;
  background-image: radial-gradient(var(--dotA) 1px, transparent 1px);
  background-size:18px 18px; /* FIX */
  opacity:.12;
}

.bg__glow{
  position:absolute; width:880px; height:880px; border-radius:50%;
  filter: blur(90px); opacity:.55;
}
.bg__glow--a{ left:-280px; top:-250px; background: rgba(18, 39, 37, 0.699); }
.bg__glow--b{ right:-320px; top:140px; background: rgba(18, 39, 37, 0.699); }

#particles{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }

/* ===== Nav fixed ===== */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
}

.nav__inner{
  height: 74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
main{ padding-top: 74px; }

/* ===== Brand ===== */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand__mark{
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: color-mix(in srgb, var(--glass) 70%, transparent);
  border:1px solid var(--stroke);

  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent),
    0 8px 26px rgba(0,0,0,.25);
}

.brand__mark img{
  width:22px;
  height:22px;
  object-fit:contain;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 35%, transparent));
}

.brand__name{
  font-weight:600;
  letter-spacing:.2px;
  opacity:.95;
  font-size:14px;
}

/* ===== Nav links ===== */
.nav__links{
  display:flex; gap:10px;
  padding:8px 10px;
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 60%, transparent);
  border-radius:999px;
}
.nav__link{
  font-size:13px;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  padding:8px 12px;
  border-radius:999px;
  transition:.25s ease;
}
.nav__link:hover{ background: color-mix(in srgb, var(--glass2) 45%, transparent); }
.nav__link.is-active{
  background: color-mix(in srgb, var(--glass2) 90%, transparent);
  border:1px solid var(--stroke);
}

.nav__right{ display:flex; align-items:center; gap:10px; }

/* ===== Pills ===== */
.pill{
  border:1px solid #DBDBDB;
  background: color-mix(in srgb, var(--glass) 60%, transparent);
  color: color-mix(in srgb, var(--text) 92%, transparent);
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  cursor:pointer;
  transition:.25s ease;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.pill:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--glass2) 55%, transparent);
}
.pill__dot{
  width:8px;height:8px;border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
}
.pill--cta{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 22%, transparent),
    color-mix(in srgb, var(--accent2) 14%, transparent)
  );
}

/* ===== Section titles (optional) ===== */
.sectionTitleCenter{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 26px;
}
.sectionTitleCenter__title{
  font-family:"DM Serif Display", serif;
  font-weight:400;
  font-size:44px;
  margin:0;
  opacity:.92;
}

/* ===== Vector separators ===== */
.vectorBetween{
  position:absolute; left:0; right:0;
  bottom:-14px; height: 160px; pointer-events:none; opacity:.9;
}
.vectorBetween--thin{ height:120px; bottom:-10px; opacity:.85; }
.vectorBetween__svg{ width:100%; height:100%; display:block; }
.vb{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.vb--faint{ stroke: color-mix(in srgb, var(--text) 18%, transparent); stroke-width:1.4; }
.vb--main{
  stroke-width:2.2;
  stroke: color-mix(in srgb, var(--accent) 88%, transparent);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 14%, transparent));
}
.vbSpark{ fill: color-mix(in srgb, var(--text) 85%, transparent); opacity:.45; }

/* ========================================
   HERO
   ======================================== */
.hero{
  padding-top: 100px;
  padding-bottom: 10px; /* ✅ tighter flow to next section */
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:42px;
  align-items:start;
}

.hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.18em;
}
.kicker__spark{
  width:28px;height:1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.hero__title{
  margin:14px 0 12px;
  font-size: clamp(40px, 5.2vw, 74px);
  line-height:.98;
  font-weight:600;
  letter-spacing:-.04em;
}

.title__accent{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 30px color-mix(in srgb, var(--accent) 12%, transparent);
}

.hero__sub{
  max-width:560px;
  margin:0 0 18px;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

.hero__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:22px;
}

.btn{
  border-radius:999px;
  padding:12px 16px;
  font-size:14px;
  cursor:pointer;
  border:1px solid #DBDBDB;
  background: color-mix(in srgb, var(--glass) 60%, transparent);
  color: color-mix(in srgb, var(--text) 92%, transparent);
  transition:.25s ease;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.btn:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--glass2) 55%, transparent);
}
.btn--primary{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 22%, transparent),
    color-mix(in srgb, var(--accent2) 14%, transparent)
  );
}
.btn__chip{
  width:28px;height:28px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass2) 45%, transparent);
}

/* ✅ KEY FIX: was min-height:520px (creates huge space). Now adaptive. */
.hero__right{
  position:relative;
  min-height: clamp(320px, 48vh, 520px);
}

.floatCard{
  position: relative;
  width:290px;
  border-radius:22px;
  background: color-mix(in srgb, var(--glass) 70%, transparent);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  padding:16px;

  position:absolute;
  right:18px;
  top:20px;
  overflow: hidden;
}

.floatCard__head{ display:flex; gap:12px; align-items:center; }

.avatarBlob{
  width:42px;height:42px;border-radius:14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 25%, transparent),
    color-mix(in srgb, var(--accent2) 20%, transparent)
  );
  border:1px solid var(--stroke);
}

.floatCard__big{ font-size:22px; font-weight:700; }
.floatCard__small{ font-size:12px; color:var(--muted); margin-top:2px; }

.floatCard__media{
  position: relative;
  margin:12px 0 10px;
  height:140px;
  border-radius:18px;
  border:1px solid var(--stroke2);
  overflow:hidden;
  display:grid;
  place-items:center;
}
.floatCard__mediaBg{
  position:absolute; inset:0;
  background:
    radial-gradient(240px 160px at 40% 40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(240px 160px at 70% 60%, color-mix(in srgb, var(--accent2) 20%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--glass2) 52%, transparent), color-mix(in srgb, var(--glass) 32%, transparent));
  filter: saturate(1.05);
}
.floatCard__mediaLogo{
  position: relative;
  width:56px;
  height:56px;
  object-fit:contain;
  opacity:.96;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.45));
  z-index:1;
}

.floatCard__text{ color:var(--muted); font-size:12.8px; line-height:1.45; }

.floatCard__faces{
  display:flex;
  gap:8px;
  margin-top:10px;
  align-items:center;
}
.heroMiniNode{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: color-mix(in srgb, var(--glass2) 55%, transparent);
  border:1px solid var(--stroke);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  overflow:hidden;
}
.heroMiniNode img{
  width:25px;
  height:25px;
  margin: 1px;
  object-fit:contain;
  opacity:.92;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.35));
}



/* ========================================
   ABOUT
   ======================================== */
#about.section,
.about.section{
  /* optional: tighten a bit (enable if you want it closer) */
  /* margin-top: -20px; */
  padding-top: 30px; /* keep same rhythm as .section */
}

.aboutLayout{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
  align-items:start;
}

.aboutLeft{ padding-right: 10px; padding-top: 8px; }

.aboutHint{
  display:flex; gap:10px; align-items:flex-start; margin-top: 0;
  color: var(--muted);
  font-size: 12px;
  line-height:1.25;
}
.plus{ color: color-mix(in srgb, var(--accent) 92%, transparent); font-weight:800; margin-top:2px; }

.aboutText{
  margin: 10px 0 0;
  font-size:16px;
  line-height:1.65;
  color:var(--muted);
  max-width: 560px;
}

.brandInline{ color: color-mix(in srgb, var(--accent) 92%, transparent); font-weight:600; }
.accentInline{ color: color-mix(in srgb, var(--accent) 92%, transparent); }

.aboutRail{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.aboutRailLabel{ color: var(--muted2); font-size:12px; line-height:1.2; }

.aboutArrows{
  display:flex;
  gap:10px;
  align-items: end;
  margin-top: 50px;
}

.arrowBtn{
  width:44px;height:44px;border-radius:14px;
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 70%, transparent);
  color: color-mix(in srgb, var(--text) 92%, transparent);
  cursor:pointer; transition:.25s ease;
}
.arrowBtn:hover{
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--glass2) 55%, transparent);
}

.aboutRight{ position:relative; width: min(760px, 60vw); justify-self: end; }

.aboutViewport{
  width: 100%;
  max-width: 740px;
  margin-left: auto;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid transparent;
}

.aboutScroller{
  display:flex;
  gap: 16px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  will-change: transform;
}
.aboutScroller::-webkit-scrollbar{ display: none; }

.aboutCard{
  width: 270px;
  min-width: 270px;
  height: 220px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--stroke) 90%, transparent);
  background: color-mix(in srgb, var(--glass) 72%, transparent);
  box-shadow: var(--shadow2);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  position:relative;
  overflow:hidden;
}
.aboutCard:hover{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--stroke));
  background: color-mix(in srgb, var(--glass2) 40%, transparent);
}
.aboutCard--teal{
  background:
    radial-gradient(140px 120px at 35% 12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(160px 140px at 70% 30%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 60%),
    color-mix(in srgb, var(--glass) 72%, transparent);
}
.aboutCard--light{
  background: var(--glass2);
  border-color: color-mix(in srgb, var(--stroke) 60%, transparent);
}
.aboutCard__head{ padding: 18px 18px 0; }
.aboutCard__head h3{
  margin:0 0 6px;
  font-size:15px;
  font-weight:600;
  letter-spacing: .01em;
}
.aboutCard__head p{
  margin:0;
  font-size:12px;
  line-height:1.45;
  color: color-mix(in srgb, var(--muted) 92%, transparent);
  max-width: 190px;
}

.aboutCard__imgWrap{
  position:absolute;
  left:0; right:0;
  bottom:14px;
  height:114px;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;
}
.aboutCard__imgWrap img{
  width:150px;height:150px; object-fit:contain;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.35));
}
html[data-theme="light"] .aboutCard__imgWrap img{
  filter: drop-shadow(0 12px 24px rgba(15,18,22,.18));
}

.aboutFade{
  position:absolute;
  top:0; right:0; bottom:0;
  width: 140px;
  pointer-events:none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg) 96%, transparent));
}

/* ===== Section head ===== */
.sectionHead{ display:flex; align-items:center; gap:18px; margin-bottom:24px; }
.sectionHead__title{
  font-family:"DM Serif Display", serif;
  font-weight:400;
  font-size: clamp(28px, 3.2vw, 44px);
  opacity:.92;
  margin:0;
  padding-bottom: 4px;
  letter-spacing: -0.02em;
}
.sectionHead__line{
  height:1px;
  flex:1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--text) 18%, transparent), transparent);
}
.hintPlus{ color: color-mix(in srgb, var(--accent) 92%, transparent); font-weight:800; }
.services__lead{margin-bottom: 13px; margin-top: -2px;}

/* ========================================
   SERVICES — Spider V3
   ======================================== */
.services .svcV3{
  position:relative;
  height:520px;
  border-radius:26px;
  border:1px solid var(--stroke2);
  overflow:hidden;

  background:
    radial-gradient(900px 460px at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    radial-gradient(900px 460px at 50% 50%, color-mix(in srgb, var(--accent2) 8%, transparent), transparent 68%),
    radial-gradient(color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1px);
  background-size:auto,auto,16px 16px;

  --cx:50%;
  --cy:50%;
  --tiltX:0deg;
  --tiltY:0deg;

  perspective: 900px;
  transform-style: preserve-3d;
  will-change: transform;
}
.services .svcV3.is-active{
  transform: rotateX(var(--tiltX)) rotateY(var(--tiltY));
}

.services .svcV3__bg{
  position:absolute;
  inset:-40px;
  pointer-events:none;
  background:
    radial-gradient(280px 200px at var(--cx) var(--cy),
      color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    radial-gradient(260px 180px at var(--cx) var(--cy),
      color-mix(in srgb, var(--accent2) 14%, transparent), transparent 75%);
  opacity:.85;
  transform: translateZ(12px);
}

.services .svcV3__hub{
  position:absolute;
  left:50%; top:50%;
  width:108px; height:108px;
  transform: translate(-50%,-50%) translateZ(26px);
  border-radius:30px;
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--glass) 56%, transparent);
  box-shadow:
    0 0 0 18px color-mix(in srgb, var(--accent) 6%, transparent),
    0 0 44px color-mix(in srgb, var(--accent2) 8%, transparent);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.services .svcV3__hubLogoImg{
  width:72px;
  height:72px;
  object-fit:contain;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 18%, transparent));
}

.services .svcV3__pill{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 72%, transparent);
  color: color-mix(in srgb, var(--text) 92%, transparent);
  padding:14px 18px;
  font-size:14px;
  box-shadow: var(--shadow2);
  cursor:pointer;
  transform: translate(-50%,-50%) translateZ(28px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, filter .18s ease;
  will-change: transform;
  min-width: 168px;
  text-align:center;
}
.services .svcV3__pill:hover{
  border-color: color-mix(in srgb, var(--accent) 38%, var(--stroke));
  background: color-mix(in srgb, var(--glass2) 62%, transparent);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 18%, transparent));
}

.services .svcV3__svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  transform: translateZ(8px);
}
.services .svcV3__line{
  fill:none;
  stroke-linecap:round;
  filter: url(#softGlow);
}
.services .svcV3__line.base{
  stroke: url(#gA);
  opacity:.55;
  stroke-width:2.1;
  stroke-dasharray: 10 10;
  animation: svcFlow 1.8s linear infinite;
}
@keyframes svcFlow{ to{ stroke-dashoffset:-20; } }

.services .svcV3__line.hot{
  stroke: url(#gA);
  opacity:0;
  stroke-width:3.6;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: opacity .18s ease;
}

.services .svcV3__tip{
  position:absolute;
  left:410px;
  bottom:18px;
  width:min(340px, calc(100% - 36px));
  border-radius:18px;
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 70%, transparent);
  box-shadow: var(--shadow);
  padding:12px 12px 14px;
  transform: translateZ(22px);
}
.services .svcV3__tipK{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}
.services .svcV3__tipT{
  margin-top:6px;
  font-weight:800;
  font-size:16px;
}
.services .svcV3__tipD{
  margin-top:6px;
  color: var(--muted);
  font-size:13px;
  line-height:1.5;
}

.services .svcV3{
  opacity:0;
  transform: translateY(16px) scale(.985);
  filter: blur(8px);
}
.services .svcV3.is-in{
  opacity:1;
  transform:none;
  filter:none;
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}

@media (prefers-reduced-motion: reduce){
  .services .svcV3__line.base{ animation:none !important; }
  .services .svcV3{ filter:none !important; }
  .services .svcV3.is-active{ transform:none; }
}

/* ========================================
   WORK — Orbit
   ======================================== */
.workOrbit{
  position:relative;
  height: 440px;
  border-radius: 26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
html[data-theme="light"] .workOrbit{
  border:1px solid rgba(12,14,18,.08);
  background: rgba(255,255,255,.45);
  box-shadow: 0 18px 55px rgba(16,20,24,.10);
}

.workOrbit::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 1.6px);
  background-size: 26px 26px;
  mask-image: radial-gradient(650px 440px at 40% 50%, #000 55%, transparent 86%);
  opacity:.95;
  pointer-events:none;
}
html[data-theme="light"] .workOrbit::before{
  background:
    radial-gradient(circle at 1px 1px, rgba(12,14,18,.08) 1px, transparent 1.6px);
}

.workOrbit::after{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(900px 560px at 35% 45%, transparent 45%, rgba(0,0,0,.55) 90%);
  pointer-events:none;
}
html[data-theme="light"] .workOrbit::after{
  background: radial-gradient(900px 560px at 35% 45%, transparent 45%, rgba(12,14,18,.10) 90%);
}

.workOrbit__nodes{ position:absolute; inset:0; z-index:3; }

.workOrbit__core{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: 132px; height:132px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.12), rgba(255,255,255,.05) 55%, rgba(0,0,0,.25) 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 10px rgba(0,255,220,.06),
    0 0 0 22px rgba(0,180,255,.04),
    0 30px 80px rgba(0,0,0,.6);
  z-index:2;
}
html[data-theme="light"] .workOrbit__core{
  background: radial-gradient(circle at 35% 30%, rgba(12,14,18,.06), rgba(255,255,255,.70) 55%, rgba(12,14,18,.06) 100%);
  border:1px solid rgba(12,14,18,.10);
  box-shadow:
    0 0 0 10px rgba(0,201,210,.10),
    0 0 0 22px rgba(26,107,255,.08),
    0 22px 60px rgba(16,20,24,.12);
}

.workOrbit__coreImg{ width:64px; height:64px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.4)); }

.workOrbit__ring{
  position:absolute; inset:-18px;
  border-radius:999px;
  border:1px solid rgba(0,255,220,.18);
  box-shadow: 0 0 45px rgba(0,255,220,.12);
}
.workOrbit__ring--2{
  inset:-34px;
  border-color: rgba(0,180,255,.12);
  opacity:.7;
}

.workProj{
  position:absolute;
  width:64px; height:64px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 45px rgba(0,0,0,.45);
  cursor:pointer;
  user-select:none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  will-change: transform, left, top;
}
html[data-theme="light"] .workProj{
  border:1px solid rgba(12,14,18,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 14px 40px rgba(16,20,24,.10);
}
.workProj:hover{
  border-color: rgba(0,255,220,.60);
  background: rgba(0,255,220,.10);
  transform: translate(-50%,-50%) scale(1.06);
}
.workProj.is-active{
  border-color: rgba(0,255,220,.75);
  background: rgba(0,255,220,.12);
  box-shadow:
    0 0 0 10px rgba(0,255,220,.08),
    0 18px 55px rgba(0,0,0,.55);
}

.workProj__img{
  width:50px; height:50px;
  object-fit:contain;
  opacity:.95;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
}

.workProj__badge{
  position:absolute;
  top:66px;
  font-size:12px;
  color: rgba(255,255,255,.70);
  white-space:nowrap;
  letter-spacing:.2px;
  text-shadow: 0 10px 25px rgba(0,0,0,.55);
  pointer-events:none;
}
html[data-theme="light"] .workProj__badge{
  color: rgba(12,14,18,.62);
  text-shadow: none;
}

/* Panel */
.workPanel{
  position:absolute;
  right:14px; top:14px;
  width:min(360px, 88%);
  height: calc(100% - 28px);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(0,0,0,.6);
  padding:16px;

  transform: translateX(22px);
  opacity:0;
  pointer-events:none;
  transition: transform .18s ease, opacity .18s ease;
  z-index:6;
}
html[data-theme="light"] .workPanel{
  border:1px solid rgba(12,14,18,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
  box-shadow: 0 18px 55px rgba(16,20,24,.12);
}

.workPanel.is-open{
  transform: translateX(0);
  opacity:1;
  pointer-events:auto;
}

.workPanel__close{
  position:absolute;
  right:14px; top:14px;
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  cursor:pointer;
}
html[data-theme="light"] .workPanel__close{
  border:1px solid rgba(12,14,18,.12);
  background: rgba(255,255,255,.85);
  color: rgba(12,14,18,.72);
}

.workPanel__kicker{
  font-size:11px;
  color: rgba(255,255,255,.55);
  letter-spacing:.18em;
  text-transform:uppercase;
}
html[data-theme="light"] .workPanel__kicker{ color: rgba(12,14,18,.55); }

.workPanel__title{ margin:12px 0 6px; font-size:16px; }
.workPanel__desc{ margin:0 0 12px; font-size:12px; color: rgba(255,255,255,.62); line-height:1.5; }
html[data-theme="light"] .workPanel__desc{ color: rgba(12,14,18,.62); }

.workPanel__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 12px; }

.workTag{
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.72);
}
html[data-theme="light"] .workTag{
  border:1px solid rgba(12,14,18,.10);
  background: rgba(12,14,18,.05);
  color: rgba(12,14,18,.68);
}

.workPanel__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,255,220,.10);
  color: rgba(255,255,255,.9);
  font-weight:600;
  text-decoration:none;
}
html[data-theme="light"] .workPanel__cta{
  border:1px solid rgba(0,201,210,.28);
  background: rgba(0,201,210,.12);
  color: rgba(12,14,18,.90);
}

.workPanel__hint{ margin-top:10px; font-size:11px; color: rgba(255,255,255,.5); }
html[data-theme="light"] .workPanel__hint{ color: rgba(12,14,18,.50); }

.workOrbit__overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index:5;
}
html[data-theme="light"] .workOrbit__overlay{ background: rgba(12,14,18,.18); }
.workOrbit__overlay.is-on{
  opacity:1;
  pointer-events:auto;
}

.workPanel__logoWrap{
  width:64px;
  height:64px;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin-bottom:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
html[data-theme="light"] .workPanel__logoWrap{
  background: rgba(255,255,255,.78);
  border:1px solid rgba(12,14,18,.10);
  box-shadow: 0 12px 30px rgba(16,20,24,.10);
}

.workPanel__logo{
  width:60px;
  height: 60px;;
  object-fit:contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

/* ========================================
   CONTACT
   ======================================== */
.contactShell{
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* NOTE: you use class "glass" in HTML; keep it minimal here */
.glass{
  border-radius: 26px;
  border:1px solid var(--stroke2);
  background: color-mix(in srgb, var(--glass) 75%, transparent);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(12px);
}

.contactSplit{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: stretch;
  gap: 0;
  min-height: 360px;
}

.contactInfo{
  padding: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.contactInfo::after{
  content:"";
  position:absolute;
  top: 18px;
  bottom: 18px;
  right: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--text) 16%, transparent),
    transparent
  );
  opacity: .9;
}

.contactShell .contactForm{
  padding: 28px;
  display:flex;
  flex-direction:column;
  gap: 14px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.contactLeft__title{
  font-family:"DM Serif Display", serif;
  font-weight:400;
  font-size: clamp(36px, 3.2vw, 48px);
  margin:0 0 10px;
  opacity:.96;
  letter-spacing:-.02em;
}
.contactLeft__desc{
  margin:0 0 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 48ch;
}

.contactChecks{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:grid;
  gap:10px;
}
.contactChecks li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px;
  color:var(--muted2);
  line-height:1.35;
}
.check{
  width:18px;height:18px;
  border-radius:7px;
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 6%, transparent);
  flex: 0 0 auto;
  margin-top: 1px;
}

.contactSocial{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.socialBtn{
  width:40px;height:40px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 70%, transparent);
  color: color-mix(in srgb, var(--text) 86%, transparent);
  cursor:pointer;
  transition:.25s ease;
  display:grid;
  place-items:center;
  font-size:12px;
}
.socialBtn:hover{
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--glass2) 55%, transparent);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--stroke));
}

.formRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field input,
.field textarea{
  width:100%;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--stroke2) 90%, transparent);
  background: color-mix(in srgb, var(--bg) 18%, transparent);
  color: var(--text);
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.field input::placeholder,
.field textarea::placeholder{
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}

html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea{
  background: rgba(255,255,255,.78);
}

.field textarea{
  min-height: 220px;
  resize: none;
}

.field input:focus,
.field textarea:focus{
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 10%, transparent);
}

.submitBtn{
  margin-top: 2px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--stroke));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, var(--accent2) 10%, transparent)
  );
  border-radius: 16px;
  padding: 14px 14px;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--text) 94%, transparent);
  transition: transform .2s ease, filter .2s ease, border-color .2s ease;
}
.submitBtn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--stroke));
  filter: brightness(1.06);
}

.formNote{
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted2);
  min-height: 16px;
}

/* ========================================
   FOOTER
   ======================================== */
.footerPro{
  margin-top: 18px;
  padding: 22px;
  position: relative;
  overflow: hidden;
}

.footerPro::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(520px 260px at 18% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(520px 260px at 86% 40%, color-mix(in srgb, var(--accent2) 12%, transparent), transparent 62%);
  opacity:.8;
  pointer-events:none;
}

.footerTop{
  position: relative;
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 18px;
  align-items: start;
}

.footerBrandBlock{ padding: 6px 6px 10px; }

.footerBrand{
  display:flex;
  align-items:center;
  gap:12px;
}

.footerLogo{
  width:36px;
  height:36px;
  object-fit:contain;
  border-radius:10px;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 22%, transparent));
}

.footerBrand__name{
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 15px;
  color: color-mix(in srgb, var(--text) 92%, transparent);
}

.footerTagline{
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 44ch;
}

.footerSocial{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.footerSocialBtn{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 70%, transparent);
  display:grid;
  place-items:center;
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  transition: .25s ease;
}
.footerSocialBtn:hover{
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--glass2) 55%, transparent);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--stroke));
}

.footerLinks{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 6px;
}

.footerCol__title{
  font-size: 11px;
  color: var(--muted2);
  margin-bottom: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.footerCol a,
.footerCol span{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0;
  line-height: 1.4;
}

.footerCol a{
  transition: .2s ease;
}
.footerCol a:hover{
  color: color-mix(in srgb, var(--text) 92%, transparent);
  transform: translateX(2px);
}

.footerBottom{
  position: relative;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footerCopy{
  font-size: 12px;
  color: var(--muted2);
}

.footerMini{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;
}

.footerMiniLink{
  color: var(--muted);
  transition: .2s ease;
}
.footerMiniLink:hover{
  color: color-mix(in srgb, var(--text) 92%, transparent);
}
.footerMiniSep{
  color: color-mix(in srgb, var(--muted2) 80%, transparent);
}

.footerSocialBtn ion-icon{
  font-size: 16px;
  color: color-mix(in srgb, var(--text) 88%, transparent);
}
.footerSocialBtn:hover ion-icon{
  color: color-mix(in srgb, var(--accent) 85%, transparent);
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1100px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__right{ min-height: 360px; } /* stays reasonable on tablet */
  .floatCard{ position:relative; right:auto; top:0; margin-top: 10px; }
}
@media (max-width: 980px){
  .aboutLayout{ grid-template-columns:1fr; }
  .aboutViewport{ width: 100%; margin-left: 0; }
  .aboutFade{ display:none; }
  .formRow{ grid-template-columns:1fr; }
  .footerTop{ grid-template-columns: 1fr; }
  .footerLinks{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .nav__links{ display:none; }
  .sectionTitleCenter__title{ font-size:34px; }
}
@media (max-width: 980px){
  .contactSplit{ grid-template-columns: 1fr; }
  .contactInfo::after{ display:none; }
  .formRow{ grid-template-columns: 1fr; }
}