/* v3 fonts, self-hosted (SIL Open Font License, see fonts/cyber/LICENSE-*). Bengali loads only when Bengali text is on the page. */
@font-face { font-family: 'Rajdhani'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/cyber/rajdhani-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/cyber/rajdhani-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/cyber/rajdhani-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/cyber/rajdhani-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-display: swap; font-weight: 700; src: url(../fonts/cyber/rajdhani-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-display: swap; font-weight: 700; src: url(../fonts/cyber/rajdhani-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/cyber/barlow-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/cyber/barlow-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hind Siliguri'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/cyber/hind-siliguri-bengali-400-normal.woff2) format('woff2'); unicode-range: U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1; }
@font-face { font-family: 'Barlow'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/cyber/barlow-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/cyber/barlow-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hind Siliguri'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/cyber/hind-siliguri-bengali-500-normal.woff2) format('woff2'); unicode-range: U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1; }
@font-face { font-family: 'Barlow'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/cyber/barlow-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/cyber/barlow-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hind Siliguri'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/cyber/hind-siliguri-bengali-600-normal.woff2) format('woff2'); unicode-range: U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1; }

/* ==========================================================================
   v3 · CYBERPUNK — loaded after next.css only when design v3 is active.
   Neon-noir HUD: signal yellow panels, electric cyan lines, hot red alerts,
   angular cut corners, segmented bars. One orchestrated moment: the hero glitch.
   Type: Rajdhani (display / UI, condensed square) + Barlow (text). Bengali falls back to Hind Siliguri.
   ========================================================================== */
[data-design="v3"] {
  --n-font-body: "Barlow", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
  --n-font-head: "Rajdhani", "Hind Siliguri", "Barlow", system-ui, sans-serif;
  --n-accent: var(--a-n); --n-on-accent: #0e0b16;
  --n-bg: #0e0b16; --n-bg-2: #130f1d; --n-surface: #17121f; --n-surface-2: #1f1829;
  --n-border: rgba(45, 226, 255, .2); --n-text: #ecf3f6; --n-muted: #a2abc0;
  --n-radius: 0; --n-radius-sm: 0;
  --n-shadow: none; --n-shadow-lg: 0 0 0 1px rgba(45, 226, 255, .25), 0 24px 50px -24px rgba(0, 0, 0, .9);
  --cp-cyan: #2de2ff; --cp-red: #ff2a6d; --cp-well: #0a0810;
  --cut: 14px;
  --cp-notch: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  --cp-notch-b: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  color-scheme: dark;
}
html[lang="bn"][data-design="v3"] { --n-font-body: "Barlow", "Hind Siliguri", "Noto Sans Bengali", sans-serif; --n-font-head: "Rajdhani", "Hind Siliguri", "Noto Sans Bengali", sans-serif; }

/* ---------- base ---------- */
[data-design="v3"] body { font-size: 1.04rem; line-height: 1.7; }
[data-design="v3"] body::before {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(45, 226, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(45, 226, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
    radial-gradient(70vw 50vw at 100% 0, rgba(255, 42, 109, .07), transparent 60%),
    var(--n-bg);
}
[data-design="v3"] h1, [data-design="v3"] h2, [data-design="v3"] h3, [data-design="v3"] h4 { font-family: var(--n-font-head); font-weight: 700; letter-spacing: .01em; text-transform: uppercase; line-height: 1.02; }
[data-design="v3"] h3 { line-height: 1.15; }
[data-design="v3"] a { color: var(--cp-cyan); }
[data-design="v3"] :focus-visible { outline: 2px solid var(--cp-cyan); outline-offset: 3px; border-radius: 0; }
[data-design="v3"] ::selection { background: var(--n-accent); color: var(--n-on-accent); }
[data-design="v3"] .skip-link { border-radius: 0; }
[data-design="v3"] .reveal { opacity: 1; transform: none; transition: none; }

/* ---------- navbar: a solid HUD bar ---------- */
[data-design="v3"] .site-nav, [data-design="v3"] .site-nav.is-scrolled { padding: 0; background: rgba(14, 11, 22, .97); -webkit-backdrop-filter: none; backdrop-filter: none; } /* no blur: a filter here would trap the fixed mobile menu inside the bar */
[data-design="v3"] .site-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--n-accent) 0 22%, transparent 22% 22.6%, var(--cp-red) 22.6% 24%, rgba(45, 226, 255, .25) 24%); }
[data-design="v3"] .site-nav .nav-shell { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 12px 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-design="v3"] .brand, [data-design="v3"] .brand:hover { color: var(--n-text); }
[data-design="v3"] .brand { font-family: var(--n-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1.15rem; }
[data-design="v3"] .brand img { border-radius: 0; border: 0; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); box-shadow: inset 0 0 0 2px var(--n-accent); }
[data-design="v3"] .site-nav .nav-link { border-radius: 0; background: none; font-family: var(--n-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .9rem; color: var(--n-muted); padding: .45rem .75rem; position: relative; }
[data-design="v3"] .site-nav .nav-link:hover { background: none; color: var(--cp-cyan); }
[data-design="v3"] .site-nav .nav-link.active { background: none; color: var(--n-accent); }
[data-design="v3"] .site-nav .nav-link.active::before { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: -1px; height: 2px; background: var(--n-accent); }
[data-design="v3"] .icon-btn { border-radius: 0; background: transparent; border-color: rgba(45, 226, 255, .35); color: var(--cp-cyan); clip-path: var(--cp-notch); }
[data-design="v3"] .icon-btn:hover { transform: none; background: rgba(45, 226, 255, .1); }
@media (max-width: 991.98px) {
  [data-design="v3"] .offcanvas { background: var(--n-bg); border-left: 2px solid var(--n-accent) !important; }
  [data-design="v3"] .site-nav .nav-shell { padding: 8px 0 !important; }
  [data-design="v3"] .offcanvas .nav-link { font-size: 1.7rem; letter-spacing: .06em; color: var(--n-text); padding: .55rem 0; }
  [data-design="v3"] .offcanvas .nav-link.active { color: var(--n-accent); }
  [data-design="v3"] .offcanvas .nav-link.active::before { left: 0; right: auto; width: 2.4rem; }
}

/* ---------- buttons, chips ---------- */
[data-design="v3"] .btn-n, [data-design="v3"] .btn-n-ghost { border-radius: 0; border: 0; font-family: var(--n-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; clip-path: var(--cp-notch-b); padding: 0 1.6rem 0 1.4rem; }
[data-design="v3"] .btn-n { background: var(--n-accent); color: var(--n-on-accent); box-shadow: none; }
[data-design="v3"] .btn-n:hover { transform: none; box-shadow: none; color: var(--n-on-accent); background: color-mix(in srgb, var(--n-accent) 80%, #fff); }
[data-design="v3"] .btn-n-ghost { background: transparent; color: var(--cp-cyan); box-shadow: inset 0 0 0 1.5px var(--cp-cyan); }
[data-design="v3"] .btn-n-ghost:hover { transform: none; color: var(--n-on-accent); background: var(--cp-cyan); }
[data-design="v3"] .btn-n:focus-visible, [data-design="v3"] .btn-n-ghost:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px var(--n-bg), inset 0 0 0 5px var(--cp-cyan); }
[data-design="v3"] .btn-n:active, [data-design="v3"] .btn-n-ghost:active { transform: translate(1px, 1px); }
[data-design="v3"] .chip { border-radius: 0; background: rgba(45, 226, 255, .08); border: 0; border-left: 3px solid var(--cp-cyan); color: var(--cp-cyan); font-family: var(--n-font-head); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }

/* ---------- cards: HUD panels with a cut corner and a status tick ---------- */
[data-design="v3"] .n-card {
  --_bd: var(--n-border);
  border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; clip-path: var(--cp-notch);
  background: linear-gradient(225deg, transparent calc(var(--cut) * .707 - .6px), var(--_bd) calc(var(--cut) * .707 - .6px) calc(var(--cut) * .707 + .8px), transparent calc(var(--cut) * .707 + .8px)), var(--n-surface);
  border: 1px solid var(--_bd);
}
[data-design="v3"] .n-card::before { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--n-accent); z-index: 3; pointer-events: none; }
[data-design="v3"] a.n-card:hover, [data-design="v3"] .n-card.is-hover:hover { transform: none; box-shadow: none; --_bd: color-mix(in srgb, var(--cp-cyan) 70%, transparent); }

/* ---------- sections ---------- */
[data-design="v3"] .page-section.alt { background: linear-gradient(180deg, rgba(45, 226, 255, .14) 0 1px, transparent 1px), var(--n-bg-2); }
[data-design="v3"] .eyebrow { font-family: var(--n-font-head); font-weight: 600; font-size: .92rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-cyan); gap: .55rem; }
[data-design="v3"] .eyebrow::before { width: 8px; height: 8px; border-radius: 0; background: var(--cp-red); }
[data-design="v3"] .section-head h2 { font-size: clamp(2.4rem, 5.6vw, 4rem); font-weight: 700; }
[data-design="v3"] .section-head h2::after { content: ""; display: block; width: 120px; height: 4px; margin-top: .9rem; background: linear-gradient(90deg, var(--n-accent) 0 60%, transparent 60% 68%, var(--n-accent) 68% 78%, transparent 78% 86%, var(--cp-red) 86%); }
[data-design="v3"] .section-head.center h2::after { margin-inline: auto; }
[data-design="v3"] .sub-head { font-family: var(--n-font-head); font-weight: 700; text-transform: uppercase; font-size: 1.45rem; letter-spacing: .04em; }

/* ---------- hero: the one loud panel ---------- */
[data-design="v3"] .hero {
  min-height: min(100svh, 940px); padding: calc(var(--n-nav-h) + 3rem) 0 7rem; color: var(--n-on-accent); background: var(--n-accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), calc(100% - 260px) 100%, 0 100%);
}
[data-design="v3"] .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(14, 11, 22, .2) 1.3px, transparent 1.8px) 0 0 / 12px 12px;
  -webkit-mask: linear-gradient(105deg, transparent 42%, #000 88%); mask: linear-gradient(105deg, transparent 42%, #000 88%); }
[data-design="v3"] .hero-bg, [data-design="v3"] .hero::after, [data-design="v3"] .scroll-hint, [data-design="v3"] .hero-kicker { display: none !important; }
[data-design="v3"] .hero h1 { color: var(--n-on-accent); font-size: clamp(1rem, 2vw, 1.25rem); letter-spacing: .3em; font-weight: 600; margin: 0 0 .6rem; }
[data-design="v3"] .hero h1 .grad { display: block; background: none; color: var(--n-on-accent); -webkit-background-clip: border-box; background-clip: border-box;
  font-size: clamp(3.4rem, 10.5vw, 9rem); line-height: .84; letter-spacing: -.01em; margin-top: .6rem; text-wrap: balance; position: relative; }
[data-design="v3"] .hero-role { color: var(--n-on-accent); font-family: var(--n-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(1.05rem, 2vw, 1.35rem); margin: 1.6rem 0 2rem; }
[data-design="v3"] .hero-role .typed { background: var(--n-on-accent); color: var(--n-accent); padding: .05em .4em .02em; border-right: 0; animation: none; font-weight: 700; }
[data-design="v3"] .hero-role .typed::after { content: ""; display: inline-block; width: .55em; height: .9em; margin-left: .2em; vertical-align: -.08em; background: var(--cp-red); animation: cp-blink 1s steps(1) infinite; }
@keyframes cp-blink { 50% { opacity: 0; } }
[data-design="v3"] .hero .btn-n { background: var(--n-on-accent); color: var(--n-accent); }
[data-design="v3"] .hero .btn-n:hover { background: #2a2236; color: var(--n-accent); }
[data-design="v3"] .hero .btn-n-ghost { color: var(--n-on-accent); box-shadow: inset 0 0 0 2px var(--n-on-accent); }
[data-design="v3"] .hero .btn-n-ghost:hover { background: var(--n-on-accent); color: var(--n-accent); }
[data-design="v3"] .hero .btn-n:focus-visible, [data-design="v3"] .hero .btn-n-ghost:focus-visible { box-shadow: inset 0 0 0 3px var(--n-accent), inset 0 0 0 5px var(--n-on-accent); }
[data-design="v3"] .hero :focus-visible { outline-color: var(--n-on-accent); }
[data-design="v3"] .hero-stats { gap: clamp(1.2rem, 4vw, 3rem); margin-top: 2.6rem; }
[data-design="v3"] .hero-stats > div { border-left: 3px solid var(--n-on-accent); padding-left: .8rem; }
[data-design="v3"] .hero-stats strong { font-family: var(--n-font-head); font-weight: 700; font-size: 2.6rem; color: var(--n-on-accent); }
[data-design="v3"] .hero-stats span { color: var(--n-on-accent); opacity: .78; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 600; }
[data-design="v3"] .hero .col-lg-5.d-none { display: block !important; }
[data-design="v3"] .hero-photo { width: min(80vw, 430px); }
[data-design="v3"] .hero-photo::before { display: none; }
[data-design="v3"] .hero-photo img { border-radius: 0; border: 0; animation: none; box-shadow: none; clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 46px 100%, 0 calc(100% - 46px));
 }
[data-design="v3"] .hero-photo { filter: drop-shadow(6px 0 0 rgba(255, 42, 109, .9)) drop-shadow(-6px 0 0 rgba(45, 226, 255, .9)); }
[data-design="v3"] .hero-photo::after { content: ""; position: absolute; inset: -14px; pointer-events: none;
  background:
    linear-gradient(var(--n-on-accent), var(--n-on-accent)) left top / 34px 4px no-repeat, linear-gradient(var(--n-on-accent), var(--n-on-accent)) left top / 4px 34px no-repeat,
    linear-gradient(var(--n-on-accent), var(--n-on-accent)) right bottom / 34px 4px no-repeat, linear-gradient(var(--n-on-accent), var(--n-on-accent)) right bottom / 4px 34px no-repeat; }
/* the one orchestrated moment: the name glitches in, then holds still */
@media (prefers-reduced-motion: no-preference) {
  [data-design="v3"] .hero h1 .grad { animation: cp-glitch .9s steps(1) .25s both; }
  [data-design="v3"] .hero-photo img { animation: cp-flicker .7s steps(1) .1s both; }
}
@keyframes cp-glitch {
  0%   { opacity: 0; }
  10%  { opacity: 1; clip-path: inset(0 0 62% 0); transform: translate(-8px, 0); text-shadow: 6px 0 var(--cp-red), -6px 0 var(--cp-cyan); }
  22%  { clip-path: inset(48% 0 12% 0); transform: translate(10px, 0); text-shadow: -5px 0 var(--cp-red), 5px 0 var(--cp-cyan); }
  34%  { clip-path: inset(18% 0 40% 0); transform: translate(-4px, 0); }
  46%  { clip-path: inset(0); transform: translate(3px, 0); text-shadow: 3px 0 var(--cp-red), -3px 0 var(--cp-cyan); }
  60%  { clip-path: inset(70% 0 0 0); transform: none; }
  72%  { clip-path: inset(0); text-shadow: 2px 0 var(--cp-red), -2px 0 var(--cp-cyan); }
  100% { clip-path: none; transform: none; text-shadow: none; }
}
@keyframes cp-flicker { 0% { opacity: 0; } 20% { opacity: 1; } 30% { opacity: .2; } 45% { opacity: 1; } 55% { opacity: .5; } 70%, 100% { opacity: 1; } }
@media (max-width: 991.98px) {
  [data-design="v3"] .hero { min-height: 0; padding: calc(var(--n-nav-h) + 2rem) 0 6rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), calc(100% - 120px) 100%, 0 100%); }
  [data-design="v3"] .hero .row { flex-direction: column-reverse; }
  [data-design="v3"] .hero-photo { width: min(64vw, 300px); margin: 0 0 0 14px; }
}
@media (max-width: 575.98px) {
  [data-design="v3"] .hero-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1rem; }
  [data-design="v3"] .hero-stats strong { font-size: 2rem; }
}

/* ---------- about, services, counters ---------- */
[data-design="v3"] .about-img { border-radius: 0; border: 0; box-shadow: none; background: transparent; clip-path: var(--cp-notch); position: relative; }
[data-design="v3"] .about-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(14, 11, 22, .18) 0 1px, transparent 1px 3px); }
[data-design="v3"] .about-loc { color: var(--cp-red); font-family: var(--n-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
[data-design="v3"] .about-text p { color: var(--n-text); opacity: .86; max-width: 64ch; }
[data-design="v3"] .stat-ico, [data-design="v3"] .info-card .ico, [data-design="v3"] .svc .ico { border-radius: 0; background: rgba(45, 226, 255, .08); border: 1px solid rgba(45, 226, 255, .35); color: var(--cp-cyan); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
[data-design="v3"] .stat-tile strong { font-family: var(--n-font-head); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; }
[data-design="v3"] .svc h3 { font-size: 1.5rem; }
[data-design="v3"] .cta-band { border-radius: 0; clip-path: var(--cp-notch-b); }
[data-design="v3"] .cta-band::before { background: linear-gradient(100deg, rgba(14, 11, 22, .95) 0%, rgba(14, 11, 22, .75) 55%, rgba(255, 42, 109, .45) 100%); }
[data-design="v3"] .cta-band small { color: var(--cp-cyan); font-family: var(--n-font-head); letter-spacing: .16em; opacity: 1; }
[data-design="v3"] .cta-band h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
[data-design="v3"] .play-btn { border-radius: 0; background: var(--n-accent); color: var(--n-on-accent); clip-path: var(--cp-notch-b); }
[data-design="v3"] .play-btn::before, [data-design="v3"] .play-btn::after { display: none; }
[data-design="v3"] .counter .ico { color: var(--cp-red); }
[data-design="v3"] .counter .num { font-family: var(--n-font-head); font-weight: 700; font-size: clamp(2.8rem, 6vw, 4rem); color: var(--n-accent); }
[data-design="v3"] .counter h3 { text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }

/* ---------- pricing ---------- */
[data-design="v3"] .price-card.featured { --_bd: var(--n-accent); box-shadow: none; transform: none; }
[data-design="v3"] .price-card .badge-feat { border-radius: 0; top: 0; right: auto; left: 0; font-family: var(--n-font-head); font-weight: 700; font-size: .8rem; letter-spacing: .1em; padding: .35rem .9rem; clip-path: var(--cp-notch-b); }
[data-design="v3"] .price-card.featured .p-ico { margin-top: 1.4rem; }
[data-design="v3"] .price-card h3 { font-size: 1.5rem; }
[data-design="v3"] .price { font-family: var(--n-font-head); font-weight: 700; font-size: 3.4rem; }
[data-design="v3"] .price-list li::before { content: ""; width: 7px; height: 7px; margin-top: .62rem; background: var(--cp-cyan); flex: none; }

/* ---------- testimonials, clients ---------- */
[data-design="v3"] .t-quote blockquote { font-size: 1.1rem; }
[data-design="v3"] .t-quote blockquote::before { content: "//"; display: block; font-family: var(--n-font-head); font-weight: 700; color: var(--cp-red); margin-bottom: .3rem; }
[data-design="v3"] .t-quote .who img { border-radius: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
[data-design="v3"] .t-quote .who strong { font-family: var(--n-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; }
[data-design="v3"] .stars { color: var(--n-accent); }
[data-design="v3"] .stars .off { color: rgba(236, 243, 246, .18); }
[data-design="v3"] .logo-wall .logo { border-radius: 0; background: var(--n-surface); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }

/* ---------- resume ---------- */
[data-design="v3"] .timeline::before { background: linear-gradient(var(--cp-cyan), var(--cp-red)); opacity: .55; width: 2px; }
[data-design="v3"] .tl-ico { border-radius: 0; background: var(--cp-well); border: 1px solid rgba(45, 226, 255, .4); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
[data-design="v3"] .tl-item.current .tl-ico { border: 2px solid var(--n-accent); box-shadow: none; }
[data-design="v3"] .tl-item.current .tl-card { --_bd: color-mix(in srgb, var(--n-accent) 60%, transparent); }
[data-design="v3"] .tl-card h3 { font-size: 1.35rem; }
[data-design="v3"] .tl-card h3 .place { color: var(--cp-cyan); font-weight: 600; }
[data-design="v3"] .tl-card p { color: var(--n-text); opacity: .8; }
[data-design="v3"] .skill .top { font-family: var(--n-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
[data-design="v3"] .skill .top span { color: var(--n-accent); }
[data-design="v3"] .bar { height: 10px; border-radius: 0; border: 0; background: repeating-linear-gradient(90deg, rgba(45, 226, 255, .16) 0 8px, transparent 8px 11px); }
[data-design="v3"] .bar > i { border-radius: 0; background: var(--n-accent); -webkit-mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 11px); mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 11px); }

/* ---------- portfolio ---------- */
[data-design="v3"] .filters { gap: .5rem; }
[data-design="v3"] .filters button { border-radius: 0; border: 1px solid rgba(45, 226, 255, .3); background: transparent; color: var(--n-text); font-family: var(--n-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-design="v3"] .filters button:hover { border-color: var(--cp-cyan); color: var(--cp-cyan); }
[data-design="v3"] .filters button[aria-pressed="true"] { background: var(--n-accent); border-color: var(--n-accent); color: var(--n-on-accent); }
[data-design="v3"] .work { background: var(--n-surface); }
[data-design="v3"] .work::after { background: linear-gradient(180deg, transparent 35%, rgba(14, 11, 22, .95)), repeating-linear-gradient(0deg, rgba(14, 11, 22, .2) 0 1px, transparent 1px 3px); }
[data-design="v3"] .work:hover img { transform: scale(1.04); }
[data-design="v3"] .work h3 { font-size: 1.45rem; }
[data-design="v3"] .work .cat { color: var(--cp-cyan); opacity: 1; font-family: var(--n-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
[data-design="v3"] .work .tools button, [data-design="v3"] .work .tools a { border-radius: 0; background: var(--n-accent); color: var(--n-on-accent); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
[data-design="v3"] .lightbox img { border-radius: 0; }
[data-design="v3"] .lb-nav { border-radius: 0; }

/* ---------- blog ---------- */
[data-design="v3"] .post-card .views { border-radius: 0; background: var(--n-accent); color: var(--n-on-accent); -webkit-backdrop-filter: none; backdrop-filter: none; font-family: var(--n-font-head); }
[data-design="v3"] .post-card h3, [data-design="v3"] .post-card h2 { font-size: 1.4rem; }
[data-design="v3"] .post-card .meta { font-family: var(--n-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
[data-design="v3"] .post-card .meta a { color: var(--cp-red); }
[data-design="v3"] .post-card .more { font-family: var(--n-font-head); text-transform: uppercase; letter-spacing: .1em; color: var(--n-accent); }
[data-design="v3"] .inner-top { padding-bottom: 2.4rem; }
[data-design="v3"] .inner-top h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: .95; max-width: 20ch; text-wrap: balance; }
[data-design="v3"] .inner-top h1::after { content: ""; display: block; width: 120px; height: 4px; margin-top: 1rem; background: linear-gradient(90deg, var(--n-accent) 0 60%, transparent 60% 68%, var(--n-accent) 68% 78%, transparent 78% 86%, var(--cp-red) 86%); }
[data-design="v3"] .crumbs { font-family: var(--n-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
[data-design="v3"] .crumbs li + li::before { content: "//"; color: var(--cp-red); opacity: 1; }
[data-design="v3"] .crumbs a { color: var(--n-muted); }
[data-design="v3"] .widget h2, [data-design="v3"] .widget h4 { font-size: 1.25rem; letter-spacing: .06em; }
[data-design="v3"] .mini-post img { border-radius: 0; }
[data-design="v3"] .mini-post h3 { font-family: var(--n-font-body); font-weight: 600; text-transform: none; letter-spacing: 0; }
[data-design="v3"] .mini-post:hover { color: var(--cp-cyan); }
[data-design="v3"] .cat-list a { border-radius: 0; font-family: var(--n-font-head); text-transform: uppercase; letter-spacing: .06em; }
[data-design="v3"] .cat-list a:hover, [data-design="v3"] .cat-list a.active { background: rgba(45, 226, 255, .08); color: var(--cp-cyan); box-shadow: inset 3px 0 0 var(--cp-cyan); }
[data-design="v3"] .pagination li a, [data-design="v3"] .pagination li span, [data-design="v3"] .pagination .page-link { border-radius: 0 !important; font-family: var(--n-font-head); }
[data-design="v3"] .article-hero { border-radius: 0; border: 0; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
[data-design="v3"] .post-meta { font-family: var(--n-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
[data-design="v3"] .post-meta i { color: var(--cp-red); }
[data-design="v3"] .prose h2, [data-design="v3"] .prose h3 { letter-spacing: .02em; }
[data-design="v3"] .prose h2 { font-size: 2.1rem; } [data-design="v3"] .prose h3 { font-size: 1.55rem; }
[data-design="v3"] .prose blockquote { border-left: 3px solid var(--cp-red); background: rgba(255, 42, 109, .07); padding: .8rem 1.2rem; color: var(--n-text); font-style: normal; }
[data-design="v3"] .prose pre { background: var(--cp-well); border-radius: 0; border-color: rgba(45, 226, 255, .25); }
[data-design="v3"] .prose a { color: var(--cp-cyan); text-decoration: underline; text-underline-offset: 3px; }
[data-design="v3"] .share a, [data-design="v3"] .socials a { border-radius: 0; background: transparent; border: 1px solid rgba(45, 226, 255, .35); color: var(--cp-cyan); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
[data-design="v3"] .share a:hover, [data-design="v3"] .socials a:hover { transform: none; background: var(--n-accent); border-color: var(--n-accent); color: var(--n-on-accent); }
[data-design="v3"] .project-hero img { border-radius: 0; border: 0; clip-path: var(--cp-notch); }
[data-design="v3"] .pn { border-radius: 0; box-shadow: none; clip-path: var(--cp-notch); }
[data-design="v3"] .pn:hover { transform: none; border-color: var(--cp-cyan); }
[data-design="v3"] .pn small { letter-spacing: .14em; color: var(--cp-cyan); }
[data-design="v3"] .pn span { font-weight: 700; text-transform: uppercase; }
[data-design="v3"] .toc summary { text-transform: uppercase; letter-spacing: .06em; }
[data-design="v3"] .geo-box { border-left: 0; box-shadow: inset 4px 0 0 var(--n-accent); }
[data-design="v3"] .geo-h { text-transform: uppercase; letter-spacing: .1em; color: var(--cp-cyan); }
[data-design="v3"] .author-box img { border-radius: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
[data-design="v3"] .toc a:hover, [data-design="v3"] .toc a.on { color: var(--n-accent); }
[data-design="v3"] .quote-share { border-radius: 0; color: var(--cp-cyan); }

/* ---------- forms ---------- */
[data-design="v3"] .form-control, [data-design="v3"] .form-select { background-color: var(--cp-well); border-radius: 0; border-color: rgba(45, 226, 255, .28); }
[data-design="v3"] .form-control:focus, [data-design="v3"] .form-select:focus { background-color: var(--cp-well); border-color: var(--n-accent); box-shadow: 0 0 0 1px var(--n-accent), 0 0 18px -6px var(--n-accent); }
[data-design="v3"] .form-floating > label { font-family: var(--n-font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
[data-design="v3"] .form-floating > .form-control:focus ~ label, [data-design="v3"] .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--n-accent); }
[data-design="v3"] .form-floating > label::after { background: transparent !important; }
[data-design="v3"] .info-card h3 { font-size: 1.15rem; letter-spacing: .06em; }
[data-design="v3"] .info-card p { color: var(--n-text); opacity: .85; }
[data-design="v3"] .slots li { border-radius: 0; background: var(--cp-well); }
[data-design="v3"] .slots li i { border-radius: 0; background: #39ff88; color: #04210f; }
[data-design="v3"] #google-map { border-radius: 0; clip-path: var(--cp-notch); }

/* ---------- footer, utilities ---------- */
[data-design="v3"] .site-footer { border-top: 0; position: relative; }
[data-design="v3"] .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(45, 226, 255, .25) 0 76%, var(--cp-red) 76% 77.4%, transparent 77.4% 78%, var(--n-accent) 78%); }
[data-design="v3"] .progress-top { background: var(--n-accent); height: 3px; box-shadow: 0 0 12px var(--n-accent); }
[data-design="v3"] #preloader i { border-radius: 0; border: 0; width: 22px; height: 22px; background: var(--n-accent); animation: spin 1s steps(4) infinite; }
[data-design="v3"] .to-top { border-radius: 0; background: var(--n-bg); }
[data-design="v3"] .toast { border-radius: 0; background: var(--n-surface-2); }
[data-design="v3"] .toast.t-ok { border-left-color: #39ff88; } [data-design="v3"] .toast.t-err { border-left-color: var(--cp-red); }
[data-design="v3"] .alert { border-radius: 0; }
[data-design="v3"] .alert-warning { background: rgba(252, 238, 10, .1); color: var(--n-text); border: 1px solid rgba(252, 238, 10, .45); border-left: 4px solid #fcee0a; }
/* Bengali conjuncts break when letters are spaced apart */
html[lang="bn"][data-design="v3"] body *:not(i) { letter-spacing: 0 !important; }
html[lang="bn"][data-design="v3"] .hero h1 .grad { line-height: 1; }

/* ==========================================================================
   v3 LIGHT — "daylight HUD": concrete greys, ink black, the same signal yellow.
   Yellow never carries text on white; teal and red take over the line colours.
   ========================================================================== */
[data-design="v3"][data-bs-theme="light"] {
  --n-bg: #eceef2; --n-bg-2: #e2e5eb; --n-surface: #ffffff; --n-surface-2: #f4f5f8;
  --n-border: rgba(14, 11, 22, .16); --n-text: #0e0b16; --n-muted: #4a5165;
  --n-shadow-lg: 0 0 0 1px rgba(14, 11, 22, .12), 0 24px 48px -28px rgba(14, 11, 22, .35);
  --cp-cyan: #007487; --cp-red: #c8003f; --cp-well: #f8f9fb;
  color-scheme: light;
}
[data-design="v3"][data-bs-theme="light"] body::before {
  background:
    repeating-linear-gradient(0deg, rgba(14, 11, 22, .025) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(0, 116, 135, .06) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(0, 116, 135, .06) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--n-bg);
}
[data-design="v3"][data-bs-theme="light"] .site-nav, [data-design="v3"][data-bs-theme="light"] .site-nav.is-scrolled { background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 var(--n-border); }
[data-design="v3"][data-bs-theme="light"] .site-nav .nav-link.active,
[data-design="v3"][data-bs-theme="light"] .offcanvas .nav-link.active { color: var(--n-text); }
[data-design="v3"][data-bs-theme="light"] .site-nav .nav-link.active::before { height: 3px; }
[data-design="v3"][data-bs-theme="light"] .icon-btn { border-color: rgba(14, 11, 22, .25); color: var(--n-text); }
[data-design="v3"][data-bs-theme="light"] .n-card::before { background: var(--cp-red); }
[data-design="v3"][data-bs-theme="light"] .n-card, [data-design="v3"][data-bs-theme="light"] .filters button, [data-design="v3"][data-bs-theme="light"] .share a, [data-design="v3"][data-bs-theme="light"] .socials a { border-color: var(--n-border); }
[data-design="v3"][data-bs-theme="light"] .counter .num, [data-design="v3"][data-bs-theme="light"] .skill .top span,
[data-design="v3"][data-bs-theme="light"] .post-card .more, [data-design="v3"][data-bs-theme="light"] .toc a.on, [data-design="v3"][data-bs-theme="light"] .toc a:hover,
[data-design="v3"][data-bs-theme="light"] .form-floating > .form-control:focus ~ label, [data-design="v3"][data-bs-theme="light"] .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--n-text); }
[data-design="v3"][data-bs-theme="light"] .counter .num { text-decoration: underline; text-decoration-color: var(--n-accent); text-decoration-thickness: 6px; text-underline-offset: -2px; text-decoration-skip-ink: none; }
[data-design="v3"][data-bs-theme="light"] .bar { background: repeating-linear-gradient(90deg, rgba(14, 11, 22, .1) 0 8px, transparent 8px 11px); }
[data-design="v3"][data-bs-theme="light"] .bar > i { background: var(--n-text); }
[data-design="v3"][data-bs-theme="light"] .form-control, [data-design="v3"][data-bs-theme="light"] .form-select { border-color: rgba(14, 11, 22, .25); }
[data-design="v3"][data-bs-theme="light"] .form-control:focus, [data-design="v3"][data-bs-theme="light"] .form-select:focus { border-color: var(--n-text); box-shadow: 0 0 0 3px rgba(252, 238, 10, .9); }
[data-design="v3"][data-bs-theme="light"] .page-section.alt { background: linear-gradient(180deg, rgba(14, 11, 22, .1) 0 1px, transparent 1px), var(--n-bg-2); }
[data-design="v3"][data-bs-theme="light"] .logo-wall img { filter: grayscale(1); opacity: .7; }
[data-design="v3"][data-bs-theme="light"] .stars .off { color: rgba(14, 11, 22, .15); }
[data-design="v3"][data-bs-theme="light"] .stars { color: #b8a800; }
[data-design="v3"][data-bs-theme="light"] .tl-item.current .tl-ico { border-color: var(--n-text); }
[data-design="v3"][data-bs-theme="light"] .price-card.featured { --_bd: var(--n-text); }
[data-design="v3"][data-bs-theme="light"] .site-footer::before { background: linear-gradient(90deg, rgba(14, 11, 22, .15) 0 76%, var(--cp-red) 76% 77.4%, transparent 77.4% 78%, var(--n-text) 78%); }
[data-design="v3"][data-bs-theme="light"] .progress-top { box-shadow: none; background: var(--n-text); }
[data-design="v3"][data-bs-theme="light"] .alert-warning { color: var(--n-text); background: #fffbd1; border-color: #c9bc00; border-left-color: #0e0b16; }

/* ==========================================================================
   v3 interactions (cyber.js) + loader
   ========================================================================== */
/* boot loader: name + a segmented bar that fills while the page loads */
[data-design="v3"] #preloader { background: var(--n-bg); }
[data-design="v3"] #preloader > i { display: none; }
[data-design="v3"] #preloader .boot { display: grid; gap: .8rem; justify-items: start; }
[data-design="v3"] #preloader .boot b { font-family: var(--n-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 1.2rem; color: var(--n-text); }
[data-design="v3"] #preloader .boot-bar { width: 220px; height: 10px; background: repeating-linear-gradient(90deg, var(--n-accent) 0 8px, transparent 8px 11px); clip-path: inset(0 100% 0 0); animation: cp-boot 1.1s steps(20) forwards; }
[data-design="v3"][data-bs-theme="light"] #preloader .boot-bar { background: repeating-linear-gradient(90deg, var(--n-text) 0 8px, transparent 8px 11px); }
@keyframes cp-boot { to { clip-path: inset(0 0 0 0); } }

/* headings while decoding keep their line, glyphs tinted */
[data-design="v3"] .is-decoding { color: var(--cp-cyan); }

/* hero: tilting photo and glitch replay */
[data-design="v3"] .hero-photo { transition: transform .25s ease-out; transform-style: preserve-3d; will-change: transform; }
[data-design="v3"] .hero h1 .grad.cp-replay { animation: cp-glitch .8s steps(1) both !important; }

/* cards: a scanline sweeps once over the panel you point at */
[data-design="v3"] .n-card:not(.work)::after { content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none; z-index: 2; opacity: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cp-cyan) 14%, transparent) 70%, color-mix(in srgb, var(--cp-cyan) 45%, transparent) 98%, transparent); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-design="v3"] .n-card:not(.work):hover::after { animation: cp-scan .9s cubic-bezier(.3, .6, .4, 1) 1; }
  [data-design="v3"] .work:hover::before { animation: cp-blink .25s steps(1) 2; }
}
@keyframes cp-scan { 0% { opacity: 1; top: -30%; } 100% { opacity: 0; top: 100%; } }

/* HUD rail: wide screens, home page */
.cp-rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 1010; display: flex; gap: 10px; align-items: stretch; }
.cp-rail-meter { width: 2px; background: var(--n-border); position: relative; }
.cp-rail-meter i { position: absolute; inset: 0; background: var(--n-accent); transform-origin: top; transform: scaleY(0); }
[data-bs-theme="light"] .cp-rail-meter i { background: var(--n-text); }
.cp-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cp-rail a { position: relative; display: block; padding: 4px 2px; color: var(--n-muted); text-decoration: none !important; font-family: var(--n-font-head); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; text-align: right; }
.cp-rail a .t { position: absolute; right: calc(100% + 8px); top: 50%; opacity: 0; transform: translate(6px, -50%); transition: opacity .2s, transform .2s; white-space: nowrap; background: var(--n-bg); border: 1px solid var(--n-border); padding: 1px 8px; pointer-events: none; }
.cp-rail a:hover .t, .cp-rail a:focus-visible .t { opacity: 1; transform: translate(0, -50%); }
.cp-rail a:hover, .cp-rail a:focus-visible { color: var(--cp-cyan); }
.cp-rail a.on { color: var(--n-text); }
.cp-rail a .n { display: inline-block; min-width: 2.2em; padding: 1px 4px; text-align: center; }
.cp-rail a.on .n { background: var(--n-accent); color: var(--n-on-accent); }
[data-bs-theme="light"] .cp-rail a.on .n { background: var(--n-text); color: #fff; }
@media (max-width: 1379.98px) { .cp-rail { display: none; } }

/* copy buttons next to e-mail / phone */
.cp-copy { margin-left: .5rem; width: 28px; height: 28px; display: inline-grid; place-items: center; vertical-align: middle; border: 1px solid var(--n-border); background: transparent; color: var(--cp-cyan); cursor: pointer; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); font-size: .8rem; }
.cp-copy:hover { background: color-mix(in srgb, var(--cp-cyan) 14%, transparent); }
.cp-copy.done { background: var(--n-accent); color: var(--n-on-accent); border-color: var(--n-accent); }
[data-design="v3"] .site-footer .copy { font-family: var(--n-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }

/* ---------- round 2 interactions ---------- */
/* menu links: a brief RGB split on hover */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-design="v3"] .site-nav .nav-link:hover { animation: cp-rgb .35s steps(2) 1; }
}
@keyframes cp-rgb { 0% { text-shadow: 2px 0 var(--cp-red), -2px 0 var(--cp-cyan); } 50% { text-shadow: -2px 0 var(--cp-red), 2px 0 var(--cp-cyan); } 100% { text-shadow: none; } }

/* skill bars fill segment by segment */
[data-design="v3"] .bar > i { transition: width 1.3s steps(16, end); }

/* roles ticker under the hero */
.cp-ticker { overflow: hidden; background: var(--n-on-accent, #0e0b16); color: var(--n-accent); border-block: 1px solid color-mix(in srgb, var(--n-accent) 40%, transparent); margin-top: -1px; }
[data-bs-theme="light"] .cp-ticker { background: #0e0b16; }
.cp-ticker-track { display: flex; width: max-content; animation: cp-marquee 38s linear infinite; }
.cp-ticker span { font-family: var(--n-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .95rem; padding: .7rem 1.4rem; white-space: nowrap; }
.cp-ticker span::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 2.8rem; background: var(--cp-red); vertical-align: .15em; }
.cp-ticker:hover .cp-ticker-track { animation-play-state: paused; }
@keyframes cp-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cp-ticker-track { animation: none; } }
html[lang="bn"] .cp-ticker span { letter-spacing: 0; }

/* testimonials autoplay progress */
.cp-autoplay { height: 3px; background: var(--n-border); margin-top: .2rem; }
.cp-autoplay i { display: block; height: 100%; background: var(--n-accent); transform-origin: left; transform: scaleX(0); }
[data-bs-theme="light"] .cp-autoplay i { background: var(--n-text); }
.cp-autoplay.is-paused i { opacity: .45; }

/* cards wipe in */
.cp-wipe { clip-path: inset(0 100% 0 0); }
.cp-wipe.cp-in { clip-path: none; animation: cp-wipe .7s steps(12, end) var(--d, 0s) backwards; }
@keyframes cp-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.cp-pop { animation: cp-pop .45s steps(6, end) var(--d, 0s) both; }
@keyframes cp-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* reading HUD on posts */
.cp-read { position: fixed; left: 18px; bottom: 18px; z-index: 1020; display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem; background: var(--n-bg); border: 1px solid var(--n-border); border-left: 3px solid var(--n-accent); font-family: var(--n-font-head); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; color: var(--n-muted); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: none; }
.cp-read.show { opacity: 1; transform: none; }
.cp-read b { color: var(--n-text); font-size: 1rem; }
[data-bs-theme="light"] .cp-read { border-left-color: var(--n-text); }
html[lang="bn"] .cp-read { letter-spacing: 0; }

/* contact counter */
.cp-count { display: block; text-align: right; margin-top: .3rem; color: var(--n-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.cp-count.warn { color: var(--cp-red); }

/* keyboard shortcuts */
.cp-keys-btn { margin-left: .8rem; border: 0; background: none; color: var(--n-muted); font: inherit; cursor: pointer; padding: 0; }
.cp-keys-btn:hover { color: var(--cp-cyan); }
.cp-keys-btn kbd, .cp-keys kbd { display: inline-grid; place-items: center; min-width: 1.7em; padding: .05em .4em; border: 1px solid var(--n-border); background: var(--n-surface-2); color: var(--n-text); font: 700 .8rem var(--n-font-head); border-radius: 0; box-shadow: none; }
dialog.cp-keys { border: 1px solid var(--n-border); border-top: 3px solid var(--n-accent); background: var(--n-surface); color: var(--n-text); padding: 1.4rem 1.6rem; width: min(92vw, 420px); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
dialog.cp-keys::backdrop { background: rgba(5, 4, 10, .7); }
dialog.cp-keys h2 { font-size: 1.4rem; margin: 0 0 1rem; }
dialog.cp-keys ul { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .5rem; }
dialog.cp-keys li { display: flex; gap: .8rem; align-items: center; }

/* cut-corner shapes clip an outside outline: keyboard focus is drawn inside */
[data-design="v3"] .icon-btn:focus-visible, [data-design="v3"] .filters button:focus-visible, [data-design="v3"] .share a:focus-visible,
[data-design="v3"] .socials a:focus-visible, [data-design="v3"] .cp-copy:focus-visible, [data-design="v3"] .work .tools a:focus-visible,
[data-design="v3"] .work .tools button:focus-visible, [data-design="v3"] .pn:focus-visible, [data-design="v3"] a.n-card:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--cp-cyan), inset 0 0 0 4px var(--n-bg); }
[data-design="v3"] .filters button[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 2px var(--n-on-accent); }
/* round 3: suggestions, code, anchors, spotlight */
[data-design="v3"] .w-suggest { border-radius: 0; border-top: 2px solid var(--n-accent); }
[data-design="v3"] .w-suggest a, [data-design="v3"] .w-suggest img, [data-design="v3"] .code-copy, [data-design="v3"] .h-anchor { border-radius: 0; }
[data-design="v3"] .w-suggest li[aria-selected="true"] a { box-shadow: inset 3px 0 0 var(--n-accent); }
[data-design="v3"] .code-copy { font-family: var(--n-font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--cp-cyan); }
[data-design="v3"][data-bs-theme="light"] .code-copy.done, [data-design="v3"][data-bs-theme="light"] .h-anchor.done { background: var(--n-text); color: #fff; }
.cp-spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .5), transparent 60%); mix-blend-mode: soft-light; }
.hero:hover .cp-spot { opacity: 1; }
[data-design="v3"] .hero .btn-n, [data-design="v3"] .hero .btn-n-ghost { transition: transform .2s ease-out, background .15s, color .15s; }