/* ============================================================================
   NetPro BD — base.css
   Design tokens (theme-aware), reset, typography, primitives & utilities
   ----------------------------------------------------------------------------
   Theming model
     • Every colour the UI paints with is a semantic token defined here.
     • `[data-theme="light"]` on <html> swaps the whole palette in one place.
     • Surfaces use "tint" tokens (white-alpha in dark, ink-alpha in light)
       so glassmorphism reads correctly on both backgrounds.
   -------------------------------------------------------------------------- */

/* ------------------------------ 1. TOKENS -------------------------------- */
/* Every animatable colour is REGISTERED with @property so the browser can
   interpolate it. That lets the whole theme morph in one GPU-friendly
   transition on <html> instead of snapping hundreds of elements.          */
@property --bg           { syntax: '<color>'; inherits: true; initial-value: #05080f; }
@property --bg-2         { syntax: '<color>'; inherits: true; initial-value: #070d1a; }
@property --surface      { syntax: '<color>'; inherits: true; initial-value: #0c1425; }
@property --surface-2    { syntax: '<color>'; inherits: true; initial-value: #101b31; }
@property --surface-3    { syntax: '<color>'; inherits: true; initial-value: #16233c; }
@property --line         { syntax: '<color>'; inherits: true; initial-value: rgba(148,180,226,.13); }
@property --line-strong  { syntax: '<color>'; inherits: true; initial-value: rgba(148,180,226,.24); }
@property --text         { syntax: '<color>'; inherits: true; initial-value: #e7eefc; }
@property --text-dim     { syntax: '<color>'; inherits: true; initial-value: #9db0cd; }
@property --text-mute    { syntax: '<color>'; inherits: true; initial-value: #7186a6; }
@property --heading      { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --tint-a       { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.022); }
@property --tint-b       { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.05); }
@property --tint-c       { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.09); }
@property --tint-d       { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.18); }
@property --brand        { syntax: '<color>'; inherits: true; initial-value: #22d3ee; }
@property --brand-1      { syntax: '<color>'; inherits: true; initial-value: #22d3ee; }
@property --brand-2      { syntax: '<color>'; inherits: true; initial-value: #3b82f6; }
@property --brand-3      { syntax: '<color>'; inherits: true; initial-value: #7c5cff; }
@property --accent       { syntax: '<color>'; inherits: true; initial-value: #ff8a1f; }
@property --accent-2     { syntax: '<color>'; inherits: true; initial-value: #ff4d4d; }
@property --success      { syntax: '<color>'; inherits: true; initial-value: #34d399; }
@property --warning      { syntax: '<color>'; inherits: true; initial-value: #fbbf24; }
@property --danger       { syntax: '<color>'; inherits: true; initial-value: #fb7185; }
@property --glass-bar    { syntax: '<color>'; inherits: true; initial-value: rgba(5,8,15,.72); }
@property --glass-bar-hi { syntax: '<color>'; inherits: true; initial-value: rgba(5,8,15,.93); }
@property --float-bg     { syntax: '<color>'; inherits: true; initial-value: rgba(12,20,37,.9); }
@property --input-bg     { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.035); }
@property --scrim        { syntax: '<color>'; inherits: true; initial-value: rgba(2,5,12,.7); }
@property --on-brand     { syntax: '<color>'; inherits: true; initial-value: #04121a; }
@property --grid-line    { syntax: '<color>'; inherits: true; initial-value: rgba(148,180,226,.06); }
@property --shadow-1     { syntax: '<color>'; inherits: true; initial-value: rgba(2,6,18,.35); }
@property --shadow-2     { syntax: '<color>'; inherits: true; initial-value: rgba(2,6,18,.45); }
@property --shadow-3     { syntax: '<color>'; inherits: true; initial-value: rgba(2,6,18,.55); }
@property --topbar       { syntax: '<color>'; inherits: true; initial-value: rgba(8,14,26,.86); }
@property --drawer       { syntax: '<color>'; inherits: true; initial-value: #0a1223; }
@property --footer-end   { syntax: '<color>'; inherits: true; initial-value: #04070e; }
@property --pre-hi       { syntax: '<color>'; inherits: true; initial-value: #0a1526; }
@property --orb-opacity  { syntax: '<number>'; inherits: true; initial-value: .5; }
@property --grain-opacity{ syntax: '<number>'; inherits: true; initial-value: .05; }

:root {
  color-scheme: dark;

  /* ---- core palette (dark = brand default) ---- */
  --bg:            #05080f;
  --bg-2:          #070d1a;
  --surface:       #0c1425;
  --surface-2:     #101b31;
  --surface-3:     #16233c;

  --line:          rgba(148, 180, 226, .13);
  --line-strong:   rgba(148, 180, 226, .24);

  --text:          #e7eefc;
  --text-dim:      #9db0cd;
  --text-mute:     #7186a6;
  --heading:       #ffffff;      /* semantic: heading ink, NOT literal white */

  /* translucent surface tints (glass building blocks) */
  --tint-a: rgba(255, 255, 255, .022);
  --tint-b: rgba(255, 255, 255, .05);
  --tint-c: rgba(255, 255, 255, .09);
  --tint-d: rgba(255, 255, 255, .18);

  /* brand ramps */
  --brand:         #22d3ee;
  --brand-1:       #22d3ee;
  --brand-2:       #3b82f6;
  --brand-3:       #7c5cff;
  --accent:        #ff8a1f;
  --accent-2:      #ff4d4d;
  --success:       #34d399;
  --warning:       #fbbf24;
  --danger:        #fb7185;

  --grad-brand:   linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
  --grad-accent:  linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);

  /* canvas network palette (rgb triplets, lerped in JS on theme change) */
  --canvas-link:   34, 211, 238;
  --canvas-node:   147, 200, 255;
  --canvas-hub:    127, 230, 245;
  --canvas-beam:   124, 92, 255;

  /* chrome */
  --glass-bar:     rgba(5, 8, 15, .72);
  --glass-bar-hi:  rgba(5, 8, 15, .93);
  --grain-opacity: .05;
  --map-filter:    grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg);
  --input-bg:      rgba(255, 255, 255, .035);
  --scrim:         rgba(2, 5, 12, .7);
  --on-brand:      #04121a;                 /* ink on top of brand gradients */
  --grid-line:     rgba(148, 180, 226, .06);
  --float-bg:      rgba(12, 20, 37, .9);
  --topbar:        rgba(8, 14, 26, .86);
  --drawer:        #0a1223;
  --footer-end:    #04070e;
  --pre-hi:        #0a1526;
  --photo-o:       .30;
  --orb-opacity:   .5;

  /* elevation — built from interpolatable ink tokens */
  --shadow-1: rgba(2, 6, 18, .35);
  --shadow-2: rgba(2, 6, 18, .45);
  --shadow-3: rgba(2, 6, 18, .55);
  --sh-1: 0 2px 8px var(--shadow-1);
  --sh-2: 0 12px 30px var(--shadow-2);
  --sh-3: 0 26px 60px var(--shadow-3);
  --sh-brand: 0 14px 34px color-mix(in srgb, var(--brand-1) 28%, transparent);
  --sh-accent: 0 14px 34px color-mix(in srgb, var(--accent) 28%, transparent);

  /* type */
  --font-head-en: 'Sora', 'Poppins', system-ui, sans-serif;
  --font-body-en: 'Inter', 'Poppins', system-ui, sans-serif;
  --font-bn:      'Hind Siliguri', 'Noto Sans Bengali', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, 'Hind Siliguri', 'Noto Sans Bengali', monospace;

  --fs-hero:  clamp(2.55rem, 5.4vw, 4.35rem);
  --fs-h2:    clamp(1.95rem, 3.7vw, 3rem);
  --fs-h3:    1.24rem;
  --fs-h4:    1.04rem;
  --fs-body:  .98rem;
  --fs-sm:    .88rem;
  --fs-xs:    .76rem;

  /* rhythm */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(70px, 9.5vw, 132px);

  /* corner scale — one ladder, used everywhere (never ad-hoc radii) */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* motion */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-theme:  cubic-bezier(.4, 0, .2, 1);
  --theme-dur:   .55s;
  --t-fast: .18s var(--ease);
  --t:      .32s var(--ease);
  --t-slow: .7s  var(--ease-out);

  --nav-h: 78px;
}

/* One transition on <html> morphs EVERY registered token at once; because the
   tokens inherit, the entire page cross-fades as a single smooth motion.   */
html {
  /* Core tokens only: these carry ~all of the perceived change. Shadows,
     tints and chrome inks snap instead, halving the per-frame style recalc
     without a visible difference (they are low-alpha overlays). */
  transition:
    --bg var(--theme-dur) var(--ease-theme),
    --bg-2 var(--theme-dur) var(--ease-theme),
    --surface var(--theme-dur) var(--ease-theme),
    --surface-2 var(--theme-dur) var(--ease-theme),
    --surface-3 var(--theme-dur) var(--ease-theme),
    --line var(--theme-dur) var(--ease-theme),
    --line-strong var(--theme-dur) var(--ease-theme),
    --text var(--theme-dur) var(--ease-theme),
    --text-dim var(--theme-dur) var(--ease-theme),
    --text-mute var(--theme-dur) var(--ease-theme),
    --heading var(--theme-dur) var(--ease-theme),
    --brand var(--theme-dur) var(--ease-theme),
    --brand-1 var(--theme-dur) var(--ease-theme),
    --brand-2 var(--theme-dur) var(--ease-theme),
    --brand-3 var(--theme-dur) var(--ease-theme),
    --accent var(--theme-dur) var(--ease-theme),
    --topbar var(--theme-dur) var(--ease-theme),
    --drawer var(--theme-dur) var(--ease-theme),
    --footer-end var(--theme-dur) var(--ease-theme),
    --pre-hi var(--theme-dur) var(--ease-theme),
    --orb-opacity var(--theme-dur) var(--ease-theme),
    --photo-o var(--theme-dur) var(--ease-theme),
    --grain-opacity var(--theme-dur) var(--ease-theme);
}

/* =============================== LIGHT THEME ============================== */
/* Phones: do NOT interpolate the tree. A per-frame style recalc of the whole
   document is exactly what stutters on weak CPUs; instead the palette snaps
   in a single recalc, hidden behind the composited sweep flash (which runs on
   the compositor thread and therefore never janks). Desktop keeps the full
   token interpolation. */
html.is-touch { transition: none; }

html[data-theme="light"] {
  color-scheme: light;

  --bg:            #f4f7fc;
  --bg-2:          #eaeff8;
  --surface:       #ffffff;
  --surface-2:     #f8fafd;
  --surface-3:     #eef3fa;

  --line:          rgba(16, 42, 80, .11);
  --line-strong:   rgba(16, 42, 80, .19);

  --text:          #16233a;
  --text-dim:      #4b5d78;
  --text-mute:     #74869f;
  --heading:       #0a1424;

  --tint-a: rgba(16, 42, 80, .022);
  --tint-b: rgba(16, 42, 80, .045);
  --tint-c: rgba(16, 42, 80, .075);
  --tint-d: rgba(16, 42, 80, .16);

  --brand:         #0a66d0;      /* corporate trust-blue */
  --brand-1:       #2f86e8;
  --brand-2:       #2743c9;
  --brand-3:       #6d4aff;
  --accent:        #ea6a00;
  --accent-2:      #e11d48;
  --success:       #059669;
  --warning:       #b45309;
  --danger:        #e11d48;

  --canvas-link:   10, 102, 208;
  --canvas-node:   37, 99, 235;
  --canvas-hub:    47, 134, 232;
  --canvas-beam:   109, 74, 255;

  --glass-bar:     rgba(255, 255, 255, .74);
  --glass-bar-hi:  rgba(255, 255, 255, .92);
  --photo-o:       .50;
  --grain-opacity: .028;
  --map-filter:    grayscale(.2) saturate(.9) contrast(.95);
  --input-bg:      rgba(16, 42, 80, .035);
  --scrim:         rgba(226, 233, 244, .66);
  --on-brand:      #ffffff;
  --grid-line:     rgba(16, 42, 80, .07);
  --float-bg:      rgba(255, 255, 255, .86);
  --topbar:        rgba(255, 255, 255, .82);
  --drawer:        #ffffff;
  --footer-end:    #e6ecf6;
  --pre-hi:        #ffffff;
  --orb-opacity:   .3;

  --shadow-1: rgba(23, 43, 77, .08);
  --shadow-2: rgba(23, 43, 77, .12);
  --shadow-3: rgba(23, 43, 77, .16);
}

/* Language-driven type faces */
html                 { --font-head: var(--font-head-en); --font-body: var(--font-body-en); }
html[data-lang="bn"] { --font-head: var(--font-bn);      --font-body: var(--font-bn); }
html[data-lang="en"] { --font-head: var(--font-head-en); --font-body: var(--font-body-en); }

html[data-lang="bn"] body { line-height: 1.85; }
html[data-lang="bn"] h1,
html[data-lang="bn"] h2,
html[data-lang="bn"] h3 { line-height: 1.45; letter-spacing: 0; }

/* ------------------------------ 2. RESET --------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: auto;              /* JS drives eased anchor scrolling */
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;           /* no width jump when scrollbars/locks change */
}
html:not(.js) { scroll-behavior: smooth; }

body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-x: none;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* NOTE: no colour transition here on purpose. The registered tokens on
     <html> already interpolate; a second transition on body would chain
     behind them and make the switch feel laggy. */
}

/* Film-grain overlay — the subtle texture premium brands use */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 1400;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* NOTE: no mix-blend-mode — a full-viewport blended layer forces a
     whole-screen recomposite on every scroll frame (frame-drop source).
     Plain alpha reads the same at these opacities. */
}
html[data-theme="light"] body::after { opacity: calc(var(--grain-opacity) * 1.6); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.22;
  color: var(--heading);
  letter-spacing: -.015em;
  transition: color .5s var(--ease);
}

a, button, select, .filter { touch-action: manipulation; }   /* kills mobile tap delay */
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
ul, ol { list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
blockquote { margin: 0; }
table { border-collapse: collapse; }

::selection { background: var(--brand); color: #04121a; }
html[data-theme="light"] ::selection { color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
  border-radius: 99px;
  border: 2px solid var(--bg);
}
html { scrollbar-color: var(--brand) var(--bg); scrollbar-width: thin; }

/* ------------------------------ 3. PRIMITIVES ---------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 900px; }

.section { padding-block: var(--section-y); position: relative; }
.section--alt {
  background:
    radial-gradient(900px 420px at 8% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 60%),
    var(--bg-2);
  border-block: 1px solid var(--line);
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
}
.section--tight { padding-block: clamp(40px, 6vw, 72px); }

/* Icons */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon--xs { width: 14px; height: 14px; stroke-width: 2.1; }
.icon--sm { width: 17px; height: 17px; stroke-width: 1.9; }
.icon--lg { width: 30px; height: 30px; }
.icon--xl { width: 44px; height: 44px; }

/* ------------------------------ 4. TYPO HELPERS -------------------------- */
.section-head { text-align: center; max-width: 800px; margin: 0 auto clamp(42px, 5.4vw, 70px); }

.section-tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 17px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 20px;
  backdrop-filter: blur(6px);
}
html[data-lang="bn"] .section-tag { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }

/* Editorial index number: "01 / Services" — a luxury-brand signature */
.section-tag__num {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .72rem;
  font-weight: 600;
  opacity: .75;
  padding-right: 9px;
  border-right: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  letter-spacing: .04em;
}

.section-title {
  font-size: var(--fs-h2);
  margin-bottom: 16px;
  text-wrap: balance;
  letter-spacing: -.025em;
}
html[data-lang="bn"] .section-title { letter-spacing: 0; }
.section-title em {
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-desc {
  font-size: 1.02rem;
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.9;
  max-width: 680px;
  margin-inline: auto;
  text-wrap: pretty;
}
.section-desc--left { margin-inline: 0; text-align: left; max-width: none; margin-bottom: 14px; }

.text-center { text-align: center; }
.mono { font-family: var(--font-mono); }

/* Numbers never jitter while counting or switching language */
.stat__num, .price-card__num, .nstat__value, .skill__val, .about__exp-num {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------ 5. UTILITIES ----------------------------- */
.skip-link {
  position: fixed; top: 12px; left: 50%;
  transform: translate(-50%, -160%);
  z-index: 9999;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--brand); color: #04121a;
  font-weight: 700; font-size: var(--fs-sm);
  transition: transform var(--t);
}
.skip-link:focus { transform: translate(-50%, 0); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.badge-glass,
.glass {
  background: linear-gradient(150deg, var(--tint-c), var(--tint-a));
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 60%, transparent);
  animation: dotPulse 2s infinite;
  flex-shrink: 0;
}
.pulse-dot--green { background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); }

.check-list { display: grid; gap: 14px; margin-block: 24px 30px; }
.check-list li {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--text); font-size: .95rem;
}
.check-list .icon {
  width: 22px; height: 22px; padding: 4px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  border-radius: 50%;
  flex-shrink: 0; margin-top: 3px;
}

/* ------------------------------ 6. CUSTOM CURSOR -------------------------- */
.cursor-dot,
.cursor-ring {
  position: fixed; top: 0; left: 0;
  z-index: 1300;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease), width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease);
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--brand);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 70%, transparent);
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid color-mix(in srgb, var(--brand) 55%, transparent);
}
.cursor-ring.is-hover {
  width: 58px; height: 58px;
  border-color: color-mix(in srgb, var(--brand) 90%, transparent);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
html.is-touch .cursor-dot,
html.is-touch .cursor-ring,
html.is-touch .cursor-glow { display: none; }