/* @import url('./assets/css/web-development.css'); */

  /* Drop self-hosted font files in and uncomment to use licensed faces: */
  /*
  @font-face{
    font-family:"FK Anton";
    src:url("fonts/FKAnton-Regular.woff2") format("woff2");
    font-weight:400;
    font-display:swap;
  }
  @font-face{
    font-family:"Elms Sans";
    src:url("fonts/ElmsSans-Regular.woff2") format("woff2");
    font-weight:400;
    font-display:swap;
  }
  */


  :root{
    --primary:#49c6e7;
    --secondary:#5b7cbe;
    --ink:#0a0f1c;
    --ink-2:#0e1526;
    --panel:#121a2e;
    --panel-2:#16203a;
    --border:#22304d;
    --text:#eaf1fb;
    --muted:#8ca0c4;
    --nav-bg:rgba(10,15,28,0.8);
    --icon-filter:invert(1) grayscale(100%) brightness(200%);
    --option-bg:#ffffff;
    --option-text:#0a0f1c;
    --grad:linear-gradient(120deg, var(--primary), var(--secondary));
  }
  html[data-theme="light"]{
    --ink:#f6f4ee;
    --ink-2:#ffffff;
    --panel:#ffffff;
    --panel-2:#f0ede4;
    --border:#e0dccf;
    --text:#151c2c;
    --muted:#5b6478;
    --nav-bg:rgba(246,244,238,0.85);
    --icon-filter:none;
  }
  *{box-sizing:border-box;}
 

  html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  position: relative;
    transition:background-color .35s ease, color .35s ease;
}

/* Bootstrap rows ki negative margin fix */
.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Images & SVGs overflow protection */
img, svg, iframe {
  max-width: 100% !important;
  height: auto;
}
  body{
    background:var(--ink);
    color:var(--text);
    overflow-x:hidden;
  }
  /* Heading */
  h1, h2, h3, h4, h5, h6, .navbar-brand{
    font-family:"FK Anton","Anton",serif;
    letter-spacing:-0.01em;
  }
  /* Sub Heading */
  .sub-heading, .h6-sub, h2 + p, h3 + p{
    font-family:"Roboto",sans-serif;
  }
  /* Paragraph */
  body, p, span, a, input, textarea, select{
    font-family:"Elms Sans","Inter",sans-serif;
  }
  a{text-decoration:none;}
  section{padding:100px 0;}
  .text-grad{
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  a.navbar-brand img {
    width: 139px;
}
  .eyebrow{
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--primary);
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
  }
  .eyebrow::before{
    content:'';
    width:8px;height:8px;border-radius:50%;
    background:var(--grad);
  }

  /* Buttons */
  .btn-brand{
    background:var(--grad);
    border:none;
    color:#051019;
    font-weight:600;
    padding:12px 28px;
    border-radius:999px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .btn-brand:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px -8px rgba(73,198,231,0.5);
    color:#051019;
  }
  .btn-outline-brand{
    border:1px solid var(--border);
    color:var(--text);
    border-radius:999px;
    padding:12px 28px;
    font-weight:600;
    background:transparent;
    transition:border-color .2s ease, color .2s ease;
  }
  .btn-outline-brand:hover{
    border-color:var(--primary);
    color:var(--primary);
  }

  /* Navbar */
  /* ============ NAVBAR ============ */
  .navbar{
    background:var(--nav-bg);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    padding:14px 0;
  }
  .nav-link{ color:var(--muted) !important; font-weight:500; margin:0 4px; }
  .nav-link:hover, .nav-link.active{ color:var(--text) !important; }
  .theme-toggle{
    width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
    background:transparent;color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .btn-brand{
    background:var(--grad); border:none; color:#051019; font-weight:600;
    padding:10px 24px; border-radius:999px;
  }

  /* ============ MEGA MENU (DESKTOP) ============ */
  .has-mega{ position:relative; }
  .mega-trigger{
    background:none;border:none;display:flex;align-items:center;gap:6px;
    color:var(--muted); font-weight:500; padding:8px 4px; font-size:1rem;
    font-family:"Roboto",sans-serif;
  }
  .mega-trigger:hover, .mega-trigger[aria-expanded="true"]{ color:var(--text); }
  .mega-trigger .fa-chevron-down{ font-size:11px; transition:transform .2s ease; }
  .mega-trigger[aria-expanded="true"] .fa-chevron-down{ transform:rotate(180deg); }

  .mega-panel{
    position:absolute;
    top:calc(100% + 18px);
    left:50%;
    transform:translateX(-50%) translateY(8px);
    width:min(880px, 92vw);
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:0 24px 60px -20px rgba(0,0,0,0.5);
    padding:28px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:1000;
  }
  .mega-panel.open{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  /* little caret pointing up at the trigger */
  .mega-panel::before{
    content:'';
    position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(45deg);
    width:16px;height:16px;
    background:var(--panel);
    border-left:1px solid var(--border);
    border-top:1px solid var(--border);
  }

  .mega-eyebrow{
    font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px;
  }
  .mega-eyebrow::before{ content:''; width:7px;height:7px;border-radius:50%; background:var(--grad); }

  .mega-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:6px 28px;
  }
  .mega-item{
    display:flex; gap:14px; align-items:flex-start;
    padding:10px 10px;
    border-radius:12px;
    color:var(--text);
    text-decoration:none;
    transition:background .15s ease;
  }
  .mega-item:hover{ background:var(--panel-2); color:var(--text); }
  .mega-item .icon{
    width:38px;height:38px; flex-shrink:0; border-radius:10px;
    background:rgba(73,198,231,0.1); color:var(--primary);
    display:flex;align-items:center;justify-content:center; font-size:15px;
  }
  .mega-item .label{ font-weight:600; font-size:14.5px; margin-bottom:2px; }
  .mega-item .desc{ font-size:12.5px; color:var(--muted); line-height:1.35; }

  .mega-footer{
    border-top:1px solid var(--border);
    margin-top:20px; padding-top:18px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  }
  .mega-footer p{ margin:0; font-size:13px; color:var(--muted); }
  .mega-footer a{
    font-size:13px; font-weight:600; color:var(--primary); text-decoration:none;
    display:inline-flex; align-items:center; gap:6px;
  }

 
  /* Hero */
  .hero{
    padding: 170px 0 46px;
    position:relative;
  }
  .hero-glow{
    position:absolute;
    width:640px;height:640px;
    top:-220px;right:-160px;
    background:radial-gradient(circle, rgba(91,124,190,0.25), transparent 65%);
    pointer-events:none;
  }
  .hero h1{
    font-size:clamp(2.3rem,5vw,3.8rem);
    margin-bottom:22px;
  }
  .hero p.lead{
    color:var(--muted);
    font-size:18px;
    max-width:600px;
  }
  .trust-row{
    margin-top:60px;
    padding-top:28px;
    border-top:1px solid var(--border);
  }
  .trust-row .item{
    color:var(--muted);
    font-size:14px;
    display:flex;
    align-items:flex-start;
    gap:10px;
  }
  .trust-row .item i{color:var(--primary);margin-top:3px;}

  /* About */
  .about{
    background:var(--ink-2);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .stat-card{
    text-align:center;
    padding:18px;
  }
  .stat-card .num{
    font-size:2.2rem;
    font-weight:700;
    color:var(--primary);
  }
  .stat-card .lbl{
    color:var(--muted);
    font-size:13.5px;
    margin-top:4px;
  }
  /* all four words are 9 letters, so a fixed 10ch slot keeps the rest
     of the heading locked in place with no empty gap */
  #heroTypeWord{
    display:inline-block;
    min-width:8.5ch;
    text-align:left;
    white-space:nowrap;
  }
  #heroTypeWord::after{
    content:'';
    display:inline-block;
    width:4px;
    height:0.85em;
    margin-left:4px;
    background:var(--primary);
    transform:translateY(4px);
    animation:heroCaret 0.75s steps(1) infinite;
  }
  @keyframes heroCaret{ 50%{ opacity:0; } }
  .hero h1, 
.hero h1 *, 
#heroTypeWord {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}
    @media (max-width:767px){

    .fixed-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: hidden;
    }
.hero-glow{
  display: none;
}
.hero h1 {
    font-size: 2rem !important; /* Scale down the oversized font on small screens */
    line-height: 1.2;
  }
.navbar-collapse {
    height: 693px;
    overflow-y: auto;
}
.eyebrow {
    font-size: 10px;

}.mega-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 6px 28px;
}
    }
  @media (max-width:575px){
    #heroTypeWord{ min-width:0; white-space:normal; }

#heroTypeWord {
    display: inline-block;
    min-width: 9ch;
    text-align: left;
    white-space: nowrap;
}
  }
  @media (max-width:480px){

    .hero h1 {
flex-wrap: wrap;
display: flex;
justify-content: center;
}

  }

  /* Services */
  .service-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:30px 24px;
    height:100%;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .service-card:hover{
    transform:translateY(-6px);
    border-color:var(--primary);
    background:var(--panel-2);
  }
  .service-icon{
    width:48px;height:48px;
    border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(73,198,231,0.1);
    color:var(--primary);
    font-size:19px;
    margin-bottom:20px;
  }
  .service-card h3{font-size:17px;margin-bottom:10px;}
  .service-card p{color:var(--muted);font-size:14.5px;margin:0;}

  /* Portfolio / Splide */
  .portfolio{background:var(--ink-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .splide__slide img{
    border-radius:14px;
    height:450px;
    width:100%;
    object-fit:cover;
    border:1px solid var(--border);
  }
  .slide-cap{
    margin-top:14px;
  }
  .slide-cap .tag{
    font-size:12px;
    color:var(--primary);
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-weight:600;
  }
  .slide-cap h4{font-size:16px;margin-top:6px;}
  .splide__pagination__page.is-active{background:var(--primary);}
  .splide__arrow{background:var(--panel);}
  .splide__arrow svg{fill:var(--text);}

  /* Contact */
  .contact-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px;
    display:flex;
    gap:16px;
    align-items:flex-start;
    margin-bottom:16px;
  }
  .contact-card i{
    width:40px;height:40px;
    border-radius:10px;
    background:rgba(73,198,231,0.1);
    color:var(--primary);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .contact-card .label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--muted);
    margin-bottom:3px;
  }
  .contact-card .value{font-weight:600;}

  .form-panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:18px;
    padding:36px;
  }
.form-control, .form-select {
    background: var(--ink-2) !important;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 14.5px;
    margin: 0;
}
.text-muted {
    --bs-text-opacity: 1;

    color: var(--muted) !important;
}
  .form-control:focus, .form-select:focus{
    background:var(--ink-2);
    color:var(--text);
    border-color:var(--primary);
    box-shadow:0 0 0 0.2rem rgba(73,198,231,0.2);
  }
  /* Native dropdown popups render on their own OS/browser background
     (usually white) regardless of page theme, so option text/background
     are pinned explicitly rather than inherited from --text/--ink-2. */

  .form-select option {

    background: var(--ink-2) !important;
    border: 1px solid var(--border);
    color: var(--text);
}
  .form-control::placeholder{color:var(--muted);}
  .form-check-input{background-color:var(--ink-2);border-color:var(--border);}
  .form-check-input:checked{background-color:var(--primary);border-color:var(--primary);}
  .form-check-label{color:var(--muted);font-size:13.5px;}
  .btn-dark.btn-lg{
    background:var(--grad) !important;
    border:none;
    color:#051019 !important;
  }

  /* Footer */
  footer{
    background:var(--ink-2);
    border-top:1px solid var(--border);
    padding:56px 0 28px;
  }
  footer img{height: 86px;margin-bottom:14px;}
  footer p{color:var(--muted);font-size:13.5px;}
  footer h5{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--muted);
    margin-bottom:16px;
  }
  footer a.footer-link{
    display:block;
    color:var(--muted);
    font-size:14px;
    margin-bottom:10px;
  }
  footer a.footer-link:hover{color:var(--primary);}
  .footer-bottom{
    border-top:1px solid var(--border);
    margin-top:30px;
    padding-top:22px;
    font-size:13px;
    color:var(--muted);
  }
  .socials a{
    width:34px;height:34px;
    border:1px solid var(--border);
    border-radius:9px;
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--muted);
    margin-left:8px;
  }
  .socials a:hover{border-color:var(--primary);color:var(--primary);}

  @media (max-width:767px){
    section{padding:70px 0;}
    .hero{padding:140px 0 60px;}
  }
  

/******************************* footer ****************************************/
  /* ============ CREATIVE FOOTER ============ */
  .nt-footer{
    position:relative;
    background:var(--ink-2);
    color:var(--text);
    padding:0 0 30px;
    overflow:hidden;
    border-top:1px solid var(--border);
  }

  /* animated dot-grid + glow backdrop */
  .nt-footer::before{
    content:'';
    position:absolute; inset:0;
    background-image:radial-gradient(rgba(140,160,196,0.14) 1px, transparent 1px);
    background-size:26px 26px;
    mask-image:linear-gradient(180deg, transparent, #000 40%);
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 40%);
    pointer-events:none;
  }
  .nt-footer-glow{
    position:absolute; z-index:0; pointer-events:none;
    width:620px; height:620px; left:50%; bottom:-360px; transform:translateX(-50%);
    background:radial-gradient(circle, rgba(73,198,231,0.16), transparent 66%);
  }
  .nt-footer .container{ position:relative; z-index:2; }

  /* ---- top CTA strip: oversized invitation ---- */
  .nt-cta-strip{
    padding:70px 0 60px;
    border-bottom:1px solid var(--border);
    display:flex; align-items:flex-end; justify-content:space-between;
    flex-wrap:wrap; gap:28px;
  }
  .nt-cta-strip .lead-line{
    font-family:"Anton",serif; letter-spacing:-0.02em; line-height:1.02;
    font-size:clamp(2rem, 5.5vw, 4.2rem); margin:0; max-width:12ch;
  }
  .nt-cta-strip .lead-line .accent{
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .nt-cta-btn{
    background:var(--grad); border:none; color:#051019; font-weight:700;
    padding:16px 34px; border-radius:999px; font-size:16px; white-space:nowrap;
    display:inline-flex; align-items:center; gap:10px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .nt-cta-btn:hover{ transform:translatey(-3px); box-shadow:0 18px 40px -12px rgba(73,198,231,.55); color:#051019; }
  .nt-cta-btn i{ transition:transform .2s ease; }
  .nt-cta-btn:hover i{ transform:translateX(4px); }

  /* ---- main columns ---- */
  .nt-main{ padding:60px 0 50px; }
  .nt-footer-logo img{ height:42px; width:auto; margin-bottom:18px; }
  .nt-tagline{ color:var(--muted); font-size:14.5px; line-height:1.6; max-width:280px; }

  .nt-col h5{
    font-family:"Roboto",sans-serif; font-size:12px; text-transform:uppercase;
    letter-spacing:.16em; color:var(--primary); margin-bottom:20px; font-weight:700;
  }
  .nt-link{
    display:inline-flex; align-items:center; gap:0; color:var(--muted);
    font-size:14.5px; margin-bottom:14px; width:fit-content;
    transition:color .2s ease, gap .2s ease; position:relative;
  }
  .nt-link::before{
    content:''; width:0; height:1px; background:var(--primary);
    transition:width .25s ease; display:inline-block;
  }
  .nt-link:hover{ color:var(--text); gap:10px; }
  .nt-link:hover::before{ width:16px; }

  /* ---- socials ---- */
  .nt-socials{ display:flex; gap:12px; }
  .nt-socials a{
    width:44px; height:44px; border-radius:12px; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; color:var(--text);
    font-size:16px; transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
  }
  .nt-socials a:hover{
    transform:translateY(-4px); border-color:transparent;
    background:var(--grad); color:#051019;
  }

  /* ---- giant wordmark watermark ---- */
  .nt-wordmark{
    font-family:"Anton",serif; text-align:center; line-height:.9;
    font-size:clamp(3.5rem, 17vw, 15rem); letter-spacing:-0.03em;
    margin:10px 0 -0.12em; user-select:none;
    background:linear-gradient(180deg, var(--panel-2), transparent 88%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-stroke:1px var(--border);
  }

  /* ---- bottom bar ---- */
  .nt-bottom{
    border-top:1px solid var(--border); padding-top:24px; margin-top:8px;
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px;
    color:var(--muted); font-size:13px;
  }
  .nt-bottom .nt-bottom-links{ display:flex; gap:22px; flex-wrap:wrap; }
  .nt-bottom .nt-bottom-links a{ color:var(--muted); transition:color .2s ease; }
  .nt-bottom .nt-bottom-links a:hover{ color:var(--primary); }
  .nt-status{ display:inline-flex; align-items:center; gap:8px; }
  .nt-status::before{
    content:''; width:8px; height:8px; border-radius:50%; background:#3ecf8e;
    box-shadow:0 0 0 0 rgba(62,207,142,.6); animation:ntPulse 2s infinite;
  }
  @keyframes ntPulse{
    0%{ box-shadow:0 0 0 0 rgba(62,207,142,.5); }
    70%{ box-shadow:0 0 0 8px rgba(62,207,142,0); }
    100%{ box-shadow:0 0 0 0 rgba(62,207,142,0); }
  }
  .nt-backtotop{
    display:inline-flex; align-items:center; gap:8px; color:var(--muted);
    font-size:13px; transition:color .2s ease;
  }
  .nt-backtotop:hover{ color:var(--primary); }

  @media (max-width:767px){
    .nt-cta-strip{ padding:50px 0 40px; }
    .nt-main{ padding:44px 0 30px; }
    .nt-wordmark{ margin-bottom:-0.08em; }
  }
/****************************************** WEB development *********************************************/

  /* ============ HERO ============ */
  .wd-hero{ padding:168px 0 100px; position:relative; }
  .wd-hero-glow{
    position:absolute; width:640px;height:640px; top:-220px; right:-160px;
    background:radial-gradient(circle, rgba(91,124,190,0.25), transparent 65%); pointer-events:none;
  }
  .wd-hero h1{ font-size:clamp(2.2rem,4.6vw,3.6rem); margin-bottom:20px; }
  .wd-hero p.wd-lead{ color:var(--muted); font-size:17.5px; max-width:540px; }
  .wd-hero-media{
    border-radius:20px; overflow:hidden; border:1px solid var(--border);
    box-shadow:0 30px 70px -30px rgba(0,0,0,0.55);
  }
  .wd-hero-media img{ width:100%; display:block; }
  .wd-hero-chip{
    position:absolute; background:var(--panel); border:1px solid var(--border); border-radius:14px;
    padding:14px 18px; display:flex; align-items:center; gap:12px; box-shadow:0 20px 40px -16px rgba(0,0,0,0.5);
  }
  .wd-hero-chip i{ color:var(--primary); font-size:18px; }
  .wd-hero-chip .lbl{ font-size:12px; color:var(--muted); }
  .wd-hero-chip .val{ font-weight:700; font-size:14px; }
  .wd-chip-1{ bottom:-22px; left:24px; }
  .wd-chip-2{ top:24px; right:-18px; }

  /* ============ LOGO / BRAND STRIP (Splide) ============ */
  .wd-stack{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ink-2); padding:52px 0; }
  .wd-stack-head{ text-align:center; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:30px; }
  .wd-stack-card{
    display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted);
    padding:14px 10px;
  }
  .wd-stack-card i{ font-size:34px; color:var(--text); opacity:.8; transition:color .2s ease, opacity .2s ease, transform .2s ease; }
  .wd-stack-card:hover i{ color:var(--primary); opacity:1; transform:translateY(-3px); }
  .wd-stack-card span{ font-size:12.5px; font-weight:600; }
  #wd-stack-splide .splide__pagination{ display:none; }

  /* ============ WHY CUSTOM (intro) ============ */
  .wd-why{ }
  .wd-why-copy{ max-width:760px; }
  .wd-why-copy p{ color:var(--muted); font-size:16.5px; line-height:1.75; }

  /* ============ BENEFITS ============ */
  .wd-benefit-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:32px 26px;
    height:100%; transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .wd-benefit-card:hover{ transform:translateY(-6px); border-color:var(--primary); background:var(--panel-2); }
  .wd-benefit-icon{
    width:50px;height:50px;border-radius:13px; display:flex;align-items:center;justify-content:center;
    background:rgba(73,198,231,.1); color:var(--primary); font-size:20px; margin-bottom:22px;
  }
  .wd-benefit-card h3{ font-size:18px; margin-bottom:12px; }
  .wd-benefit-card p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.6; }

  /* ============ PROCESS TIMELINE ============ */
  .wd-process{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .wd-timeline{ position:relative; margin-top:50px; }
  .wd-timeline::before{
    content:''; position:absolute; left:29px; top:6px; bottom:6px; width:2px;
    background:linear-gradient(var(--border), var(--border));
  }
  @media (min-width:992px){
    .wd-timeline::before{ left:50%; transform:translateX(-50%); }
  }
  .wd-step{ position:relative; padding-left:76px; margin-bottom:46px; }
  .wd-step:last-child{ margin-bottom:0; }
  .wd-step-num{
    position:absolute; left:0; top:0; width:58px;height:58px; border-radius:50%;
    background:var(--grad); color:#051019; font-family:"Anton",serif; font-size:20px;
    display:flex;align-items:center;justify-content:center; z-index:2;
  }
  .wd-step-body{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:26px 28px;
  }
  .wd-step-body h3{ font-size:18px; margin-bottom:10px; }
  .wd-step-body p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.65; }
  @media (min-width:992px){
    .wd-step{ width:50%; padding-left:0; }
    .wd-step:nth-child(odd){ padding-right:56px; text-align:right; }
    .wd-step:nth-child(even){ margin-left:50%; padding-left:56px; }
    .wd-step:nth-child(odd) .wd-step-num{ right:-29px; left:auto; }
    .wd-step:nth-child(even) .wd-step-num{ left:-29px; }
  }

  /* ============ PORTFOLIO (Splide) ============ */
  .wd-work-slide img{
    border-radius:14px; height:280px; width:100%; object-fit:cover; border:1px solid var(--border);
  }
  .wd-work-cap{ margin-top:14px; }
  .wd-work-cap .wd-tag{ font-size:12px; color:var(--primary); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
  .wd-work-cap h4{ font-size:16px; margin-top:6px; }
  #wd-work-splide .splide__pagination__page.is-active{ background:var(--primary); }
  #wd-work-splide .splide__arrow{ background:var(--panel); }
  #wd-work-splide .splide__arrow svg{ fill:var(--text); }

  /* ============ WHY NERDSTECH ============ */
  .wd-diff-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px 26px; height:100%;
  }
  .wd-diff-icon{
    width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center;
    background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:20px;
  }
  .wd-diff-card h3{ font-size:17px; margin-bottom:10px; }
  .wd-diff-card p{ color:var(--muted); font-size:14.5px; margin:0; }

  /* ============ STATS ============ */
  .wd-stats{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .wd-stat{ text-align:center; padding:18px; }
  .wd-stat .wd-num{ font-size:2.4rem; font-weight:700; color:var(--primary); font-family:"Anton",serif; }
  .wd-stat .wd-lbl{ color:var(--muted); font-size:13.5px; margin-top:4px; }

  /* ============ FAQ ============ */
  .wd-faq-item{ border-bottom:1px solid var(--border); padding:22px 0; }
  .wd-faq-q{
    display:flex; align-items:center; justify-content:space-between; cursor:pointer;
    font-weight:600; font-size:16px; gap:16px;
  }
  .wd-faq-q i{ color:var(--primary); transition:transform .25s ease; flex-shrink:0; }
  .wd-faq-item.open .wd-faq-q i{ transform:rotate(45deg); }
  .wd-faq-a{
    max-height:0; overflow:hidden; color:var(--muted); font-size:14.5px; line-height:1.7;
    transition:max-height .3s ease, padding-top .3s ease;
  }
  .wd-faq-item.open .wd-faq-a{ max-height:220px; padding-top:14px; }

  /* ============ CTA ============ */
  .wd-cta{ position:relative; overflow:hidden; }
  .wd-cta-panel{
    background:var(--panel); border:1px solid var(--border); border-radius:26px;
    padding:64px 40px; text-align:center; position:relative; overflow:hidden;
  }
  .wd-cta-panel::before{
    content:''; position:absolute; inset:0; background:var(--grad); opacity:.08; pointer-events:none;
  }
  .wd-cta-panel h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .wd-cta-panel p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }


  /********************************************* AI Automation ********************************/



  a{ text-decoration:none; }
  .aia-section{ padding:100px 0; }
  .aia-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .aia-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .aia-text-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .aia-btn-primary{
    background:var(--grad); border:none; color:#051019; font-weight:600;
    padding:13px 30px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .aia-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(73,198,231,.5); color:#051019; }
  .aia-btn-ghost{
    border:1px solid var(--border); color:var(--text); border-radius:999px; padding:12px 28px;
    font-weight:600; background:transparent; display:inline-flex; align-items:center; gap:8px;
    transition:border-color .2s ease, color .2s ease;
  }
  .aia-btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }

  /* ============ HERO ============ */
  .aia-hero{ padding:80px 0 100px; position:relative; }
  .aia-hero-glow{
    position:absolute; width:640px;height:640px; top:-220px; right:-160px;
    background:radial-gradient(circle, rgba(91,124,190,0.25), transparent 65%); pointer-events:none;
  }
  .aia-hero h1{ font-size:clamp(2.2rem,4.6vw,3.6rem); margin-bottom:20px; }
  .aia-hero p.aia-lead{ color:var(--muted); font-size:17.5px; max-width:540px; }
  .aia-hero-media{
    border-radius:20px; overflow:hidden; border:1px solid var(--border);
    box-shadow:0 30px 70px -30px rgba(0,0,0,0.55);
  }
  .aia-hero-media img{ width:100%; display:block; }
  .aia-hero-chip{
    position:absolute; background:var(--panel); border:1px solid var(--border); border-radius:14px;
    padding:14px 18px; display:flex; align-items:center; gap:12px; box-shadow:0 20px 40px -16px rgba(0,0,0,0.5);
  }
  .aia-hero-chip i{ color:var(--primary); font-size:18px; }
  .aia-hero-chip .lbl{ font-size:12px; color:var(--muted); }
  .aia-hero-chip .val{ font-weight:700; font-size:14px; }
  .aia-chip-1{ bottom:-22px; left:24px; }
  .aia-chip-2{ top:24px; right:-18px; }

  /* ============ INTEGRATIONS STRIP ============ */
  .aia-stack{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ink-2); padding:52px 0; }
  .aia-stack-head{ text-align:center; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:34px; }
  .aia-stack-card{
    display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted);
    padding:14px 10px; text-align:center;
  }
  .aia-stack-card i{ font-size:32px; color:var(--text); opacity:.8; transition:color .2s ease, opacity .2s ease, transform .2s ease; }
  .aia-stack-card:hover i{ color:var(--primary); opacity:1; transform:translateY(-3px); }
  .aia-stack-card span{ font-size:12px; font-weight:600; }
  #aia-stack-splide .splide__pagination{ display:none; }

  /* ============ WHY IT MATTERS (intro) ============ */
  .aia-why-copy{ max-width:760px; }
  .aia-why-copy p{ color:var(--muted); font-size:16.5px; line-height:1.75; }

  /* ============ BENEFITS ============ */
  .aia-benefit-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:32px 26px;
    height:100%; transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .aia-benefit-card:hover{ transform:translateY(-6px); border-color:var(--primary); background:var(--panel-2); }
  .aia-benefit-icon{
    width:50px;height:50px;border-radius:13px; display:flex;align-items:center;justify-content:center;
    background:rgba(73,198,231,.1); color:var(--primary); font-size:20px; margin-bottom:22px;
  }
  .aia-benefit-card h3{ font-size:18px; margin-bottom:12px; }
  .aia-benefit-card p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.6; }

  /* ============ WHAT WE AUTOMATE ============ */
  .aia-types{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .aia-type-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:28px 24px;
    height:100%; transition:transform .25s ease, border-color .25s ease;
  }
  .aia-type-card:hover{ transform:translateY(-5px); border-color:var(--primary); }
  .aia-type-icon{
    width:44px;height:44px;border-radius:11px; display:flex;align-items:center;justify-content:center;
    background:rgba(73,198,231,.1); color:var(--primary); font-size:18px; margin-bottom:18px;
  }
  .aia-type-card h3{ font-size:16.5px; margin-bottom:10px; }
  .aia-type-card p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }

  /* ============ PROCESS TIMELINE ============ */
  .aia-timeline{ position:relative; margin-top:50px; }
  .aia-timeline::before{
    content:''; position:absolute; left:29px; top:6px; bottom:6px; width:2px;
    background:linear-gradient(var(--border), var(--border));
  }
  @media (min-width:992px){
    .aia-timeline::before{ left:50%; transform:translateX(-50%); }
  }
  .aia-step{ position:relative; padding-left:76px; margin-bottom:46px; }
  .aia-step:last-child{ margin-bottom:0; }
  .aia-step-num{
    position:absolute; left:0; top:0; width:58px;height:58px; border-radius:50%;
    background:var(--grad); color:#051019; font-family:"Anton",serif; font-size:20px;
    display:flex;align-items:center;justify-content:center; z-index:2;
  }
  .aia-step-body{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:26px 28px;
  }
  .aia-step-body h3{ font-size:18px; margin-bottom:10px; }
  .aia-step-body p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.65; }
  @media (min-width:992px){
    .aia-step{ width:50%; padding-left:0; }
    .aia-step:nth-child(odd){ padding-right:56px; text-align:right; }
    .aia-step:nth-child(even){ margin-left:50%; padding-left:56px; }
    .aia-step:nth-child(odd) .aia-step-num{ right:-29px; left:auto; }
    .aia-step:nth-child(even) .aia-step-num{ left:-29px; }
  }

  /* ============ EXAMPLE WORKFLOWS ============ */
  .aia-example-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; height:100%;
    transition:transform .25s ease, border-color .25s ease;
  }
  .aia-example-card:hover{ transform:translateY(-6px); border-color:var(--primary); }
  .aia-example-card img{ width:100%; height:190px; object-fit:cover; display:block; }
  .aia-example-body{ padding:22px; }
  .aia-example-tag{ font-size:12px; color:var(--primary); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
  .aia-example-body h3{ font-size:16.5px; margin:8px 0 10px; }
  .aia-example-body p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }

  /* ============ WHY NERDSTECH ============ */
  .aia-diff{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .aia-diff-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px 26px; height:100%;
  }
  .aia-diff-icon{
    width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center;
    background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:20px;
  }
  .aia-diff-card h3{ font-size:17px; margin-bottom:10px; }
  .aia-diff-card p{ color:var(--muted); font-size:14.5px; margin:0; }

  /* ============ STATS ============ */
  .aia-stat{ text-align:center; padding:18px; }
  .aia-stat .aia-num{ font-size:2.4rem; font-weight:700; color:var(--primary); font-family:"Anton",serif; }
  .aia-stat .aia-lbl{ color:var(--muted); font-size:13.5px; margin-top:4px; }

  /* ============ FAQ ============ */
  .aia-faq-item{ border-bottom:1px solid var(--border); padding:22px 0; }
  .aia-faq-q{
    display:flex; align-items:center; justify-content:space-between; cursor:pointer;
    font-weight:600; font-size:16px; gap:16px;
  }
  .aia-faq-q i{ color:var(--primary); transition:transform .25s ease; flex-shrink:0; }
  .aia-faq-item.open .aia-faq-q i{ transform:rotate(45deg); }
  .aia-faq-a{
    max-height:0; overflow:hidden; color:var(--muted); font-size:14.5px; line-height:1.7;
    transition:max-height .3s ease, padding-top .3s ease;
  }
  .aia-faq-item.open .aia-faq-a{ max-height:220px; padding-top:14px; }

  /* ============ CTA ============ */
  .aia-cta-panel{
    background:var(--panel); border:1px solid var(--border); border-radius:26px;
    padding:64px 40px; text-align:center; position:relative; overflow:hidden;
  }
  .aia-cta-panel::before{
    content:''; position:absolute; inset:0; background:var(--grad); opacity:.08; pointer-events:none;
  }
  .aia-cta-panel h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .aia-cta-panel p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }

  @media (max-width:767px){
    .aia-section{ padding:66px 0; }
    .aia-hero{ padding:50px 0 60px; }
  }

  /************************** AI Chat support ************************/
  
  /* ============ PAGE-SPECIFIC STYLES ONLY (no :root) ============ */

  .acs-section{ padding:100px 0; }
  .acs-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .acs-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .acs-text-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .acs-btn-primary{
    background:var(--grad); border:none; color:#051019; font-weight:600;
    padding:13px 30px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .acs-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(73,198,231,.5); color:#051019; }
  .acs-btn-ghost{
    border:1px solid var(--border); color:var(--text); border-radius:999px; padding:12px 28px;
    font-weight:600; background:transparent; display:inline-flex; align-items:center; gap:8px;
    transition:border-color .2s ease, color .2s ease;
  }
  .acs-btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }

  /* ============ 1. HERO (split, live chat mockup) ============ */
  .acs-hero{ padding:80px 0 100px; position:relative; overflow:hidden; }
  .acs-hero-glow{
    position:absolute; width:680px;height:680px; top:-240px; left:-180px;
    background:radial-gradient(circle, rgba(73,198,231,0.22), transparent 65%); pointer-events:none;
  }
  .acs-hero h1{ font-size:clamp(2.2rem,4.6vw,3.6rem); margin-bottom:20px; }
  .acs-hero p.acs-lead{ color:var(--muted); font-size:17.5px; max-width:540px; }
  /* animated chat bubble mockup */
  .acs-chat{
    background:var(--panel); border:1px solid var(--border); border-radius:22px; padding:24px;
    box-shadow:0 30px 70px -30px rgba(0,0,0,0.55); max-width:420px; margin-left:auto;
  }
  .acs-chat-head{ display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:18px; }
  .acs-chat-avatar{
    width:40px;height:40px;border-radius:50%; background:var(--grad); color:#051019;
    display:flex;align-items:center;justify-content:center; font-size:16px;
  }
  .acs-chat-head .nm{ font-weight:700; font-size:14px; }
  .acs-chat-head .st{ font-size:12px; color:#3ecf8e; display:flex; align-items:center; gap:6px; }
  .acs-chat-head .st::before{ content:''; width:7px;height:7px;border-radius:50%; background:#3ecf8e; }
  .acs-bubble{ padding:11px 15px; border-radius:14px; font-size:13.5px; line-height:1.5; margin-bottom:12px; max-width:82%; }
  .acs-bubble.user{ background:var(--panel-2); color:var(--text); margin-left:auto; border-bottom-right-radius:4px; }
  .acs-bubble.bot{ background:rgba(73,198,231,.12); color:var(--text); border-bottom-left-radius:4px; }
  .acs-bubble.typing{ display:inline-flex; gap:4px; }
  .acs-bubble.typing span{ width:6px;height:6px;border-radius:50%; background:var(--muted); animation:acsBlink 1.2s infinite; }
  .acs-bubble.typing span:nth-child(2){ animation-delay:.2s; }
  .acs-bubble.typing span:nth-child(3){ animation-delay:.4s; }
  @keyframes acsBlink{ 0%,60%,100%{opacity:.3;} 30%{opacity:1;} }  /* ============ 2. TRUST BAR ============ */
  .acs-trust{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ink-2); padding:44px 0; }
  .acs-trust-item{ text-align:center; color:var(--muted); }
  .acs-trust-item i{ font-size:24px; color:var(--primary); margin-bottom:10px; display:block; }
  .acs-trust-item span{ font-size:13.5px; font-weight:600; }

  /* ============ 3. WHY (parallax banner) ============ */
  .acs-parallax{
    position:relative; min-height:460px; display:flex; align-items:center;
    overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .acs-parallax-bg{
    position:absolute; inset:-15% 0; background-size:cover; background-position:center;
    will-change:transform; z-index:0;
  }
  .acs-parallax-overlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(120deg, rgba(10,15,28,0.94), rgba(10,15,28,0.68));
  }
  html[data-theme="light"] .acs-parallax-overlay{
    background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.72));
  }
  .acs-parallax .container{ position:relative; z-index:2; }
  .acs-parallax h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:620px; margin-bottom:16px; }
  .acs-parallax p{ color:var(--muted); max-width:560px; font-size:16.5px; line-height:1.7; }

  /* ============ 4. BENEFITS (offset cards) ============ */
  .acs-benefit-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px 26px;
    height:100%; transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .acs-benefit-card:hover{ transform:translateY(-6px); border-color:var(--primary); background:var(--panel-2); }
  .acs-benefit-icon{
    width:50px;height:50px;border-radius:13px; display:flex;align-items:center;justify-content:center;
    background:rgba(73,198,231,.1); color:var(--primary); font-size:20px; margin-bottom:20px;
  }
  .acs-benefit-card h3{ font-size:17.5px; margin-bottom:11px; }
  .acs-benefit-card p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.6; }

  /* ============ 5. HOW IT WORKS (image + steps split) ============ */
  .acs-hiw-img{ border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:0 24px 60px -28px rgba(0,0,0,0.5); }
  .acs-hiw-img img{ width:100%; display:block; }
  .acs-hiw-step{ display:flex; gap:18px; margin-bottom:26px; }
  .acs-hiw-step:last-child{ margin-bottom:0; }
  .acs-hiw-num{
    flex-shrink:0; width:44px;height:44px;border-radius:12px; background:var(--grad); color:#051019;
    font-family:"Anton",serif; font-size:17px; display:flex;align-items:center;justify-content:center;
  }
  .acs-hiw-step h3{ font-size:16.5px; margin-bottom:6px; }
  .acs-hiw-step p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }

  /* ============ 6. HANDOFF (feature highlight, dark panel) ============ */
  .acs-handoff{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .acs-handoff-panel{
    background:var(--panel); border:1px solid var(--border); border-radius:24px; padding:48px 40px;
    position:relative; overflow:hidden;
  }
  .acs-handoff-panel::before{
    content:''; position:absolute; top:-60px; right:-60px; width:220px;height:220px; border-radius:50%;
    background:var(--grad); opacity:.1;
  }
  .acs-handoff-panel h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:14px; }
  .acs-handoff-panel p{ color:var(--muted); font-size:16px; line-height:1.7; }
  .acs-handoff-list{ list-style:none; padding:0; margin:22px 0 0; }
  .acs-handoff-list li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:14.5px; }
  .acs-handoff-list li i{ color:var(--primary); margin-top:3px; }

  /* ============ 7. USE CASES (image cards) ============ */
  .acs-case-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; height:100%;
    transition:transform .25s ease, border-color .25s ease;
  }
  .acs-case-card:hover{ transform:translateY(-6px); border-color:var(--primary); }
  .acs-case-card .acs-case-media{ height:180px; overflow:hidden; }
  .acs-case-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
  .acs-case-card:hover img{ transform:scale(1.06); }
  .acs-case-body{ padding:22px; }
  .acs-case-tag{ font-size:12px; color:var(--primary); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
  .acs-case-body h3{ font-size:16.5px; margin:8px 0 10px; }
  .acs-case-body p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }

  /* ============ 8. STATS (parallax count-up band) ============ */
  .acs-statband{
    position:relative; overflow:hidden;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .acs-statband-bg{
    position:absolute; inset:-15% 0; background-size:cover; background-position:center;
    will-change:transform; z-index:0;
  }
  .acs-statband-overlay{ position:absolute; inset:0; z-index:1; background:rgba(10,15,28,0.9); }
  html[data-theme="light"] .acs-statband-overlay{ background:rgba(246,244,238,0.92); }
  .acs-statband .container{ position:relative; z-index:2; }
  .acs-stat{ text-align:center; padding:18px; }
  .acs-stat .acs-num{ font-size:2.6rem; font-weight:700; color:var(--primary); font-family:"Anton",serif; }
  .acs-stat .acs-lbl{ color:var(--muted); font-size:13.5px; margin-top:4px; }

  /* ============ 9. WHY NERDSTECH (icon row) ============ */
  .acs-diff-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px 26px; height:100%;
  }
  .acs-diff-icon{
    width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center;
    background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:18px;
  }
  .acs-diff-card h3{ font-size:16.5px; margin-bottom:10px; }
  .acs-diff-card p{ color:var(--muted); font-size:14.5px; margin:0; }

  /* ============ 10. FAQ ============ */
  .acs-faq-item{ border-bottom:1px solid var(--border); padding:22px 0; }
  .acs-faq-q{
    display:flex; align-items:center; justify-content:space-between; cursor:pointer;
    font-weight:600; font-size:16px; gap:16px;
  }
  .acs-faq-q i{ color:var(--primary); transition:transform .25s ease; flex-shrink:0; }
  .acs-faq-item.open .acs-faq-q i{ transform:rotate(45deg); }
  .acs-faq-a{
    max-height:0; overflow:hidden; color:var(--muted); font-size:14.5px; line-height:1.7;
    transition:max-height .3s ease, padding-top .3s ease;
  }
  .acs-faq-item.open .acs-faq-a{ max-height:240px; padding-top:14px; }

  /* ============ 11. CTA (parallax) ============ */
  .acs-cta{ position:relative; overflow:hidden; }
  .acs-cta-bg{
    position:absolute; inset:-15% 0; background-size:cover; background-position:center;
    will-change:transform; z-index:0;
  }
  .acs-cta-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.92), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .acs-cta-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.75)); }
  .acs-cta .container{ position:relative; z-index:2; text-align:center; }
  .acs-cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .acs-cta p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }

  @media (max-width:767px){
    .acs-section{ padding:66px 0; }
    .acs-hero{ padding:50px 0 60px; }
    .acs-chat{ margin:0 auto; }
    .acs-parallax{ min-height:380px; }
  }

    h1,h2,h3,h4{ font-family:"Anton","Anton",serif; letter-spacing:-0.01em; }
  a{ text-decoration:none; }
  .cld-section{ padding:100px 0; }
  .cld-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .cld-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .cld-text-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .cld-btn-primary{
    background:var(--grad); border:none; color:#051019; font-weight:600;
    padding:13px 30px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .cld-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(73,198,231,.5); color:#051019; }
  .cld-btn-ghost{
    border:1px solid var(--border); color:var(--text); border-radius:999px; padding:12px 28px;
    font-weight:600; background:transparent; display:inline-flex; align-items:center; gap:8px;
    transition:border-color .2s ease, color .2s ease;
  }
  .cld-btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }

  /* ============ 1. HERO (centered, floating logo tokens) LOGO ============ */
  .cld-hero{ padding:120px 0 100px; position:relative; overflow:hidden; text-align:center; }
  .cld-hero-glow{
    position:absolute; width:720px;height:720px; top:-260px; left:50%; transform:translateX(-50%);
    background:radial-gradient(circle, rgba(73,198,231,0.2), transparent 64%); pointer-events:none;
  }
  .cld-hero h1{ font-size:clamp(2.4rem,5.4vw,4.2rem); margin:0 auto 20px; max-width:14ch; }
  .cld-hero p.cld-lead{ color:var(--muted); font-size:18px; max-width:560px; margin:0 auto; }
  /* floating abstract mark tokens */
  .cld-token{
    position:absolute; z-index:1; width:64px; height:64px; border-radius:18px;
    background:var(--panel); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--primary);
    box-shadow:0 20px 40px -18px rgba(0,0,0,0.5);
  }
  .cld-token.t1{ top:16%; left:10%; }
  .cld-token.t2{ top:26%; right:12%; color:var(--secondary); }
  .cld-token.t3{ bottom:20%; left:16%; color:var(--secondary); }
  .cld-token.t4{ bottom:14%; right:14%; }
  @media (max-width:991px){ .cld-token{ display:none; } }

  /* ============ 2. MARQUEE STRIP ============ */
  .cld-marquee{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ink-2); padding:26px 0; overflow:hidden; }
  .cld-marquee-track{ display:flex; gap:56px; width:max-content; animation:cldScroll 26s linear infinite; }
  .cld-marquee:hover .cld-marquee-track{ animation-play-state:paused; }
  .cld-marquee-item{ font-family:"Anton",serif; font-size:22px; color:var(--muted); letter-spacing:.02em; display:flex; align-items:center; gap:16px; white-space:nowrap; }
  .cld-marquee-item::after{ content:'●'; color:var(--primary); font-size:9px; }
  @keyframes cldScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  /* ============ 3. WHY (parallax split) ============ */
  .cld-why{ position:relative; overflow:hidden; }
  .cld-why-img{
    border-radius:20px; overflow:hidden; border:1px solid var(--border);
    box-shadow:0 30px 70px -30px rgba(0,0,0,0.55); position:relative; height:100%; min-height:420px;
  }
  .cld-why-img .cld-parimg{
    position:absolute; inset:-12% 0; background-size:cover; background-position:center; will-change:transform;
  }
  .cld-why-copy h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-bottom:18px; }
  .cld-why-copy p{ color:var(--muted); font-size:16.5px; line-height:1.75; }

  /* ============ 4. WHAT YOU GET (bento grid) ============ */
  .cld-bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .cld-bento-cell{
    background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:28px 26px;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .cld-bento-cell:hover{ transform:translateY(-5px); border-color:var(--primary); background:var(--panel-2); }
  .cld-bento-cell.wide{ grid-column:span 2; }
  .cld-bento-cell.tall{ grid-row:span 2; }
  .cld-bento-icon{
    width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center;
    background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:18px;
  }
  .cld-bento-cell h3{ font-size:17px; margin-bottom:10px; }
  .cld-bento-cell p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }
  @media (max-width:991px){ .cld-bento{ grid-template-columns:repeat(2,1fr); } .cld-bento-cell.wide,.cld-bento-cell.tall{ grid-column:auto; grid-row:auto; } }
  @media (max-width:575px){ .cld-bento{ grid-template-columns:1fr; } }

  /* ============ 5. PROCESS (horizontal steps) ============ */
  .cld-process{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .cld-proc-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:28px 24px; height:100%;
    position:relative; transition:transform .25s ease, border-color .25s ease;
  }
  .cld-proc-card:hover{ transform:translateY(-5px); border-color:var(--primary); }
  .cld-proc-step{ font-family:"Anton",serif; font-size:14px; color:var(--primary); letter-spacing:.1em; margin-bottom:14px; }
  .cld-proc-card h3{ font-size:16.5px; margin-bottom:10px; }
  .cld-proc-card p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }

  /* ============ 6. STYLES / TIERS (image cards) ============ */
  .cld-style-card{
    background:var(--panel); border:1px solid var(--border); border-radius:18px; overflow:hidden; height:100%;
    transition:transform .25s ease, border-color .25s ease;
  }
  .cld-style-card:hover{ transform:translateY(-6px); border-color:var(--primary); }
  .cld-style-media{ height:200px; overflow:hidden; }
  .cld-style-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
  .cld-style-card:hover img{ transform:scale(1.07); }
  .cld-style-body{ padding:24px; }
  .cld-style-body .tag{ font-size:12px; color:var(--primary); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
  .cld-style-body h3{ font-size:17px; margin:8px 0 10px; }
  .cld-style-body p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }

  /* ============ 7. VERSATILITY (parallax banner) ============ */
  .cld-parallax{
    position:relative; min-height:440px; display:flex; align-items:center; overflow:hidden;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .cld-parallax-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .cld-parallax-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.94), rgba(10,15,28,0.66)); }
  html[data-theme="light"] .cld-parallax-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.7)); }
  .cld-parallax .container{ position:relative; z-index:2; }
  .cld-parallax h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:640px; margin-bottom:16px; }
  .cld-parallax p{ color:var(--muted); max-width:560px; font-size:16.5px; line-height:1.7; }
  .cld-context-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
  .cld-context-chip{
    display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px;
    background:var(--panel); border:1px solid var(--border); font-size:13.5px; font-weight:600;
  }
  .cld-context-chip i{ color:var(--primary); }

  /* ============ 8. STATS ============ */
  .cld-stat{ text-align:center; padding:18px; }
  .cld-stat .cld-num{ font-size:2.5rem; font-weight:700; color:var(--primary); font-family:"Anton",serif; }
  .cld-stat .cld-lbl{ color:var(--muted); font-size:13.5px; margin-top:4px; }

  /* ============ 9. WHY NERDSTECH ============ */
  .cld-diff{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .cld-diff-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px 26px; height:100%; }
  .cld-diff-icon{ width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:18px; }
  .cld-diff-card h3{ font-size:16.5px; margin-bottom:10px; }
  .cld-diff-card p{ color:var(--muted); font-size:14.5px; margin:0; }

  /* ============ 10. FAQ ============ */
  .cld-faq-item{ border-bottom:1px solid var(--border); padding:22px 0; }
  .cld-faq-q{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:600; font-size:16px; gap:16px; }
  .cld-faq-q i{ color:var(--primary); transition:transform .25s ease; flex-shrink:0; }
  .cld-faq-item.open .cld-faq-q i{ transform:rotate(45deg); }
  .cld-faq-a{ max-height:0; overflow:hidden; color:var(--muted); font-size:14.5px; line-height:1.7; transition:max-height .3s ease, padding-top .3s ease; }
  .cld-faq-item.open .cld-faq-a{ max-height:240px; padding-top:14px; }

  /* ============ 11. CTA (parallax) ============ */
  .cld-cta{ position:relative; overflow:hidden; }
  .cld-cta-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .cld-cta-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.92), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .cld-cta-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.75)); }
  .cld-cta .container{ position:relative; z-index:2; text-align:center; }
  .cld-cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .cld-cta p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }

  @media (max-width:767px){
    .cld-section{ padding:66px 0; }
    .cld-hero{ padding:70px 0 60px; }
    .cld-parallax{ min-height:380px; }
  }












  .cld-portfolio{ padding:100px 0; }
  .cld-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .cld-eyebrow.center{ justify-content:center; }
  .cld-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .cld-portfolio h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); }

  /* ---- tabs ---- */
  .cld-tabs{
 display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;                      /* no gap so the right-dividers sit flush */
  margin:34px 0 44px;
  }
.cld-tab {
    border-right: 1px solid var(--border);
    background: #121a2e00;
    color: var(--muted);
    font-weight: 600;
    font-size: 14px;
    padding: 11px 22px;
    /* border-radius: 999px; */
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
    white-space: nowrap;
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
    background:transparent;
  color:var(--muted);
  font-weight:600;
  font-size:14px;
  padding:11px 22px;
  cursor:pointer;
  white-space:nowrap;
  border:0;
  border-right:1px solid var(--border);   /* divider between tabs */
  transition:color .2s ease, background .2s ease;
}
  .cld-tab:hover{ color:var(--text); border-color:var(--primary); transform:translateY(-2px);   color:var(--text);
  background:var(--panel);   }
  .cld-tab.active{ background:var(--grad); color:#051019; border-color:transparent;   background:var(--grad);
  color:#051019;}


  /* ---- grid ---- */
  .cld-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:991px){ .cld-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:767px){ .cld-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:420px){ .cld-grid{ grid-template-columns:1fr; } }

  .cld-item{
    position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border);
    background:var(--panel); aspect-ratio:1/1; cursor:pointer;
    transition:transform .25s ease, border-color .25s ease;
  }
  .cld-item:hover{ transform:translateY(-5px); border-color:var(--primary); }
  /* zoom hint that fades in on hover */
  .cld-item-zoom{
    position:absolute; top:12px; right:12px; z-index:2;
    width:34px;height:34px;border-radius:9px; background:rgba(10,15,28,0.6); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:13px;
    opacity:0; transform:scale(.8); transition:opacity .25s ease, transform .25s ease;
  }
  .cld-item:hover .cld-item-zoom{ opacity:1; transform:scale(1); }
  .cld-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
  .cld-item:hover img{ transform:scale(1.06); }
  .cld-item-cat{
    position:absolute; left:12px; bottom:12px; z-index:2;
    font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#fff; background:rgba(10,15,28,0.66); padding:5px 10px; border-radius:999px;
    opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease;
  }
  .cld-item:hover .cld-item-cat{ opacity:1; transform:translateY(0); }

  .cld-empty{ text-align:center; color:var(--muted); padding:50px 0; display:none; }

  /* ============ LIGHTBOX MODAL + SPLIDE SLIDER ============ */
  .cld-lb{
    position:fixed; inset:0; z-index:1400;
    background:rgba(6,10,20,0.86); backdrop-filter:blur(5px);
    display:flex; align-items:center; justify-content:center; padding:24px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .28s ease, visibility .28s ease;
  }

  
  .cld-lb.open{ opacity:1; visibility:visible; pointer-events:auto; }
  .cld-lb-inner{
    width:100%; max-width:840px; position:relative;
    transform:scale(.96); transition:transform .3s ease;
  }
  .cld-lb.open .cld-lb-inner{ transform:scale(1); }
  .cld-lb-close{
    position:absolute; top:-52px; right:0; z-index:5;
    width:42px;height:42px;border-radius:11px; background:var(--panel); border:1px solid var(--border);
    color:var(--text); cursor:pointer; font-size:16px;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s ease, color .2s ease;
  }
  .cld-lb-close:hover{ border-color:var(--primary); color:var(--primary); }

  #cldLbSplide .splide__slide{ display:flex; align-items:center; justify-content:center; }
  .cld-lb-img{
    width:100%; max-height:74vh; object-fit:contain; border-radius:16px;
    border:1px solid var(--border); background:var(--panel);
  }
  #cldLbSplide .splide__arrow{ background:var(--panel); border:1px solid var(--border); width:46px; height:46px; opacity:1; }
  #cldLbSplide .splide__arrow svg{ fill:var(--text); width:16px; }
  #cldLbSplide .splide__arrow:hover{ background:var(--grad); }
  #cldLbSplide .splide__arrow:hover svg{ fill:#051019; }
  #cldLbSplide .splide__pagination__page.is-active{ background:var(--primary); }
  .cld-lb-cat{
    text-align:center; margin-top:16px; font-size:12px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  }
  body.cld-lb-lock{ overflow:hidden; }




.cld-lb.open .splide__slide img {
    border-radius: 14px;
    height: 450px;
    width: 100%;
    object-fit: contain;
    border: 1px solid var(--border);
}













  

  /***************************************************************************/
  
  .brd-section{ padding:100px 0; }
  .brd-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .brd-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .brd-text-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .brd-btn-primary{
    background:var(--grad); border:none; color:#051019; font-weight:600;
    padding:13px 30px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .brd-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(73,198,231,.5); color:#051019; }
  .brd-btn-ghost{
    border:1px solid var(--border); color:var(--text); border-radius:999px; padding:12px 28px;
    font-weight:600; background:transparent; display:inline-flex; align-items:center; gap:8px;
    transition:border-color .2s ease, color .2s ease;
  }
  .brd-btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }

  /* ============ 1. HERO (split with a "brand system" board) ============ */
  .brd-hero{ padding:96px 0 100px; position:relative; overflow:hidden; }
  .brd-hero-glow{
    position:absolute; width:700px;height:700px; top:-260px; right:-200px;
    background:radial-gradient(circle, rgba(91,124,190,0.24), transparent 64%); pointer-events:none;
  }
  .brd-hero h1{ font-size:clamp(2.2rem,4.8vw,3.7rem); margin-bottom:20px; }
  .brd-hero p.brd-lead{ color:var(--muted); font-size:17.5px; max-width:540px; }
  /* mini brand-system board */
  .brd-board{
    background:var(--panel); border:1px solid var(--border); border-radius:22px; padding:24px;
    box-shadow:0 30px 70px -30px rgba(0,0,0,0.55); display:grid; grid-template-columns:repeat(3,1fr);
    gap:14px; max-width:440px; margin-left:auto;
  }
  .brd-board-tile{ border-radius:14px; border:1px solid var(--border); padding:16px; min-height:96px; display:flex; flex-direction:column; justify-content:space-between; }
  .brd-board-tile small{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .brd-swatch{ border-radius:14px; min-height:96px; border:1px solid var(--border); }
  .brd-swatch.s1{ background:var(--primary); }
  .brd-swatch.s2{ background:var(--secondary); }
  .brd-swatch.s3{ background:var(--panel-2); }
  .brd-board-type{ grid-column:span 2; }
  .brd-board-type .big{ font-family:"Anton",serif; font-size:30px; line-height:1; color:var(--text); }
  .brd-board-type .small{ font-size:12px; color:var(--muted); margin-top:6px; }
  .brd-board-voice{ grid-column:span 3; }
  .brd-board-voice p{ margin:6px 0 0; font-size:13px; color:var(--text); font-style:italic; }

  /* ============ 2. PILLARS STRIP ============ */
  .brd-pillars{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ink-2); padding:0; }
  .brd-pillars .row{ --bs-gutter-x:0; }
  .brd-pillar{
    padding:38px 30px; border-right:1px solid var(--border); text-align:center;
    transition:background .25s ease;
  }
  .brd-pillar:last-child{ border-right:none; }
  .brd-pillar:hover{ background:var(--panel); }
  .brd-pillar i{ font-size:26px; color:var(--primary); margin-bottom:14px; display:block; }
  .brd-pillar h3{ font-size:16px; margin-bottom:6px; }
  .brd-pillar p{ color:var(--muted); font-size:13px; margin:0; }
  @media (max-width:767px){ .brd-pillar{ border-right:none; border-bottom:1px solid var(--border); } .brd-pillar:last-child{ border-bottom:none; } }

  /* ============ 3. WHY (parallax banner) ============ */
  .brd-parallax{
    position:relative; min-height:460px; display:flex; align-items:center; overflow:hidden;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .brd-parallax-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .brd-parallax-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.94), rgba(10,15,28,0.66)); }
  html[data-theme="light"] .brd-parallax-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.7)); }
  .brd-parallax .container{ position:relative; z-index:2; }
  .brd-parallax h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:640px; margin-bottom:16px; }
  .brd-parallax p{ color:var(--muted); max-width:560px; font-size:16.5px; line-height:1.7; }

  /* ============ 4. WHAT'S INSIDE (alternating rows) ============ */
  .brd-inside-row{ align-items:center; }
  .brd-inside-img{ border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:0 24px 60px -28px rgba(0,0,0,0.5); position:relative; height:340px; }
  .brd-inside-img .brd-parimg{ position:absolute; inset:-12% 0; background-size:cover; background-position:center; will-change:transform; }
  .brd-inside-copy h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:12px; }
  .brd-inside-copy p{ color:var(--muted); font-size:15.5px; line-height:1.7; margin:0; }
  .brd-inside-copy .num{ font-family:"Anton",serif; color:var(--primary); font-size:15px; letter-spacing:.1em; margin-bottom:10px; display:block; }

  /* ============ 5. PROCESS (vertical connector) ============ */
  .brd-process{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .brd-proc-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:28px 24px; height:100%;
    transition:transform .25s ease, border-color .25s ease;
  }
  .brd-proc-card:hover{ transform:translateY(-5px); border-color:var(--primary); }
  .brd-proc-step{ font-family:"Anton",serif; font-size:14px; color:var(--primary); letter-spacing:.1em; margin-bottom:14px; }
  .brd-proc-card h3{ font-size:16.5px; margin-bottom:10px; }
  .brd-proc-card p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }

  /* ============ 6. TOUCHPOINTS (image cards) ============ */
  .brd-touch-card{
    background:var(--panel); border:1px solid var(--border); border-radius:18px; overflow:hidden; height:100%;
    transition:transform .25s ease, border-color .25s ease;
  }
  .brd-touch-card:hover{ transform:translateY(-6px); border-color:var(--primary); }
  .brd-touch-media{ height:190px; overflow:hidden; }
  .brd-touch-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
  .brd-touch-card:hover img{ transform:scale(1.07); }
  .brd-touch-body{ padding:22px; }
  .brd-touch-body .tag{ font-size:12px; color:var(--primary); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
  .brd-touch-body h3{ font-size:16.5px; margin:8px 0 10px; }
  .brd-touch-body p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }

  /* ============ 7. CONSISTENCY (parallax quote band) ============ */
  .brd-quoteband{ position:relative; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .brd-quoteband-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .brd-quoteband-overlay{ position:absolute; inset:0; z-index:1; background:rgba(10,15,28,0.9); }
  html[data-theme="light"] .brd-quoteband-overlay{ background:rgba(246,244,238,0.92); }
  .brd-quoteband .container{ position:relative; z-index:2; text-align:center; }
  .brd-quoteband .q{ font-family:"Anton",serif; font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.2; max-width:16ch; margin:0 auto; }
  .brd-quoteband .q .brd-text-grad{ display:inline; }
  .brd-quoteband .attr{ color:var(--muted); font-size:14px; margin-top:20px; }

  /* ============ 8. STATS ============ */
  .brd-stat{ text-align:center; padding:18px; }
  .brd-stat .brd-num{ font-size:2.5rem; font-weight:700; color:var(--primary); font-family:"Anton",serif; }
  .brd-stat .brd-lbl{ color:var(--muted); font-size:13.5px; margin-top:4px; }

  /* ============ 9. WHY NERDSTECH ============ */
  .brd-diff{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .brd-diff-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px 26px; height:100%; }
  .brd-diff-icon{ width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:18px; }
  .brd-diff-card h3{ font-size:16.5px; margin-bottom:10px; }
  .brd-diff-card p{ color:var(--muted); font-size:14.5px; margin:0; }

  /* ============ 10. FAQ ============ */
  .brd-faq-item{ border-bottom:1px solid var(--border); padding:22px 0; }
  .brd-faq-q{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:600; font-size:16px; gap:16px; }
  .brd-faq-q i{ color:var(--primary); transition:transform .25s ease; flex-shrink:0; }
  .brd-faq-item.open .brd-faq-q i{ transform:rotate(45deg); }
  .brd-faq-a{ max-height:0; overflow:hidden; color:var(--muted); font-size:14.5px; line-height:1.7; transition:max-height .3s ease, padding-top .3s ease; }
  .brd-faq-item.open .brd-faq-a{ max-height:240px; padding-top:14px; }

  /* ============ 11. CTA (parallax) ============ */
  .brd-cta{ position:relative; overflow:hidden; }
  .brd-cta-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .brd-cta-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.92), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .brd-cta-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.75)); }
  .brd-cta .container{ position:relative; z-index:2; text-align:center; }
  .brd-cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .brd-cta p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }

  @media (max-width:767px){
    .brd-section{ padding:66px 0; }
    .brd-hero{ padding:54px 0 60px; }
    .brd-board{ margin:0 auto; }
    .brd-parallax{ min-height:380px; }
    .brd-inside-img{ height:260px; }
  }



  /********************************************************************************/
  
  .cnw-section{ padding:100px 0; }
  .cnw-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .cnw-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .cnw-text-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .cnw-btn-primary{
    background:var(--grad); border:none; color:#051019; font-weight:600;
    padding:13px 30px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .cnw-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(73,198,231,.5); color:#051019; }
  .cnw-btn-ghost{
    border:1px solid var(--border); color:var(--text); border-radius:999px; padding:12px 28px;
    font-weight:600; background:transparent; display:inline-flex; align-items:center; gap:8px;
    transition:border-color .2s ease, color .2s ease;
  }
  .cnw-btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }

  /* ============ 1. HERO (editorial — big type, typing headline) ============ */
  .cnw-hero{ padding:120px 0 100px; position:relative; overflow:hidden; }
  .cnw-hero-glow{
    position:absolute; width:700px;height:700px; top:-260px; left:-180px;
    background:radial-gradient(circle, rgba(73,198,231,0.2), transparent 64%); pointer-events:none;
  }
  .cnw-hero .kicker{ color:var(--muted); font-size:15px; margin-bottom:22px; letter-spacing:.02em; }
  .cnw-hero h1{ font-size:clamp(2.6rem,6.5vw,5rem); line-height:1.02; margin-bottom:24px; max-width:16ch; }
  .cnw-caret{ display:inline-block; width:4px; height:0.9em; background:var(--primary); margin-left:6px; transform:translateY(4px); animation:cnwBlink 1s steps(1) infinite; }
  @keyframes cnwBlink{ 50%{ opacity:0; } }
  .cnw-hero p.cnw-lead{ color:var(--muted); font-size:18px; max-width:560px; }

  /* ============ 2. SERVICE TYPES STRIP ============ */
  .cnw-types{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ink-2); padding:46px 0; }
  .cnw-type-pill{
    display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:14px;
    background:var(--panel); border:1px solid var(--border); font-weight:600; font-size:15px;
    transition:transform .2s ease, border-color .2s ease, color .2s ease;
  }
  .cnw-type-pill:hover{ transform:translateY(-3px); border-color:var(--primary); color:var(--primary); }
  .cnw-type-pill i{ color:var(--primary); }

  /* ============ 3. WHY (parallax banner) ============ */
  .cnw-parallax{
    position:relative; min-height:460px; display:flex; align-items:center; overflow:hidden;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .cnw-parallax-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .cnw-parallax-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.94), rgba(10,15,28,0.66)); }
  html[data-theme="light"] .cnw-parallax-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.7)); }
  .cnw-parallax .container{ position:relative; z-index:2; }
  .cnw-parallax h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:640px; margin-bottom:16px; }
  .cnw-parallax p{ color:var(--muted); max-width:560px; font-size:16.5px; line-height:1.7; }

  /* ============ 4. WHAT WE WRITE (image-left feature list) ============ */
  .cnw-write-img{ border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:0 24px 60px -28px rgba(0,0,0,0.5); position:relative; height:100%; min-height:460px; }
  .cnw-write-img .cnw-parimg{ position:absolute; inset:-12% 0; background-size:cover; background-position:center; will-change:transform; }
  .cnw-write-item{ display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--border); }
  .cnw-write-item:last-child{ border-bottom:none; }
  .cnw-write-ic{ flex-shrink:0; width:46px;height:46px;border-radius:12px; background:rgba(73,198,231,.1); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:18px; }
  .cnw-write-item h3{ font-size:16.5px; margin-bottom:6px; }
  .cnw-write-item p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }

  /* ============ 5. HOW WE WORK (DIFFERENT: vertical drawn timeline) ============ */
  .cnw-flow{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .cnw-flow-wrap{ position:relative; max-width:760px; margin:56px auto 0; }
  /* the track + drawn progress line */
  .cnw-flow-track{ position:absolute; left:27px; top:8px; bottom:8px; width:3px; background:var(--border); border-radius:3px; }
  .cnw-flow-progress{ position:absolute; left:27px; top:8px; width:3px; height:0; background:var(--grad); border-radius:3px; z-index:1; }
  .cnw-flow-node{ position:relative; padding-left:82px; margin-bottom:44px; }
  .cnw-flow-node:last-child{ margin-bottom:0; }
  .cnw-flow-dot{
    position:absolute; left:0; top:0; width:56px;height:56px;border-radius:16px; z-index:2;
    background:var(--panel); border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center; color:var(--primary); font-size:20px;
    transition:border-color .3s ease, background .3s ease, color .3s ease;
  }
  .cnw-flow-node.active .cnw-flow-dot{ background:var(--grad); border-color:transparent; color:#051019; }
  .cnw-flow-tagnum{ font-family:"Anton",serif; font-size:13px; letter-spacing:.12em; color:var(--muted); margin-bottom:6px; }
  .cnw-flow-node h3{ font-size:19px; margin-bottom:8px; }
  .cnw-flow-node p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.65; max-width:520px; }

  /* ============ 6. SAMPLE / PORTFOLIO (image cards) ============ */
  .cnw-sample-card{
    background:var(--panel); border:1px solid var(--border); border-radius:18px; overflow:hidden; height:100%;
    transition:transform .25s ease, border-color .25s ease;
  }
  .cnw-sample-card:hover{ transform:translateY(-6px); border-color:var(--primary); }
  .cnw-sample-media{ height:190px; overflow:hidden; }
  .cnw-sample-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
  .cnw-sample-card:hover img{ transform:scale(1.07); }
  .cnw-sample-body{ padding:22px; }
  .cnw-sample-body .tag{ font-size:12px; color:var(--primary); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
  .cnw-sample-body h3{ font-size:16.5px; margin:8px 0 10px; }
  .cnw-sample-body p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }

  /* ============ 7. SEO-READY (parallax split highlight) ============ */
  .cnw-seo{ position:relative; overflow:hidden; }
  .cnw-seo-panel{ background:var(--panel); border:1px solid var(--border); border-radius:24px; padding:48px 42px; position:relative; overflow:hidden; }
  .cnw-seo-panel::before{ content:''; position:absolute; top:-70px; right:-70px; width:240px;height:240px;border-radius:50%; background:var(--grad); opacity:.1; }
  .cnw-seo-panel h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:14px; }
  .cnw-seo-panel p{ color:var(--muted); font-size:16px; line-height:1.7; }
  .cnw-seo-list{ list-style:none; padding:0; margin:22px 0 0; }
  .cnw-seo-list li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:14.5px; }
  .cnw-seo-list li i{ color:var(--primary); margin-top:3px; }

  /* ============ 8. STATS ============ */
  .cnw-stat{ text-align:center; padding:18px; }
  .cnw-stat .cnw-num{ font-size:2.5rem; font-weight:700; color:var(--primary); font-family:"Anton",serif; }
  .cnw-stat .cnw-lbl{ color:var(--muted); font-size:13.5px; margin-top:4px; }

  /* ============ 9. WHY NERDSTECH ============ */
  .cnw-diff{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .cnw-diff-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px 26px; height:100%; }
  .cnw-diff-icon{ width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:18px; }
  .cnw-diff-card h3{ font-size:16.5px; margin-bottom:10px; }
  .cnw-diff-card p{ color:var(--muted); font-size:14.5px; margin:0; }

  /* ============ 10. FAQ ============ */
  .cnw-faq-item{ border-bottom:1px solid var(--border); padding:22px 0; }
  .cnw-faq-q{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:600; font-size:16px; gap:16px; }
  .cnw-faq-q i{ color:var(--primary); transition:transform .25s ease; flex-shrink:0; }
  .cnw-faq-item.open .cnw-faq-q i{ transform:rotate(45deg); }
  .cnw-faq-a{ max-height:0; overflow:hidden; color:var(--muted); font-size:14.5px; line-height:1.7; transition:max-height .3s ease, padding-top .3s ease; }
  .cnw-faq-item.open .cnw-faq-a{ max-height:240px; padding-top:14px; }

  /* ============ 11. CTA (parallax) ============ */
  .cnw-cta{ position:relative; overflow:hidden; }
  .cnw-cta-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .cnw-cta-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.92), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .cnw-cta-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.75)); }
  .cnw-cta .container{ position:relative; z-index:2; text-align:center; }
  .cnw-cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .cnw-cta p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }

  @media (max-width:767px){
    .cnw-section{ padding:66px 0; }
    .cnw-hero{ padding:70px 0 56px; }
    .cnw-parallax{ min-height:380px; }
    .cnw-write-img{ min-height:280px; margin-bottom:30px; }
    .cnw-flow-track,.cnw-flow-progress{ left:22px; }
    .cnw-flow-node{ padding-left:70px; }
    .cnw-flow-dot{ width:46px;height:46px; font-size:17px; }
  }

  /*************************************SEO *******************************************************/
  
  .seo-section{ padding:100px 0; }
  .seo-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .seo-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .seo-text-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .seo-btn-primary{
    background:var(--grad); border:none; color:#051019; font-weight:600;
    padding:13px 30px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .seo-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(73,198,231,.5); color:#051019; }
  .seo-btn-ghost{
    border:1px solid var(--border); color:var(--text); border-radius:999px; padding:12px 28px;
    font-weight:600; background:transparent; display:inline-flex; align-items:center; gap:8px;
    transition:border-color .2s ease, color .2s ease;
  }
  .seo-btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }

  /* ============ 1. HERO (split with animated rank chart) ============ */
  .seo-hero{ padding:88px 0 100px; position:relative; overflow:hidden; }
  .seo-hero-glow{
    position:absolute; width:720px;height:720px; top:-260px; right:-200px;
    background:radial-gradient(circle, rgba(73,198,231,0.22), transparent 64%); pointer-events:none;
  }
  .seo-hero h1{ font-size:clamp(2.2rem,4.8vw,3.7rem); margin-bottom:20px; }
  .seo-hero p.seo-lead{ color:var(--muted); font-size:17.5px; max-width:540px; }
  /* rank / growth chart mock */
  .seo-chart{
    background:var(--panel); border:1px solid var(--border); border-radius:22px; padding:26px;
    box-shadow:0 30px 70px -30px rgba(0,0,0,0.55); max-width:460px; margin-left:auto;
  }
  .seo-chart-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
  .seo-chart-head .lbl{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
  .seo-chart-head .val{ font-family:"Anton",serif; font-size:22px; color:var(--primary); }
  .seo-bars{ display:flex; align-items:flex-end; gap:12px; height:170px; }
  .seo-bar{ flex:1; background:var(--grad); border-radius:8px 8px 0 0; opacity:.9; min-height:6px; }
  .seo-chart-foot{ display:flex; justify-content:space-between; margin-top:12px; font-size:11px; color:var(--muted); }

  /* ============ 2. METRIC TICKER ============ */
  .seo-metrics{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ink-2); padding:0; }
  .seo-metric{ padding:36px 24px; text-align:center; border-right:1px solid var(--border); }
  .seo-metric:last-child{ border-right:none; }
  .seo-metric .m-num{ font-family:"Anton",serif; font-size:2.2rem; color:var(--primary); }
  .seo-metric .m-lbl{ color:var(--muted); font-size:13px; margin-top:4px; }
  @media (max-width:767px){ .seo-metric{ border-right:none; border-bottom:1px solid var(--border); } .seo-metric:last-child{ border-bottom:none; } }

  /* ============ 3. WHY (parallax banner) ============ */
  .seo-parallax{
    position:relative; min-height:460px; display:flex; align-items:center; overflow:hidden;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .seo-parallax-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .seo-parallax-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.94), rgba(10,15,28,0.66)); }
  html[data-theme="light"] .seo-parallax-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.7)); }
  .seo-parallax .container{ position:relative; z-index:2; }
  .seo-parallax h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:640px; margin-bottom:16px; }
  .seo-parallax p{ color:var(--muted); max-width:560px; font-size:16.5px; line-height:1.7; }

  /* ============ 4. THREE PILLARS (what SEO actually is) ============ */
  .seo-pillar-card{
    background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:34px 28px; height:100%;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .seo-pillar-card:hover{ transform:translateY(-6px); border-color:var(--primary); background:var(--panel-2); }
  .seo-pillar-ic{
    width:54px;height:54px;border-radius:14px; display:flex;align-items:center;justify-content:center;
    background:rgba(73,198,231,.1); color:var(--primary); font-size:22px; margin-bottom:22px;
  }
  .seo-pillar-card h3{ font-size:19px; margin-bottom:12px; }
  .seo-pillar-card p{ color:var(--muted); font-size:14.5px; margin:0 0 16px; line-height:1.65; }
  .seo-pillar-list{ list-style:none; padding:0; margin:0; }
  .seo-pillar-list li{ font-size:13.5px; color:var(--muted); padding:6px 0 6px 22px; position:relative; }
  .seo-pillar-list li::before{ content:'\f00c'; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--primary); position:absolute; left:0; font-size:11px; top:8px; }

  /* ============ 5. HOW WE WORK (SPLIDE CAROUSEL) ============ */
  .seo-flow{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  #seo-flow-splide .splide__slide{ height:auto; }
  .seo-flow-card{
    background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:30px 26px; height:100%;
    position:relative; overflow:hidden; transition:border-color .25s ease, transform .25s ease;
  }
  .seo-flow-card:hover{ border-color:var(--primary); transform:translateY(-4px); }
  .seo-flow-num{
    font-family:"Anton",serif; font-size:3.4rem; line-height:1; color:transparent;
    -webkit-text-stroke:1.4px var(--border); margin-bottom:16px; display:block;
  }
  .seo-flow-card:hover .seo-flow-num{ -webkit-text-stroke:1.4px var(--primary); }
  .seo-flow-ic{ position:absolute; top:30px; right:26px; color:var(--primary); font-size:20px; opacity:.85; }
  .seo-flow-card h3{ font-size:17.5px; margin-bottom:10px; }
  .seo-flow-card p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }
  #seo-flow-splide .splide__arrow{ background:var(--panel); border:1px solid var(--border); width:44px; height:44px; opacity:1; }
  #seo-flow-splide .splide__arrow svg{ fill:var(--text); width:16px; }
  #seo-flow-splide .splide__arrow:hover{ background:var(--grad); }
  #seo-flow-splide .splide__arrow:hover svg{ fill:#051019; }
  #seo-flow-splide .splide__arrow:disabled{ opacity:.35; }
  #seo-flow-splide .splide__pagination__page.is-active{ background:var(--primary); }

  /* ============ 6. DELIVERABLES (checklist grid) ============ */
  .seo-deliver-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; height:100%;
    transition:transform .25s ease, border-color .25s ease;
  }
  .seo-deliver-card:hover{ transform:translateY(-6px); border-color:var(--primary); }
  .seo-deliver-media{ height:180px; overflow:hidden; }
  .seo-deliver-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
  .seo-deliver-card:hover img{ transform:scale(1.07); }
  .seo-deliver-body{ padding:22px; }
  .seo-deliver-body .tag{ font-size:12px; color:var(--primary); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
  .seo-deliver-body h3{ font-size:16.5px; margin:8px 0 10px; }
  .seo-deliver-body p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }

  /* ============ 7. ONGOING (parallax split highlight) ============ */
  .seo-ongoing-panel{ background:var(--panel); border:1px solid var(--border); border-radius:24px; padding:48px 42px; position:relative; overflow:hidden; }
  .seo-ongoing-panel::before{ content:''; position:absolute; top:-70px; right:-70px; width:240px;height:240px;border-radius:50%; background:var(--grad); opacity:.1; }
  .seo-ongoing-panel h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:14px; }
  .seo-ongoing-panel p{ color:var(--muted); font-size:16px; line-height:1.7; }
  .seo-ongoing-list{ list-style:none; padding:0; margin:22px 0 0; }
  .seo-ongoing-list li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:14.5px; }
  .seo-ongoing-list li i{ color:var(--primary); margin-top:3px; }

  /* ============ 8. STATS ============ */
  .seo-stat{ text-align:center; padding:18px; }
  .seo-stat .seo-num{ font-size:2.5rem; font-weight:700; color:var(--primary); font-family:"Anton",serif; }
  .seo-stat .seo-lbl{ color:var(--muted); font-size:13.5px; margin-top:4px; }

  /* ============ 9. WHY NERDSTECH ============ */
  .seo-diff{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .seo-diff-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px 26px; height:100%; }
  .seo-diff-icon{ width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:18px; }
  .seo-diff-card h3{ font-size:16.5px; margin-bottom:10px; }
  .seo-diff-card p{ color:var(--muted); font-size:14.5px; margin:0; }

  /* ============ 10. FAQ ============ */
  .seo-faq-item{ border-bottom:1px solid var(--border); padding:22px 0; }
  .seo-faq-q{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:600; font-size:16px; gap:16px; }
  .seo-faq-q i{ color:var(--primary); transition:transform .25s ease; flex-shrink:0; }
  .seo-faq-item.open .seo-faq-q i{ transform:rotate(45deg); }
  .seo-faq-a{ max-height:0; overflow:hidden; color:var(--muted); font-size:14.5px; line-height:1.7; transition:max-height .3s ease, padding-top .3s ease; }
  .seo-faq-item.open .seo-faq-a{ max-height:240px; padding-top:14px; }

  /* ============ 11. CTA (parallax) ============ */
  .seo-cta{ position:relative; overflow:hidden; }
  .seo-cta-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .seo-cta-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.92), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .seo-cta-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.75)); }
  .seo-cta .container{ position:relative; z-index:2; text-align:center; }
  .seo-cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .seo-cta p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }

  @media (max-width:767px){
    .seo-section{ padding:66px 0; }
    .seo-hero{ padding:54px 0 60px; }
    .seo-chart{ margin:0 auto; }
    .seo-parallax{ min-height:380px; }
  }

  /*************************************social media marketing */
  .smm-section{ padding:100px 0; }
  .smm-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .smm-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .smm-text-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .smm-btn-primary{
    background:var(--grad); border:none; color:#051019; font-weight:600;
    padding:13px 30px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .smm-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(73,198,231,.5); color:#051019; }
  .smm-btn-ghost{
    border:1px solid var(--border); color:var(--text); border-radius:999px; padding:12px 28px;
    font-weight:600; background:transparent; display:inline-flex; align-items:center; gap:8px;
    transition:border-color .2s ease, color .2s ease;
  }
  .smm-btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }

  /* ============ 1. HERO (split with floating post cards) ============ */
  .smm-hero{ padding:96px 0 100px; position:relative; overflow:hidden; }
  .smm-hero-glow{
    position:absolute; width:720px;height:720px; top:-260px; left:-200px;
    background:radial-gradient(circle, rgba(91,124,190,0.24), transparent 64%); pointer-events:none;
  }
  .smm-hero h1{ font-size:clamp(2.2rem,4.8vw,3.7rem); margin-bottom:20px; }
  .smm-hero p.smm-lead{ color:var(--muted); font-size:17.5px; max-width:540px; }
  .smm-phone{
    position:relative; max-width:340px; margin-left:auto;
    background:var(--panel); border:1px solid var(--border); border-radius:28px; padding:16px;
    box-shadow:0 30px 70px -30px rgba(0,0,0,0.55);
  }
  .smm-post{ border-radius:16px; overflow:hidden; border:1px solid var(--border); margin-bottom:12px; }
  .smm-post:last-child{ margin-bottom:0; }
  .smm-post img{ width:100%; height:150px; object-fit:cover; display:block; }
  .smm-post-meta{ display:flex; align-items:center; gap:8px; padding:10px 12px; font-size:12px; color:var(--muted); }
  .smm-post-meta i{ color:var(--primary); }
  .smm-float{
    position:absolute; background:var(--panel); border:1px solid var(--border); border-radius:14px;
    padding:12px 16px; display:flex; align-items:center; gap:10px; box-shadow:0 20px 40px -16px rgba(0,0,0,0.5); z-index:3;
  }
  .smm-float i{ color:var(--primary); font-size:16px; }
  .smm-float .v{ font-weight:700; font-size:13px; }
  .smm-float.f1{ top:20px; left:-26px; }
  .smm-float.f2{ bottom:36px; right:-24px; }
  @media (max-width:991px){ .smm-float{ display:none; } .smm-phone{ margin:0 auto; } }

  /* ============ 2. PLATFORM STRIP ============ */
  .smm-platforms{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ink-2); padding:46px 0; }
  .smm-plat{ display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted); padding:12px; }
  .smm-plat i{ font-size:32px; color:var(--text); opacity:.85; transition:color .2s ease, transform .2s ease, opacity .2s ease; }
  .smm-plat:hover i{ color:var(--primary); transform:translateY(-4px); opacity:1; }
  .smm-plat span{ font-size:12.5px; font-weight:600; }

  /* ============ 3. WHY (parallax banner) ============ */
  .smm-parallax{
    position:relative; min-height:460px; display:flex; align-items:center; overflow:hidden;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .smm-parallax-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .smm-parallax-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.94), rgba(10,15,28,0.66)); }
  html[data-theme="light"] .smm-parallax-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.7)); }
  .smm-parallax .container{ position:relative; z-index:2; }
  .smm-parallax h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:640px; margin-bottom:16px; }
  .smm-parallax p{ color:var(--muted); max-width:560px; font-size:16.5px; line-height:1.7; }

  /* ============ 4. WHAT WE DO (bento) ============ */
  .smm-bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .smm-bento-cell{
    background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:30px 26px;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .smm-bento-cell:hover{ transform:translateY(-5px); border-color:var(--primary); background:var(--panel-2); }
  .smm-bento-cell.wide{ grid-column:span 2; }
  .smm-bento-ic{ width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:18px; }
  .smm-bento-cell h3{ font-size:17px; margin-bottom:10px; }
  .smm-bento-cell p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }
  @media (max-width:991px){ .smm-bento{ grid-template-columns:repeat(2,1fr); } .smm-bento-cell.wide{ grid-column:auto; } }
  @media (max-width:575px){ .smm-bento{ grid-template-columns:1fr; } }

  /* ============ 5. HOW WE WORK (6 STEPS AS COLUMNS) ============ */
  .smm-flow{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .smm-flow-col{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:26px 22px; height:100%;
    position:relative; transition:transform .25s ease, border-color .25s ease;
  }
  .smm-flow-col:hover{ transform:translateY(-6px); border-color:var(--primary); }
  .smm-flow-step{
    width:40px;height:40px;border-radius:11px; background:var(--grad); color:#051019;
    font-family:"Anton",serif; font-size:16px; display:flex;align-items:center;justify-content:center; margin-bottom:18px;
  }
  .smm-flow-col h3{ font-size:16px; margin-bottom:9px; }
  .smm-flow-col p{ color:var(--muted); font-size:13.5px; margin:0; line-height:1.55; }

  /* ============ 6. PORTFOLIO (IMAGE-ONLY SPLIDE) ============ */
  .smm-portfolio{ }
  #smm-portfolio-splide .splide__slide{ overflow:hidden; border-radius:16px; }
  .smm-port-img{
    display:block; width:100%; height:340px; object-fit:cover; border-radius:16px;
    border:1px solid var(--border); transition:transform .5s ease;
  }
  #smm-portfolio-splide .splide__slide:hover .smm-port-img{ transform:scale(1.05); }
  #smm-portfolio-splide .splide__arrow{ background:var(--panel); border:1px solid var(--border); width:46px; height:46px; opacity:1; }
  #smm-portfolio-splide .splide__arrow svg{ fill:var(--text); width:16px; }
  #smm-portfolio-splide .splide__arrow:hover{ background:var(--grad); }
  #smm-portfolio-splide .splide__arrow:hover svg{ fill:#051019; }
  #smm-portfolio-splide .splide__arrow:disabled{ opacity:.35; }
  #smm-portfolio-splide .splide__pagination__page.is-active{ background:var(--primary); }

  /* ============ 7. ENGAGEMENT (parallax split highlight) ============ */
  .smm-eng-panel{ background:var(--panel); border:1px solid var(--border); border-radius:24px; padding:48px 42px; position:relative; overflow:hidden; }
  .smm-eng-panel::before{ content:''; position:absolute; top:-70px; right:-70px; width:240px;height:240px;border-radius:50%; background:var(--grad); opacity:.1; }
  .smm-eng-panel h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:14px; }
  .smm-eng-panel p{ color:var(--muted); font-size:16px; line-height:1.7; }
  .smm-eng-list{ list-style:none; padding:0; margin:22px 0 0; }
  .smm-eng-list li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:14.5px; }
  .smm-eng-list li i{ color:var(--primary); margin-top:3px; }

  /* ============ 8. STATS ============ */
  .smm-stat{ text-align:center; padding:18px; }
  .smm-stat .smm-num{ font-size:2.5rem; font-weight:700; color:var(--primary); font-family:"Anton",serif; }
  .smm-stat .smm-lbl{ color:var(--muted); font-size:13.5px; margin-top:4px; }

  /* ============ 9. WHY NERDSTECH ============ */
  .smm-diff{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .smm-diff-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px 26px; height:100%; }
  .smm-diff-icon{ width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:18px; }
  .smm-diff-card h3{ font-size:16.5px; margin-bottom:10px; }
  .smm-diff-card p{ color:var(--muted); font-size:14.5px; margin:0; }

  /* ============ 10. FAQ ============ */
  .smm-faq-item{ border-bottom:1px solid var(--border); padding:22px 0; }
  .smm-faq-q{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:600; font-size:16px; gap:16px; }
  .smm-faq-q i{ color:var(--primary); transition:transform .25s ease; flex-shrink:0; }
  .smm-faq-item.open .smm-faq-q i{ transform:rotate(45deg); }
  .smm-faq-a{ max-height:0; overflow:hidden; color:var(--muted); font-size:14.5px; line-height:1.7; transition:max-height .3s ease, padding-top .3s ease; }
  .smm-faq-item.open .smm-faq-a{ max-height:240px; padding-top:14px; }

  /* ============ 11. CTA (parallax) ============ */
  .smm-cta{ position:relative; overflow:hidden; }
  .smm-cta-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .smm-cta-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.92), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .smm-cta-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.75)); }
  .smm-cta .container{ position:relative; z-index:2; text-align:center; }
  .smm-cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .smm-cta p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }

  @media (max-width:767px){
    .smm-section{ padding:66px 0; }
    .smm-hero{ padding:54px 0 60px; }
    .smm-parallax{ min-height:380px; }
    .smm-port-img{ height:260px; }
  }

   /* ============ PAGE-SPECIFIC STYLES ONLY (no :root)  motion graphics============ */

  .mog-section{ padding:100px 0; }
  .mog-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .mog-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .mog-text-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .mog-btn-primary{
    background:var(--grad); border:none; color:#051019; font-weight:600;
    padding:13px 30px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .mog-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(73,198,231,.5); color:#051019; }
  .mog-btn-ghost{
    border:1px solid var(--border); color:var(--text); border-radius:999px; padding:12px 28px;
    font-weight:600; background:transparent; display:inline-flex; align-items:center; gap:8px;
    transition:border-color .2s ease, color .2s ease;
  }
  .mog-btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }

  /* ============ 1. HERO ============ */
  .mog-hero{ padding:96px 0 100px; position:relative; overflow:hidden; }
  .mog-hero-glow{
    position:absolute; width:720px;height:720px; top:-260px; right:-200px;
    background:radial-gradient(circle, rgba(73,198,231,0.22), transparent 64%); pointer-events:none;
  }
  .mog-hero h1{ font-size:clamp(2.2rem,4.8vw,3.7rem); margin-bottom:20px; }
  .mog-hero p.mog-lead{ color:var(--muted); font-size:17.5px; max-width:540px; }
  .mog-reel{
    position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--border);
    box-shadow:0 30px 70px -30px rgba(0,0,0,0.55); aspect-ratio:16/10;
    background-size:cover; background-position:center;
  }
  .mog-reel::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(10,15,28,0.35), rgba(10,15,28,0.1)); }
  .mog-play{
    position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
    width:84px;height:84px;border-radius:50%; background:var(--grad); color:#051019;
    display:flex;align-items:center;justify-content:center; font-size:26px;
  }
  .mog-play::before{
    content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--primary);
    animation:mogPulse 2.4s ease-out infinite;
  }
  @keyframes mogPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.8); opacity:0; } }

  /* ============ 2. FORMATS TICKER ============ */
  .mog-formats{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ink-2); padding:26px 0; overflow:hidden; }
  .mog-formats-track{ display:flex; gap:52px; width:max-content; animation:mogScroll 24s linear infinite; }
  .mog-formats:hover .mog-formats-track{ animation-play-state:paused; }
  .mog-format-item{ font-family:"Anton",serif; font-size:20px; color:var(--muted); display:flex; align-items:center; gap:14px; white-space:nowrap; }
  .mog-format-item i{ color:var(--primary); font-size:16px; }
  @keyframes mogScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ============ 3. WHY (parallax banner) ============ */
  .mog-parallax{
    position:relative; min-height:460px; display:flex; align-items:center; overflow:hidden;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .mog-parallax-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .mog-parallax-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.94), rgba(10,15,28,0.66)); }
  html[data-theme="light"] .mog-parallax-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.7)); }
  .mog-parallax .container{ position:relative; z-index:2; }
  .mog-parallax h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:640px; margin-bottom:16px; }
  .mog-parallax p{ color:var(--muted); max-width:560px; font-size:16.5px; line-height:1.7; }

  /* ============ 4. WHAT WE MAKE (bento) ============ */
  .mog-bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .mog-bento-cell{
    background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:30px 26px;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .mog-bento-cell:hover{ transform:translateY(-5px); border-color:var(--primary); background:var(--panel-2); }
  .mog-bento-cell.wide{ grid-column:span 2; }
  .mog-bento-ic{ width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:18px; }
  .mog-bento-cell h3{ font-size:17px; margin-bottom:10px; }
  .mog-bento-cell p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }
  @media (max-width:991px){ .mog-bento{ grid-template-columns:repeat(2,1fr); } .mog-bento-cell.wide{ grid-column:auto; } }
  @media (max-width:575px){ .mog-bento{ grid-template-columns:1fr; } }

  /* ============ 5. HOW WE WORK (6 steps, columns) ============ */
  .mog-flow{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .mog-flow-col{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:26px 22px; height:100%;
    transition:transform .25s ease, border-color .25s ease;
  }
  .mog-flow-col:hover{ transform:translateY(-6px); border-color:var(--primary); }
  .mog-flow-step{ width:40px;height:40px;border-radius:11px; background:var(--grad); color:#051019; font-family:"Anton",serif; font-size:16px; display:flex;align-items:center;justify-content:center; margin-bottom:18px; }
  .mog-flow-col h3{ font-size:16px; margin-bottom:9px; }
  .mog-flow-col p{ color:var(--muted); font-size:13.5px; margin:0; line-height:1.55; }

  /* ============ 6. PORTFOLIO (FULL-WIDTH, IMAGE-ONLY, RIGHT-BLEED SPLIDE) ============ */
  .mog-portfolio{ padding:100px 0; overflow:hidden; }
  /* heading stays aligned to the normal container gutter */
  .mog-portfolio-head{ max-width:1320px; margin:0 auto 40px; padding:0 12px; position:relative; }
  /* the slider is NOT in a container: it starts at the same left
     gutter as the heading and runs off the RIGHT edge of the screen */
  .mog-portfolio-slider{ padding-left:max(24px, calc((100vw - 1320px) / 2 + 12px)); padding-right:0; }
  #mog-portfolio-splide .splide__track{ overflow:visible; }  /* slides bleed past the right edge */
  #mog-portfolio-splide .splide__slide{ overflow:hidden; border-radius:16px; }
  .mog-port-video{
    display:block; width:100%; height:450px; object-fit:cover; border-radius:16px;
    border:1px solid var(--border); background:var(--panel-2); transition:transform .5s ease;
  }
  #mog-portfolio-splide .splide__slide:hover .mog-port-video{ transform:scale(1.04); }
  /* small muted badge that appears while a clip is playing */
  .mog-port-frame{ position:relative; }
  .mog-port-badge{
    position:absolute; top:12px; left:12px; z-index:2;
    display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
    background:rgba(10,15,28,0.7); color:#fff; font-size:11px; font-weight:600;
    opacity:0; transition:opacity .2s ease; pointer-events:none;
  }
  .mog-port-frame:hover .mog-port-badge{ opacity:1; }
  /* arrows float at top-right of the section, inside the gutter */
  #mog-portfolio-splide .splide__arrow{ background:var(--panel); border:1px solid var(--border); width:48px; height:48px; opacity:1; z-index:5; }
  #mog-portfolio-splide .splide__arrow svg{ fill:var(--text); width:16px; }
  #mog-portfolio-splide .splide__arrow:hover{ background:var(--grad); }
  #mog-portfolio-splide .splide__arrow:hover svg{ fill:#051019; }
  #mog-portfolio-splide .splide__arrow:disabled{ opacity:.35; }
  #mog-portfolio-splide .splide__arrow--prev{ left:auto; right:calc(24px + 48px + 14px); top:-86px; }
  #mog-portfolio-splide .splide__arrow--next{ right:24px; left:auto; top:-86px; }
  #mog-portfolio-splide .splide__pagination{ margin-top:26px; padding-right:24px; }
  #mog-portfolio-splide .splide__pagination__page.is-active{ background:var(--primary); }
  @media (max-width:767px){
    .mog-port-video{ height:320px; }
    .mog-portfolio-slider{ padding-left:16px; }
    #mog-portfolio-splide .splide__arrow--prev,
    #mog-portfolio-splide .splide__arrow--next{ top:-74px; }
  }

  /* ============ 7. STYLE HIGHLIGHT (split) ============ */
  .mog-style-panel{ background:var(--panel); border:1px solid var(--border); border-radius:24px; padding:48px 42px; position:relative; overflow:hidden; }
  .mog-style-panel::before{ content:''; position:absolute; top:-70px; right:-70px; width:240px;height:240px;border-radius:50%; background:var(--grad); opacity:.1; }
  .mog-style-panel h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:14px; }
  .mog-style-panel p{ color:var(--muted); font-size:16px; line-height:1.7; }
  .mog-style-list{ list-style:none; padding:0; margin:22px 0 0; }
  .mog-style-list li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:14.5px; }
  .mog-style-list li i{ color:var(--primary); margin-top:3px; }

  /* ============ 8. STATS ============ */
  .mog-stat{ text-align:center; padding:18px; }
  .mog-stat .mog-num{ font-size:2.5rem; font-weight:700; color:var(--primary); font-family:"Anton",serif; }
  .mog-stat .mog-lbl{ color:var(--muted); font-size:13.5px; margin-top:4px; }

  /* ============ 9. WHY NERDSTECH ============ */
  .mog-diff{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .mog-diff-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px 26px; height:100%; }
  .mog-diff-icon{ width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:18px; }
  .mog-diff-card h3{ font-size:16.5px; margin-bottom:10px; }
  .mog-diff-card p{ color:var(--muted); font-size:14.5px; margin:0; }

  /* ============ 10. FAQ ============ */
  .mog-faq-item{ border-bottom:1px solid var(--border); padding:22px 0; }
  .mog-faq-q{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:600; font-size:16px; gap:16px; }
  .mog-faq-q i{ color:var(--primary); transition:transform .25s ease; flex-shrink:0; }
  .mog-faq-item.open .mog-faq-q i{ transform:rotate(45deg); }
  .mog-faq-a{ max-height:0; overflow:hidden; color:var(--muted); font-size:14.5px; line-height:1.7; transition:max-height .3s ease, padding-top .3s ease; }
  .mog-faq-item.open .mog-faq-a{ max-height:240px; padding-top:14px; }

  /* ============ 11. CTA (parallax) ============ */
  .mog-cta{ position:relative; overflow:hidden; }
  .mog-cta-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .mog-cta-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.92), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .mog-cta-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.75)); }
  .mog-cta .container{ position:relative; z-index:2; text-align:center; }
  .mog-cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .mog-cta p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }

  @media (max-width:767px){
    .mog-section{ padding:66px 0; }
    .mog-hero{ padding:54px 0 60px; }
    .mog-parallax{ min-height:380px; }
    .mog-portfolio{ padding:66px 0; }
  }

  /*********************************************************** Mobile APP ***************************************/
    .mad-section{ padding:100px 0; }
  .mad-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .mad-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .mad-text-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .mad-btn-primary{
    background:var(--grad); border:none; color:#051019; font-weight:600;
    padding:13px 30px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .mad-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(73,198,231,.5); color:#051019; }
  .mad-btn-ghost{
    border:1px solid var(--border); color:var(--text); border-radius:999px; padding:12px 28px;
    font-weight:600; background:transparent; display:inline-flex; align-items:center; gap:8px;
    transition:border-color .2s ease, color .2s ease;
  }
  .mad-btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }

  /* ============ 1. HERO (split with floating phone) ============ */
  .mad-hero{ padding:96px 0 100px; position:relative; overflow:hidden; }
  .mad-hero-glow{
    position:absolute; width:720px;height:720px; top:-260px; right:-200px;
    background:radial-gradient(circle, rgba(91,124,190,0.24), transparent 64%); pointer-events:none;
  }
  .mad-hero h1{ font-size:clamp(2.2rem,4.8vw,3.7rem); margin-bottom:20px; }
  .mad-hero p.mad-lead{ color:var(--muted); font-size:17.5px; max-width:540px; }
  .mad-phone{
    position:relative; width:260px; height:530px; margin:0 auto;
    background:var(--panel); border:8px solid var(--panel-2); border-radius:42px;
    box-shadow:0 40px 90px -30px rgba(0,0,0,0.6); overflow:hidden;
  }
  .mad-phone::before{ content:''; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:90px; height:22px; background:var(--panel-2); border-radius:0 0 14px 14px; z-index:3; }
  .mad-phone img{ width:100%; height:100%; object-fit:cover; display:block; }
  .mad-badge{
    position:absolute; z-index:4; background:var(--panel); border:1px solid var(--border);
    border-radius:14px; padding:12px 16px; display:flex; align-items:center; gap:10px;
    box-shadow:0 20px 40px -16px rgba(0,0,0,0.5); font-size:13px; font-weight:700;
  }
  .mad-badge i{ font-size:20px; }
  .mad-badge.b1{ top:60px; left:-10px; } .mad-badge.b1 i{ color:var(--primary); }
  .mad-badge.b2{ bottom:80px; right:-14px; } .mad-badge.b2 i{ color:var(--secondary); }
  @media (max-width:991px){ .mad-badge{ display:none; } }

  /* ============ 2. PLATFORM BAR ============ */
  .mad-platbar{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ink-2); padding:40px 0; }
  .mad-plat{ display:flex; align-items:center; justify-content:center; gap:12px; color:var(--muted); padding:10px; }
  .mad-plat i{ font-size:30px; color:var(--text); opacity:.85; transition:color .2s ease, transform .2s ease; }
  .mad-plat:hover i{ color:var(--primary); transform:translateY(-3px); }
  .mad-plat span{ font-weight:600; font-size:15px; }

  /* ============ 3. WHY (parallax banner) ============ */
  .mad-parallax{
    position:relative; min-height:460px; display:flex; align-items:center; overflow:hidden;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .mad-parallax-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .mad-parallax-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.94), rgba(10,15,28,0.66)); }
  html[data-theme="light"] .mad-parallax-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.7)); }
  .mad-parallax .container{ position:relative; z-index:2; }
  .mad-parallax h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:640px; margin-bottom:16px; }
  .mad-parallax p{ color:var(--muted); max-width:560px; font-size:16.5px; line-height:1.7; }

  /* ============ 4. WHAT WE BUILD (bento) ============ */
  .mad-bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .mad-bento-cell{
    background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:30px 26px;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .mad-bento-cell:hover{ transform:translateY(-5px); border-color:var(--primary); background:var(--panel-2); }
  .mad-bento-cell.wide{ grid-column:span 2; }
  .mad-bento-ic{ width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:18px; }
  .mad-bento-cell h3{ font-size:17px; margin-bottom:10px; }
  .mad-bento-cell p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }
  @media (max-width:991px){ .mad-bento{ grid-template-columns:repeat(2,1fr); } .mad-bento-cell.wide{ grid-column:auto; } }
  @media (max-width:575px){ .mad-bento{ grid-template-columns:1fr; } }

  /* ============ 5. HOW WE WORK (6 steps columns) ============ */
  .mad-flow{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .mad-flow-col{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:26px 22px; height:100%;
    transition:transform .25s ease, border-color .25s ease;
  }
  .mad-flow-col:hover{ transform:translateY(-6px); border-color:var(--primary); }
  .mad-flow-step{ width:40px;height:40px;border-radius:11px; background:var(--grad); color:#051019; font-family:"Anton",serif; font-size:16px; display:flex;align-items:center;justify-content:center; margin-bottom:18px; }
  .mad-flow-col h3{ font-size:16px; margin-bottom:9px; }
  .mad-flow-col p{ color:var(--muted); font-size:13.5px; margin:0; line-height:1.55; }

  /* ============ 6. PORTFOLIO (FULL-WIDTH, NO-GAP MOSAIC) ============ */
  .mad-portfolio{ padding:100px 0 0; }
  .mad-portfolio-head{ max-width:1320px; margin:0 auto 44px; padding:0 12px; }
  .mad-portfolio-head p{ color:var(--muted); font-size:16.5px; max-width:520px; margin:12px 0 0; }
  /* the mosaic is NOT in a container — it bleeds edge to edge with NO gap */
  .mad-mosaic{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:260px;
    gap:0;                 /* <-- no gap, tiles sit flush */
    width:100%;
  }
  .mad-tile{ position:relative; overflow:hidden; }
  .mad-tile img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .55s ease;
  }
  .mad-tile::after{
    content:''; position:absolute; inset:0; background:rgba(10,15,28,0);
    transition:background .3s ease;
  }
  .mad-tile:hover img{ transform:scale(1.06); }
  .mad-tile:hover::after{ background:rgba(10,15,28,0.28); }
  /* size variants that build the mosaic rhythm */
  .mad-tile.tall{ grid-row:span 2; }
  .mad-tile.wide{ grid-column:span 2; }
  .mad-tile.big{ grid-column:span 2; grid-row:span 2; }
  /* responsive: 2 columns on tablet, 1 on mobile — spans reset so nothing breaks */
  @media (max-width:991px){
    .mad-mosaic{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:220px; }
    .mad-tile.wide, .mad-tile.big{ grid-column:span 2; }
    .mad-tile.tall{ grid-row:span 1; }
    .mad-tile.big{ grid-row:span 1; }
  }
  @media (max-width:575px){
    .mad-mosaic{ grid-template-columns:1fr; grid-auto-rows:240px; }
    .mad-tile.wide, .mad-tile.big{ grid-column:auto; }
  }

  /* ============ 7. TECH / MAINTENANCE (split highlight) ============ */
  .mad-tech{ }
  .mad-tech-panel{ background:var(--panel); border:1px solid var(--border); border-radius:24px; padding:48px 42px; position:relative; overflow:hidden; }
  .mad-tech-panel::before{ content:''; position:absolute; top:-70px; right:-70px; width:240px;height:240px;border-radius:50%; background:var(--grad); opacity:.1; }
  .mad-tech-panel h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:14px; }
  .mad-tech-panel p{ color:var(--muted); font-size:16px; line-height:1.7; }
  .mad-tech-list{ list-style:none; padding:0; margin:22px 0 0; }
  .mad-tech-list li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:14.5px; }
  .mad-tech-list li i{ color:var(--primary); margin-top:3px; }

  /* ============ 8. STATS ============ */
  .mad-stat{ text-align:center; padding:18px; }
  .mad-stat .mad-num{ font-size:2.5rem; font-weight:700; color:var(--primary); font-family:"Anton",serif; }
  .mad-stat .mad-lbl{ color:var(--muted); font-size:13.5px; margin-top:4px; }

  /* ============ 9. WHY NERDSTECH ============ */
  .mad-diff{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .mad-diff-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px 26px; height:100%; }
  .mad-diff-icon{ width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(73,198,231,.1); color:var(--primary); font-size:19px; margin-bottom:18px; }
  .mad-diff-card h3{ font-size:16.5px; margin-bottom:10px; }
  .mad-diff-card p{ color:var(--muted); font-size:14.5px; margin:0; }

  /* ============ 10. FAQ ============ */
  .mad-faq-item{ border-bottom:1px solid var(--border); padding:22px 0; }
  .mad-faq-q{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:600; font-size:16px; gap:16px; }
  .mad-faq-q i{ color:var(--primary); transition:transform .25s ease; flex-shrink:0; }
  .mad-faq-item.open .mad-faq-q i{ transform:rotate(45deg); }
  .mad-faq-a{ max-height:0; overflow:hidden; color:var(--muted); font-size:14.5px; line-height:1.7; transition:max-height .3s ease, padding-top .3s ease; }
  .mad-faq-item.open .mad-faq-a{ max-height:240px; padding-top:14px; }

  /* ============ 11. CTA (parallax) ============ */
  .mad-cta{ position:relative; overflow:hidden; }
  .mad-cta-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .mad-cta-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.92), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .mad-cta-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.75)); }
  .mad-cta .container{ position:relative; z-index:2; text-align:center; }
  .mad-cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .mad-cta p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }

  @media (max-width:767px){
    .mad-section{ padding:66px 0; }
    .mad-hero{ padding:54px 0 60px; }
    .mad-parallax{ min-height:380px; }
    .mad-portfolio{ padding:66px 0 0; }
  }


    .con-section{ padding:100px 0; }
  .con-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .con-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .con-text-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .con-btn-primary{
    background:var(--grad); border:none; color:#051019; font-weight:600;
    padding:14px 32px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .2s ease, box-shadow .2s ease; cursor:pointer;
  }
  .con-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(73,198,231,.5); color:#051019; }

  /* ============ 1. HERO (parallax) ============ */
  .con-hero{ position:relative; overflow:hidden; padding:150px 0 110px; display:flex; align-items:center; }
  .con-hero-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .con-hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.93), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .con-hero-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.76)); }
  .con-hero .container{ position:relative; z-index:2; }
  .con-hero h1{ font-size:clamp(2.4rem,5.2vw,4rem); margin-bottom:18px; max-width:15ch; }
  .con-hero p{ color:var(--muted); font-size:18px; max-width:540px; }

  /* ============ 2. QUICK CONTACT CARDS ============ */
  .con-quick{ margin-top:-70px; position:relative; z-index:5; }
  .con-quick-card{
    background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:30px 26px;
    height:100%; transition:transform .25s ease, border-color .25s ease;
  }
  .con-quick-card:hover{ transform:translateY(-6px); border-color:var(--primary); }
  .con-quick-ic{ width:52px;height:52px;border-radius:14px; display:flex;align-items:center;justify-content:center; background:rgba(73,198,231,.1); color:var(--primary); font-size:21px; margin-bottom:20px; }
  .con-quick-card h3{ font-size:16px; margin-bottom:10px; }
  .con-quick-card a, .con-quick-card p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.6; display:block; transition:color .2s ease; }
  .con-quick-card a:hover{ color:var(--primary); }

  /* ============ 3. FORM + INFO SPLIT ============ */
  .con-form-panel{ background:var(--panel); border:1px solid var(--border); border-radius:22px; padding:42px 38px; }
  .con-label{ font-size:13px; font-weight:600; color:var(--text); margin-bottom:8px; display:block; }
  .con-input, .con-select, .con-textarea{
    width:100%; background:var(--ink-2); border:1px solid var(--border); border-radius:12px;
    padding:13px 16px; color:var(--text); font-size:14.5px; font-family:"Roboto",sans-serif;
    transition:border-color .2s ease;
  }
  .con-input:focus, .con-select:focus, .con-textarea:focus{ outline:none; border-color:var(--primary); }
  .con-textarea{ resize:vertical; min-height:130px; }
  .con-select:disabled{ opacity:.55; cursor:not-allowed; }
  /* native option colors pinned for readability across themes */
  .con-select option{ background:#ffffff; color:#151c2c; }
  .con-field{ margin-bottom:20px; }

  .con-info h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:16px; }
  .con-info > p{ color:var(--muted); font-size:15.5px; line-height:1.7; margin-bottom:28px; }
  .con-info-row{ display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
  .con-info-ic{ flex-shrink:0; width:46px;height:46px;border-radius:12px; background:rgba(73,198,231,.1); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:18px; }
  .con-info-row h4{ font-size:14px; margin-bottom:4px; }
  .con-info-row a, .con-info-row p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.55; transition:color .2s ease; }
  .con-info-row a:hover{ color:var(--primary); }
  .con-socials{ display:flex; gap:12px; margin-top:26px; }
  .con-socials a{
    width:44px;height:44px;border-radius:12px; border:1px solid var(--border); color:var(--text);
    display:flex;align-items:center;justify-content:center; font-size:16px;
    transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }
  .con-socials a:hover{ transform:translateY(-4px); background:var(--grad); color:#051019; border-color:transparent; }

  /* ============ 4. MAP ============ */
  .con-map{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .con-map iframe{ width:100%; height:440px; border:0; display:block; filter:grayscale(0.2) contrast(1.05); }

  /* ============ 5. FAQ ============ */
  .con-faq-item{ border-bottom:1px solid var(--border); padding:22px 0; }
  .con-faq-q{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:600; font-size:16px; gap:16px; }
  .con-faq-q i{ color:var(--primary); transition:transform .25s ease; flex-shrink:0; }
  .con-faq-item.open .con-faq-q i{ transform:rotate(45deg); }
  .con-faq-a{ max-height:0; overflow:hidden; color:var(--muted); font-size:14.5px; line-height:1.7; transition:max-height .3s ease, padding-top .3s ease; }
  .con-faq-item.open .con-faq-a{ max-height:240px; padding-top:14px; }

  /* ============ 6. PORTFOLIO (FULL-WIDTH, NO-GAP MOSAIC) ============ */
  .con-portfolio{ padding:100px 0 0; }
  .con-portfolio-head{ max-width:1320px; margin:0 auto 44px; padding:0 12px; }
  .con-portfolio-head p{ color:var(--muted); font-size:16.5px; max-width:520px; margin:12px 0 0; }
  /* full-width, no container, zero gap */
  .con-mosaic{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:240px; gap:0; width:100%; }
  .con-tile{ position:relative; overflow:hidden; }
  .con-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
  .con-tile::after{ content:''; position:absolute; inset:0; background:rgba(10,15,28,0); transition:background .3s ease; }
  .con-tile:hover img{ transform:scale(1.06); }
  .con-tile:hover::after{ background:rgba(10,15,28,0.28); }
  .con-tile.tall{ grid-row:span 2; }
  .con-tile.wide{ grid-column:span 2; }
  .con-tile.big{ grid-column:span 2; grid-row:span 2; }
  @media (max-width:991px){
    .con-mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:210px; }
    .con-tile.tall{ grid-row:span 1; } .con-tile.big{ grid-row:span 1; grid-column:span 2; }
  }
  @media (max-width:575px){
    .con-mosaic{ grid-template-columns:1fr; grid-auto-rows:230px; }
    .con-tile.wide, .con-tile.big{ grid-column:auto; }
  }

  /* ============ 7. CTA (parallax) ============ */
  .con-cta{ position:relative; overflow:hidden; }
  .con-cta-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .con-cta-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.92), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .con-cta-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.75)); }
  .con-cta .container{ position:relative; z-index:2; text-align:center; }
  .con-cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .con-cta p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }

  @media (max-width:767px){
    .con-section{ padding:66px 0; }
    .con-hero{ padding:120px 0 80px; }
    .con-quick{ margin-top:-40px; }
    .con-form-panel{ padding:30px 24px; }
    .con-portfolio{ padding:66px 0 0; }
  }

  /*****************************************************************************/
    /* Page header */
  .legal-hero{
    padding:150px 0 60px;
    border-bottom:1px solid var(--border);
  }
  /* .eyebrow{
    font-size:13px;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--primary);font-weight:600;
    display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  } */
  /* .eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--grad);} */
  .legal-hero h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:14px;}
  .legal-hero p{color:var(--muted);max-width:640px;}
  .legal-updated{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;color:var(--muted);
    background:var(--panel);border:1px solid var(--border);
    padding:8px 16px;border-radius:999px;margin-top:18px;
  }

  /* Layout */
  .legal-wrap{padding:64px 0 100px;}
  .toc-col{position:relative;}
  .toc-nav{
    position:sticky;
    top:100px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:22px;
    max-height:calc(100vh - 130px);
    overflow-y:auto;
  }
  .toc-nav .toc-title{
    font-family:"Roboto",sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--muted);
    margin-bottom:14px;
  }
  .toc-nav .nav-link{
    padding:7px 10px;
    font-size:13.5px;
    color:var(--muted);
    border-radius:8px;
    margin-bottom:2px;
  }
  .toc-nav .nav-link.active{
    background:rgba(73,198,231,0.12);
    color:var(--primary) !important;
    font-weight:600;
  }
  .toc-nav .nav-link:hover{color:var(--text) !important;}

  /* Content */
  .legal-section{
    padding-bottom:44px;
    margin-bottom:44px;
    border-bottom:1px solid var(--border);
    scroll-margin-top:100px;
  }
  .legal-section:last-child{border-bottom:none;}
  .legal-section h2{
    font-size:clamp(1.5rem,2.6vw,2rem);
    margin-bottom:18px;
  }
  .legal-section h3{
    font-size:1.05rem;
    font-family:"Roboto",sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.03em;
    color:var(--primary);
    margin:26px 0 10px;
  }
  .legal-section p{
    color:var(--muted);
    font-size:15.5px;
    margin-bottom:14px;
  }
  .legal-section ul, .legal-section ol{
    color:var(--muted);
    font-size:15.5px;
    margin-bottom:16px;
    padding-left:22px;
  }
  .legal-section li{margin-bottom:8px;}
  .legal-section strong{color:var(--text);}
  .callout{
    background:var(--panel);
    border:1px solid var(--border);
    border-left:3px solid var(--primary);
    border-radius:10px;
    padding:18px 20px;
    margin:20px 0;
    font-size:14.5px;
    color:var(--muted);
  }
  .callout strong{color:var(--text);}
  .schedule-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
    padding:18px 22px;
    margin:16px 0;
  }
  .schedule-card .row-item{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    font-size:14.5px;
    color:var(--muted);
    border-bottom:1px solid var(--border);
  }
  .schedule-card .row-item:last-child{border-bottom:none;}
  .schedule-card .row-item strong{color:var(--text);}

  /* Footer (shared, fixed light per brand design) */
  .site-footer{background:#ffffff;color:#0a0a0a;padding-top:64px;position:relative;}
  .site-footer .footer-logo{height:34px;margin-bottom:40px;}
  .footer-eyebrow{
    display:flex;align-items:center;gap:10px;
    font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
    color:#111;margin-bottom:22px;
  }
  .footer-eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:#111;flex-shrink:0;}
  .footer-list a{display:block;color:#1a1a1a;font-size:16px;margin-bottom:18px;}
  .footer-list a:hover{color:var(--secondary);}
  .footer-contact-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;font-size:15.5px;color:#1a1a1a;}
  .footer-contact-row i{width:18px;text-align:center;margin-top:4px;color:#0a0a0a;}
  .footer-contact-row a{color:#1a1a1a;}
  .footer-contact-row a:hover{color:var(--secondary);}
  .footer-socials{display:flex;gap:14px;margin-top:8px;}
  .footer-socials a{
    width:38px;height:38px;border-radius:9px;background:#0a0a0a;color:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:15px;
    transition:background-color .2s ease;
  }
  .footer-socials a:hover{background:var(--secondary);}
  .footer-divider{border:none;border-top:1px solid #e4e4e4;margin:0;}
  .footer-bottom-row{
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
    gap:12px;padding:22px 0;font-size:13.5px;
  }
  .footer-legal{display:flex;gap:28px;flex-wrap:wrap;}
  .footer-legal a{color:#8a8a8a;}
  .footer-legal a:hover{color:#0a0a0a;}
  .footer-copy{color:#0a0a0a;}
  .footer-bar{height:14px;background:#0a0a0a;width:100%;}

  .back-to-top{
    position:fixed;right:26px;bottom:26px;width:52px;height:52px;border-radius:50%;
    background:#d9d9d9;color:#0a0a0a;border:none;display:flex;align-items:center;justify-content:center;
    font-size:17px;cursor:pointer;z-index:200;opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease, background-color .2s ease, visibility .3s ease;
    box-shadow:0 8px 22px -6px rgba(0,0,0,0.35);
  }
  .back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
  .back-to-top:hover{background:var(--primary);}

  @media (max-width:991px){
    .toc-nav{position:static;max-height:none;margin-bottom:36px;}
  }
  @media (max-width:575px){
    .back-to-top{right:16px;bottom:16px;width:46px;height:46px;}
  }


  /*******************************************************************/
    .page-head{
    padding:70px 0 50px;
    border-bottom:1px solid var(--border);
  }
  /* .eyebrow{
    font-size:13px;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--primary);font-weight:600;
    display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  }
  .eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--grad);} */
  .page-head h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:14px;}
  .page-head p{color:var(--muted);max-width:640px;}
  .page-updated{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;color:var(--muted);
    background:var(--panel);border:1px solid var(--border);
    padding:8px 16px;border-radius:999px;margin-top:18px;
  }

  .legal-wrap{padding:64px 0 100px;}
  .toc-col{position:relative;}
  .toc-nav{
    position:sticky;top:30px;
    background:var(--panel);border:1px solid var(--border);border-radius:14px;
    padding:22px;max-height:calc(100vh - 60px);overflow-y:auto;
  }
  .toc-nav .toc-title{
    font-family:"Roboto",sans-serif;font-size:12px;text-transform:uppercase;
    letter-spacing:0.08em;color:var(--muted);margin-bottom:14px;
  }
  .toc-nav .nav-link{padding:7px 10px;font-size:13.5px;color:var(--muted);border-radius:8px;margin-bottom:2px;}
  .toc-nav .nav-link.active{background:rgba(73,198,231,0.12);color:var(--primary) !important;font-weight:600;}
  .toc-nav .nav-link:hover{color:var(--text) !important;}

  .legal-section{
    padding-bottom:44px;margin-bottom:44px;border-bottom:1px solid var(--border);
    scroll-margin-top:30px;
  }
  .legal-section:last-child{border-bottom:none;}
  .legal-section h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:18px;}
  .legal-section h3{
    font-size:1.05rem;font-family:"Roboto",sans-serif;font-weight:700;
    text-transform:uppercase;letter-spacing:0.03em;color:var(--primary);margin:26px 0 10px;
  }
  .legal-section p{color:var(--muted);font-size:15.5px;margin-bottom:14px;}
  .legal-section ul{color:var(--muted);font-size:15.5px;margin-bottom:16px;padding-left:22px;}
  .legal-section li{margin-bottom:8px;}
  .legal-section strong{color:var(--text);}
  .callout{
    background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--primary);
    border-radius:10px;padding:18px 20px;margin:20px 0;font-size:14.5px;color:var(--muted);
  }
  .callout strong{color:var(--text);}

  .back-to-top{
    position:fixed;right:26px;bottom:26px;width:52px;height:52px;border-radius:50%;
    background:#2a3552;color:#eaf1fb;border:none;display:flex;align-items:center;justify-content:center;
    font-size:17px;cursor:pointer;z-index:200;opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease, background-color .2s ease, visibility .3s ease;
    box-shadow:0 8px 22px -6px rgba(0,0,0,0.5);
  }
  .back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
  .back-to-top:hover{background:var(--primary);color:#051019;}

  @media (max-width:991px){
    .toc-nav{position:static;max-height:none;margin-bottom:36px;}
  }
  @media (max-width:575px){
    .back-to-top{right:16px;bottom:16px;width:46px;height:46px;}
  }

  /************************** about us ********************************/
   .abt-section{ padding:100px 0; }
  .abt-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .abt-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .abt-text-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .abt-btn-primary{
    background:var(--grad); border:none; color:#051019; font-weight:600;
    padding:13px 30px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .abt-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(73,198,231,.5); color:#051019; }
  .abt-btn-ghost{
    border:1px solid var(--border); color:var(--text); border-radius:999px; padding:12px 28px;
    font-weight:600; background:transparent; display:inline-flex; align-items:center; gap:8px;
    transition:border-color .2s ease, color .2s ease;
  }
  .abt-btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }

  /* ============ 1. HERO (split with stacked images) ============ */
  .abt-hero{ padding:96px 0 100px; position:relative; overflow:hidden; }
  .abt-hero-glow{
    position:absolute; width:720px;height:720px; top:-260px; right:-200px;
    background:radial-gradient(circle, rgba(73,198,231,0.22), transparent 64%); pointer-events:none;
  }
  .abt-hero h1{ font-size:clamp(2.4rem,5vw,3.9rem); margin-bottom:20px; }
  .abt-hero p.abt-lead{ color:var(--muted); font-size:17.5px; max-width:540px; }
  .abt-hero-stack{ position:relative; height:440px; }
  .abt-hero-stack .abt-himg{ position:absolute; border-radius:18px; overflow:hidden; border:1px solid var(--border); box-shadow:0 26px 60px -28px rgba(0,0,0,0.55); }
  .abt-hero-stack .abt-himg img{ width:100%; height:100%; object-fit:cover; display:block; }
  .abt-himg.h1{ width:62%; height:75%; top:0; right:0; z-index:1; }
  .abt-himg.h2{ width:52%; height:60%; bottom:0; left:0; z-index:2; }
  @media (max-width:991px){ .abt-hero-stack{ height:320px; } }

  /* ============ 2. STATS BAND ============ */
  .abt-statband{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ink-2); padding:0; }
  .abt-stat{ padding:38px 20px; text-align:center; border-right:1px solid var(--border); }
  .abt-stat:last-child{ border-right:none; }
  .abt-stat .n{ font-family:"Anton",serif; font-size:2.6rem; color:var(--primary); }
  .abt-stat .l{ color:var(--muted); font-size:13.5px; margin-top:4px; }
  @media (max-width:767px){ .abt-stat{ border-right:none; border-bottom:1px solid var(--border); } .abt-stat:last-child{ border-bottom:none; } }

  /* ============ 3. STORY (parallax split) ============ */
  .abt-story-img{ border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:0 30px 70px -30px rgba(0,0,0,0.55); position:relative; height:100%; min-height:440px; }
  .abt-story-img .abt-parimg{ position:absolute; inset:-12% 0; background-size:cover; background-position:center; will-change:transform; }
  .abt-story-copy h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-bottom:18px; }
  .abt-story-copy p{ color:var(--muted); font-size:16px; line-height:1.75; margin-bottom:16px; }
  .abt-story-copy p:last-child{ margin-bottom:0; }

  /* ============ 4. MISSION / VALUES (parallax banner) ============ */
  .abt-parallax{
    position:relative; min-height:440px; display:flex; align-items:center; overflow:hidden;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .abt-parallax-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .abt-parallax-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.94), rgba(10,15,28,0.66)); }
  html[data-theme="light"] .abt-parallax-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.7)); }
  .abt-parallax .container{ position:relative; z-index:2; }
  .abt-parallax h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:640px; margin-bottom:16px; }
  .abt-parallax p{ color:var(--muted); max-width:560px; font-size:16.5px; line-height:1.7; }

  /* ============ 5. VALUES (cards) ============ */
  .abt-value-card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px 26px; height:100%;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .abt-value-card:hover{ transform:translateY(-6px); border-color:var(--primary); background:var(--panel-2); }
  .abt-value-ic{ width:50px;height:50px;border-radius:13px; display:flex;align-items:center;justify-content:center; background:rgba(73,198,231,.1); color:var(--primary); font-size:20px; margin-bottom:20px; }
  .abt-value-card h3{ font-size:17px; margin-bottom:11px; }
  .abt-value-card p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.6; }

  /* ============ 6. HOW WE'RE DIFFERENT (alternating rows) ============ */
  .abt-diff-img{ border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:0 24px 60px -28px rgba(0,0,0,0.5); position:relative; height:320px; }
  .abt-diff-img .abt-parimg{ position:absolute; inset:-12% 0; background-size:cover; background-position:center; will-change:transform; }
  .abt-diff-copy .num{ font-family:"Anton",serif; color:var(--primary); font-size:15px; letter-spacing:.1em; margin-bottom:10px; display:block; }
  .abt-diff-copy h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:12px; }
  .abt-diff-copy p{ color:var(--muted); font-size:15.5px; line-height:1.7; margin:0; }

  /* ============ 7. SERVICES AT A GLANCE ============ */
  .abt-svc{ background:var(--ink-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .abt-svc-chip{
    display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:12px;
    background:var(--panel); border:1px solid var(--border); height:100%;
    transition:transform .2s ease, border-color .2s ease;
  }
  .abt-svc-chip:hover{ transform:translateY(-3px); border-color:var(--primary); }
  .abt-svc-chip i{ color:var(--primary); font-size:18px; flex-shrink:0; }
  .abt-svc-chip span{ font-size:14px; font-weight:600; }

  /* ============ 8. TEAM ============ */
  .abt-team-card{ text-align:center; }
  .abt-team-photo{ border-radius:18px; overflow:hidden; border:1px solid var(--border); aspect-ratio:1/1; margin-bottom:16px; position:relative; }
  .abt-team-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
  .abt-team-card:hover .abt-team-photo img{ transform:scale(1.06); }
  .abt-team-card h3{ font-size:16.5px; margin-bottom:4px; }
  .abt-team-card .role{ color:var(--primary); font-size:13px; font-weight:600; }

  /* ============ 9. PROCESS / WORKING WITH US ============ */
  .abt-work-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:28px 24px; height:100%; }
  .abt-work-step{ font-family:"Anton",serif; font-size:14px; color:var(--primary); letter-spacing:.1em; margin-bottom:12px; }
  .abt-work-card h3{ font-size:16px; margin-bottom:9px; }
  .abt-work-card p{ color:var(--muted); font-size:13.5px; margin:0; line-height:1.55; }

  /* ============ 10. CTA (parallax) ============ */
  .abt-cta{ position:relative; overflow:hidden; }
  .abt-cta-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .abt-cta-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.92), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .abt-cta-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.75)); }
  .abt-cta .container{ position:relative; z-index:2; text-align:center; }
  .abt-cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .abt-cta p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }

  @media (max-width:767px){
    .abt-section{ padding:66px 0; }
    .abt-hero{ padding:54px 0 60px; }
    .abt-parallax{ min-height:380px; }
    .abt-story-img{ min-height:280px; margin-bottom:30px; }
    .abt-diff-img{ height:240px; }
  }


  /************************** modal *********************************/
    /* trigger button */
  .sm-open-btn{
    background:var(--grad); color:#051019; font-weight:600; font-size:15px;
    border:none; border-radius:999px; padding:13px 28px; cursor:pointer;
    transition:transform .2s ease;
  }
  .sm-open-btn:hover{ transform:translateY(-2px); }

  /* overlay */
  .sm-overlay{
    position:fixed; inset:0; z-index:1300;
    background:rgba(6,10,20,0.72); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; padding:20px;
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
  }
  .sm-overlay.open{ opacity:1; visibility:visible; }

  /* modal */
  .sm-modal{
    width:100%; max-width:440px; position:relative;
    background:var(--panel); border:1px solid var(--border); border-radius:18px;
    padding:32px 30px;
    transform:translateY(20px) scale(.98); transition:transform .28s ease;
    box-shadow:0 40px 100px -30px rgba(0,0,0,0.7);
  }
  .sm-overlay.open .sm-modal{ transform:translateY(0) scale(1); }
  .sm-modal h2{ margin:0 0 12px; font-size:1.4rem; }
  .sm-modal p{ color:var(--muted); font-size:14.5px; line-height:1.7; margin:0; }

  /* close */
  .sm-close{
    position:absolute; top:14px; right:14px; width:34px;height:34px;border-radius:9px;
    background:transparent; border:1px solid var(--border); color:var(--text);
    cursor:pointer; font-size:14px; transition:border-color .2s ease, color .2s ease;
  }
  .sm-close:hover{ border-color:var(--primary); color:var(--primary); }


  .mad-tile.talls {
    grid-row: span 4;
}
.mad-tile.wide.ttt {
    grid-column: span 2;
}

.mad-tile.wide.ttt img {
    width: 100%;
    object-fit: scale-down;
    background-color: #fff;
}

.mad-tile.mad-tile-item.app-green img {
    object-fit: scale-down;
    background-color: #cbfbe4;
}
.mad-tile.tall.mad-tile-item.second__grid__set img {
    object-fit: scale-down;
    height: 100%;
    margin: 0 auto;
    background-color: #ffe2e4;
}

/*********************************** PRICE PAGE *****************************************/
  .prc-section{ padding:100px 0; }
  .prc-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .prc-eyebrow.center{ justify-content:center; }
  .prc-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .prc-text-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .prc-btn-primary{
    background:var(--grad); border:none; color:#051019; font-weight:700;
    padding:15px 36px; border-radius:999px; display:inline-flex; align-items:center; gap:10px;
    position:relative; transition:transform .2s ease, box-shadow .2s ease;
  }
  .prc-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(73,198,231,.5); color:#051019; }

  /* ============ 1. HERO (parallax) ============ */
  .prc-hero{ position:relative; overflow:hidden; padding:160px 0 110px; text-align:center; display:flex; align-items:center; }
  .prc-hero-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .prc-hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.93), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .prc-hero-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.76)); }
  .prc-hero .container{ position:relative; z-index:2; }
  .prc-hero h1{ font-size:clamp(2.4rem,5.4vw,4rem); margin:0 auto 18px; max-width:17ch; }
  .prc-hero p{ color:var(--muted); font-size:18px; max-width:560px; margin:0 auto; }

  /* ============ 2. BORDERED PRICING GRID ============ */
  .prc-grid-wrap{ border:1px solid var(--border); border-radius:20px; overflow:hidden; background:var(--panel); }
  .prc-grid{ display:grid; grid-template-columns:repeat(3, 1fr); }
  @media (max-width:991px){ .prc-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:640px){ .prc-grid{ grid-template-columns:1fr; } }
  .prc-cell{
    padding:40px 34px; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
    position:relative; transition:background .3s ease;
    display:flex; flex-direction:column;
  }
  .prc-cell:hover{ background:var(--panel-2); }
  @media (min-width:992px){ .prc-cell:nth-child(3n){ border-right:none; } }
  @media (min-width:641px) and (max-width:991px){ .prc-cell:nth-child(2n){ border-right:none; } }
  @media (max-width:640px){ .prc-cell{ border-right:none; } }
  .prc-cell h3{ font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1.05; margin-bottom:14px; }
  .prc-cell .prc-priceline{
    display:flex; align-items:center; gap:12px;
    font-family:"Anton",serif; font-size:clamp(1.3rem,2vw,1.7rem); color:var(--text); margin-bottom:22px;
  }
  .prc-cell .prc-priceline::before{ content:''; width:34px; height:2px; background:var(--grad); border-radius:2px; flex-shrink:0; }
  .prc-cell .prc-blurb{ color:var(--muted); font-size:14.5px; line-height:1.65; margin-bottom:22px; }

  /* Tier list — capped height + internal scroll */
  .prc-tiers{
    display:flex; flex-direction:column; gap:10px;
    max-height:284px; overflow-y:auto;
    padding-right:6px; margin-right:-6px;
    scrollbar-width:thin; scrollbar-color:var(--border) transparent;
  }
  .prc-tiers::-webkit-scrollbar{ width:6px; }
  .prc-tiers::-webkit-scrollbar-track{ background:transparent; }
  .prc-tiers::-webkit-scrollbar-thumb{ background:var(--border); border-radius:999px; }
  .prc-tiers::-webkit-scrollbar-thumb:hover{ background:var(--primary); }
  .prc-tier{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:13px 16px; border:1px solid var(--border); border-radius:12px;
    background:var(--ink-2); color:var(--text); font-size:14px; font-weight:600;
    cursor:pointer; text-align:left; width:100%;
    text-decoration:none; flex-shrink:0;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .prc-tier:hover{ border-color:var(--primary); background:var(--panel); transform:translateX(3px); color:var(--text); }
  .prc-tier .prc-tier-name{ display:flex; flex-direction:column; gap:2px; }
  .prc-tier .prc-tier-price{ color:var(--primary); font-family:"Anton",serif; font-size:16px; white-space:nowrap; }
  .prc-tier .prc-tier-go{ color:var(--muted); font-size:12px; transition:transform .2s ease, color .2s ease; }
  .prc-tier:hover .prc-tier-go{ color:var(--primary); transform:translateX(3px); }

  .contact-btn{ margin-top:14px; flex-shrink:0; }

  /* ============ 3. HOW WE PRICE (parallax banner) ============ */
  .prc-parallax{
    position:relative; min-height:440px; display:flex; align-items:center; overflow:hidden;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .prc-parallax-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .prc-parallax-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.94), rgba(10,15,28,0.66)); }
  html[data-theme="light"] .prc-parallax-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.7)); }
  .prc-parallax .container{ position:relative; z-index:2; }
  .prc-parallax h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:640px; margin-bottom:16px; }
  .prc-parallax p{ color:var(--muted); max-width:560px; font-size:16.5px; line-height:1.7; }
  .prc-assure-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
  .prc-assure-chip{
    display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px;
    background:var(--panel); border:1px solid var(--border); font-size:13.5px; font-weight:600;
  }
  .prc-assure-chip i{ color:var(--primary); }

  /* ============ 4. POPULAR PICKS ============ */
  .prc-pop-card{
    background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:34px 30px; height:100%;
    position:relative; overflow:hidden; transition:transform .25s ease, border-color .25s ease;
  }
  .prc-pop-card:hover{ transform:translateY(-6px); border-color:var(--primary); }
  .prc-pop-card.featured{ border-color:var(--primary); }
  .prc-pop-card.featured::before{ content:''; position:absolute; inset:0; background:var(--grad); opacity:.06; pointer-events:none; }
  .prc-pop-badge{
    position:absolute; top:18px; right:18px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:#051019; background:var(--grad); padding:5px 12px; border-radius:999px;
  }
  .prc-pop-card .svc{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--primary); font-weight:700; }
  .prc-pop-card h3{ font-size:1.4rem; margin:8px 0 4px; }
  .prc-pop-card .amt{ font-family:"Anton",serif; font-size:2.6rem; color:var(--text); line-height:1; margin:14px 0 6px; }
  .prc-pop-card .amt span{ font-size:1rem; color:var(--muted); font-family:"Roboto",sans-serif; }
  .prc-pop-list{ list-style:none; padding:0; margin:20px 0 26px; }
  .prc-pop-list li{ display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:14px; margin-bottom:11px; }
  .prc-pop-list li i{ color:var(--primary); margin-top:3px; font-size:12px; }
  .prc-pop-card .prc-tier{ margin-top:auto; }

  /* ============ 5. CTA (parallax) ============ */
  .prc-cta{ position:relative; overflow:hidden; }
  .prc-cta-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .prc-cta-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.92), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .prc-cta-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.75)); }
  .prc-cta .container{ position:relative; z-index:2; text-align:center; }
  .prc-cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .prc-cta p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }

  @media (max-width:767px){
    .prc-section{ padding:66px 0; }
    .prc-hero{ padding:120px 0 70px; }
    .prc-parallax{ min-height:380px; }
    .prc-cell{ padding:32px 26px; }
    .prc-tiers{ max-height:none; overflow-y:visible; padding-right:0; margin-right:0; }
  }
  /****************************************** Web portfolio ***************************************/
    .wpf-portfolio{ padding:100px 0; }
  .wpf-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .wpf-eyebrow.center{ justify-content:center; }
  .wpf-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .wpf-portfolio h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); }

  /* ---- tabs (flush segmented bar) ---- */
  .wpf-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin:34px 0 44px; }
  .wpf-tab{
    background:transparent; color:var(--muted); font-weight:600; font-size:14px;
    padding:11px 22px; cursor:pointer; white-space:nowrap; border:0;
    border-right:1px solid var(--border); transition:color .2s ease, background .2s ease;
  }
  .wpf-tab:last-child{ border-right:0; }
  .wpf-tab:hover{ color:var(--text); background:var(--panel); }
  .wpf-tab.active{ background:var(--grad); color:#051019; }

  /* ---- grid ---- */
  .wpf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:991px){ .wpf-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:575px){ .wpf-grid{ grid-template-columns:1fr; } }

  .wpf-item{
    position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border);
    background:var(--panel); aspect-ratio:4/3; cursor:pointer;
    transition:transform .25s ease, border-color .25s ease;
  }
  .wpf-item:hover{ transform:translateY(-5px); border-color:var(--primary); }
  .wpf-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
  .wpf-item:hover img{ transform:scale(1.06); }
  .wpf-item::after{ content:''; position:absolute; inset:0; background:rgba(10,15,28,0); transition:background .3s ease; }
  .wpf-item:hover::after{ background:rgba(10,15,28,0.25); }
  .wpf-item-zoom{
    position:absolute; top:12px; right:12px; z-index:2;
    width:34px;height:34px;border-radius:9px; background:rgba(10,15,28,0.6); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:13px;
    opacity:0; transform:scale(.8); transition:opacity .25s ease, transform .25s ease;
  }
  .wpf-item:hover .wpf-item-zoom{ opacity:1; transform:scale(1); }
  .wpf-item-cap{
    position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 16px 14px;
    background:linear-gradient(0deg, rgba(10,15,28,0.85), transparent);
    opacity:0; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease;
  }
  .wpf-item:hover .wpf-item-cap{ opacity:1; transform:translateY(0); }
  .wpf-item-cap .tag{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); }
  .wpf-item-cap h3{ font-size:15px; margin:4px 0 0; color:#fff; }

  .wpf-empty{ text-align:center; color:var(--muted); padding:50px 0; display:none; }

  /* ============ LIGHTBOX MODAL + SPLIDE ============ */
  .wpf-lb{
    position:fixed; inset:0; z-index:1400;
    background:rgba(6,10,20,0.86); backdrop-filter:blur(5px);
    display:flex; align-items:center; justify-content:center; padding:24px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .28s ease, visibility .28s ease;
  }
  .wpf-lb.open{ opacity:1; visibility:visible; pointer-events:auto; }
  .wpf-lb-inner{ width:100%; max-width:900px; position:relative; transform:scale(.96); transition:transform .3s ease; }
  .wpf-lb.open .wpf-lb-inner{ transform:scale(1); }
  .wpf-lb-close{
    position:absolute; top:-52px; right:0; z-index:5;
    width:42px;height:42px;border-radius:11px; background:var(--panel); border:1px solid var(--border);
    color:var(--text); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center;
    transition:border-color .2s ease, color .2s ease;
  }
  .wpf-lb-close:hover{ border-color:var(--primary); color:var(--primary); }
  #wpfLbSplide .splide__slide{ display:flex; align-items:center; justify-content:center; }
  .wpf-lb-img{ width:100%; max-height:74vh; object-fit:contain; border-radius:16px; border:1px solid var(--border); background:var(--panel); }
  #wpfLbSplide .splide__arrow{ background:var(--panel); border:1px solid var(--border); width:46px; height:46px; opacity:1; }
  #wpfLbSplide .splide__arrow svg{ fill:var(--text); width:16px; }
  #wpfLbSplide .splide__arrow:hover{ background:var(--grad); }
  #wpfLbSplide .splide__arrow:hover svg{ fill:#051019; }
  #wpfLbSplide .splide__pagination__page.is-active{ background:var(--primary); }
  .wpf-lb-cat{ text-align:center; margin-top:16px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  body.wpf-lb-lock{ overflow:hidden; }

.splide__slide img.wpf-lb-img {
    object-fit: contain !important;
}


  /* Blinking cursor styling */
   /* Blinking cursor styling */
  .typewriter-cursor {
    font-weight: 300;
    display: inline-block;
    margin-left: 1px;
    animation: blink 0.8s infinite;
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }


  /***********************************REviews ********************************************************/
    .rev-section{ padding:100px 0; }
  .rev-eyebrow{
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
    font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  }
  .rev-eyebrow.center{ justify-content:center; }
  .rev-eyebrow::before{ content:''; width:8px;height:8px;border-radius:50%; background:var(--grad); }
  .rev-text-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .rev-btn-primary{
    background:var(--grad); border:none; color:#051019; font-weight:700;
    padding:15px 36px; border-radius:999px; display:inline-flex; align-items:center; gap:10px;
    position:relative; transition:transform .2s ease, box-shadow .2s ease;
  }
  .rev-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(73,198,231,.5); color:#051019; }

  /* ============ 1. HERO (parallax) ============ */
  .rev-hero{ position:relative; overflow:hidden; padding:160px 0 110px; text-align:center; display:flex; align-items:center; }
  .rev-hero-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .rev-hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.93), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .rev-hero-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.76)); }
  .rev-hero .container{ position:relative; z-index:2; }
  .rev-hero h1{ font-size:clamp(2.4rem,5.4vw,4rem); margin:0 auto 18px; max-width:16ch; }
  .rev-hero p{ color:var(--muted); font-size:18px; max-width:560px; margin:0 auto; }
  .rev-hero-stars{ color:#ffc861; font-size:20px; letter-spacing:3px; margin-bottom:20px; }

  /* ============ 2. STATS BAND ============ */
  .rev-statband{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ink-2); padding:0; }
  .rev-stat{ padding:38px 20px; text-align:center; border-right:1px solid var(--border); }
  .rev-stat:last-child{ border-right:none; }
  .rev-stat .n{ font-family:"Anton",serif; font-size:2.6rem; color:var(--primary); }
  .rev-stat .l{ color:var(--muted); font-size:13.5px; margin-top:4px; }
  @media (max-width:767px){ .rev-stat{ border-right:none; border-bottom:1px solid var(--border); } .rev-stat:last-child{ border-bottom:none; } }

  /* ============ 3. FILTER TABS ============ */
  .rev-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin:0 0 44px; }
  .rev-tab{
    background:transparent; color:var(--muted); font-weight:600; font-size:14px;
    padding:11px 20px; cursor:pointer; white-space:nowrap; border:0;
    border-right:1px solid var(--border); transition:color .2s ease, background .2s ease;
  }
  .rev-tab:last-child{ border-right:0; }
  .rev-tab:hover{ color:var(--text); background:var(--panel); }
  .rev-tab.active{ background:var(--grad); color:#051019; }

  /* ============ 4. MASONRY REVIEW WALL ============ */
  /* CSS columns give an easy masonry look; each card avoids breaking */
  .rev-wall{ column-count:3; column-gap:22px; }
  @media (max-width:991px){ .rev-wall{ column-count:2; } }
  @media (max-width:640px){ .rev-wall{ column-count:1; } }
  .rev-card{
    break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
    background:var(--panel); border:1px solid var(--border); border-radius:18px;
    padding:26px 24px; margin:0 0 22px; position:relative; overflow:hidden;
    transition:transform .25s ease, border-color .25s ease;
  }
  .rev-card:hover{ transform:translateY(-5px); border-color:var(--primary); }
  .rev-card .rev-quote-mark{
    position:absolute; top:-10px; right:14px; font-family:"Anton",serif; font-size:5rem;
    color:var(--border); opacity:.5; line-height:1; pointer-events:none;
  }
  .rev-stars{ color:#ffc861; font-size:13px; letter-spacing:2px; margin-bottom:12px; }
  .rev-card h3{ font-size:15.5px; margin-bottom:12px; line-height:1.35; position:relative; }
  .rev-card p{ color:var(--muted); font-size:14px; line-height:1.7; margin:0 0 18px; position:relative; }
  .rev-meta{ display:flex; align-items:center; gap:12px; }
  .rev-avatar{
    width:42px;height:42px;border-radius:50%; background:var(--grad); color:#051019;
    display:flex; align-items:center; justify-content:center; font-family:"Anton",serif;
    font-size:16px; flex-shrink:0;
  }
  .rev-meta .who{ display:flex; flex-direction:column; }
  .rev-meta .nm{ font-weight:700; font-size:14px; }
  .rev-meta .svc{ font-size:12px; color:var(--primary); font-weight:600; }
  .rev-hidden{ display:none !important; }

  /* ============ 5. QUOTE BANNER (parallax) ============ */
  .rev-parallax{
    position:relative; overflow:hidden; min-height:400px; display:flex; align-items:center;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .rev-parallax-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .rev-parallax-overlay{ position:absolute; inset:0; z-index:1; background:rgba(10,15,28,0.9); }
  html[data-theme="light"] .rev-parallax-overlay{ background:rgba(246,244,238,0.92); }
  .rev-parallax .container{ position:relative; z-index:2; text-align:center; }
  .rev-parallax .q{ font-family:"Anton",serif; font-size:clamp(1.6rem,3.4vw,2.7rem); line-height:1.25; max-width:20ch; margin:0 auto; }
  .rev-parallax .attr{ color:var(--muted); font-size:14px; margin-top:22px; }

  /* ============ 6. CTA (parallax) ============ */
  .rev-cta{ position:relative; overflow:hidden; }
  .rev-cta-bg{ position:absolute; inset:-15% 0; background-size:cover; background-position:center; will-change:transform; z-index:0; }
  .rev-cta-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(10,15,28,0.92), rgba(10,15,28,0.72)); }
  html[data-theme="light"] .rev-cta-overlay{ background:linear-gradient(120deg, rgba(246,244,238,0.95), rgba(246,244,238,0.75)); }
  .rev-cta .container{ position:relative; z-index:2; text-align:center; }
  .rev-cta h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
  .rev-cta p{ color:var(--muted); max-width:520px; margin:0 auto 30px; }
.rev-logo img {
    width: 23%;
    margin-bottom: 12px;
}
  @media (max-width:767px){
    .rev-section{ padding:66px 0; }
    .rev-hero{ padding:120px 0 70px; }
    .rev-parallax{ min-height:340px; }
  }
  /***********************************REviews ********************************************************/






  /********************************************** video slider ********************************************/
  /* ----- BLOCK: video-slider ----- */
  .video-slider {
    width: 100%;
    margin: 0 auto;
    background: #0e1526;
    border-radius: 48px 48px 40px 40px;
    padding: 60px 30px 50px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
    border: 1px solid #1f2b44;
  }
  .video-slider__swiper::before {
    content: '';
    background-color: #0e1526;
    width: 277px;
    height: 108vh;
    display: block;
    position: absolute;
    z-index: 9999;
    pointer-events: none; /* FIXED: Allows dragging/swiping over this area */
  }
  .video-slider__swiper::after {
    content: '';
    background-color: #0e1526;
    width: 386px;
    height: 108vh;
    display: block;
    position: absolute;
    z-index: 9999;
    top: 0;
    right: 0;
    pointer-events: none; /* FIXED: Allows dragging/swiping over this area */
  }
  /* ----- ELEMENT: header ----- */
  .video-slider__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 45px;
    padding: 0 12px;
  }
  .video-slider__eyebrow {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #49c6e7;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    justify-content: center;
  }
  .video-slider__eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(120deg, #49c6e7, #5b7cbe);
    display: inline-block;
  }
  .video-slider__title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(2rem, 4vw, 2.9rem);
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: #f0f6ff;
    margin-bottom: 6px;
  }
  .video-slider__subtitle {
    color: #8ca0c4;
    font-size: 1rem;
    margin-top: 10px;
    font-weight: 400;
  }
  /* ----- ELEMENT: swiper container ----- */
  .video-slider__swiper {
    width: 100%;
    padding: 20px 0 15px;
    overflow: visible !important;
  }
  .video-slider__swiper .swiper-wrapper {
    align-items: center;
    transition-timing-function: ease-out;
  }
  /* ----- ELEMENT: slide ----- */
  .video-slider__slide {
    width: 260px;
    height: auto;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
  }
  /* ----- ELEMENT: reel (video card) ----- */
  .video-slider__reel {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #22304d;
    background: #16203a;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
  }
  .video-slider__reel:hover {
    box-shadow: 0 40px 70px -18px #0a0f1c;
  }
  .video-slider__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .video-slider__reel.is-playing .video-slider__play,
  .video-slider__reel.is-playing .video-slider__badge {
    display: none;
  }
  /* ----- ELEMENT: play button ----- */
  .video-slider__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 72px;
    height: 50px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    background: linear-gradient(120deg, #49c6e7, #5b7cbe);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s ease, background 0.2s, box-shadow 0.2s;
  }
  .video-slider__play i {
    margin-left: 3px;
    pointer-events: none;
  }
  .video-slider__play:hover {
    transform: translate(-50%, -50%) scale(1.07);
    background: linear-gradient(120deg, #49c6e7, #5b7cbe);
    box-shadow: 0 12px 32px -4px #84f3ff69;
  }
  /* ----- ELEMENT: badge ----- */
  .video-slider__badge {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-family: 'Anton', sans-serif;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
    background: rgba(10, 15, 28, 0.3);
    backdrop-filter: blur(2px);
    padding: 4px 14px 6px;
    border-radius: 60px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .video-slider__badge small {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 8px;
    letter-spacing: 0.25em;
    color: #49c6e7;
    margin-top: 2px;
    font-weight: 500;
  }
  /* Dim non-active slides */
  .video-slider__swiper .swiper-slide:not(.swiper-slide-active) .video-slider__reel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 28, 0.45);
    z-index: 2;
    pointer-events: none;
    transition: background 0.25s ease;
    border-radius: 24px;
  }
  /* ----- ELEMENT: pagination ----- */
  .video-slider__swiper .swiper-pagination {
    position: static;
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .video-slider__swiper .swiper-pagination-bullet {
    background: #3a4d6e;
    opacity: 0.6;
    width: 10px;
    height: 10px;
    border-radius: 30px;
    transition: 0.2s;
  }
  .video-slider__swiper .swiper-pagination-bullet-active {
    background: #49c6e7;
    opacity: 1;
    width: 28px;
    border-radius: 20px;
  }
  /* ----- RESPONSIVE ----- */
  @media (max-width: 1300px) {
    .video-slider__swiper::before {
      width: 211px;
      left: -10px;
      height: 93vh;
    }
    .video-slider__swiper::after {
      width: 211px;
      height: 93vh;
    }
  }
  @media (max-width: 1200px) {
    .video-slider__slide {
      width: 240px;
    }
  }
  @media (max-width: 1050px) {
    .video-slider__swiper::before {
      width: 211px;
      left: -10px;
      height: 93vh;
    }
    .video-slider__swiper::after {
      width: 211px;
      height: 93vh;
    }
  }
  @media (max-width: 900px) {
    .video-slider__slide {
      width: 210px;
    }
    .video-slider__swiper::before,
    .video-slider__swiper::after {
      display: none;
    }
  }
  @media (max-width: 680px) {
    .video-slider {
      padding: 30px 12px 30px;
      border-radius: 28px;
    }
    .video-slider__title {
      font-size: 1.8rem;
    }
    .video-slider__swiper::before,
    .video-slider__swiper::after {
      display: none;
    }
  }
  @media (max-width: 575px) {
    .video-slider__slide {
      width: 230px;
    }
  }

  /********************************************** video slider ********************************************/