:root{
    --bg:#ffffff;
    --bg-raised:#eef5fd;
    --bg-card:#ffffff;
    --border:#cfe2f7;
    --border-soft:#dcebfa;
    --text:#0c2340;
    --text-muted:#2c476d;
    --text-dim:#5c7ea3;
    --cyan:#0b57b8;
    --violet:#1450a8;
    --magenta:#2a7fd4;
    --font-display:"Unbounded", "Arial Black", sans-serif;
    --font-body:"Manrope", "Segoe UI", sans-serif;
    --font-mono:"JetBrains Mono", "Consolas", monospace;
    --font-script:"Caveat", cursive;
  }
  /* dark mode: storm blue and white, switched by the toggle button in the nav (not tied to the OS theme) */
  :root[data-theme="dark"]{
    --bg:#0d1b2e;
    --bg-raised:#16273f;
    --bg-card:#16273f;
    --border:#2a4165;
    --border-soft:#223554;
    --text:#f5f8fc;
    --text-muted:#c9d6e6;
    --text-dim:#93a7c2;
    --cyan:#5ab4ff;
    --violet:#3f8ef0;
    --magenta:#7cc4ff;
    color-scheme:dark;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    padding-inline:0;
  }
  img,canvas{max-width:100%;}
  h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;}
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  ::selection{background:var(--violet);color:#fff;}
  :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}

  .wrap{
    max-width:1180px;
    margin-inline:auto;
    padding-inline:24px;
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--cyan);
    display:inline-flex;
    align-items:center;
    gap:.5em;
  }
  .eyebrow::before{
    content:"";
    width:6px;height:6px;
    background:var(--cyan);
    display:inline-block;
    box-shadow:0 0 8px var(--cyan);
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky;
    top:0;
    z-index:50;
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border-soft);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-block:16px;
    gap:16px;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.02rem;
    letter-spacing:.01em;
  }
  .logo-mark{
    height:42px;
    width:auto;
    flex:none;
    display:block;
  }
  .footer-inner .logo-mark{height:31px;}
  .nav-links{
    display:flex;
    gap:28px;
    font-size:.92rem;
    color:var(--text-muted);
  }
  .nav-links a{transition:color .15s ease;}
  .nav-links a:hover{color:var(--text);}
  .nav-cta{
    font-family:var(--font-mono);
    font-size:.8rem;
    letter-spacing:.04em;
    padding:.62em 1.1em;
    border-radius:999px;
    background:linear-gradient(100deg, var(--cyan), var(--violet));
    color:#fff;
    white-space:nowrap;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px -4px color-mix(in srgb, var(--cyan) 60%, transparent);}
  .nav-toggle{display:none;}

  /* ---------- LIGHT / DARK TOGGLE ---------- */
  .theme-toggle{
    flex:none;
    width:38px;height:38px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--bg-card);
    color:var(--text);
    display:grid;place-items:center;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .theme-toggle:hover{transform:translateY(-1px);border-color:var(--cyan);}
  .theme-toggle .tt-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .theme-toggle .tt-moon{display:none;}
  :root[data-theme="dark"] .theme-toggle .tt-sun{display:none;}
  :root[data-theme="dark"] .theme-toggle .tt-moon{display:block;}

  @media (max-width:720px){
    .nav-links{display:none;}
    .nav-cta{padding:.55em .9em;font-size:.74rem;}
  }
  @media (max-width:480px){
    .nav-inner{gap:8px;}
    .logo{font-size:.9rem;gap:8px;}
    .nav-cta{padding:.5em .8em;font-size:.62rem;letter-spacing:.02em;}
    .theme-toggle{width:32px;height:32px;}
    .theme-toggle .tt-icon{width:16px;height:16px;}
  }

  /* ---------- VIDEO HERO ---------- */
  .video-hero{
    position:relative;
    height:100vh;
    min-height:560px;
    padding-block:0;
    overflow:hidden;
  }
  /* hero videos (landing + web development) share one 16:9 frame size: as large as fits below the nav, max 1240px wide */
  :root{
    --hero-video-ratio:1.9;
    --hero-video-h:min(694.7px, calc((100vw - 48px) / 1.9), calc(100vh - 130px));
    --hero-video-h:min(694.7px, calc((100vw - 48px) / 1.9), calc(100svh - 130px));
  }
  /* the clips sit in a centred 16:9 frame (never cropped), sized to fit below the nav */
  .hero-frame{
    position:absolute;
    left:50%;
    top:calc(50% - 38px);
    transform:translate(-50%,-50%);
    width:calc(var(--hero-video-h) * var(--hero-video-ratio));
    aspect-ratio:1.9;
    border-radius:22px;
    overflow:hidden;
    background:#0c2340;
    border:1px solid var(--border);
    box-shadow:0 0 0 6px color-mix(in srgb, var(--bg-raised) 85%, transparent), 0 40px 80px -36px rgba(12,35,64,.65);
  }
  .scroll-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:none;
  }
  /* first frame of the hero clip, shown under the video until it starts (an <img> so it can load early, with a phone size) */
  .hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .scroll-video.is-hidden{
    opacity:0;
  }
  .video-scrim{
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent) 0%, color-mix(in srgb, var(--bg) 5%, transparent) 45%, color-mix(in srgb, var(--bg) 95%, transparent) 100%),
      radial-gradient(ellipse 55% 50% at 50% 50%, color-mix(in srgb, var(--bg) 55%, transparent) 0%, color-mix(in srgb, var(--bg) 25%, transparent) 60%, transparent 100%);
  }
  /* light mode: the white scrim washed the video out — keep it much thinner */
  :root:not([data-theme="dark"]) .video-scrim{
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg) 10%, transparent) 0%, transparent 40%, transparent 70%, color-mix(in srgb, var(--bg) 85%, transparent) 100%),
      radial-gradient(ellipse 40% 35% at 50% 50%, color-mix(in srgb, var(--bg) 35%, transparent) 0%, transparent 100%);
  }

  .hero-content{
    position:relative;
    z-index:5;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding-inline:24px;
  }
  /* hero text (and the scrim behind it) stay hidden while the videos play,
     and fade in once both clips have finished */
  .hero-content,
  .video-scrim{
    transition:opacity .8s ease, visibility 0s linear 0s;
  }
  .video-hero.text-hidden .hero-content,
  .video-hero.text-hidden .video-scrim{
    opacity:0;
    visibility:hidden;
    transition:opacity .6s ease, visibility 0s linear .6s;
  }

  /* end screen: when the video finishes, a dark backdrop image fills the hero and the TEKJEE text sits on it
     in light colours (same in light and dark mode, since the image is dark) */
  .hero-end-bg{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:opacity .8s ease, visibility 0s linear 0s;
  }
  .video-hero.text-hidden .hero-end-bg{opacity:0;visibility:hidden;transition:opacity .6s ease, visibility 0s linear .6s;}
  .video-hero .video-scrim,
  :root:not([data-theme="dark"]) .video-hero .video-scrim{
    background:radial-gradient(ellipse 60% 55% at 50% 50%, rgba(4,12,28,.45) 0%, rgba(4,12,28,.15) 60%, transparent 100%);
  }
  .video-hero:not(.text-hidden) .hero-content .eyebrow{color:#7cc4ff;}
  .video-hero:not(.text-hidden) .hero-content .wordmark{color:#fff;}
  .video-hero:not(.text-hidden) .hero-content .hero-sub{color:rgba(255,255,255,.84);}
  .video-hero:not(.text-hidden) .hero-content .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45);}
  .video-hero:not(.text-hidden) .hero-content .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;}
  .video-hero:not(.text-hidden) .scroll-hint{color:rgba(255,255,255,.65);}

  .hero-sound{
    position:absolute;
    right:24px;
    bottom:28px;
    z-index:7;
    width:44px;
    height:44px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    background:rgba(0,0,0,.45);
    border:1px solid rgba(255,255,255,.3);
    cursor:pointer;
    transition:background .15s ease, transform .15s ease;
  }
  .hero-sound:hover{background:rgba(0,0,0,.65);transform:scale(1.05);}
  .hero-sound .snd-on{display:none;}
  .hero-sound[aria-pressed="true"] .snd-on{display:inline;}
  .hero-sound[aria-pressed="true"] .snd-off{display:none;}

  .hero-content .eyebrow{justify-content:center;margin-bottom:6px;}
  .hero-content .logo-reveal{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:12px;
  }
  .hero-content .logo-mark-big{height:84px;width:auto;flex:none;}
  .hero-content .wordmark{
    font-size:clamp(2.6rem, 8vw, 5rem);
    font-weight:800;
    letter-spacing:.01em;
  }
  .hero-content .hero-sub{
    margin-top:18px;
    color:var(--text-muted);
    font-size:1.05rem;
    max-width:44ch;
  }
  .hero-content .hero-actions{
    margin-top:34px;
    justify-content:center;
  }

  .scroll-hint{
    position:absolute;
    left:50%;
    bottom:36px;
    transform:translateX(-50%);
    font-family:var(--font-mono);
    font-size:.68rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-dim);
    z-index:6;
  }

  .hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }
  .btn{
    font-family:var(--font-body);
    font-weight:600;
    font-size:.95rem;
    padding:.9em 1.5em;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    gap:.5em;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn-primary{
    background:linear-gradient(100deg, var(--cyan), var(--violet));
    color:#ffffff;
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px color-mix(in srgb, var(--violet) 70%, transparent);}
  /* dark-mode button text: the blue gradient turns light in dark mode, so its label switches to navy to stay readable */
  :root[data-theme="dark"] .btn-primary,
  :root[data-theme="dark"] .nav-cta{color:#0b1a2e;}
  .btn-ghost{
    border:1px solid var(--border);
    color:var(--text);
  }
  .btn-ghost:hover{border-color:var(--text-dim);background:var(--bg-raised);}

  @media (max-width:640px){
    .hero-content .logo-reveal{flex-direction:column;gap:8px;}
    .video-scrim{
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent) 0%, color-mix(in srgb, var(--bg) 5%, transparent) 45%, color-mix(in srgb, var(--bg) 95%, transparent) 100%),
        radial-gradient(ellipse 95% 52% at 50% 52%, color-mix(in srgb, var(--bg) 75%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 62%, transparent 100%);
    }
  }

  /* ---------- SECTION HEADS ---------- */
  section{padding-block:88px;overflow-x:clip;}
  .sect-head{
    max-width:640px;
    margin-bottom:52px;
  }
  .sect-head h2{
    font-size:clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight:600;
    margin-top:14px;
  }
  .sect-head p{
    color:var(--text-muted);
    margin-top:14px;
    font-size:1.02rem;
  }

  /* ---------- SERVICES CAROUSEL ---------- */
  .carousel-section{overflow-x:clip;}
  .carousel-viewport{
    width:100vw;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
    margin-top:56px;
    padding-block:90px;
    perspective:950px;
  }
  .carousel-track{
    display:flex;
    align-items:center;
    gap:20px;
    width:max-content;
    transform-style:preserve-3d;
    will-change:transform;
  }

  .service-card{
    flex:0 0 auto;
    width:min(240px, 60vw);
    min-height:460px;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:22px;
    padding:30px 22px 26px;
    display:flex;
    flex-direction:column;
    gap:16px;
    position:relative;
    transform-origin:center center;
    box-shadow:0 30px 60px -30px rgba(20,60,130,.28);
    transition:box-shadow .4s ease;
    backface-visibility:hidden;
  }
  .service-card::before{
    content:"";
    position:absolute;
    top:0;left:24px;right:24px;
    height:2px;
    background:var(--accent, var(--cyan));
    opacity:0;
    transition:opacity .3s ease;
  }
  /* Rotating light ring: the gradient itself is static — only the pseudo
     element's `transform` animates, so this is a GPU-composited rotation
     with no per-frame repaint (unlike animating the gradient angle via a
     custom property, which was forcing a repaint on every frame). */
  .service-card::after{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    padding:1.5px;
    background:conic-gradient(from 0deg,
      transparent 0deg,
      var(--accent, var(--cyan)) 45deg,
      transparent 110deg,
      transparent 250deg,
      var(--accent, var(--cyan)) 315deg,
      transparent 360deg);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0;
    transition:opacity .35s ease;
    pointer-events:none;
    z-index:2;
    will-change:transform;
  }
  .service-card.is-focused{
    box-shadow:
      0 30px 60px -30px rgba(20,60,130,.28),
      0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent),
      0 0 46px -4px color-mix(in srgb, var(--accent) 88%, transparent),
      0 0 100px -10px color-mix(in srgb, var(--accent) 60%, transparent);
  }
  .service-card.is-focused::before{opacity:1;}
  .service-card.is-focused::after{
    opacity:1;
    animation:border-spin 2.6s linear infinite;
  }
  @keyframes border-spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .service-card.is-focused::after{animation:none;}
  }
  /* seven cards, seven bright highlight colours (the cloned loop set repeats them) */
  .service-card:nth-of-type(7n+1){--accent:#ff2d3d;}
  .service-card:nth-of-type(7n+2){--accent:#8a2bff;}
  .service-card:nth-of-type(7n+3){--accent:#0a2fd6;}
  .service-card:nth-of-type(7n+4){--accent:#ff7a00;}
  .service-card:nth-of-type(7n+5){--accent:#12c65a;}
  .service-card:nth-of-type(7n+6){--accent:#ff2fa0;}
  .service-card:nth-of-type(7n+7){--accent:#f2b300;}
  .service-icon{
    width:46px;height:46px;
    border-radius:11px;
    background:var(--bg-raised);
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .service-icon svg{width:24px;height:24px;stroke:var(--accent);}
  .service-card h3{
    font-size:1.18rem;
    font-weight:600;
    font-family:var(--font-body);
  }
  .service-card p{color:var(--text-muted);font-size:.94rem;}
  .service-list{
    list-style:none;
    margin:4px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    font-family:var(--font-mono);
    font-size:.78rem;
    color:var(--text-dim);
  }
  .service-list li{display:flex;gap:.6em;align-items:baseline;}
  .service-list li::before{
    content:"▸";
    color:var(--accent);
    flex:none;
  }

  .no-motion .carousel-viewport{overflow:visible;perspective:none;}
  .no-motion .carousel-track{flex-wrap:wrap;width:auto;justify-content:center;}

  /* ---------- APPROACH ---------- */
  .approach-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:28px;
    position:relative;
  }
  .approach-line{
    position:absolute;
    top:0; left:0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta));
    transform:scaleX(0);
    transform-origin:left center;
  }
  .approach-step{
    background:linear-gradient(160deg,#0c2340 0%,#123a7a 55%,#1450a8 100%);
    border:1px solid rgba(70,140,255,.45);
    border-radius:16px;
    padding:22px 20px 24px;
    box-shadow:0 20px 40px -26px rgba(12,35,64,.5);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .approach-step:hover{transform:translateY(-4px);box-shadow:0 26px 46px -24px rgba(12,35,64,.6);}
  .approach-num{
    font-family:var(--font-mono);
    font-size:.78rem;
    color:rgba(255,255,255,.68);
    letter-spacing:.06em;
    display:inline-block;
  }
  .approach-step h3{
    font-size:1.08rem;
    font-weight:600;
    font-family:var(--font-body);
    margin-top:10px;
    color:#fff;
  }
  .approach-step p{
    color:rgba(255,255,255,.86);
    font-size:.92rem;
    margin-top:8px;
  }
  @media (max-width:860px){
    .approach-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:520px){
    .approach-grid{grid-template-columns:1fr;}
  }

  /* ---------- ROTATING PRISM ---------- */
  .prism-grid{
    display:grid;
    grid-template-columns:minmax(150px, .85fr) 1.15fr;
    gap:48px;
    align-items:center;
  }
  .prism-stage{
    position:relative;
    aspect-ratio:1;
    width:min(430px, 42vw);
    margin-inline:auto;
    perspective:1300px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .prism-glow{
    position:absolute;
    inset:-16%;
    border-radius:50%;
    background:radial-gradient(circle,
      color-mix(in srgb, var(--cyan) 46%, transparent) 0%,
      color-mix(in srgb, var(--cyan) 20%, transparent) 42%,
      transparent 72%);
    filter:blur(30px);
    opacity:.75;
    z-index:0;
  }
  .globe-canvas{
    position:relative;
    width:100%;
    height:100%;
    display:block;
    z-index:1;
  }

  .prism-content .eyebrow{margin-bottom:20px;}
  .prism-panel-stack{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .prism-panel{position:relative; opacity:1;}
  .prism-panel-stack.js-ready{display:block; min-height:210px;}
  .prism-panel-stack.js-ready .prism-panel{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
  }
  .prism-panel-stack.js-ready .prism-panel.is-active{
    opacity:1;
    pointer-events:auto;
  }
  .prism-panel h3{
    font-size:clamp(1.5rem, 3vw, 2.1rem);
    font-weight:600;
    font-family:var(--font-body);
    line-height:1.25;
  }
  .prism-panel .curly{
    font-family:var(--font-script);
    font-weight:600;
    font-style:normal;
    font-size:1.4em;
    line-height:1;
    background:linear-gradient(100deg, var(--cyan), var(--violet) 55%, var(--magenta));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .prism-panel p{
    margin-top:14px;
    color:var(--text-muted);
    font-size:1.02rem;
    max-width:40ch;
  }
  .prism-dots{
    display:flex;
    gap:10px;
    margin-top:32px;
  }
  .prism-dot{
    width:8px; height:8px;
    border-radius:50%;
    background:var(--border);
    transition:background .3s ease, transform .3s ease;
  }
  .prism-dot.is-active{
    background:var(--cyan);
    transform:scale(1.3);
  }

  @media (max-width:480px){
    .prism-grid{grid-template-columns:1fr; text-align:center; gap:32px;}
    .prism-stage{width:min(240px, 62vw);}
    .prism-content .eyebrow{justify-content:center;}
    .prism-dots{justify-content:center;}
    .prism-panel p{margin-inline:auto;}
  }

  .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;}

  /* ---------- FAQ ---------- */
  .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
  .faq-item{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:24px 24px 22px;
    box-shadow:0 20px 40px -28px rgba(20,60,130,.3);
  }
  .faq-item h3{font-family:var(--font-body);font-size:1.05rem;font-weight:700;line-height:1.35;}
  .faq-item p{margin-top:10px;color:var(--text-muted);font-size:.96rem;}
  @media (max-width:760px){ .faq-grid{grid-template-columns:1fr;} }

  /* ---------- CTA ---------- */
  .cta{
    position:relative;
    text-align:center;
    padding-block:100px;
    overflow:hidden;
  }
  .cta-glow{
    position:absolute;
    left:50%; top:50%;
    width:min(680px, 90vw);
    aspect-ratio:1;
    transform:translate(-50%,-50%) scale(0.6);
    background:radial-gradient(circle,
      color-mix(in srgb, var(--cyan) 22%, transparent) 0%,
      color-mix(in srgb, var(--cyan) 9%, transparent) 42%,
      transparent 72%);
    filter:blur(30px);
    opacity:0;
    pointer-events:none;
    z-index:0;
  }
  .cta .wrap{position:relative; z-index:1;}
  .cta h2{
    font-size:clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight:600;
    max-width:16ch;
    margin-inline:auto;
  }
  .cta-wipe{
    clip-path:inset(0 100% 0 0);
  }
  .cta p{
    color:var(--text-muted);
    margin-top:18px;
    font-size:1.05rem;
  }
  .cta .hero-actions{justify-content:center;margin-top:34px;}
  .contact-line{
    margin-top:28px;
    font-family:var(--font-mono);
    font-size:.85rem;
    color:var(--text-dim);
  }
  .contact-line a{color:var(--cyan);}
  .cta-fade{opacity:0; transform:translateY(16px);}

  @media (prefers-reduced-motion: reduce){
    .cta-glow{opacity:1; transform:translate(-50%,-50%) scale(1);}
    .cta-wipe{clip-path:inset(0 0 0 0);}
    .cta-fade{opacity:1; transform:none;}
    .approach-line{transform:scaleX(1);}
  }

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--border-soft);
    padding-block:32px;
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
  }
  .footer-inner .logo{font-size:.9rem;}
  .footer-links{
    display:flex;
    gap:22px;
    font-size:.85rem;
    color:var(--text-dim);
  }
  .footer-links a:hover{color:var(--text-muted);}

  @media (prefers-reduced-motion: reduce){
    *{scroll-behavior:auto !important;}
  }
/*PAGES-CSS*/
  /* ---------- SUB-PAGE (Digital Marketing) ---------- */
  .page-view[hidden]{display:none;}
  section[id]{scroll-margin-top:72px;}
  .card-link{
    display:inline-flex;align-items:center;gap:.4em;
    margin-top:18px;
    font-weight:700;font-size:.9rem;
    color:var(--accent, var(--cyan));
    transition:gap .2s ease;
  }
  .card-link:hover{gap:.75em;}
  .service-card[data-href]{cursor:pointer;}
  .prism-link{
    display:inline-flex;margin-top:14px;
    font-weight:700;font-size:.95rem;color:var(--cyan);
    border-bottom:2px solid currentColor;padding-bottom:2px;
  }
  .nav-links a[aria-current="page"]{color:var(--text);font-weight:700;}

  .pg-hero{position:relative;padding-block:64px 56px;overflow:hidden;}
  .pg-hero::before{
    content:"";position:absolute;top:-180px;right:-140px;
    width:560px;height:560px;border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.6), transparent 66%);
    pointer-events:none;
  }
  .pg-hero .wrap{position:relative;}
  .crumbs{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);font-size:.74rem;color:var(--text-dim);margin-bottom:30px;}
  .crumbs a:hover{color:var(--text);}
  .crumbs [aria-hidden]{opacity:.5;}
  .pg-hero h1{font-size:clamp(2rem, 4.4vw, 3.4rem);font-weight:600;line-height:1.12;margin-top:16px;max-width:920px;}
  .pg-lead{max-width:780px;margin-top:22px;font-size:1.1rem;color:var(--text-muted);}
  .pg-hero .hero-actions{margin-top:32px;justify-content:flex-start;}
  .pg-section{padding-block:72px;}
  .pg-section .sect-head{margin-bottom:40px;}

  .pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .pg-grid.pg-grid-2{grid-template-columns:repeat(2,1fr);}
  .pg-card{
    --accent:var(--cyan);
    position:relative;overflow:hidden;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:28px 24px 24px;
    box-shadow:0 20px 40px -28px rgba(20,60,130,.35);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .pg-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent);}
  .pg-card:hover{transform:translateY(-4px);box-shadow:0 26px 46px -26px rgba(20,60,130,.5), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);}
  .pg-icon{
    width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
    background:color-mix(in srgb, var(--accent) 12%, #fff);color:var(--accent);
  }
  .pg-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .pg-card h3{font-family:var(--font-body);font-size:1.12rem;font-weight:700;line-height:1.3;}
  .pg-card p{margin-top:10px;color:var(--text-muted);font-size:.95rem;}
  .pg-card:nth-child(6n+1){--accent:#d62839;}
  .pg-card:nth-child(6n+2){--accent:#7b2ff7;}
  .pg-card:nth-child(6n+3){--accent:#0b57b8;}
  .pg-card:nth-child(6n+4){--accent:#e8710a;}
  .pg-card:nth-child(6n+5){--accent:#1a9850;}
  .pg-card:nth-child(6n+6){--accent:#d6336c;}

  .pg-split{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start;}
  .pg-split h2{font-size:clamp(1.7rem, 3vw, 2.4rem);font-weight:600;margin-top:14px;}
  .pg-split > div > p{margin-top:16px;color:var(--text-muted);}
  .pg-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px;}
  .pg-list li{display:flex;gap:.7em;color:var(--text-muted);}
  .pg-list li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;border-radius:50%;background:var(--cyan);}
  .pg-panel{
    background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:26px;
    box-shadow:0 22px 44px -28px rgba(20,60,130,.4);
  }
  .pg-panel h3{font-family:var(--font-body);font-size:1rem;font-weight:700;margin-bottom:16px;}
  .pg-facts{margin:0;display:grid;gap:16px;}
  .pg-facts dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);}
  .pg-facts dd{margin:3px 0 0;font-weight:600;font-size:.98rem;}

  .pg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .pg-steps-3{grid-template-columns:repeat(3,1fr);}
  .pg-step{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:24px 22px;box-shadow:0 20px 40px -28px rgba(20,60,130,.3);}
  .pg-step .num{font-family:var(--font-mono);font-size:.8rem;color:var(--cyan);letter-spacing:.1em;}
  .pg-step h3{font-family:var(--font-body);font-size:1.1rem;font-weight:700;margin-top:8px;}
  .pg-step p{margin-top:8px;color:var(--text-muted);font-size:.94rem;}


  .pg-cta{padding-block:40px 96px;}
  .pg-cta-box{
    background:linear-gradient(120deg, #0c2340, #1d3fa8);color:#fff;
    border-radius:26px;padding:56px 32px;text-align:center;
    box-shadow:0 30px 60px -30px rgba(12,35,64,.7);
  }
  .pg-cta-box h2{font-size:clamp(1.6rem, 3vw, 2.3rem);font-weight:600;max-width:720px;margin-inline:auto;}
  .pg-cta-box p{margin:16px auto 0;max-width:640px;color:rgba(255,255,255,.82);}
  .pg-cta-box .hero-actions{justify-content:center;margin-top:28px;}
  .btn-light{background:#fff;color:#0c2340;}
  .btn-light:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(0,0,0,.4);}
  .btn-outline-light{border:1px solid rgba(255,255,255,.5);color:#fff;}
  .btn-outline-light:hover{background:rgba(255,255,255,.12);}

  .pg-js .pg-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s);}
  .pg-js .pg-reveal.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion: reduce){ .pg-js .pg-reveal{opacity:1;transform:none;transition:none;} }

  @media (max-width:960px){
    .pg-grid {grid-template-columns:repeat(2,1fr);}
    .pg-steps, .pg-steps-3{grid-template-columns:repeat(2,1fr);}
    .pg-split{grid-template-columns:1fr;}
  }
  @media (max-width:600px){
    .pg-grid, .pg-grid.pg-grid-2, .pg-steps, .pg-steps-3{grid-template-columns:1fr;}
    .pg-hero{padding-block:40px 40px;}
    .pg-section{padding-block:52px;}
    .pg-cta-box{padding:40px 20px;}
  }

  /* ---------- HOME TEASERS ---------- */
  .teaser-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
  .teaser-card{
    --accent:var(--cyan);
    position:relative;overflow:hidden;cursor:pointer;
    background:var(--bg-card);border:1px solid var(--border);border-radius:22px;
    padding:34px 30px 28px;display:flex;flex-direction:column;
    box-shadow:0 24px 48px -30px rgba(20,60,130,.45);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .teaser-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--accent);}
  .teaser-card:hover{transform:translateY(-5px);box-shadow:0 30px 56px -28px rgba(20,60,130,.55), 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);}
  .teaser-tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
  .teaser-card h3{font-size:clamp(1.4rem, 2.4vw, 1.9rem);font-weight:600;margin-top:12px;}
  .teaser-card p{margin-top:12px;color:var(--text-muted);}
  .teaser-chips{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px;}
  .teaser-chips li{font-size:.8rem;font-weight:600;padding:.35em .8em;border-radius:999px;background:color-mix(in srgb, var(--accent) 10%, #fff);color:var(--accent);}
  .teaser-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;}
  .teaser-slots span{
    aspect-ratio:16/9;display:grid;place-items:center;text-align:center;
    border:2px dashed color-mix(in srgb, var(--text-dim) 50%, transparent);border-radius:12px;
    font-family:var(--font-mono);font-size:.62rem;color:var(--text-dim);
  }
  .teaser-card .card-link{margin-top:auto;padding-top:22px;}
  @media (max-width:760px){ .teaser-grid{grid-template-columns:1fr;} }

  /* wide Digital Marketing teaser */
  .teaser-card.wide{display:grid;grid-template-columns:1.2fr 1fr;column-gap:44px;align-items:center;}
  .teaser-card.wide .card-link{margin-top:22px;padding-top:0;}
  .teaser-chips.big{margin:0;gap:10px;justify-content:flex-start;}
  .teaser-chips.big li{font-size:.92rem;padding:.55em 1.1em;}
  @media (max-width:820px){ .teaser-card.wide{grid-template-columns:1fr;row-gap:22px;} .teaser-chips.big{margin-top:6px;} }

  /* ---------- MARKETING ARC (landing page) ---------- */
  .arc-section{padding-block:72px 84px;}
  .arc-head{margin-inline:auto;text-align:center;}
  .arc-head .eyebrow{justify-content:center;}
  .arc-wrap{position:relative;width:100vw;margin-left:calc(50% - 50vw);cursor:pointer;}
  .arc-clip{overflow:hidden;}
  .arc-svg{display:block;width:100%;height:auto;}
  .arc-spin{
    transform-origin:800px 2847px;
    animation:arc-rotate var(--arc-dur, 60s) linear infinite;
  }
  .arc-glow{opacity:.55;stroke:var(--cyan);}
  .arc-line{stroke:var(--cyan);}
  @keyframes arc-rotate{ to{ transform:rotate(var(--arc-deg, 45deg)); } }
  .arc-spin text{
    font-family:var(--font-display);
    font-size:30px;font-weight:600;letter-spacing:.05em;
    fill:var(--text);
  }
  .arc-center{text-align:center;padding:14px 24px 0;max-width:560px;margin-inline:auto;}
  .arc-center h3{font-size:clamp(1.2rem, 2.6vw, 1.9rem);font-weight:600;}
  .arc-center p{margin:10px auto 18px;color:var(--text-muted);max-width:40ch;font-size:.98rem;}
  .arc-wrap:hover .arc-center .btn{transform:translateY(-2px);}
  @media (max-width:640px){
    /* show the middle of the same wide arc, so its ends still run off both screen edges */
    .arc-svg{width:260%;max-width:none;margin-left:-80%;}
  }
  @media (prefers-reduced-motion: reduce){ .arc-spin{animation:none;} }


  /* ---------- VIDEO ABOVE A SERVICE PAGE HERO (camera monitoring) ---------- */
  .pg-video{padding-block:36px 0;}
  .video-frame{
    max-width:960px;margin-inline:auto;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0c2340;
    box-shadow:0 34px 70px -30px rgba(12,35,64,.7), 0 0 0 1px color-mix(in srgb, var(--accent-page, #a06eff) 30%, transparent);
  }
  .vm-video{display:block;width:100%;height:100%;object-fit:cover;background:#0c2340;}
  .video-note{max-width:960px;margin:12px auto 0;text-align:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-dim);}
  .pg-video + .pg-hero{padding-top:36px;}

  /* ---------- TEKJEE ASSISTANT (bottom-right, every page) ---------- */
  .bot{position:fixed;right:18px;bottom:16px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none;}
  .bot > *{pointer-events:auto;}
  .bot-btn{
    width:96px;height:118px;padding:0;border:0;background:none;cursor:pointer;
    filter:drop-shadow(0 12px 14px rgba(12,35,64,.28));
    animation:bot-float 3.6s ease-in-out infinite;
    -webkit-tap-highlight-color:transparent;
  }
  .bot-btn:hover{filter:drop-shadow(0 14px 18px rgba(12,35,64,.36));}
  .bot-art{display:block;width:100%;height:100%;overflow:visible;}
  @keyframes bot-float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }

  /* poses: standing (default) / waving / question mark */
  .bot-q{opacity:0;transition:opacity .25s ease;}
  .arm-l, .arm-r, .bot-head{transition:transform .35s ease;}
  .arm-l{transform-origin:34px 90px;transform:rotate(6deg);}
  .arm-r{transform-origin:106px 90px;transform:rotate(-6deg);}
  .bot-head{transform-origin:70px 80px;}
  .bot[data-pose="wave"] .arm-r{transform:rotate(-148deg);animation:bot-wave .7s ease-in-out infinite alternate;}
  @keyframes bot-wave{ from{transform:rotate(-128deg);} to{transform:rotate(-166deg);} }
  .bot[data-pose="question"] .bot-q{opacity:1;animation:bot-pulse 1.6s ease-in-out infinite;}
  .bot[data-pose="question"] .bot-head{transform:rotate(-8deg);}
  .bot[data-pose="question"] .arm-r{transform:rotate(-120deg);}
  @keyframes bot-pulse{ 50%{opacity:.55;} }
  .bot-eyes{animation:bot-blink 5s infinite;transform-origin:70px 49px;}
  @keyframes bot-blink{ 0%,94%,100%{transform:scaleY(1);} 97%{transform:scaleY(.1);} }

  .bot-bubble{
    position:relative;max-width:210px;padding:10px 14px;border-radius:16px 16px 4px 16px;
    background:#fff;color:#0c2340;font-size:.86rem;font-weight:600;line-height:1.35;
    box-shadow:0 14px 30px -12px rgba(12,35,64,.45);
    opacity:0;transform:translateY(8px) scale(.96);transform-origin:bottom right;
    transition:opacity .35s ease, transform .35s ease;
  }
  .bot-bubble.show{opacity:1;transform:none;}

  /* chat window */
  .bot-panel{
    width:min(350px, calc(100vw - 28px));height:min(470px, calc(100vh - 170px));min-height:300px;
    background:#fff;border:1px solid #cfe2f7;border-radius:20px;overflow:hidden;
    box-shadow:0 26px 60px -18px rgba(12,35,64,.6);display:flex;flex-direction:column;padding:0;
  }
  .bot-panel[hidden]{display:none;}
  .bot-head-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(110deg,#0c2340,#1d3fa8);color:#fff;}
  .bot-mini{flex:none;width:40px;height:34px;border-radius:12px;background:linear-gradient(135deg,#1c3f8f,#0c2340);display:grid;place-items:center;overflow:hidden;}
  .bot-mini svg{width:34px;height:auto;display:block;}
  .bot-title{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1;}
  .bot-title strong{font-size:.95rem;}
  .bot-title small{font-size:.72rem;color:rgba(255,255,255,.75);}
  .bot-close{flex:none;width:30px;height:30px;border:0;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;}
  .bot-close:hover{background:rgba(255,255,255,.26);}
  .bot-log{flex:1;overflow-y:auto;padding:14px 12px 6px;display:flex;flex-direction:column;gap:9px;background:#f4f9ff;scroll-behavior:smooth;}
  .bot-msg{max-width:86%;padding:9px 12px;border-radius:14px;font-size:.88rem;line-height:1.45;word-wrap:break-word;overflow-wrap:anywhere;}
  .bot-msg.from-bot{align-self:flex-start;background:#fff;color:#0c2340;border:1px solid #dcebfa;border-bottom-left-radius:4px;}
  .bot-msg.from-me{align-self:flex-end;background:linear-gradient(100deg,#0b57b8,#1450a8);color:#fff;border-bottom-right-radius:4px;}
  .bot-msg a.bot-link{display:inline-block;margin:8px 6px 0 0;padding:.4em .85em;border-radius:999px;background:#eaf3fd;border:1px solid #cfe2f7;font-weight:700;font-size:.8rem;color:#0b57b8;}
  .bot-msg a.bot-link:hover{background:#dbeafc;}
  .bot-typing{display:inline-flex;gap:4px;align-items:center;}
  .bot-typing i{width:6px;height:6px;border-radius:50%;background:#5c7ea3;animation:bot-dot 1s infinite ease-in-out;}
  .bot-typing i:nth-child(2){animation-delay:.15s;} .bot-typing i:nth-child(3){animation-delay:.3s;}
  @keyframes bot-dot{ 0%,60%,100%{opacity:.3;transform:translateY(0);} 30%{opacity:1;transform:translateY(-3px);} }
  .bot-chips{display:flex;flex-wrap:nowrap;gap:6px;padding:8px 12px;background:#f4f9ff;border-top:1px solid #dcebfa;overflow-x:auto;scrollbar-width:none;}
  .bot-chips::-webkit-scrollbar{display:none;}
  .bot-chips:empty{display:none;}
  .bot-chips button{flex:none;white-space:nowrap;padding:.35em .8em;border-radius:999px;border:1px solid #cfe2f7;background:#fff;font-family:var(--font-body);font-size:.78rem;font-weight:600;color:#0c2340;cursor:pointer;}
  .bot-chips button:hover{border-color:#0b57b8;background:#eaf3fd;}
  .bot-wa{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 12px;border-top:1px solid #dcebfa;background:#effbf3;color:#128c4a;font-family:var(--font-body);font-size:.8rem;font-weight:700;}
  .bot-wa[hidden]{display:none;}
  .bot-wa svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .bot-wa:hover{background:#25d366;color:#fff;}
  .bot-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #dcebfa;background:#fff;}
  .bot-form input{flex:1;min-width:0;padding:.65em .9em;border:1px solid #cfe2f7;border-radius:999px;font-family:var(--font-body);font-size:.9rem;color:#0c2340;background:#fff;}
  .bot-form input:focus{outline:2px solid #0b57b8;outline-offset:1px;}
  .bot-form button{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:linear-gradient(135deg,#0b57b8,#1450a8);color:#fff;font-size:1rem;cursor:pointer;}
  .bot-form button:hover{filter:brightness(1.1);}

  @media (max-width:520px){
    .bot{right:10px;bottom:10px;}
    .bot-btn{width:72px;height:88px;}
    .bot-bubble{max-width:170px;font-size:.8rem;}
    .bot-panel{height:min(74vh, calc(100vh - 130px));}
  }
  @media (prefers-reduced-motion: reduce){
    .bot-btn, .bot-eyes, .bot[data-pose="wave"] .arm-r, .bot[data-pose="question"] .bot-q, .bot-typing i{animation:none;}
    .bot-bubble{transition:none;} .bot-log{scroll-behavior:auto;}
  }

  /* ---------- CONTACT INFO + SOCIAL ---------- */
  .contact-info{margin-top:56px;text-align:center;}
  .contact-info-title{font-size:clamp(1.3rem, 2.4vw, 1.7rem);font-weight:600;}
  .contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:24px auto 0;}
  .contact-card{
    display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;
    background:var(--bg-card);border:1px solid var(--border);border-radius:18px;color:var(--text);
    box-shadow:0 18px 36px -26px rgba(20,60,130,.4);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .contact-card:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 24px 44px -26px rgba(20,60,130,.55);}
  .contact-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#eaf3fd;color:var(--cyan);margin-bottom:4px;}
  .contact-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .contact-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);}
  .contact-value{font-weight:700;font-size:.98rem;line-height:1.4;overflow-wrap:anywhere;}
  .social-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px;}
  .social-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-right:4px;}
  .social-btn{
    width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;
    border:1px solid var(--border);box-shadow:0 12px 24px -14px rgba(20,60,130,.55);
    transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }
  .social-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
  .social-ig{color:#d6336c;} .social-in{color:#0a66c2;} .social-fb{color:#1877f2;}
  .social-btn:hover{transform:translateY(-3px);color:#fff;border-color:transparent;}
  .social-ig:hover{background:linear-gradient(135deg,#feda75,#d6336c 55%,#4f5bd5);}
  .social-in:hover{background:#0a66c2;}
  .social-fb:hover{background:#1877f2;}
  .social-wa{color:#1da851;}
  .social-wa:hover{background:#25d366;}
  @media (max-width:720px){ .contact-cards{grid-template-columns:1fr;max-width:420px;} }

  /* ---------- DARK SERVICE CARDS + AI SECTION ---------- */
  .service-card{
    background:linear-gradient(160deg,#0c2340 0%,#123a7a 55%,#1450a8 100%);
    border-color:rgba(70,140,255,.45);
  }
  .service-card h3{color:#fff;}
  .service-card p{color:rgba(255,255,255,.88);}
  .service-list{color:rgba(255,255,255,.8);}
  .service-list li::before{color:color-mix(in srgb, var(--accent) 45%, #fff);}
  .service-icon{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);}
  .service-icon svg{stroke:color-mix(in srgb, var(--accent) 40%, #fff);}
  .card-link{color:color-mix(in srgb, var(--accent, #7fb6ff) 40%, #fff);}

  .ai-section{padding-block:80px;}
  .ai-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:48px;align-items:center;}
  .ai-copy h2{font-size:clamp(1.7rem, 3vw, 2.4rem);font-weight:600;margin-top:14px;line-height:1.2;}
  .ai-copy > p{margin-top:16px;color:var(--text-muted);font-size:1.02rem;}
  .ai-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;}
  .ai-points li{display:grid;gap:2px;padding-left:18px;position:relative;}
  .ai-points li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#1e7dff,#0b57b8);}
  .ai-points strong{font-size:1rem;}
  .ai-points span{color:var(--text-muted);font-size:.95rem;}
  .ai-copy .hero-actions{margin-top:28px;justify-content:flex-start;}
  .ai-figure{margin:0;border-radius:26px;overflow:hidden;box-shadow:0 34px 70px -30px rgba(12,35,64,.7), 0 0 0 1px rgba(30,125,255,.35);}
  .ai-figure img, .ai-figure video{display:block;width:100%;height:auto;background:#0c2340;}
  /* zoom in slightly (anchored top-left) so the generator watermark in the bottom-right corner is cropped out */
  .ai-figure video{transform:scale(1.22);transform-origin:20% 35%;}
  @media (max-width:860px){ .ai-grid{grid-template-columns:1fr;gap:34px;} .ai-section{padding-block:60px;} }

  /* ---------- SERVICE / INDUSTRY / WHY-TEKJEE PAGES ---------- */
  .pg-particle-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
  .pg-particle-stage{position:relative;aspect-ratio:1;width:min(360px,90%);margin-inline:auto;}
  .pg-particle-glow{
    position:absolute;inset:-16%;border-radius:50%;
    background:radial-gradient(circle, color-mix(in srgb, var(--accent-page, var(--cyan)) 46%, transparent) 0%, color-mix(in srgb, var(--accent-page, var(--cyan)) 18%, transparent) 42%, transparent 72%);
    filter:blur(30px);opacity:.75;z-index:0;
  }
  .pg-particle-stage canvas{position:relative;width:100%;height:100%;display:block;z-index:1;}
  .pg-particle-label{margin-top:14px;text-align:center;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;color:var(--text-dim);min-height:1.2em;}

  .tldr-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;}
  .tldr-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:16px 14px;box-shadow:0 16px 32px -24px rgba(20,60,130,.4);}
  .tldr-card .num{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--accent-page, var(--cyan));}
  :root[data-theme="dark"] .tldr-card .num{color:var(--cyan);}
  .tldr-card p{margin-top:6px;font-size:.82rem;color:var(--text-muted);}

  .pg-card.accent-page{--accent:var(--accent-page, var(--cyan));}
  .pg-icon.accent-page{background:color-mix(in srgb, var(--accent-page, var(--cyan)) 12%, #fff);color:var(--accent-page, var(--cyan));}

  .industries-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:8px;}
  .industry-chip{
    display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
    background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:18px 10px;
    transition:transform .2s ease, box-shadow .2s ease;color:var(--text);
  }
  .industry-chip:hover{transform:translateY(-3px);box-shadow:0 20px 36px -24px rgba(20,60,130,.5);}
  .industry-chip .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb, var(--accent-page, var(--cyan)) 12%, #fff);color:var(--accent-page, var(--cyan));}
  .industry-chip .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .industry-chip span{font-size:.82rem;font-weight:600;}

  .industry-body{max-width:70ch;margin-top:18px;color:var(--text-muted);font-size:1.02rem;line-height:1.65;}

  .back-link-row{margin-top:22px;}
  .back-link-row a{font-weight:700;color:var(--accent-page, var(--cyan));}

  @media (max-width:960px){
    .pg-particle-grid{grid-template-columns:1fr;}
    .industries-strip{grid-template-columns:repeat(3,1fr);}
    .tldr-strip{grid-template-columns:1fr;}
  }
  @media (max-width:600px){
    .industries-strip{grid-template-columns:repeat(2,1fr);}
  }

  /* web development hero: full-width headline, then copy left / browser visual right */
  .wd-hero{padding-block:40px 64px;}
  .wd-hero .crumbs{margin-bottom:22px;}
  :root[data-theme="dark"] .wd-hero::before{display:none;}
  .wd-hero h1{font-size:clamp(1.9rem, 3.7vw, 2.75rem);line-height:1.1;margin-top:0;max-width:none;letter-spacing:-.01em;}
  .wd-hero-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;margin-top:44px;}
  .wd-hero .pg-lead{margin-top:0;max-width:40ch;font-size:1.14rem;line-height:1.6;}
  .wd-hero .hero-actions{margin-top:30px;}
  .wd-hero .btn{white-space:nowrap;}
  .wd-hero .btn:active{transform:translateY(1px) scale(.98);}
  .wd-hero-media{
    margin:0;border-radius:14px;overflow:hidden;
    border:1px solid var(--border);background:var(--bg-raised);
    aspect-ratio:16 / 9;
    box-shadow:0 40px 70px -40px color-mix(in srgb, var(--accent-page, var(--cyan)) 55%, transparent);
  }
  .wd-hero-media img{width:100%;height:100%;object-fit:cover;display:block;}
  :root[data-theme="dark"] .wd-hero-media img{filter:brightness(.86) saturate(1.08);}

  /* 3D layer (js/wd-hero-3d.js): canvas fills the hero, the media box stays as the layout anchor */
  .wd-hero{min-height:max(620px, calc(100dvh - 75px));display:flex;align-items:center;}
  .wd-hero > .wrap{width:100%;z-index:1;}
  .wd-hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;}
  .wd-hero.is-3d .wd-hero-media{border-color:transparent;background:none;box-shadow:none;animation:none;overflow:visible;}
  .wd-hero.is-3d .wd-hero-media img{visibility:hidden;animation:none;}

  .wd-proof{padding-block:0 24px;}
  .wd-proof-row{display:grid;grid-template-columns:repeat(3,1fr);}
  .wd-proof-item{padding:26px 28px 6px;border-top:1px solid var(--border);}
  .wd-proof-item:first-child{padding-left:0;}
  .wd-proof-item + .wd-proof-item{border-left:1px solid var(--border-soft);}
  .wd-proof-item .num{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--accent-page, var(--cyan));}
  :root[data-theme="dark"] .wd-proof-item .num{color:var(--cyan);}
  .wd-proof-item p{margin-top:8px;font-size:.92rem;line-height:1.55;color:var(--text-muted);max-width:34ch;}

  @media (prefers-reduced-motion: no-preference){
    .wd-in{animation:wdRise .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i, 0) * 90ms);}
    .wd-hero-media{animation:wdReveal 1.1s cubic-bezier(.16,1,.3,1) .25s both;}
    .wd-hero-media img{animation:wdSettle 1.6s cubic-bezier(.16,1,.3,1) .25s both;}
  }
  @keyframes wdRise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
  @keyframes wdReveal{from{clip-path:inset(12% 0 0 0 round 14px);opacity:0;}to{clip-path:inset(0 0 0 0 round 14px);opacity:1;}}
  @keyframes wdSettle{from{transform:scale(1.08);}to{transform:scale(1);}}

  @media (max-width:960px){
    .wd-hero-grid{grid-template-columns:1fr;gap:32px;margin-top:24px;}
    .wd-hero .pg-lead{max-width:60ch;}
    .wd-proof-row{grid-template-columns:1fr;}
    .wd-proof-item,.wd-proof-item:first-child{padding:20px 0 4px;}
    .wd-proof-item + .wd-proof-item{border-left:0;}
  }
  @media (max-width:600px){
    .wd-hero{padding-block:24px 40px;min-height:0;}
    .wd-hero .btn{flex:1 1 auto;justify-content:center;}
  }
/*END-PAGES-CSS*/

/* ---------- NAV: SERVICES DROPDOWN ---------- */
  .nav-links{align-items:center;}
  .nav-dd{position:relative;}
  .nav-dd-btn{
    font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
    display:inline-flex;align-items:center;gap:5px;transition:color .15s ease;
  }
  .nav-dd-btn:hover,.nav-dd.open .nav-dd-btn{color:var(--text);}
  .nav-dd-caret{font-size:.7em;transition:transform .2s ease;}
  .nav-dd.open .nav-dd-caret{transform:rotate(180deg);}
  .nav-dd-menu{
    position:absolute;top:calc(100% + 14px);left:50%;
    min-width:290px;padding:8px;
    background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
    box-shadow:0 18px 40px -12px rgba(12,35,64,.28);
    display:flex;flex-direction:column;
    opacity:0;visibility:hidden;transform:translate(-50%,-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:60;
  }
  /* invisible bridge so the menu stays open while the pointer crosses the gap */
  .nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}
  .nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0);}
  @media (hover:hover){
    .nav-dd:hover .nav-dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0);}
    .nav-dd:hover .nav-dd-caret{transform:rotate(180deg);}
  }
  .nav-dd-menu a{
    padding:10px 12px;border-radius:9px;color:var(--text-muted);font-size:.9rem;white-space:nowrap;
  }
  .nav-dd-menu a:hover,.nav-dd-menu a:focus-visible{background:var(--bg-raised);color:var(--text);}

/* ---------- NAV: PHONE MENU (burger added by page.js) ---------- */
  .nav-burger{display:none;}
  @media (max-width:720px){
    .nav-burger{
      flex:none;width:38px;height:38px;border-radius:50%;
      border:1px solid var(--border);background:var(--bg-card);color:var(--text);
      display:grid;place-items:center;cursor:pointer;margin-left:auto;
    }
    .nav-burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
    .nav-burger path{transition:transform .2s ease, opacity .2s ease;transform-box:fill-box;transform-origin:center;}
    .nav-open .nav-burger .nb-1{transform:translateY(5px) rotate(45deg);}
    .nav-open .nav-burger .nb-2{opacity:0;}
    .nav-open .nav-burger .nb-3{transform:translateY(-5px) rotate(-45deg);}
    .nav-inner{gap:10px;}
    .nav-inner .theme-toggle{margin-left:0;}

    header.nav.nav-open .nav-links{
      display:flex;flex-direction:column;align-items:stretch;gap:2px;
      position:absolute;top:100%;left:0;right:0;
      padding:10px 16px 18px;
      background:var(--bg-card);border-bottom:1px solid var(--border);
      box-shadow:0 24px 40px -24px rgba(12,35,64,.45);
      max-height:calc(100vh - 70px);max-height:calc(100svh - 70px);overflow-y:auto;
      font-size:1rem;
    }
    header.nav.nav-open .nav-dd{width:100%;}
    header.nav.nav-open .nav-links > a,
    header.nav.nav-open .nav-dd-btn{padding:12px 10px;border-radius:10px;width:100%;justify-content:space-between;color:var(--text);}
    header.nav.nav-open .nav-links > a:hover,
    header.nav.nav-open .nav-dd-btn:hover{background:var(--bg-raised);}
    header.nav .nav-dd-menu,
    header.nav .nav-dd:hover .nav-dd-menu{
      position:static;transform:none;opacity:1;visibility:visible;
      display:none;min-width:0;box-shadow:none;border:0;border-radius:0;
      margin:0 0 4px 10px;padding:2px 0 2px 12px;border-left:2px solid var(--border);background:transparent;
    }
    header.nav .nav-dd.open .nav-dd-menu{display:flex;transform:none;}
    header.nav .nav-dd-menu::before{display:none;}
    header.nav .nav-dd-menu a{white-space:normal;padding:10px;}
  }
  @media (max-width:480px){
    .nav-burger{width:32px;height:32px;}
    .nav-burger svg{width:17px;height:17px;}
  }

/* ---------- BOOKING / START PROJECT CARD ---------- */
  body.book-lock{overflow:hidden;}
  .book-overlay{
    position:fixed;inset:0;z-index:1000;
    display:grid;place-items:center;padding:16px;
    background:rgba(8,20,38,.55);backdrop-filter:blur(6px);
    opacity:0;transition:opacity .2s ease;
  }
  .book-overlay[hidden]{display:none;}
  .book-overlay.show{opacity:1;}
  .book-card{
    position:relative;width:100%;max-width:940px;max-height:calc(100vh - 32px);overflow:hidden;
    display:grid;grid-template-columns:1fr 1.05fr;gap:12px;padding:12px;
    background:var(--bg-card);color:var(--text);
    border:1px solid var(--border);border-radius:20px;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.45);
    transform:translateY(12px) scale(.98);transition:transform .22s ease;
  }
  /* left: animated grain gradient (pastel + dark blue), drawn by grainGradient() in js/page.js */
  .book-art{
    position:relative;overflow:hidden;border-radius:12px;min-height:520px;color:#fff;
    background:radial-gradient(circle at 0% 100%, #bfddff 0%, #5a94f4 22%, #0a2fd6 45%, transparent 70%),
      radial-gradient(circle at 100% 0%, #eaf4ff 0%, #5a94f4 25%, #0a2fd6 48%, transparent 72%), #050d20;
  }
  .book-art.has-gl{background:#050d20;}
  .book-art-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
  .book-art-copy{
    position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:24px;
    padding:34px 30px 30px;
    background:linear-gradient(180deg, rgba(5,13,32,.72) 0%, rgba(5,13,32,.25) 32%, rgba(5,13,32,0) 50%, rgba(5,13,32,0) 68%, rgba(5,13,32,.66) 100%);
  }
  .book-art-title{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem, 3vw, 2.4rem);line-height:1.08;letter-spacing:-.03em;text-shadow:0 2px 18px rgba(5,13,32,.45);}
  .book-art-sub{margin:0;max-width:30ch;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.88);}
  .book-main{position:relative;padding:30px 26px 22px;overflow:auto;max-height:calc(100vh - 58px);}
  .book-overlay.show .book-card{transform:none;}
  .book-eyebrow{
    font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--cyan);
  }
  .book-card h2{font-family:var(--font-display);font-size:1.35rem;margin:.4em 0 .3em;}
  .book-main > p{color:var(--text-muted);font-size:.92rem;margin:0 0 20px;}
  .book-close{
    position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--border);background:var(--bg-card);color:var(--text);
    font-size:1.3rem;line-height:1;cursor:pointer;
  }
  .book-close:hover{border-color:var(--cyan);}
  .book-form{display:grid;gap:14px;}
  .book-field{display:grid;gap:6px;}
  .book-field label{font-size:.84rem;font-weight:600;}
  .book-field input,.book-field select{
    font:inherit;font-size:.95rem;color:var(--text);
    background:var(--bg-card);border:1px solid color-mix(in srgb, var(--text) 25%, transparent);border-radius:10px;
    height:48px;padding:0 .95em;width:100%;
  }
  .book-field input:focus,.book-field select:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent;}
  .book-field input[aria-invalid="true"],.book-field select[aria-invalid="true"]{border-color:#d62839;}
  .book-err{color:#d62839;font-size:.78rem;min-height:0;}
  .book-err:empty{display:none;}
  .book-form .btn{justify-content:center;width:100%;height:48px;border:0;cursor:pointer;margin-top:6px;font-size:1rem;}
  @media (max-width:760px){
    .book-card{grid-template-columns:1fr;overflow:auto;}
    .book-art{min-height:150px;}
    .book-art-sub{display:none;}
    .book-art-copy{padding:20px;}
    .book-main{max-height:none;overflow:visible;padding:20px 14px 16px;}
  }
  .book-note{font-size:.76rem;color:var(--text-dim);text-align:center;margin:0;}
  .book-hint{font-size:.8rem;color:var(--text-muted);margin:0;}
  /* spam trap: hidden from people, bots that fill every field get filtered out by FormSubmit */
  .book-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
  .book-submit:disabled{opacity:.7;cursor:wait;}
  .book-done{text-align:center;padding:10px 0 4px;}
  .book-done[hidden]{display:none;}
  .book-done .book-tick{
    width:56px;height:56px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(100deg, var(--cyan), var(--violet));color:#fff;font-size:1.6rem;
  }
  .book-done p{color:var(--text-muted);font-size:.92rem;}
  @media (prefers-reduced-motion: reduce){
    .book-overlay,.book-card,.nav-dd-menu{transition:none;}
  }

/* ---------- INSTAGRAM REELS GALLERY (home page, js/ig-reels.js) ---------- */
  .ig-section{position:relative;padding-block:72px 0;overflow-x:clip;}
  .ig-intro{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:0;}
  .ig-intro h2{font-size:clamp(1.9rem, 4vw, 3rem);font-weight:400;line-height:1.15;letter-spacing:-.01em;}
  .ig-line{display:block;}
  .ig-accent{color:var(--cyan);font-weight:600;}
  .ig-intro p{margin-top:16px;color:var(--text-muted);font-size:1.05rem;max-width:44ch;}
  .ig-handle{color:var(--cyan);font-weight:700;}
  .ig-handle:hover{text-decoration:underline;}
  .ig-actions{margin-top:24px;}
  .ig-intro.ig-wait .ig-line{opacity:0;transform:translateY(18px);filter:blur(6px);}
  .ig-intro.ig-go .ig-line{opacity:1;transform:none;filter:none;transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s ease;}
  .ig-intro.ig-go .ig-line:nth-of-type(2){transition-delay:.1s;}
  .ig-intro.ig-go p.ig-line{transition-delay:.2s;}
  .ig-intro.ig-go .ig-actions{transition-delay:.3s;}

  .ig-glow{
    position:absolute;left:0;right:0;top:120px;height:70vh;z-index:1;pointer-events:none;
    background:linear-gradient(to right, #9cc2f0, #0a2fd6, #5ab4ff);
    filter:blur(84px);opacity:.22;
  }
  :root[data-theme="dark"] .ig-glow{opacity:.45;mix-blend-mode:screen;}

  .ig-scroll{position:relative;z-index:2;}
  .ig-sticky{display:flex;align-items:center;justify-content:center;padding-block:56px 72px;}
  .ig-gallery{
    --ig-s:.8;
    width:min(760px, calc(100% - 32px));margin-inline:auto;
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;
  }
  .ig-col{display:flex;flex-direction:column;gap:14px;}
  /* scroll mode: tall track, full-screen sticky stage in perspective */
  .ig-motion .ig-scroll{height:280vh;}
  .ig-motion .ig-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:0;align-items:center;}
  .ig-motion .ig-gallery{transform-origin:50% 50%;will-change:transform;}
  .ig-motion .ig-col{will-change:transform;}
  .ig-motion .ig-col--b{margin-top:-16%;}

  .ig-card{
    position:relative;display:block;aspect-ratio:4 / 5;
    border-radius:12px;overflow:hidden;background:#05080f;border:1px solid var(--border);
    box-shadow:0 24px 44px -30px rgba(20,60,130,.6);
    transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
  }
  .ig-card:hover{transform:translateY(-4px);box-shadow:0 30px 50px -28px rgba(20,60,130,.65), 0 0 0 2px var(--cyan);}
  .ig-card:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;}
  .ig-card:active{transform:translateY(-1px) scale(.99);}
  .ig-frame{position:absolute;inset:0;}
  .ig-frame iframe{
    position:absolute;left:0;top:calc(-54px * var(--ig-s));
    width:400px;height:720px;border:0;pointer-events:none;
    transform:scale(var(--ig-s));transform-origin:0 0;
  }

  .ig-modal{padding:0;border:0;background:transparent;max-width:none;max-height:none;overflow:visible;color:var(--text);}
  .ig-modal::backdrop{background:rgba(6,14,28,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
  .ig-modal[open]{animation:igPop .35s cubic-bezier(.16,1,.3,1);}
  .ig-player{width:min(400px, 92vw);height:min(820px, 86dvh);border-radius:14px;overflow:hidden;background:#fff;}
  .ig-player iframe{width:100%;height:100%;border:0;display:block;}
  .ig-close,.ig-step{
    position:fixed;width:46px;height:46px;border-radius:10px;cursor:pointer;
    border:1px solid rgba(255,255,255,.28);background:rgba(13,27,46,.6);color:#f5f8fc;font-size:1.15rem;
    transition:background .15s ease;
  }
  .ig-close:hover,.ig-step:hover{background:rgba(13,27,46,.92);}
  .ig-close{top:16px;right:16px;}
  .ig-step{top:50%;transform:translateY(-50%);}
  .ig-prev{left:max(16px, calc(50% - 280px));}
  .ig-next{right:max(16px, calc(50% - 280px));}
  html.ig-lock{overflow:hidden;}
  @keyframes igPop{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion: reduce){
    .ig-modal[open]{animation:none;}
    .ig-card,.ig-card:hover{transition:none;transform:none;}
  }
  @media (max-width:600px){
    .ig-gallery,.ig-col{gap:8px;}
    .ig-card{border-radius:8px;}
    .ig-motion .ig-scroll{height:240vh;}
    .ig-motion .ig-gallery{width:118vw;margin-inline:calc(50% - 59vw);}
    .ig-player{height:min(820px, 78dvh);}
    .ig-step{top:auto;bottom:16px;transform:none;}
    .ig-prev{left:calc(50% - 56px);}
    .ig-next{right:calc(50% - 56px);}
  }

/* ---------- WEB DEVELOPMENT HOVER SLIDER (web-development.html, js/hover-slider.js) ---------- */
  .hs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center;}
  .hs-list{display:flex;flex-direction:column;gap:4px;}
  .hs-title{
    font:inherit;font-family:var(--font-display);font-weight:600;text-transform:uppercase;
    font-size:clamp(1.4rem, 2.8vw, 2.25rem);line-height:1.12;letter-spacing:-.02em;
    color:var(--text-dim);background:none;border:0;padding:.12em 0;margin:0;text-align:left;cursor:pointer;
    transition:color .35s ease;
  }
  .hs-title.is-active{color:var(--text);}
  .hs-title:focus-visible{outline:2px solid var(--hs-accent, var(--cyan));outline-offset:4px;border-radius:4px;}
  .hs-letters{display:inline;}
  .hs-word{display:inline-flex;white-space:nowrap;}
  .hs-ch{position:relative;display:inline-block;overflow:hidden;height:1.12em;line-height:1.12;}
  .hs-a,.hs-b{display:block;transition:transform .55s cubic-bezier(.16,1,.3,1) var(--d, 0s);}
  .hs-b{position:absolute;left:0;top:100%;color:var(--hs-accent, var(--cyan));}
  .hs-title.is-active .hs-a,.hs-title.is-active .hs-b{transform:translateY(-100%);}

  .hs-frame{
    position:relative;aspect-ratio:5 / 4;border-radius:14px;overflow:hidden;
    border:1px solid var(--border);background:var(--bg-raised);
    box-shadow:0 40px 70px -44px color-mix(in srgb, var(--hs-accent, var(--cyan)) 60%, transparent);
  }
  .hs-img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
    clip-path:inset(0 0 100% 0);transform:scale(1.08);z-index:0;
  }
  .hs-img.is-prev{clip-path:inset(0);transform:none;z-index:1;}
  .hs-img.is-active{
    clip-path:inset(0);transform:scale(1);z-index:2;
    transition:clip-path .8s cubic-bezier(.77,0,.18,1), transform 1.2s cubic-bezier(.16,1,.3,1);
  }
  .hs-caps{display:grid;margin-top:18px;}
  .hs-compact .hs-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;}
  .hs-compact .hs-title{font-size:clamp(1.05rem, 2.3vw, 1.8rem);}
  .hs-violet{--hs-accent:#7b2ff7;}
  :root[data-theme="dark"] .hs-violet{--hs-accent:#b48cff;}
  .hs-cap{grid-area:1 / 1;max-width:52ch;color:var(--text-muted);font-size:1rem;line-height:1.6;opacity:0;transform:translateY(8px);transition:opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1);}
  .hs-cap.is-active{opacity:1;transform:none;transition-delay:.12s;}

  @media (prefers-reduced-motion: reduce){
    .hs-a,.hs-b,.hs-img.is-active,.hs-cap{transition:none;}
  }
  @media (max-width:900px){
    .hs-grid,.hs-compact .hs-grid{grid-template-columns:1fr;gap:28px;}
    .hs-media{order:-1;}
    .hs-title{font-size:clamp(1.2rem, 5.6vw, 1.8rem);}
    .hs-compact .hs-title{font-size:clamp(1.05rem, 4.9vw, 1.6rem);}
  }

/* ---------- WEB DEVELOPMENT HERO VIDEO (js/wd-hero-video.js) ---------- */
  .wd-hero-video{position:relative;background:#0c2340;}
  .wd-hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  /* bottom-left, clear of the chat assistant fixed at the bottom-right of the screen */
  .wd-hero-video .hero-sound,.hero-frame .hero-sound{right:auto;left:16px;bottom:16px;}
  .wd-endcard{
    position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;
    background:radial-gradient(ellipse at center, rgba(10,47,214,.55), rgba(8,20,40,.88));
    opacity:0;visibility:hidden;transition:opacity .5s ease, visibility 0s linear .5s;
  }
  /* the page's still image behind the end card text, darkened so the words stay readable; slow zoom-out while shown */
  .wd-end-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);}
  .wd-endcard:has(.wd-end-img)::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center, rgba(8,20,40,.35), rgba(8,20,40,.75));}
  .wd-endcard p{position:relative;z-index:2;margin:0;font-family:var(--font-display);font-weight:700;color:#fff;font-size:clamp(1.6rem, 3.6vw, 2.8rem);letter-spacing:-.01em;text-align:center;text-shadow:0 4px 24px rgba(0,0,0,.55);}
  .wd-endcard span{display:inline-block;opacity:0;transform:translateY(16px);}
  .show-end > .wd-endcard{opacity:1;visibility:visible;transition:opacity .5s ease;}
  .show-end > .wd-endcard .wd-end-img{transform:scale(1);transition:transform 3.5s ease-out;}
  .show-end > .wd-endcard span{animation:wdWord .6s cubic-bezier(.16,1,.3,1) forwards;}
  .show-end > .wd-endcard span:nth-child(2){animation-delay:.25s;}
  .show-end > .wd-endcard span:nth-child(3){animation-delay:.5s;color:#7cc4ff;}
  .cam-hero-video{position:relative;}
  .cam-hero-video.show-end > .wd-endcard{cursor:pointer;}
  .cam-hero-video.show-end > .wd-endcard span:nth-child(3){color:#86efac;}
  @keyframes wdWord{to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion: reduce){
    .show-end > .wd-endcard span{animation:none;opacity:1;transform:none;}
    .wd-end-img{transform:none !important;}
  }

/* ---------- CAMERA SURVEILLANCE PAGE (camera-monitoring.html, js/cam-tabs.js) ---------- */
  .pg-grid.cam-five{grid-template-columns:repeat(6,1fr);}
  .pg-grid.cam-five > *{grid-column:span 2;}
  .pg-grid.cam-five > :nth-child(4){grid-column:2 / span 2;}
  .cam-center{margin-inline:auto;text-align:center;}
  .pg-video-section .video-frame{max-width:960px;}

  .cam-benefits{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
  .cam-benefits li{
    display:flex;align-items:center;gap:12px;font-weight:600;
    padding:14px 16px;border-radius:12px;background:var(--bg-raised);
  }
  .cam-benefits li::before{
    content:"\2713";flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
    font-size:.85rem;color:#fff;background:var(--accent-page, var(--cyan));
  }

  .cam-tabs{display:inline-flex;gap:6px;padding:6px;border-radius:999px;background:var(--bg-raised);border:1px solid var(--border);margin-bottom:26px;}
  .cam-tab{
    font:inherit;font-weight:600;font-size:.95rem;color:var(--text-muted);background:none;border:0;
    padding:.65em 1.3em;border-radius:999px;cursor:pointer;transition:background .2s ease, color .2s ease;
  }
  .cam-tab.is-active{background:var(--bg-card);color:var(--text);box-shadow:0 6px 16px -10px rgba(12,35,64,.45);}
  .cam-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
  .cam-panel[hidden]{display:none;}
  .cam-svc{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
  .cam-svc > div{
    padding:18px 20px;border-radius:14px;background:var(--bg-card);border:1px solid var(--border);
    border-left:3px solid var(--accent-page, var(--cyan));
  }
  .cam-svc dt{font-weight:700;font-size:1rem;}
  .cam-svc dd{margin:6px 0 0;color:var(--text-muted);font-size:.93rem;line-height:1.55;}
  .cam-note{margin-top:22px;color:var(--text-muted);font-size:.95rem;}

  .cam-mini{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;}
  .cam-mini li{position:relative;padding-left:16px;color:var(--text-muted);font-size:.93rem;line-height:1.5;}
  .cam-mini li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent-page, var(--cyan));}
  .cam-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;}
  .cam-strip span{
    padding:16px 18px;border-radius:12px;font-weight:600;text-align:center;
    background:color-mix(in srgb, var(--accent-page, var(--cyan)) 8%, var(--bg-card));
    border:1px solid color-mix(in srgb, var(--accent-page, var(--cyan)) 25%, transparent);
  }

  .cam-hub{
    display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:stretch;
    padding:36px;border-radius:22px;background:var(--bg-raised);border:1px solid var(--border);
  }
  .cam-hub h2{font-size:clamp(1.6rem, 3vw, 2.3rem);font-weight:600;margin-top:12px;}
  .cam-hub > div > p{margin-top:14px;color:var(--text-muted);max-width:52ch;}
  .cam-hub .hero-actions{margin-top:26px;}
  .cam-pays{
    border-radius:16px;padding:28px;color:#fff;
    background:linear-gradient(150deg, #0c2340, #13305a 55%, #7a1522);
  }
  .cam-pays h3{font-family:var(--font-body);font-size:1rem;font-weight:700;color:rgba(255,255,255,.85);}
  .cam-pays .cam-big{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem, 6vw, 3.6rem);line-height:1;margin:14px 0 12px;color:#86efac;}
  .cam-pays p{color:rgba(255,255,255,.88);font-size:.95rem;line-height:1.6;margin:0;}
  .cam-pays .cam-small{margin-top:14px;font-size:.84rem;color:rgba(255,255,255,.7);}

  @media (max-width:960px){
    .pg-grid.cam-five{grid-template-columns:repeat(2,1fr);}
    .pg-grid.cam-five > *,.pg-grid.cam-five > :nth-child(4){grid-column:auto;}
    .cam-hub{grid-template-columns:1fr;padding:26px;}
  }
  @media (max-width:600px){
    .pg-grid.cam-five{grid-template-columns:1fr;}
    .cam-svc,.cam-strip{grid-template-columns:1fr;}
    .cam-tabs{display:flex;}
    .cam-tab{flex:1;padding:.65em .6em;}
  }

/* web development hero: video frame sits where the landing page frame sits, text below it */
  .wd-hero{display:block;min-height:0;padding-top:calc((100vh - 75px - var(--hero-video-h)) / 2);padding-bottom:64px;}
  .wd-hero .wd-hero-video{
    width:calc(var(--hero-video-h) * var(--hero-video-ratio));aspect-ratio:1.9;margin:0 auto 48px;
    border-radius:22px;overflow:hidden;background:#0c2340;
    border:1px solid var(--border);
    box-shadow:0 0 0 6px color-mix(in srgb, var(--bg-raised) 85%, transparent), 0 40px 80px -36px rgba(12,35,64,.65);
    animation:wdReveal 1.1s cubic-bezier(.16,1,.3,1) .1s both;
  }
  .wd-hero-grid{display:block;margin-top:22px;}
  .wd-hero .pg-lead{max-width:60ch;}
  .cam-hero-video{margin:0 auto 36px;}
  @media (prefers-reduced-motion: reduce){ .wd-hero .wd-hero-video{animation:none;} }
  @media (max-width:600px){ .wd-hero{padding-top:20px;} .wd-hero .wd-hero-video{margin-bottom:28px;border-radius:14px;} }
  .wd-hero .eyebrow + h1{margin-top:14px;}

/* AI page "Key features": feature list on the left, a large SVG robot on the right (js/ai-bot.js sets the states).
   .is-hi   = the robot itself is hovered or tapped: it waves and greets
   .is-talk = a feature is hovered, focused or tapped: it points at the list and says that feature's data-say line */
  .aib-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;}
  .aib-stage{position:relative;width:min(480px, 100%, calc((100vh - 120px) / 1.525));margin-inline:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .aib-glow{
    position:absolute;inset:22% -6% 12%;border-radius:50%;z-index:0;
    background:radial-gradient(circle, color-mix(in srgb, var(--accent-page) 38%, transparent) 0%, color-mix(in srgb, var(--accent-page) 12%, transparent) 45%, transparent 72%);
    filter:blur(30px);opacity:.7;transition:opacity .4s ease, transform .4s ease;
  }
  .aib-art{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible;}
  .aib-hint{margin:4px 0 0;text-align:center;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;color:var(--text-dim);transition:opacity .3s ease;}

  /* speech bubble above the head (the SVG viewBox leaves room for it) */
  .aib-say{
    position:absolute;z-index:2;top:0;left:50%;width:min(330px, 96%);
    padding:14px 18px;border-radius:18px;background:#8a2bff;color:#fff;
    font-size:.95rem;font-weight:600;line-height:1.45;text-align:center;
    box-shadow:0 18px 40px -16px rgba(60,20,130,.6);
    opacity:0;transform:translate(-50%, 10px) scale(.92);transform-origin:50% 100%;
    transition:opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none;
  }
  .aib-say::after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;margin-left:-9px;background:inherit;border-radius:3px;transform:rotate(45deg);}
  .aib-say p{margin:0;}
  .aib-say.show{opacity:1;transform:translate(-50%, 0);}

  /* idle: breathing, blinking, glowing core */
  .aib-upper{animation:aib-breathe 3.4s ease-in-out infinite;}
  @keyframes aib-breathe{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
  .aib-eyes{transform-origin:200px 106px;animation:aib-blink 4.5s infinite;}
  @keyframes aib-blink{ 0%,93%,100%{transform:scaleY(1);} 96%{transform:scaleY(.1);} }
  .aib-look{transition:transform .25s ease-out;}
  .aib-core, .aib-antenna, .aib-earlight{animation:aib-pulse 2.2s ease-in-out infinite;}
  @keyframes aib-pulse{ 50%{opacity:.5;} }
  .aib-mouth rect{transform-box:fill-box;transform-origin:center;}
  .aib-eyes-happy, .aib-blush{opacity:0;transition:opacity .25s ease;}
  .aib-eyes{transition:opacity .25s ease;}

  .aib-arm-l, .aib-arm-r, .aib-fore-l, .aib-fore-r, .aib-head{transition:transform .5s cubic-bezier(.34,1.4,.64,1);}
  .aib-arm-l{transform-origin:122px 214px;transform:rotate(4deg);}
  .aib-arm-r{transform-origin:278px 214px;transform:rotate(-4deg);}
  .aib-fore-l{transform-origin:122px 290px;transform:rotate(-4deg);}
  .aib-fore-r{transform-origin:278px 290px;transform:rotate(4deg);}
  .aib-head{transform-origin:200px 180px;}

  /* robot hovered: raise the right arm and wave from the elbow, happy eyes */
  .aib-stage.is-hi .aib-arm-r{transform:rotate(-78deg);}
  .aib-stage.is-hi .aib-fore-r{animation:aib-wave .5s ease-in-out .25s infinite alternate;transform:rotate(-100deg);}
  @keyframes aib-wave{ from{transform:rotate(-80deg);} to{transform:rotate(-122deg);} }
  .aib-stage.is-hi .aib-head{animation:aib-tilt 1.4s ease-in-out infinite alternate;}
  @keyframes aib-tilt{ from{transform:rotate(-4deg);} to{transform:rotate(5deg);} }
  .aib-stage.is-hi .aib-eyes{opacity:0;}
  .aib-stage.is-hi .aib-eyes-happy{opacity:1;}
  .aib-stage.is-hi .aib-blush{opacity:.5;}
  .aib-stage.is-hi .aib-glow, .aib-stage.is-talk .aib-glow{opacity:1;transform:scale(1.06);}
  .aib-stage.is-hi .aib-hint, .aib-stage.is-talk .aib-hint{opacity:0;}

  /* feature hovered: point at the list with the left arm, lean the head toward it */
  .aib-stage.is-talk .aib-arm-l{transform:rotate(32deg);}
  .aib-stage.is-talk .aib-fore-l{transform:rotate(44deg);}
  .aib-stage.is-talk:not(.is-hi) .aib-head{transform:rotate(-6deg);}
  .aib-stage.is-speaking .aib-mouth rect{animation:aib-talk .22s ease-in-out infinite alternate;}
  .aib-stage.is-speaking .aib-mouth rect:nth-child(2n){animation-delay:.11s;}
  .aib-stage.is-speaking .aib-mouth rect:nth-child(3){animation-duration:.18s;}
  @keyframes aib-talk{ from{transform:scaleY(1);} to{transform:scaleY(3.2);} }

  .aib-list{list-style:none;margin:26px 0 0;padding:0;counter-reset:aib;display:grid;gap:10px;}
  .aib-list li{
    counter-increment:aib;position:relative;padding:14px 16px 14px 58px;border-radius:14px;cursor:default;
    background:var(--bg-card);border:1px solid var(--border);outline:none;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .aib-list li::before{
    content:counter(aib, decimal-leading-zero);position:absolute;left:16px;top:15px;
    font-family:var(--font-mono);font-size:.8rem;font-weight:500;color:var(--accent-page);
  }
  :root[data-theme="dark"] .aib-list li::before{color:#b98cff;}
  .aib-list li:hover, .aib-list li.is-active, .aib-list li:focus-visible{transform:translateX(6px);border-color:color-mix(in srgb, var(--accent-page) 60%, transparent);box-shadow:0 18px 34px -26px rgba(60,20,130,.55);}
  .aib-list li:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-page) 35%, transparent);}
  .aib-list strong{display:block;font-size:1rem;}
  .aib-list span{display:block;margin-top:3px;font-size:.9rem;color:var(--text-muted);}

  @media (max-width:960px){
    .aib-grid{grid-template-columns:minmax(0,1fr);gap:20px;}
    .aib-stage{order:-1;width:min(360px,92%);}
  }
  @media (prefers-reduced-motion: reduce){
    .aib-upper, .aib-eyes, .aib-core, .aib-antenna, .aib-earlight, .aib-mouth rect{animation:none !important;}
    .aib-stage.is-hi .aib-fore-r, .aib-stage.is-hi .aib-head{animation:none;}
    .aib-arm-l, .aib-arm-r, .aib-fore-l, .aib-fore-r, .aib-head, .aib-say{transition:none;}
  }

/* ---- Explainer scenes: small animated SVG stories on the service pages (Digital Marketing, Web, CRM)
   that show in pictures what the service does. One 10s loop split into four 2.5s stages; the step pills
   under the drawing light up with the stage that is playing. Base styles are the finished picture, the
   keyframes hide and reveal parts, so with reduced motion (animation off) the full picture shows.
   page.js adds .is-on while a scene is on screen; off screen it is paused. ---- */
  .xs{
    --xs-accent:#0a2fd6;
    margin-top:28px;background:var(--bg-card);border:1px solid var(--border);border-radius:22px;
    padding:18px 18px 14px;box-shadow:0 22px 44px -28px rgba(20,60,130,.4);
  }
  .xs-wide{margin:0 0 34px;}
  .xs svg{display:block;width:100%;height:auto;overflow:visible;}
  .xs svg *{transform-box:fill-box;transform-origin:center;}
  .xs-steps{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
  .xs-steps li{
    font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
    text-align:center;color:var(--text-dim);padding:7px 4px;border-radius:999px;line-height:1.3;
    animation:xs-pill 10s linear infinite;animation-delay:calc((var(--i) - 4) * 2.5s);
  }
  .xs-steps li b{display:block;font-size:.9rem;color:var(--xs-accent);}
  :root[data-theme="dark"] .xs{--xs-accent:#5ab4ff;}
  .xs:not(.is-on) *, .xs:not(.is-on) svg *{animation-play-state:paused !important;}

  /* scene colours that follow light/dark mode */
  .xs .s-bg{fill:var(--bg-raised);}
  .xs .s-card{fill:var(--bg-card);stroke:var(--border);stroke-width:2;}
  .xs .s-line{fill:var(--border);}
  .xs .s-stroke{fill:none;stroke:var(--border);stroke-width:2;}
  .xs .s-text{fill:var(--text);font-family:var(--font-body);font-weight:700;}
  .xs .s-dim{fill:var(--text-dim);font-family:var(--font-mono);}

  /* dark mode: lift the navy shapes and blue text off the dark background */
  :root[data-theme="dark"] .xs rect[fill="#0c2340"], :root[data-theme="dark"] .xs path[fill="#0c2340"]{fill:#2c4a78;}
  :root[data-theme="dark"] .xs rect[fill="#1c2c4c"]{fill:#3a5680;}
  :root[data-theme="dark"] .xs text[fill="#0a2fd6"], :root[data-theme="dark"] .xs tspan[fill="#0a2fd6"]{fill:#7cc4ff;}

  /* stage reveals: 1 = 0-25%, 2 = 25-50%, 3 = 50-75%, 4 = 75-100% of the loop */
  .xs .a-show1{animation:xs-show1 10s ease-out infinite both;}
  .xs .a-show2{animation:xs-show2 10s ease-out infinite both;}
  .xs .a-show3{animation:xs-show3 10s ease-out infinite both;}
  .xs .a-show4{animation:xs-show4 10s ease-out infinite both;}
  .xs .a-pop2{animation:xs-pop2 10s cubic-bezier(.3,1.5,.5,1) infinite both;}
  .xs .a-pop3{animation:xs-pop3 10s cubic-bezier(.3,1.5,.5,1) infinite both;}
  .xs .a-pop4{animation:xs-pop4 10s cubic-bezier(.3,1.5,.5,1) infinite both;}
  /* later-in-stage reveals (instead of long delays, which would spill into the next loop) */
  .xs .a-show1l{animation:xs-show1l 10s ease-out infinite both;}
  .xs .a-pop2l{animation:xs-pop2l 10s cubic-bezier(.3,1.5,.5,1) infinite both;}
  .xs .a-pop3l{animation:xs-pop3l 10s cubic-bezier(.3,1.5,.5,1) infinite both;}
  .xs .a-pop4l{animation:xs-pop4l 10s cubic-bezier(.3,1.5,.5,1) infinite both;}
  @keyframes xs-show1l{0%,12%{opacity:0;transform:translateY(8px);}16%,94%{opacity:1;transform:none;}100%{opacity:0;}}
  @keyframes xs-pop2l{0%,37%{opacity:0;transform:scale(.3);}42%,54%{opacity:1;transform:none;}60%,100%{opacity:0;transform:scale(.3);}}
  @keyframes xs-pop3l{0%,67%{opacity:0;transform:scale(.3);}72%,94%{opacity:1;transform:none;}100%{opacity:0;}}
  @keyframes xs-pop4l{0%,85%{opacity:0;transform:scale(.3);}90%,95%{opacity:1;transform:none;}100%{opacity:0;}}
  .xs .a-grow4{transform-origin:center bottom;animation:xs-grow4 10s cubic-bezier(.2,.8,.2,1) infinite both;}
  .xs .a-draw4{stroke-dasharray:1;animation:xs-draw4 10s ease-in-out infinite both;}
  .xs .a-bob{animation:xs-bob 2.4s ease-in-out infinite alternate;}
  .xs .a-blink{animation:xs-blink 4s infinite;}
  .xs .a-type{animation:xs-type .5s ease-in-out infinite alternate;}

  @keyframes xs-pill{0%,24%{background:color-mix(in srgb, var(--xs-accent) 13%, transparent);color:var(--text);}25%,100%{background:transparent;color:var(--text-dim);}}
  @keyframes xs-show1{0%{opacity:0;transform:translateY(10px);}5%,94%{opacity:1;transform:none;}100%{opacity:0;}}
  @keyframes xs-show2{0%,25%{opacity:0;transform:translateY(10px);}30%,94%{opacity:1;transform:none;}100%{opacity:0;}}
  @keyframes xs-show3{0%,50%{opacity:0;transform:translateY(10px);}55%,94%{opacity:1;transform:none;}100%{opacity:0;}}
  @keyframes xs-show4{0%,75%{opacity:0;transform:translateY(10px);}80%,94%{opacity:1;transform:none;}100%{opacity:0;}}
  @keyframes xs-pop2{0%,25%{opacity:0;transform:scale(.3);}30%,94%{opacity:1;transform:none;}100%{opacity:0;}}
  @keyframes xs-pop3{0%,50%{opacity:0;transform:scale(.3);}55%,94%{opacity:1;transform:none;}100%{opacity:0;}}
  @keyframes xs-pop4{0%,75%{opacity:0;transform:scale(.3);}81%,94%{opacity:1;transform:none;}100%{opacity:0;}}
  @keyframes xs-grow4{0%,75%{transform:scaleY(0);}86%,95%{transform:none;}100%{transform:scaleY(0);}}
  @keyframes xs-draw4{0%,80%{stroke-dashoffset:1;}92%,95%{stroke-dashoffset:0;}100%{stroke-dashoffset:1;}}
  @keyframes xs-bob{from{transform:translateY(0);}to{transform:translateY(-4px);}}
  @keyframes xs-blink{0%,92%,100%{transform:none;}95%{transform:scaleY(.1);}}
  @keyframes xs-type{from{transform:translateY(0);}to{transform:translateY(-3px);}}

  /* Digital Marketing: reactions fly from the phone to the crowd, who then walk into the shop */
  .xs .dm-fly{animation:xs-dm-fly 10s ease-in-out infinite both;}
  .xs .dm-wave{transform-origin:left center;animation:xs-dm-wave 10s ease-out infinite both;}
  .xs .dm-person{animation:xs-dm-visit 10s ease-in-out infinite both;}
  @keyframes xs-dm-fly{0%,25%{opacity:0;transform:translate(0,0) scale(.4);}29%{opacity:1;}44%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1);}50%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.2);}}
  @keyframes xs-dm-wave{0%,25%{opacity:0;transform:scale(.6);}32%{opacity:1;}48%,100%{opacity:0;transform:scale(1.15);}}
  @keyframes xs-dm-visit{0%{opacity:0;transform:translate(0,0);}6%,30%{opacity:.35;transform:translate(0,0);}44%,52%{opacity:1;transform:translate(0,0);}70%{opacity:1;transform:translate(var(--dx),var(--dy));}76%,100%{opacity:0;transform:translate(var(--dx),var(--dy));}}

  /* Web: wireframe first, then the real blocks drop in; your result climbs to the top of the search list */
  .xs .wd-wire{animation:xs-wd-wire 10s ease-out infinite both;}
  .xs .wd-drop{animation:xs-wd-drop 10s cubic-bezier(.3,1.3,.5,1) infinite both;}
  .xs .wd-query{transform-origin:right center;animation:xs-wd-query 10s steps(18) infinite both;}
  .xs .wd-mine{animation:xs-wd-mine 10s cubic-bezier(.5,0,.2,1) infinite both;}
  .xs .wd-other{animation:xs-wd-other 10s cubic-bezier(.5,0,.2,1) infinite both;}
  .xs .wd-dots{animation:xs-wd-dots 10s infinite both;}
  @keyframes xs-wd-wire{0%{opacity:0;}5%,24%{opacity:1;}32%,100%{opacity:0;}}
  @keyframes xs-wd-drop{0%,25%{opacity:0;transform:translateY(-26px);}31%,94%{opacity:1;transform:none;}100%{opacity:0;}}
  @keyframes xs-wd-query{0%,50%{transform:none;}58%,94%{transform:scaleX(0);}100%{transform:none;}}
  @keyframes xs-wd-mine{0%,60%{transform:translateY(56px);}70%,100%{transform:none;}}
  @keyframes xs-wd-other{0%,60%{transform:translateY(0);}70%,100%{transform:translateY(28px);}}
  @keyframes xs-wd-dots{0%,76%{opacity:0;}78%,82%{opacity:1;}84%,100%{opacity:0;}}

  /* CRM: the lead card travels New -> Contacted -> Won; messages fly back to the phone of the customer */
  .xs .crm-lead{animation:xs-crm-lead 10s cubic-bezier(.5,0,.2,1) infinite both;}
  .xs .crm-msg{animation:xs-crm-msg 10s ease-in-out infinite both;}
  .xs .crm-buzz{animation:xs-crm-buzz 10s linear infinite both;}
  .xs .crm-fill{transform-origin:left center;animation:xs-crm-fill 10s ease-out infinite both;}
  @keyframes xs-crm-lead{
    0%,22%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.35);}
    26%{opacity:1;transform:translate(var(--fx),var(--fy)) scale(.45);}
    38%,52%{opacity:1;transform:none;}
    62%,76%{opacity:1;transform:translate(var(--c2),0);}
    86%,95%{opacity:1;transform:translate(var(--c3),0);}
    100%{opacity:0;transform:translate(var(--c3),0);}
  }
  @keyframes xs-crm-msg{0%,52%{opacity:0;transform:translate(0,0) scale(.5);}55%{opacity:1;transform:translate(0,0) scale(1);}68%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(.8);}72%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.5);}}
  @keyframes xs-crm-buzz{0%,66%{transform:none;}67%{transform:rotate(-6deg);}68%{transform:rotate(6deg);}69%{transform:rotate(-6deg);}70%{transform:rotate(6deg);}71%,100%{transform:none;}}
  @keyframes xs-crm-fill{0%,2%{transform:scaleX(0);}10%,94%{transform:none;}100%{transform:scaleX(0);}}

  /* Camera surveillance: the camera sweeps the aisle; an item is pocketed, then put back after the talk-down */
  .xs .cam-sweep{transform-box:view-box;transform-origin:288px 40px;animation:xs-cam-sweep 3.2s ease-in-out infinite alternate;}
  .xs .a-rec{animation:xs-rec 1.2s steps(2) infinite;}
  .xs .cam-grab{animation:xs-cam-grab 10s ease-in-out infinite both;}
  .xs .a-hide4{animation:xs-hide4 10s ease-out infinite both;}
  @keyframes xs-cam-sweep{from{transform:rotate(-7deg);}to{transform:rotate(9deg);}}
  @keyframes xs-rec{50%{opacity:.15;}}
  @keyframes xs-cam-grab{0%,30%{transform:none;}42%,84%{transform:translate(var(--dx),var(--dy)) scale(.75);}94%,100%{transform:none;}}
  .xs .a-only1{animation:xs-only1 10s ease-out infinite both;}
  @keyframes xs-only1{0%{opacity:0;transform:translateY(8px);}5%,24%{opacity:1;transform:none;}29%,100%{opacity:0;transform:none;}}
  @keyframes xs-hide4{0%,75%{opacity:1;}78%,95%{opacity:0;}100%{opacity:1;}}

  /* Virtual Management: the shutter rolls up at opening, each camera feed is ringed while it is being checked,
     and the manager's progress bar fills over the day */
  .xs .a-pop1l{animation:xs-pop1l 10s cubic-bezier(.3,1.5,.5,1) infinite both;}
  .xs .a-only2{animation:xs-only2 10s ease-out infinite both;}
  .xs .a-only3{animation:xs-only3 10s ease-out infinite both;}
  .xs .vm-shutter{transform-origin:center top;animation:xs-vm-shutter 10s ease-in-out infinite both;}
  .xs .vm-progress{transform-origin:left center;animation:xs-vm-progress 10s linear infinite both;}
  @keyframes xs-pop1l{0%,12%{opacity:0;transform:scale(.3);}17%,94%{opacity:1;transform:none;}100%{opacity:0;}}
  @keyframes xs-only2{0%,25%{opacity:0;}29%,49%{opacity:1;}53%,100%{opacity:0;}}
  @keyframes xs-only3{0%,50%{opacity:0;}54%,74%{opacity:1;}78%,100%{opacity:0;}}
  @keyframes xs-vm-shutter{0%,3%{transform:none;}14%,95%{transform:scaleY(0);}100%{transform:none;}}
  @keyframes xs-vm-progress{0%{transform:scaleX(.04);}75%,95%{transform:none;}100%{transform:scaleX(.04);}}

  /* wide scenes keep a readable size on phones and scroll sideways instead of shrinking */
  .xs-scroll{overflow-x:auto;scrollbar-width:thin;border-radius:16px;}
  .xs-scroll:focus-visible{outline:2px solid var(--xs-accent);outline-offset:2px;}
  @media (max-width:700px){ .xs-scroll svg{width:680px;max-width:none;} }
  @media (max-width:600px){
    .xs{padding:12px 10px 10px;border-radius:18px;}
    .xs-steps{gap:4px;}
    .xs-steps li{font-size:.56rem;letter-spacing:.03em;padding:6px 2px;}
    .xs-steps li b{font-size:.8rem;}
  }
  @media (prefers-reduced-motion: reduce){
    .xs *, .xs svg *{animation:none !important;}
    .xs .wd-wire, .xs .wd-query, .xs .wd-dots, .xs .a-hide4, .xs .vm-shutter{display:none;}
  }

/* ---------- WHATSAPP: floating chat button, bottom left (added by page.js; the assistant sits bottom right) ---------- */
  .wa-float{
    position:fixed;left:18px;bottom:16px;z-index:70;
    width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
    background:#25d366;color:#fff;box-shadow:0 12px 26px -10px rgba(10,80,40,.55);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .wa-float svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
  .wa-float:hover{transform:translateY(-3px);box-shadow:0 16px 30px -10px rgba(10,80,40,.6);}
  .wa-float:focus-visible{outline:3px solid #0b57b8;outline-offset:3px;}
  body.book-lock .wa-float{display:none;}
  @media (max-width:640px){
    .wa-float{left:10px;bottom:10px;width:50px;height:50px;}
    .wa-float svg{width:27px;height:27px;}
  }