/* ===== New Layout Inline Styles ===== */
:root{
      --accent:#9468B4;
      --accent2:#783294;
      --ink:#253238;
      --muted:#6B7680;
      --bg:#F6F7FB;
      --card:#FFFFFF;
      --ring:rgba(148,104,180,.18);
      --shadow:0 18px 50px rgba(20,20,43,.12);
      --radius:clamp(18px, 1.5vw, 22px);
      /* Fluid typography base */
      --fs-base: clamp(14px, 1.1vw, 16px);
      --fs-sm: clamp(12px, 0.9vw, 14px);
      --fs-lg: clamp(16px, 1.3vw, 18px);
      --fs-xl: clamp(20px, 1.6vw, 24px);
      --fs-2xl: clamp(24px, 2vw, 28px);
      --fs-3xl: clamp(32px, 2.8vw, 46px);
      /* Fluid spacing */
      --sp-xs: clamp(4px, 0.4vw, 8px);
      --sp-sm: clamp(8px, 0.7vw, 12px);
      --sp-md: clamp(12px, 1vw, 18px);
      --sp-lg: clamp(18px, 1.5vw, 28px);
      --sp-xl: clamp(24px, 2vw, 40px);
    }
    *{box-sizing:border-box}
    html{font-size:var(--fs-base);}
    html,body{height:100%}
    html{overflow-x:hidden; max-width:100%}
    body{
      margin:0;
      font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif;
      color:var(--ink);
      background:radial-gradient(clamp(800px, 60vw, 1000px) clamp(400px, 30vw, 500px) at 10% 0%, rgba(148,104,180,.18), transparent 60%),
                 radial-gradient(clamp(720px, 54vw, 900px) clamp(360px, 27vw, 450px) at 90% 10%, rgba(120,50,148,.14), transparent 55%),
                 var(--bg);
      overflow-x:hidden;
      max-width:100%;
    }
    a{color:inherit;text-decoration:none}
    .container{width:100%; padding:0;}

    /* Topbar */
    .topbar{position:sticky; top:0; z-index:30; backdrop-filter:saturate(1.2) blur(10px); background:rgba(246,247,251,.75); border-bottom:1px solid rgba(37,50,56,.08)}
    .topbar__in{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-md); padding:clamp(10px, 1vw, 14px) clamp(20px, 2.5vw, 40px)}
    .brand{display:flex; align-items:center; gap:10px}
    .brand__dot{width:12px; height:12px; border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 10px 25px rgba(148,104,180,.35)}
    .brand__name{font-weight:800; letter-spacing:.2px}
    .nav{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
    .nav a{font-weight:600; color:rgba(37,50,56,.72)}

    
    .nav--mobile{
      display:block;
      margin-top:10px;
      padding:10px 0 14px;
      border-top:1px solid rgba(37,50,56,.10);
      max-height:0;
      opacity:0;
      overflow:hidden;
      pointer-events:none;
      transition:max-height .22s ease, opacity .18s ease;
    }
    .nav--mobile.is-open{
      max-height:280px;
      opacity:1;
      pointer-events:auto;
    }
    .nav--mobile a{
      display:flex; align-items:center;
      padding:10px 0;
      font-weight:700;
      color:rgba(37,50,56,.78);
    }
    .nav--mobile a:hover{color:rgba(37,50,56,.92)}
    :root[data-theme="dark"] .nav--mobile{border-top-color:rgba(234,240,244,.10)}
    :root[data-theme="dark"] .nav--mobile a{color:rgba(234,240,244,.78)}
    :root[data-theme="dark"] .nav--mobile a:hover{color:rgba(234,240,244,.92)}
    .nav--mobile.is-open{max-height:420px; opacity:1; pointer-events:auto;}
    .nav--mobile a{
      display:block;
      padding:10px 0;
      font-weight:700;
      color:rgba(37,50,56,.78)
    }
    .nav--mobile.is-open{display:block; max-height:320px;}
    :root[data-theme="dark"] .nav--mobile{border-top-color:rgba(234,240,244,.12)}
    :root[data-theme="dark"] .nav--mobile a{color:rgba(234,240,244,.80)}
    .nav a:hover{color:var(--ink)}
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-sm); padding:clamp(10px, 1vw, 12px) clamp(14px, 1.2vw, 16px); border-radius:999px; font-weight:700; border:1px solid rgba(37,50,56,.12); background:#fff; box-shadow:0 10px 25px rgba(20,20,43,.08); font-size:var(--fs-base)}
    .btn--primary{border:none; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 18px 45px rgba(148,104,180,.32)}
    .btn--primary:hover{filter:saturate(1.08)}

    /* Hero */
    .hero{padding:clamp(20px, 2vw, 30px) clamp(50px, 6vw, 100px) clamp(18px, 1.8vw, 26px); margin-top:50px; padding-left:clamp(50px, 6vw, 100px); padding-right:clamp(50px, 6vw, 100px)}
    
    /* Override old header absolute positioning to prevent overlay */
    .header {
      position: relative !important;
      background: transparent;
      padding:0 clamp(50px, 6vw, 100px);
    }
    
    body > .header {
      margin-bottom: 0;
    }
    .hero__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:var(--sp-lg); align-items:center}
    .kicker{display:inline-flex; align-items:center; gap:var(--sp-sm); padding:clamp(6px, 0.6vw, 8px) clamp(10px, 1vw, 12px); border-radius:999px; background:rgba(148,104,180,.10); border:1px solid rgba(148,104,180,.22); color:rgba(120,50,148,.98); font-weight:700; font-size:var(--fs-sm)}
    .kicker i{width:clamp(8px, 0.7vw, 10px); height:clamp(8px, 0.7vw, 10px); border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--accent2))}
    h1{margin:clamp(12px, 1.2vw, 16px) 0 clamp(10px, 1vw, 12px); font-size:var(--fs-3xl); line-height:1.05; letter-spacing:-.6px}
    .hero p{margin:0; color:rgba(37,50,56,.75); font-weight:500; line-height:1.55; font-size:var(--fs-lg); max-width:54ch}
    .hero__typing{display:block; min-height:1.5em}
    .typing-cursor{display:inline-block; margin-left:2px}
    @keyframes blink-caret{0%,100%{opacity:1}50%{opacity:0}}
    .hero__actions{display:flex; gap:var(--sp-sm); margin-top:clamp(18px, 1.8vw, 22px); flex-wrap:wrap}
    .metrics{display:flex; gap:var(--sp-md); margin-top:clamp(18px, 1.8vw, 22px); flex-wrap:wrap}
    .metric{padding:clamp(10px, 1vw, 12px) clamp(12px, 1.1vw, 14px); border-radius:clamp(14px, 1.2vw, 16px); background:rgba(255,255,255,.7); border:1px solid rgba(37,50,56,.08)}
    .metric b{display:block; font-size:var(--fs-lg)}
    .metric span{color:rgba(37,50,56,.62); font-weight:600; font-size:var(--fs-sm)}

    .hero__card{
      background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.70));
      border:1px solid rgba(37,50,56,.08);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:var(--sp-md);
      position:relative;
      overflow:hidden;
      min-height:clamp(240px, 20vw, 290px);
    }
    .hero__card:before{
      content:"";
      position:absolute;
      inset:-40% -20% auto auto;
      width:clamp(320px, 28vw, 420px);
      height:clamp(320px, 28vw, 420px);
      background:radial-gradient(circle at 30% 30%, rgba(148,104,180,.35), transparent 62%);
      transform:rotate(18deg);
      pointer-events:none;
    }
    .shot{
      border-radius:18px;
      border:1px solid rgba(37,50,56,.08);
      background:#fff;
      height:270px;
      overflow:hidden;
      position:relative;
    }
    .shot img{width:100%; height:100%; object-fit:cover; object-position:top}
    .shot__badge{
      position:absolute; left:12px; top:12px;
      background:rgba(255,255,255,.9);
      border:1px solid rgba(37,50,56,.10);
      border-radius:999px;
      padding:8px 10px;
      font-weight:800;
      font-size:12px;
      display:flex; gap:8px; align-items:center;
    }
    .shot__badge i{width:10px; height:10px; border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--accent2))}

    /* Sections */
    section{padding:clamp(24px, 2.2vw, 30px) clamp(50px, 6vw, 100px); padding-left:clamp(50px, 6vw, 100px); padding-right:clamp(50px, 6vw, 100px)}
    .section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(16px, 1.5vw, 20px); margin-bottom:clamp(12px, 1.1vw, 14px)}
    .section__title{font-size:var(--fs-2xl); margin:0; letter-spacing:-.3px}
    .section__sub{margin:0; color:rgba(37,50,56,.68); font-weight:500; max-width:62ch}

    /* Value cards */
    .value{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:var(--sp-md);
      margin-top:var(--sp-md);
    }
    .value__card{
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
      border:1px solid rgba(37,50,56,.08);
      border-radius:var(--radius);
      padding:var(--sp-md) var(--sp-md) clamp(14px, 1.3vw, 16px);
      box-shadow:0 20px 55px rgba(20,20,43,.10);
      position:relative;
      overflow:hidden;
      min-height:clamp(150px, 12vw, 168px);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .value__card::before{
      content:"";
      position:absolute; inset:-2px -2px auto -2px;
      height:70px;
      background:radial-gradient(280px 70px at 10% 0%, rgba(148,104,180,.22), transparent 60%);
      pointer-events:none;
    }
    .value__card:hover{transform:translateY(-3px); box-shadow:0 28px 70px rgba(20,20,43,.14)}
    :root[data-theme="dark"] .value__card{
      background:linear-gradient(180deg, rgba(20,24,36,.88), rgba(20,24,36,.70));
      border-color:rgba(234,240,244,.10);
      box-shadow:0 26px 70px rgba(0,0,0,.38);
    }
    .value__icon{
      display:inline-flex;
      align-items:center;
      gap:var(--sp-xs);
      padding:var(--sp-xs) var(--sp-sm);
      border-radius:999px;
      font-weight:900;
      font-size:var(--fs-sm);
      letter-spacing:.4px;
      color:rgba(120,50,148,.95);
      background:rgba(148,104,180,.14);
      border:1px solid rgba(148,104,180,.22);
      width:max-content;
      margin-bottom:clamp(8px, 0.8vw, 10px);
    }
    :root[data-theme="dark"] .value__icon{
      color:rgba(234,240,244,.86);
      background:rgba(148,104,180,.16);
      border-color:rgba(148,104,180,.22);
    }
    .value__card h3{margin:var(--sp-sm) 0 clamp(5px, 0.5vw, 6px); font-size:var(--fs-base)}
    .value__card p{margin:0; color:rgba(37,50,56,.70); font-weight:500; line-height:1.5; font-size:var(--fs-sm)}

    /* Cases */
    .filters{display:flex; gap:clamp(8px, 0.8vw, 10px); flex-wrap:wrap; justify-content:flex-end}
    .chip{padding:clamp(8px, 0.8vw, 10px) var(--sp-sm); border-radius:999px; border:1px solid rgba(37,50,56,.10); background:rgba(255,255,255,.75); font-weight:700; color:rgba(37,50,56,.72); cursor:pointer; font-size:var(--fs-sm)}
    .chip--active{border-color:rgba(148,104,180,.35); color:rgba(120,50,148,1); background:rgba(148,104,180,.10)}

    .cases{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px, 1.1vw, 14px)}
    .case{
      background:rgba(255,255,255,.90);
      border:1px solid rgba(37,50,56,.08);
      border-radius:clamp(18px, 1.6vw, 20px);
      overflow:hidden;
      box-shadow:0 4px 16px rgba(20,20,43,.08), 0 1px 4px rgba(20,20,43,.04);
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .case:hover{transform:translateY(-3px); box-shadow:0 18px 50px rgba(20,20,43,.12)}
    .case__media{height:clamp(150px, 12vw, 178px); background:#fff; border-bottom:1px solid rgba(37,50,56,.06)}
    .case__media img{width:100%; height:100%; object-fit:cover; object-position:center}
    .case__body{padding:clamp(12px, 1.1vw, 14px) clamp(12px, 1.1vw, 14px) clamp(14px, 1.3vw, 16px)}
    .case__top{display:flex; align-items:center; justify-content:space-between; gap:clamp(8px, 0.8vw, 10px)}
    .case__name{font-weight:900; font-size:var(--fs-base)}
    .case__type{font-weight:800; font-size:var(--fs-sm); color:rgba(120,50,148,1); background:rgba(148,104,180,.12); border:1px solid rgba(148,104,180,.22); padding:clamp(5px, 0.5vw, 6px) clamp(8px, 0.8vw, 10px); border-radius:999px}
    .case__desc{margin:clamp(8px, 0.8vw, 10px) 0 var(--sp-sm); color:rgba(37,50,56,.72); font-weight:500; line-height:1.5; font-size:var(--fs-sm); min-height:clamp(36px, 3vw, 40px)}
    .tags{display:flex; gap:var(--sp-xs); flex-wrap:wrap}
    .tag{font-size:var(--fs-sm); font-weight:800; color:rgba(37,50,56,.62); border:1px dashed rgba(37,50,56,.18); padding:clamp(5px, 0.5vw, 6px) clamp(8px, 0.8vw, 10px); border-radius:999px}

    /* Process */
    .process{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-sm)}
    .step{border-radius:clamp(16px, 1.4vw, 18px); border:1px solid rgba(37,50,56,.08); background:rgba(255,255,255,.85); padding:clamp(14px, 1.3vw, 16px); position:relative}
    .step b{display:block; font-size:var(--fs-sm)}
    .step p{margin:var(--sp-xs) 0 0; color:rgba(37,50,56,.70); font-weight:500; font-size:var(--fs-sm); line-height:1.5}
    .num{width:clamp(30px, 2.5vw, 34px); height:clamp(30px, 2.5vw, 34px); border-radius:clamp(10px, 0.9vw, 12px); display:grid; place-items:center; font-weight:900; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 16px 35px rgba(148,104,180,.30); font-size:var(--fs-sm)}

    /* CTA */
    .cta{padding:clamp(28px, 2.4vw, 34px) clamp(50px, 6vw, 100px) clamp(44px, 3.8vw, 54px); padding-left:clamp(50px, 6vw, 100px); padding-right:clamp(50px, 6vw, 100px)}
    .cta__box{border-radius:var(--radius); background:linear-gradient(135deg, rgba(148,104,180,.18), rgba(120,50,148,.12)); border:1px solid rgba(148,104,180,.28); padding:clamp(18px, 1.6vw, 22px); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-md); flex-wrap:wrap}
    .cta__box h2{margin:0; font-size:var(--fs-xl); letter-spacing:-.2px}
    .cta__box p{margin:clamp(5px, 0.5vw, 6px) 0 0; color:rgba(37,50,56,.72); font-weight:500; font-size:var(--fs-base)}

    /* Footer */
    footer{padding:clamp(18px, 1.6vw, 22px) clamp(50px, 6vw, 100px) clamp(32px, 2.8vw, 40px); padding-left:clamp(50px, 6vw, 100px); padding-right:clamp(50px, 6vw, 100px); color:rgba(37,50,56,.60)}
    .foot{display:flex; justify-content:space-between; gap:var(--sp-md); flex-wrap:wrap; border-top:1px solid rgba(37,50,56,.08); padding-top:var(--sp-md)}

    /* Responsive */
    @media (min-width: 1920px){
      .topbar__in, .hero, .header, section, footer, .cta, .reviews, .reviews.v5, .capabilities, .capabilities.v5, .footer.v7{padding-left:clamp(100px, 7vw, 170px); padding-right:clamp(100px, 7vw, 170px);}
      h1{font-size:clamp(46px, 3.5vw, 56px);}
      .hero__grid{gap:clamp(28px, 2.5vw, 40px);}
    }
    @media (min-width: 2560px){
      .topbar__in, .hero, .header, section, footer, .cta, .reviews, .reviews.v5, .capabilities, .capabilities.v5, .footer.v7{padding-left:clamp(135px, 8.5vw, 270px); padding-right:clamp(135px, 8.5vw, 270px);}
      h1{font-size:clamp(56px, 4vw, 64px);}
    }
    @media (max-width: 980px){
      .hero__grid{grid-template-columns:1fr;}
      h1{font-size:clamp(32px, 4vw, 38px)}
      .value{grid-template-columns:repeat(2,1fr)}
      .cases{grid-template-columns:repeat(2,1fr)}
      .process{grid-template-columns:repeat(2,1fr)}
      .filters{justify-content:flex-start}
    }
    @media (max-width: 580px){
      .topbar__in, .hero, .header, section, footer, .cta, .reviews, .reviews.v5, .capabilities, .capabilities.v5, .footer.v7{padding-left:clamp(32px, 6.5vw, 54px); padding-right:clamp(32px, 6.5vw, 54px);}
      h1{font-size:clamp(28px, 5.5vw, 32px)}
      .value{grid-template-columns:1fr}
      .cases{grid-template-columns:1fr}
      .process{grid-template-columns:1fr}
    }
  
    /* Burger + menu overlay */
    .menu-btn{
      width:52px;height:52px;border-radius:16px;
      border:1px solid rgba(37,50,56,.10);
      background:rgba(255,255,255,.78);
      box-shadow:0 14px 30px rgba(20,20,43,.10);
      display:grid;place-items:center;
      cursor:pointer;
      position:relative;
      transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    }
    .menu-btn:hover{transform:translateY(-1px); box-shadow:0 18px 40px rgba(20,20,43,.14)}
    .menu-btn:active{transform:translateY(0)}
    :root[data-theme="dark"] .menu-btn{background:rgba(20,24,36,.72); border-color:rgba(234,240,244,.10); box-shadow:0 18px 45px rgba(0,0,0,.35)}
    .menu-btn span{
      display:block;
      position:absolute;
      width:18px;height:2px;border-radius:99px;
      background:rgba(37,50,56,.78);
      transition: transform .18s ease, opacity .18s ease, background .18s ease;
    }
    :root[data-theme="dark"] .menu-btn span{background:rgba(234,240,244,.86)}
    .menu-btn span:nth-child(1){transform:translateY(-6px)}
    .menu-btn span:nth-child(2){transform:translateY(0)}
    .menu-btn span:nth-child(3){transform:translateY(6px)}
    .menu-btn.is-open span:nth-child(1){transform:translateY(0) rotate(45deg)}
    .menu-btn.is-open span:nth-child(2){opacity:0}
    .menu-btn.is-open span:nth-child(3){transform:translateY(0) rotate(-45deg)}
    .menu-btn:hover{background:rgba(148,104,180,.10); border-color:rgba(148,104,180,.22)}
    .menu-btn:active{transform:scale(.98)}
    :root[data-theme="dark"] .menu-btn{border-color:rgba(234,240,244,.14)}
    :root[data-theme="dark"] .menu-btn:hover{background:rgba(148,104,180,.18); border-color:rgba(148,104,180,.35)}

    .menu-btn span{display:block;width:18px;height:2px;background:rgba(37,50,56,.78);border-radius:99px}
    .topbar__in{gap:18px}
    .menu-drawer.is-open{transform: translateX(0)}
    .menu-nav a:hover{background:rgba(148,104,180,.10)}
    .menu-cta{margin-top:auto; justify-content:center}

        /* Project switcher (no scroll, floats automatically, drag with mouse) */
    .proj{display:flex; flex-direction:column; gap:12px}
    .proj__tabs-viewport{
      border-radius:18px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(37,50,56,.08);
      padding:10px;
      overflow:hidden; /* main: no scrollbars */
      user-select:none;
    }
    .proj__tabs-track{
      display:flex;
      align-items:center;
      gap:10px;
      will-change:transform;
      cursor:grab;
    }
    .proj__tabs-track.is-dragging{cursor:grabbing}

    .proj__tab{
      flex:0 0 auto;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(37,50,56,.10);
      background:rgba(255,255,255,.65);
      font-weight:800;
      color:rgba(37,50,56,.70);
      cursor:pointer;
      white-space:nowrap;
      transition: transform .14s ease, background .14s ease, color .14s ease, border-color .14s ease;
    }
    .proj__tab:hover{transform: translateY(-1px)}
    .proj__tab.is-active{
      background:rgba(148,104,180,.14);
      border-color: rgba(148,104,180,.28);
      color: rgba(120,50,148,.95);
    }
    .proj__more{font-weight:900; color:rgba(120,50,148,.92); text-decoration:none; padding:6px 10px}
    .proj__more:hover{text-decoration:underline}
@media (max-width: 1100px){
      .value{grid-template-columns:repeat(2, minmax(0,1fr));}
    }
    @media (max-width: 640px){
      .value{grid-template-columns:1fr;}
    }

    @media (max-width: 920px){
      .menu-btn{display:grid}
      .nav{display:none}
      .topbar__in{justify-content:space-between}
    }
    @media (min-width: 921px){
      /* show burger on desktop too, so "open menu in header" works */
      .menu-btn{display:grid}
    }


    /* Reviews */
    .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:44px 0 18px}
    .section-head h2{margin:0; font-size:34px; letter-spacing:-.4px}
    .section-head p{margin:8px 0 0; color:rgba(37,50,56,.66); font-weight:600}
    :root[data-theme="dark"] .section-head p{color:rgba(234,240,244,.66)}
    .icon-btn{
      width:44px; height:44px; border-radius:14px;
      border:1px solid rgba(37,50,56,.10);
      background:rgba(255,255,255,.85);
      display:grid; place-items:center;
      box-shadow:0 10px 22px rgba(20,20,43,.06);
      cursor:pointer;
    }
    :root[data-theme="dark"] .icon-btn{background:rgba(20,24,36,.72); border-color:rgba(234,240,244,.12);}
    .icon-btn svg{width:18px; height:18px; fill:rgba(37,50,56,.72)}
    :root[data-theme="dark"] .icon-btn svg{fill:rgba(234,240,244,.78)}

    .reviews{padding:0}
    .reviews__viewport{
      overflow:hidden;
      border-radius:var(--radius);
      background:rgba(255,255,255,.55);
      border:1px solid rgba(37,50,56,.08);
      box-shadow:var(--shadow);
    }
    :root[data-theme="dark"] .reviews__viewport{
      background:rgba(20,24,36,.55);
      border-color:rgba(234,240,244,.10);
    }
    .reviews__track{
      display:flex;
      gap:18px;
      padding:18px;
      will-change:transform;
      transition:transform .35s ease;
    }
    .review{
      flex:0 0 calc(50% - 9px);
      background:var(--card);
      border-radius:18px;
      border:1px solid rgba(37,50,56,.08);
      padding:18px;
      min-height:170px;
    }
    :root[data-theme="dark"] .review{
      background:rgba(20,24,36,.85);
      border-color:rgba(234,240,244,.10);
    }
    .review__top{display:flex; align-items:center; gap:12px; margin-bottom:10px}
    .avatar{
      width:40px; height:40px; border-radius:14px;
      background:rgba(148,104,180,.18);
      display:grid; place-items:center;
      font-weight:900; color:var(--accent2);
    }
    :root[data-theme="dark"] .avatar{color:rgba(234,240,244,.86)}
    .review__name{font-weight:900}
    .review__meta{font-weight:700; font-size:13px; color:rgba(37,50,56,.55)}
    :root[data-theme="dark"] .review__meta{color:rgba(234,240,244,.56)}
    .review__rate{margin-left:auto; font-weight:900; color:var(--accent2); letter-spacing:1px}
    .review__text{margin:0; color:rgba(37,50,56,.78); line-height:1.6; font-weight:600}
    :root[data-theme="dark"] .review__text{color:rgba(234,240,244,.76)}

    .reviews__dots{display:flex; gap:8px; justify-content:center; margin-top:14px}
    .dot{
      width:8px; height:8px; border-radius:999px;
      background:rgba(148,104,180,.28);
      border:none; padding:0; cursor:pointer;
    }
    .dot.is-active{width:22px; background:rgba(148,104,180,.75)}
    @media (max-width: 920px){
      .review{flex-basis:100%}
    }

  
    /* Hide any scrollbars (just in case) */
    .proj__tabs-viewport{scrollbar-width:none; -ms-overflow-style:none;}
    .proj__tabs-viewport::-webkit-scrollbar{width:0;height:0;display:none;}

  


/* Capabilities (WOW) */
.capabilities{padding:86px clamp(50px, 6vw, 100px) 22px; position:relative}
.capabilities:before{
  content:""; position:absolute; inset:-120px 0 auto 0; height:320px; pointer-events:none;
  background:radial-gradient(520px 220px at 18% 40%, rgba(148,104,180,.20), transparent 60%),
             radial-gradient(520px 220px at 84% 20%, rgba(148,104,180,.16), transparent 62%);
  filter: blur(2px);
}
.cap__hero{display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:start}
.cap__pill{
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 14px; border-radius:999px;
  border:1px solid rgba(130,88,170,.22);
  background:linear-gradient(135deg, rgba(148,104,180,.14), rgba(148,104,180,.05));
  color:rgba(37,50,56,.78); font-weight:750; font-size:14px;
}
.cap__dot{width:9px; height:9px; border-radius:99px; background:rgba(148,104,180,.95); box-shadow:0 0 0 6px rgba(148,104,180,.18)}
.cap__title h2{margin:12px 0 10px; font-size:42px; letter-spacing:-.5px}
.cap__lead{margin:0; color:rgba(37,50,56,.78); line-height:1.65; font-size:16px}
.cap__text{margin:10px 0 0; color:rgba(37,50,56,.68); line-height:1.7}
.cap__cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.btn--ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 18px; border-radius:12px;
  border:1px solid rgba(37,50,56,.10);
  background:rgba(255,255,255,.55);
  color:rgba(37,50,56,.82);
  font-weight:800; text-decoration:none;
  box-shadow:0 18px 55px rgba(20,20,43,.08);
}
.btn--ghost:hover{transform:translateY(-1px)}
.cap__glass{
  border-radius:26px;
  border:1px solid rgba(37,50,56,.08);
  background:linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  box-shadow:0 28px 88px rgba(20,20,43,.16);
  backdrop-filter: blur(12px);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.cap__glass:before{
  content:""; position:absolute; inset:-2px;
  background:radial-gradient(500px 250px at 70% 20%, rgba(148,104,180,.18), transparent 60%);
  opacity:.9; pointer-events:none;
}
.cap__stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; position:relative}
.stat{
  border-radius:18px;
  padding:14px 14px 12px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(37,50,56,.06);
}
.stat__n{font-size:22px; font-weight:900; letter-spacing:-.3px; color:rgba(37,50,56,.86)}
.stat__n span{font-size:13px; font-weight:800; opacity:.75}
.stat__t{margin-top:4px; font-size:13px; color:rgba(37,50,56,.66); font-weight:650}
.cap__mini{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; position:relative}
.mini{
  border-radius:18px;
  padding:14px;
  border:1px solid rgba(37,50,56,.06);
  background:rgba(255,255,255,.62);
  box-shadow:0 18px 55px rgba(20,20,43,.08);
}
.mini--accent{
  background:linear-gradient(135deg, rgba(148,104,180,.16), rgba(255,255,255,.62));
  border-color:rgba(148,104,180,.18);
}
.mini__h{font-weight:900; color:rgba(37,50,56,.84); margin-bottom:6px}
.mini__p{color:rgba(37,50,56,.66); line-height:1.6; font-weight:650}

.cap__grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px}
.cap__card{
  border-radius:26px;
  padding:22px;
  border:1px solid rgba(37,50,56,.08);
  background:linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.62));
  box-shadow:0 28px 88px rgba(20,20,43,.14);
  backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;
}
.cap__card:after{
  content:""; position:absolute; inset:auto -60px -60px auto; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(148,104,180,.26), transparent 60%);
  transform:translate3d(0,0,0);
  opacity:.75;
}
.cap__icon{
  width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background:rgba(148,104,180,.14);
  border:1px solid rgba(148,104,180,.22);
  font-size:18px;
  margin-bottom:12px;
}
.cap__card h3{margin:0 0 8px; font-size:20px}
.cap__card p{margin:0 0 14px; color:rgba(37,50,56,.70); line-height:1.65}
.cap__chips{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; position:relative}
.cap__chips li{
  padding:10px 12px; border-radius:999px;
  border:1px solid rgba(130,88,170,.20);
  background:rgba(148,104,180,.06);
  color:rgba(37,50,56,.78);
  font-weight:750; font-size:14px;
}
.cap__stack{display:grid; gap:14px; position:relative}
.stack__h{font-weight:900; color:rgba(37,50,56,.78); margin-bottom:8px}
.stack__tags{display:flex; flex-wrap:wrap; gap:10px}
.tag{
  border:1px solid rgba(37,50,56,.10);
  background:rgba(255,255,255,.70);
  padding:10px 12px;
  border-radius:999px;
  font-weight:800;
  color:rgba(37,50,56,.78);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tag:hover{transform:translateY(-1px); box-shadow:0 16px 44px rgba(20,20,43,.10)}
.tag.is-active{
  border-color:rgba(148,104,180,.38);
  box-shadow:0 20px 58px rgba(148,104,180,.18);
  background:linear-gradient(135deg, rgba(148,104,180,.18), rgba(255,255,255,.66));
}
.cap__note{margin-top:12px; color:rgba(37,50,56,.62); font-weight:650; position:relative}
.cap__card--wide{grid-column:1 / -1}
.cap__wideHead{display:flex; justify-content:space-between; gap:18px; align-items:flex-end; margin-bottom:14px; position:relative}
.cap__wideHead p{margin:0; color:rgba(37,50,56,.70)}
.cap__search input{
  width:min(360px, 100%);
  border-radius:14px;
  border:1px solid rgba(37,50,56,.10);
  background:rgba(255,255,255,.70);
  padding:12px 14px;
  font-weight:750;
  color:rgba(37,50,56,.80);
  outline:none;
}
.cap__search input:focus{border-color:rgba(148,104,180,.35); box-shadow:0 0 0 6px rgba(148,104,180,.14)}
.services{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; position:relative}
.svc{
  border-radius:18px;
  border:1px solid rgba(37,50,56,.08);
  background:rgba(255,255,255,.70);
  padding:14px 14px;
  text-decoration:none;
  color:rgba(37,50,56,.84);
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.svc span{
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,104,180,.18);
  background:rgba(148,104,180,.08);
  color:rgba(37,50,56,.70);
  white-space:nowrap;
}
.svc:hover{transform:translateY(-2px); box-shadow:0 24px 70px rgba(20,20,43,.12)}

/* Scroll reveal */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease}
.reveal.is-in{opacity:1; transform:translateY(0)}

/* Subtle 3D tilt (pointer) */
.tilt{transform-style:preserve-3d}
.tilt:before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(380px 180px at var(--mx, 50%) var(--my, 30%), rgba(148,104,180,.18), transparent 55%);
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.tilt:hover:before{opacity:1}

:root[data-theme="dark"] .cap__pill{color:rgba(234,240,244,.78)}
:root[data-theme="dark"] .cap__lead,
:root[data-theme="dark"] .cap__text,
:root[data-theme="dark"] .cap__wideHead p{color:rgba(234,240,244,.72)}
:root[data-theme="dark"] .cap__glass,
:root[data-theme="dark"] .cap__card,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .mini,
:root[data-theme="dark"] .tag,
:root[data-theme="dark"] .svc,
:root[data-theme="dark"] .cap__search input{
  background:rgba(20,24,36,.72);
  border-color:rgba(234,240,244,.10);
  box-shadow:0 28px 90px rgba(0,0,0,.42);
  color:rgba(234,240,244,.82);
}
:root[data-theme="dark"] .stat__t,
:root[data-theme="dark"] .mini__p,
:root[data-theme="dark"] .cap__note{color:rgba(234,240,244,.66)}
:root[data-theme="dark"] .stat__n,
:root[data-theme="dark"] .mini__h,
:root[data-theme="dark"] .stack__h{color:rgba(234,240,244,.84)}
:root[data-theme="dark"] .cap__chips li{color:rgba(234,240,244,.78); border-color:rgba(148,104,180,.26); background:rgba(148,104,180,.10)}
:root[data-theme="dark"] .svc span{color:rgba(234,240,244,.70); border-color:rgba(148,104,180,.22); background:rgba(148,104,180,.10)}
:root[data-theme="dark"] .btn--ghost{background:rgba(20,24,36,.60); border-color:rgba(234,240,244,.12); color:rgba(234,240,244,.82)}

@media (max-width: 1100px){
  .cap__hero{grid-template-columns:1fr}
  .cap__title h2{font-size:38px}
  .services{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (max-width: 760px){
  .capabilities{padding:68px clamp(50px, 6vw, 100px) 18px}
  .cap__title h2{font-size:32px}
  .cap__stats{grid-template-columns:1fr; gap:10px}
  .cap__mini{grid-template-columns:1fr}
  .cap__grid{grid-template-columns:1fr}
  .services{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .cap__wideHead{flex-direction:column; align-items:flex-start}
  .cap__search input{width:100%}
}
@media (max-width: 420px){
  .services{grid-template-columns:1fr}
}




/* v5 Capabilities (bold + wow) */
.capabilities.v5{padding:86px clamp(50px, 6vw, 100px) 26px; padding-left:clamp(50px, 6vw, 100px); padding-right:clamp(50px, 6vw, 100px); position:relative}
.capabilities.v5:before{
  content:""; position:absolute; inset:-160px 0 auto 0; height:420px; pointer-events:none;
  background:radial-gradient(600px 240px at 16% 40%, rgba(148,104,180,.22), transparent 60%),
             radial-gradient(680px 300px at 86% 10%, rgba(148,104,180,.18), transparent 62%);
  filter: blur(2px);
}
.cap5{display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:start}
.cap5__pill{display:inline-flex; gap:10px; align-items:center; padding:10px 14px; border-radius:999px;
  border:1px solid rgba(130,88,170,.22);
  background:linear-gradient(135deg, rgba(148,104,180,.14), rgba(148,104,180,.05));
  font-weight:950; color:rgba(37,50,56,.78)}
.cap5__dot{width:9px; height:9px; border-radius:99px; background:rgba(148,104,180,.95); box-shadow:0 0 0 6px rgba(148,104,180,.18)}
.cap5__h{margin:14px 0 10px; font-size:48px; letter-spacing:-.8px; line-height:1.02}
.cap5__lead{margin:0; color:rgba(37,50,56,.76); line-height:1.75; font-size:16px}
.cap5__badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.cap5__badges span{padding:8px 10px; border-radius:999px; border:1px solid rgba(148,104,180,.18); background:rgba(148,104,180,.08);
  font-weight:950; font-size:12px; color:rgba(37,50,56,.72)}
.cap5__cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.cap5__ghost{display:inline-flex; align-items:center; justify-content:center; padding:14px 18px; border-radius:12px;
  border:1px solid rgba(37,50,56,.10); background:rgba(255,255,255,.55); color:rgba(37,50,56,.82);
  font-weight:950; text-decoration:none; box-shadow:0 18px 55px rgba(20,20,43,.08)}
.cap5__nums{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px}
.ncard{border-radius:18px; padding:14px; border:1px solid rgba(37,50,56,.08); background:rgba(255,255,255,.60); box-shadow:0 18px 55px rgba(20,20,43,.08)}
.ncard b{display:block; font-size:24px; letter-spacing:-.4px}
.ncard span{display:block; margin-top:4px; color:rgba(37,50,56,.64); font-weight:800; font-size:13px}

.cap5__panel{
  border-radius:28px; border:1px solid rgba(37,50,56,.08);
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.58));
  box-shadow:0 34px 110px rgba(20,20,43,.18);
  backdrop-filter: blur(14px);
  overflow:hidden;
  position:relative;
  height:600px;
  display:flex;
  flex-direction:column;
}
.cap5__shine{position:absolute; inset:-2px; pointer-events:none;
  background:radial-gradient(520px 240px at 68% 18%, rgba(148,104,180,.20), transparent 60%);
  mix-blend-mode: multiply; opacity:.9;
}
.cap5__tabs{position:relative; display:flex; gap:8px; padding:12px; background:rgba(255,255,255,.56); border-bottom:1px solid rgba(37,50,56,.06)}
.cap5Tab{position:relative; padding:10px 12px; border-radius:999px; border:1px solid rgba(37,50,56,.10);
  background:rgba(255,255,255,.70); font-weight:950; color:rgba(37,50,56,.74); cursor:pointer}
.cap5Tab span{position:relative; z-index:2}
.cap5Tab.is-active{border-color:rgba(148,104,180,.42); background:rgba(255,255,255,.72)}
.cap5__underline{position:absolute; left:0; bottom:6px; height:3px; width:0; border-radius:99px; background:rgba(148,104,180,.92);
  box-shadow:0 0 0 6px rgba(148,104,180,.16); transition:transform .25s ease, width .25s ease}
.cap5__body{padding:16px; flex:1; overflow-y:auto}
.cap5Pane[hidden]{display:none}
.cap5Cards{display:grid; gap:12px}
.cap5Card{
  border-radius:22px;
  border:1px solid rgba(37,50,56,.08);
  background:rgba(255,255,255,.68);
  padding:14px 14px 12px;
  box-shadow:0 20px 70px rgba(20,20,43,.10);
  position:relative;
  overflow:hidden;
}
.cap5Card:after{
  content:""; position:absolute; inset:auto -70px -70px auto; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(148,104,180,.20), transparent 60%); opacity:.7;
}
.cap5Card h3{margin:0 0 6px}
.cap5Card p{margin:0 0 10px; color:rgba(37,50,56,.70); line-height:1.65; font-weight:750}
.cap5Pills{display:flex; flex-wrap:wrap; gap:8px; position:relative}
.cap5Pills span{padding:8px 10px; border-radius:999px; border:1px solid rgba(37,50,56,.08); background:rgba(255,255,255,.62);
  font-weight:900; font-size:12px; color:rgba(37,50,56,.70)}

.cap5Acc{display:grid; gap:10px}
.accH{
  width:100%; text-align:left;
  border-radius:18px; border:1px solid rgba(37,50,56,.10);
  background:rgba(255,255,255,.70);
  padding:12px 14px;
  font-weight:950; color:rgba(37,50,56,.78);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer;
}
.accH small{font-weight:800; color:rgba(37,50,56,.60)}
.accI{width:28px; height:28px; border-radius:12px; display:grid; place-items:center; border:1px solid rgba(37,50,56,.10); background:rgba(255,255,255,.62)}
.accP{
  border-radius:18px; border:1px solid rgba(37,50,56,.08);
  background:rgba(255,255,255,.62);
  padding:12px;
}
.chipGrid{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  padding:10px 12px; border-radius:999px;
  border:1px solid rgba(37,50,56,.10);
  background:rgba(255,255,255,.72);
  font-weight:950; color:rgba(37,50,56,.74);
  cursor:pointer;
}
.chip.is-on{border-color:rgba(148,104,180,.40); background:rgba(148,104,180,.12)}
.cap5Search input{
  width:100%; border-radius:14px; border:1px solid rgba(37,50,56,.10);
  background:rgba(255,255,255,.72); padding:12px 14px; font-weight:950; color:rgba(37,50,56,.80); outline:none
}
.cap5Search input:focus{border-color:rgba(148,104,180,.35); box-shadow:0 0 0 6px rgba(148,104,180,.14)}
.cap5Svc{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:12px}
.svc5{
  border-radius:18px; border:1px solid rgba(37,50,56,.08);
  background:rgba(255,255,255,.70);
  padding:14px; text-decoration:none;
  color:rgba(37,50,56,.84); font-weight:950;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  box-shadow:0 20px 70px rgba(20,20,43,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.svc5:hover{transform:translateY(-2px); box-shadow:0 28px 90px rgba(20,20,43,.12)}
.svc5 em{font-style:normal; font-size:12px; font-weight:950; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(148,104,180,.18); background:rgba(148,104,180,.08); color:rgba(37,50,56,.68)}

/* v5 Reviews (3D carousel) */
.reviews.v5{padding:72px clamp(50px, 6vw, 100px) 50px; position:relative; overflow:hidden}
.reviews.v5:before{
  content:""; position:absolute; inset:-120px 0 auto 0; height:360px; pointer-events:none;
  background:radial-gradient(640px 260px at 20% 30%, rgba(148,104,180,.18), transparent 60%),
             radial-gradient(540px 240px at 86% 70%, rgba(148,104,180,.12), transparent 62%);
  filter: blur(10px)
}
.reviews.v5:after{
  content:""; position:absolute; inset:-40px 0; pointer-events:none;
  background:linear-gradient(to bottom, 
    var(--bg) 0%, 
    var(--bg) 10%,
    rgba(246,247,251,0.8) 15%,
    rgba(246,247,251,0.4) 20%,
    transparent 25%, 
    transparent 70%, 
    rgba(246,247,251,0.4) 75%,
    rgba(246,247,251,0.8) 80%,
    var(--bg) 85%,
    var(--bg) 100%);
  z-index:0;
}
.reviews.v5 > .container{position:relative; z-index:1}
.rev5__head{display:flex; justify-content:space-between; gap:18px; align-items:flex-end;padding: 0}
.rev5__pill{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; border:1px solid rgba(148,104,180,.22);
  background:linear-gradient(135deg, rgba(148,104,180,.14), rgba(148,104,180,.05)); font-weight:950; color:rgba(37,50,56,.78)}
.rev5__head h2{margin:10px 0 8px}
.rev5__head p{margin:0; color:rgba(37,50,56,.70); line-height:1.6}
.rev5__nav{display:flex; gap:10px}
.rev5__btn{width:46px; height:46px; border-radius:16px; border:1px solid rgba(37,50,56,.10); background:rgba(255,255,255,.70);
  font-size:22px; font-weight:950; color:rgba(37,50,56,.78); cursor:pointer; box-shadow:0 18px 55px rgba(20,20,43,.08)}
.rev5{width:100%; max-width:100%; overflow:hidden;padding-bottom: 5px;}
.rev5__stage{
  position:relative;
  height:340px;
  /* perspective:1200px; */
  display:grid;
  place-items:center;
  overflow:hidden;
  width:100%;
  max-width:100%;
}
.rev5Card{
  position:absolute;
  width:min(520px, calc(100% - clamp(20px, 2.5vw, 40px) * 2));
  max-width:100%;
  border-radius:26px;
  padding:18px;
  border:1px solid rgba(37,50,56,.08);
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.60));
  box-shadow:0 34px 110px rgba(20,20,43,.18);
  backdrop-filter: blur(12px);
  transform-style:preserve-3d;
  transition:transform .35s ease, opacity .35s ease, filter .35s ease;
  overflow:hidden;
  box-sizing:border-box;
}
.rev5Card:after{
  content:""; position:absolute; inset:auto -70px -70px auto; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(148,104,180,.22), transparent 60%); opacity:.75;
}
.rev5Top{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; position:relative}
.rev5Av{width:44px; height:44px; border-radius:16px; display:grid; place-items:center; background:rgba(148,104,180,.14);
  border:1px solid rgba(148,104,180,.22); font-weight:950; color:rgba(37,50,56,.80)}
.rev5Name{font-weight:950; color:rgba(37,50,56,.86); line-height:1.2}
.rev5Meta{font-weight:750; color:rgba(37,50,56,.62); font-size:13px}
.rev5Rate{font-weight:950; letter-spacing:1px; color:rgba(148,104,180,.92)}
.rev5Text{margin-top:14px; color:rgba(37,50,56,.78); line-height:1.85; font-weight:750; font-size:16px; position:relative}
.rev5Tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; position:relative}
.rev5Tags span{padding:8px 10px; border-radius:999px; border:1px solid rgba(37,50,56,.08); background:rgba(255,255,255,.62);
  color:rgba(37,50,56,.68); font-weight:900; font-size:12px}
.rev5__dots{display:flex; gap:8px; justify-content:center; margin-top:12px}
.rev5Dot{width:9px; height:9px; border-radius:99px; border:1px solid rgba(37,50,56,.18); background:rgba(37,50,56,.10); cursor:pointer}
.rev5Dot.is-active{background:rgba(148,104,180,.85); border-color:rgba(148,104,180,.85); box-shadow:0 0 0 6px rgba(148,104,180,.18)}
.rev5__cta{display:flex; justify-content:space-between; gap:14px; align-items:center; margin-top:18px; padding: 0;}
.rev5__ctaH{font-weight:950; color:rgba(37,50,56,.86)}
.rev5__ctaT{color:rgba(37,50,56,.68); font-weight:750}

:root[data-theme="dark"] .cap5__lead,
:root[data-theme="dark"] .cap5Card p,
:root[data-theme="dark"] .ncard span,
:root[data-theme="dark"] .rev5__head p,
:root[data-theme="dark"] .rev5Meta,
:root[data-theme="dark"] .rev5Text,
:root[data-theme="dark"] .rev5__ctaT{color:rgba(234,240,244,.72)}
:root[data-theme="dark"] .cap5__panel,
:root[data-theme="dark"] .cap5Tab,
:root[data-theme="dark"] .cap5__tabs,
:root[data-theme="dark"] .cap5Card,
:root[data-theme="dark"] .accH,
:root[data-theme="dark"] .accP,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .cap5Search input,
:root[data-theme="dark"] .svc5,
:root[data-theme="dark"] .ncard,
:root[data-theme="dark"] .rev5__btn,
:root[data-theme="dark"] .rev5Card,
:root[data-theme="dark"] .rev5Tags span{
  background:rgba(20,24,36,.72);
  border-color:rgba(234,240,244,.10);
  box-shadow:0 34px 110px rgba(0,0,0,.42);
  color:rgba(234,240,244,.82);
}
:root[data-theme="dark"] .cap5__badges span,
:root[data-theme="dark"] .cap5Pills span{color:rgba(234,240,244,.74)}
:root[data-theme="dark"] .rev5Name,
:root[data-theme="dark"] .rev5__ctaH{color:rgba(234,240,244,.90)}
:root[data-theme="dark"] .chip.is-on{background:rgba(148,104,180,.16)}

@media (max-width: 1100px){
  .cap5{grid-template-columns:1fr}
  .cap5__h{font-size:40px}
}
@media (max-width: 720px){
  .cap5__nums{grid-template-columns:1fr}
  .cap5Svc{grid-template-columns:1fr}
  .rev5__head{flex-direction:column; align-items:flex-start}
  .rev5__nav{width:100%}
  .rev5__btn{flex:1}
  .rev5__cta{flex-direction:column; align-items:flex-start}
  .rev5__stage{height:190px}
  .rev5Card{width:min(520px, calc(100% - clamp(14px, 3vw, 28px) * 2))}
}
/* === Style presets (v6) === */
:root{
  --accent: rgba(148,104,180,1);
  --accentSoft: rgba(148,104,180,.14);
  --bgA: #F6F7FB;
  --bgB: #F1F2FA;
  --cardA: rgba(255,255,255,.92);
  --cardB: rgba(255,255,255,.58);
  --textA: rgba(37,50,56,.88);
  --textB: rgba(37,50,56,.72);
  --line: rgba(37,50,56,.10);
  --shadow: 0 34px 110px rgba(20,20,43,.18);
  --shadowSoft: 0 18px 55px rgba(20,20,43,.08);
  --radiusX: 28px;
}

body.style-premium{
  --accent: rgba(148,104,180,1);
  --accentSoft: rgba(148,104,180,.14);
  --bgA: #F6F7FB; --bgB: #F1F2FA;
  --cardA: rgba(255,255,255,.92); --cardB: rgba(255,255,255,.58);
  --shadow: 0 34px 110px rgba(20,20,43,.18);
}

body.style-editorial{
  --accent: rgba(92,62,140,1);
  --accentSoft: rgba(92,62,140,.12);
  --bgA: #F8F6F3; --bgB: #F1EEE9;
  --cardA: rgba(255,255,255,.92); --cardB: rgba(252,249,246,.70);
  --textA: rgba(27,34,38,.92);
  --textB: rgba(27,34,38,.72);
  --line: rgba(27,34,38,.10);
  --shadow: 0 38px 120px rgba(27,34,38,.14);
}

body.style-neon{
  --accent: rgba(120,88,255,1);
  --accentSoft: rgba(120,88,255,.14);
  --bgA: #0F1220; --bgB: #0B0E1A;
  --cardA: rgba(20,24,36,.86); --cardB: rgba(20,24,36,.62);
  --textA: rgba(234,240,244,.92);
  --textB: rgba(234,240,244,.72);
  --line: rgba(234,240,244,.12);
  --shadow: 0 40px 130px rgba(0,0,0,.55);
  --shadowSoft: 0 22px 70px rgba(0,0,0,.40);
}

/* background hookup */
body.style-editorial, body.style-premium{
  background: radial-gradient(900px 360px at 15% 10%, var(--accentSoft), transparent 60%),
              radial-gradient(900px 420px at 88% 18%, rgba(148,104,180,.10), transparent 64%),
              linear-gradient(180deg, var(--bgA), var(--bgB));
}
body.style-neon{
  background: radial-gradient(900px 360px at 15% 10%, rgba(120,88,255,.18), transparent 60%),
              radial-gradient(900px 420px at 88% 18%, rgba(148,104,180,.14), transparent 64%),
              linear-gradient(180deg, var(--bgA), var(--bgB));
}

/* switcher */
.styleSwitch{
  position:fixed; right:14px; bottom:14px; z-index:9999;
  display:flex; gap:8px; padding:10px;
  border-radius:999px; border:1px solid var(--line);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadowSoft);
}
body.style-neon .styleSwitch{ background: rgba(20,24,36,.72); }
.styleBtn{
  padding:10px 12px; border-radius:999px; border:1px solid var(--line);
  background: rgba(255,255,255,.70);
  font-weight:950; cursor:pointer;
  color: var(--textB);
}
body.style-neon .styleBtn{ background: rgba(20,24,36,.72); }
.styleBtn.is-active{
  border-color: rgba(148,104,180,.38);
  background: linear-gradient(135deg, var(--accentSoft), rgba(255,255,255,.70));
  color: var(--textA);
}
body.style-neon .styleBtn.is-active{
  background: linear-gradient(135deg, rgba(120,88,255,.22), rgba(20,24,36,.72));
}

/* refine v5 to use vars */
.cap5__pill{border-color: rgba(130,88,170,.22); background: linear-gradient(135deg, var(--accentSoft), rgba(148,104,180,.05)); color: var(--textB)}
.cap5__dot{background: var(--accent); box-shadow: 0 0 0 6px rgba(148,104,180,.18)}
.cap5__h{color: var(--textA)}
.cap5__lead{color: var(--textB)}
.cap5__badges span{border-color: rgba(148,104,180,.18); background: var(--accentSoft); color: var(--textB)}
.cap5__ghost{border-color: var(--line); background: rgba(255,255,255,.55); color: var(--textA); box-shadow: var(--shadowSoft)}
body.style-neon .cap5__ghost{background: rgba(20,24,36,.72)}
.ncard{border-color: rgba(37,50,56,.08); background: rgba(255,255,255,.60); box-shadow: var(--shadowSoft)}
body.style-neon .ncard{background: rgba(20,24,36,.72); border-color: rgba(234,240,244,.10)}
.ncard b{color: var(--textA)}
.ncard span{color: var(--textB)}

.cap5__panel{border-radius: var(--radiusX); border-color: rgba(37,50,56,.08);
  background: linear-gradient(145deg, var(--cardA), var(--cardB));
  box-shadow: var(--shadow);
}
body.style-neon .cap5__panel{border-color: rgba(234,240,244,.10)}

.cap5__tabs{background: rgba(255,255,255,.56); border-bottom-color: rgba(37,50,56,.06)}
body.style-neon .cap5__tabs{background: rgba(20,24,36,.72); border-bottom-color: rgba(234,240,244,.10)}
.cap5Tab{border-color: var(--line); background: rgba(255,255,255,.70); color: var(--textB)}
body.style-neon .cap5Tab{background: rgba(20,24,36,.72)}
.cap5Tab.is-active{border-color: rgba(148,104,180,.42)}
.cap5__underline{background: var(--accent); box-shadow: 0 0 0 6px rgba(148,104,180,.16)}

.cap5Card{border-color: rgba(37,50,56,.08); background: rgba(255,255,255,.68); box-shadow: 0 20px 70px rgba(20,20,43,.10)}
body.style-neon .cap5Card{background: rgba(20,24,36,.72); border-color: rgba(234,240,244,.10)}
.cap5Card h3{color: var(--textA)}
.cap5Card p{color: var(--textB)}
.cap5Pills span{border-color: rgba(37,50,56,.08); background: rgba(255,255,255,.62); color: var(--textB)}
body.style-neon .cap5Pills span{background: rgba(20,24,36,.72); border-color: rgba(234,240,244,.10)}

.accH{border-color: var(--line); background: rgba(255,255,255,.70); color: var(--textA)}
body.style-neon .accH{background: rgba(20,24,36,.72)}
.accH small{color: var(--textB)}
.accI{border-color: var(--line); background: rgba(255,255,255,.62)}
body.style-neon .accI{background: rgba(20,24,36,.72)}
.accP{border-color: rgba(37,50,56,.08); background: rgba(255,255,255,.62)}
body.style-neon .accP{background: rgba(20,24,36,.72); border-color: rgba(234,240,244,.10)}
.chip{border-color: var(--line); background: rgba(255,255,255,.72); color: var(--textB)}
body.style-neon .chip{background: rgba(20,24,36,.72)}
.chip.is-on{border-color: rgba(148,104,180,.40); background: var(--accentSoft)}
body.style-neon .chip.is-on{background: rgba(120,88,255,.18); border-color: rgba(120,88,255,.45)}

.cap5Search input{border-color: var(--line); background: rgba(255,255,255,.72); color: var(--textA)}
body.style-neon .cap5Search input{background: rgba(20,24,36,.72)}
.svc5{border-color: rgba(37,50,56,.08); background: rgba(255,255,255,.70); color: var(--textA)}
body.style-neon .svc5{background: rgba(20,24,36,.72); border-color: rgba(234,240,244,.10)}
.svc5 em{border-color: rgba(148,104,180,.18); background: var(--accentSoft); color: var(--textB)}

.rev5Card{border-color: rgba(37,50,56,.08); background: linear-gradient(145deg, var(--cardA), var(--cardB)); box-shadow: var(--shadow)}
body.style-neon .rev5Card{border-color: rgba(234,240,244,.10)}
.rev5Name{color: var(--textA)}
.rev5Meta{color: var(--textB)}
.rev5Text{color: var(--textB)}
.rev5Tags span{border-color: rgba(37,50,56,.08); background: rgba(255,255,255,.62); color: var(--textB)}
body.style-neon .rev5Tags span{background: rgba(20,24,36,.72); border-color: rgba(234,240,244,.10)}
.rev5Dot.is-active{background: var(--accent); border-color: var(--accent)}

/* small polish */
.rev5Text:before{
  content:"“"; position:absolute; left:-2px; top:-10px;
  font-size:48px; line-height:1; opacity:.18; color: var(--accent);
}
/* Footer v7 (informative + premium) */
.footer.v7{padding:72px clamp(50px, 6vw, 100px) 22px; position:relative}
.footer.v7:before{
  content:""; position:absolute; inset:-160px 0 auto 0; height:420px; pointer-events:none;
  background:radial-gradient(860px 320px at 20% 30%, rgba(148,104,180,.14), transparent 60%),
             radial-gradient(720px 300px at 86% 60%, rgba(148,104,180,.10), transparent 62%);
}
.f7{border-radius:32px; border:1px solid var(--line);
  background:linear-gradient(145deg, var(--cardA), var(--cardB));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.f7__top{display:grid; grid-template-columns:1.05fr .95fr; gap:18px; padding:22px}
.f7__logo{display:flex; align-items:center; gap:10px; font-size:18px; color:var(--textA)}
.f7__dot{width:10px; height:10px; border-radius:99px; background:var(--accent); box-shadow:0 0 0 7px rgba(148,104,180,.16)}
.f7__desc{margin:12px 0 0; color:var(--textB); line-height:1.7; font-weight:750}
.f7__cta{display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap}
.f7__mini{color:var(--textB); font-weight:950; text-decoration:none}
.f7__mini:hover{color:var(--textA)}

.f7__cols{display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:14px}
.f7__col{border-radius:22px; border:1px solid var(--line); background:rgba(255,255,255,.55);
  padding:14px; box-shadow:var(--shadowSoft)}
body.style-neon .f7__col{background:rgba(20,24,36,.72)}
.f7__h{font-weight:950; color:var(--textA); margin-bottom:10px}
.f7__col a{display:block; padding:8px 0; text-decoration:none; color:var(--textB); font-weight:850}
.f7__col a:hover{color:var(--textA)}
.f7__contact{display:flex !important; gap:10px; align-items:center}
.f7__contact span{width:28px; height:28px; border-radius:12px; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.62)}
body.style-neon .f7__contact span{background:rgba(20,24,36,.72)}
.f7__contact b{font-weight:950}
.f7__social{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px}
.s7{border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.62);
  padding:10px; text-decoration:none; color:var(--textA); font-weight:950; display:flex; gap:10px; align-items:center; justify-content:center}
body.style-neon .s7{background:rgba(20,24,36,.72)}
.s7 span{width:30px; height:30px; border-radius:12px; display:grid; place-items:center; background:var(--accentSoft); border:1px solid rgba(148,104,180,.20)}
.s7 em{font-style:normal; font-size:12px; color:var(--textB); font-weight:900}
.f7__note{margin-top:10px; color:var(--textB); font-weight:800; line-height:1.5; font-size:13px}

.f7__bar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-top:1px solid var(--line); background:rgba(255,255,255,.42)}
body.style-neon .f7__bar{background:rgba(20,24,36,.62)}
.f7__copy{color:var(--textB); font-weight:850}
.f7__links{display:flex; gap:14px; flex-wrap:wrap}
.f7__link{color:var(--textB); text-decoration:none; font-weight:850}
.f7__link:hover{color:var(--textA)}
.f7__up{width:44px; height:44px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.60);
  font-weight:950; cursor:pointer; box-shadow:var(--shadowSoft); color:var(--textA)}
body.style-neon .f7__up{background:rgba(20,24,36,.72)}

@media (max-width: 1100px){
  .f7__top{grid-template-columns:1fr}
  .f7__cols{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .f7__cols{grid-template-columns:1fr}
  .f7__bar{flex-direction:column; align-items:flex-start}
  .f7__up{align-self:flex-end}
}


/* ===== Legacy Header & Footer Styles ===== */
.hamburger{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:31px;margin-right:50px;cursor:pointer}
.hamburger span{display:block;height:5px;width:100%;background:#253238;border-radius:3px;margin-bottom:5px}
.hamburger span:nth-child(1){width:100%}
.hamburger span:nth-child(2){width:75%;-webkit-transition:all 200ms ease-in-out;-o-transition:all 200ms ease-in-out;transition:all 200ms ease-in-out}
.hamburger span:nth-child(3){width:50%;-webkit-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;transition:all 400ms ease-in-out}
.hamburger:hover span{width:100%}
.hamburger:hover span:nth-child(1){-webkit-animation:burger-hover 1s infinite ease-in-out alternate;animation:burger-hover 1s infinite ease-in-out alternate}
.hamburger:hover span:nth-child(2){-webkit-animation:burger-hover 1s infinite ease-in-out alternate forwards 200ms;animation:burger-hover 1s infinite ease-in-out alternate forwards 200ms}
.hamburger:hover span:nth-child(3){-webkit-animation:burger-hover 1s infinite ease-in-out alternate forwards 400ms;animation:burger-hover 1s infinite ease-in-out alternate forwards 400ms}
.header__item-light{color:#fff}
.header__item-checkbox{font-size:18px;width:223px;height:47px;border:2px solid white;padding:10px 25px;border-radius:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:18px;font-weight:700}
.header__item-checkbox .theme{font-size:1em;background-color:rgba(0,0,0,0.7);border-radius:0.75em;-webkit-box-shadow:0.125em 0.125em 0 0.125em rgba(0,0,0,0.3) inset;box-shadow:0.125em 0.125em 0 0.125em rgba(0,0,0,0.3) inset;color:#fdea7b;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:auto;cursor:pointer;padding:0.15em;width:3em;height:1.5em;-webkit-transition:background-color 0.1s 0.3s ease-out, -webkit-box-shadow 0.1s 0.3s ease-out;transition:background-color 0.1s 0.3s ease-out, -webkit-box-shadow 0.1s 0.3s ease-out;-o-transition:background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;transition:background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;transition:background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out, -webkit-box-shadow 0.1s 0.3s ease-out;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.header__item-checkbox .theme:before,.header__item-checkbox .theme:after{content:"";display:block}
.header__item-checkbox .theme:before{background-color:#d7d7d7;border-radius:50%;width:1.2em;height:1.2em;-webkit-transition:background-color 0.1s 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:background-color 0.1s 0.3s ease-out, -webkit-transform 0.3s ease-out;-o-transition:background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;transition:background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;transition:background-color 0.1s 0.3s ease-out, transform 0.3s ease-out, -webkit-transform 0.3s ease-out;z-index:1}
.header__item-checkbox .theme:after{background:-webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(0, rgba(0,0,0,0.15))) 0 50%/50% 100%,repeating-linear-gradient(90deg, #bbb 0, #bbb, #bbb 20%, #999 20%, #999 40%) 0 50%/50% 100%,radial-gradient(circle at 50% 50%, #888 25%, transparent 26%);background:-o-linear-gradient(transparent 50%, rgba(0,0,0,0.15) 0) 0 50%/50% 100%,-o-repeating-linear-gradient(left, #bbb 0, #bbb, #bbb 20%, #999 20%, #999 40%) 0 50%/50% 100%,-o-radial-gradient(50% 50%, circle, #888 25%, transparent 26%);background:linear-gradient(transparent 50%, rgba(0,0,0,0.15) 0) 0 50%/50% 100%,repeating-linear-gradient(90deg, #bbb 0, #bbb, #bbb 20%, #999 20%, #999 40%) 0 50%/50% 100%,radial-gradient(circle at 50% 50%, #888 25%, transparent 26%);background-repeat:no-repeat;border:0.25em solid transparent;border-left:0.4em solid #d8d8d8;border-right:0 solid transparent;-webkit-transition:border-left-color 0.1s 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:border-left-color 0.1s 0.3s ease-out, -webkit-transform 0.3s ease-out;-o-transition:border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;transition:border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;transition:border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out, -webkit-transform 0.3s ease-out;-webkit-transform:translateX(-22.5%);-ms-transform:translateX(-22.5%);transform:translateX(-22.5%);-webkit-transform-origin:25% 50%;-ms-transform-origin:25% 50%;transform-origin:25% 50%;width:1.2em;height:1em}
.header__item-checkbox .theme:checked{background-color:rgba(0,0,0,0.45);-webkit-box-shadow:0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset;box-shadow:0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset}
.header__item-checkbox .theme:checked:before{background-color:currentColor;-webkit-transform:translateX(125%);-ms-transform:translateX(125%);transform:translateX(125%)}
.header__item-checkbox .theme:checked:after{border-left-color:currentColor;-webkit-transform:translateX(-2.5%) rotateY(180deg);transform:translateX(-2.5%) rotateY(180deg)}
.header__item-checkbox .theme:focus{outline:0}
.header{position:absolute;top:0;z-index:3;width:100%}
.header__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.header__item-right{color:var(--ink);opacity: 90%;}
.header__item-hiddencheckbox{display:none}
.header__btn{padding:10px 35px;background-color:#9468B4;font-size:20px;font-weight:600;border-radius:5px;background-color:transparent;border:2px solid var(--ink);}
.header__top{margin-top:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;max-width:100%;padding:0;background-color:transparent;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.header__logo{margin-right:50px; display:flex; align-items:center}
.header__logo img:nth-child(2){position:absolute;-webkit-transform:translateY(-150px);-ms-transform:translateY(-150px);transform:translateY(-150px)}
/* Lottie animated logo */
.header__logo-lottie{width:36px; height:36px; display:block; flex-shrink:0; line-height:0}
.header__logo-lottie svg{width:100%; height:100%; display:block}
/* Topoverlay logo container */
.topoverlay__logo{display:flex; align-items:center; gap:8px}
.topoverlay__logo-lottie{width:32px; height:32px; display:block; flex-shrink:0; line-height:0}
.topoverlay__logo-lottie svg{width:100%; height:100%; display:block}
.topoverlay__logo-text{width:64px; height:32px; display:block; flex-shrink:0; line-height:0}
.topoverlay__logo-text svg{width:100%; height:100%; display:block; filter: brightness(0) invert(1)}
/* Lottie text ("codart.pro") — canvas is 800×400, letters fill ~middle third vertically */
.header__logo-text{width:72px; height:36px; display:block; flex-shrink:0; line-height:0}
.header__logo-text svg{width:100%; height:100%; display:block}
/* Continuous spin after the reveal animation — matches demo.html */
@keyframes logoSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#lottie {
  animation: logoSpin 5s linear infinite;
  animation-delay: 1.65s;
  animation-fill-mode: backwards; /* don't apply spin state before delay fires */
}
#topoverlayLottie {
  animation: logoSpin 5s linear infinite;
  animation-delay: 1.65s;
  animation-fill-mode: backwards; /* don't apply spin state before delay fires */
}
.header__menu-list{display:-webkit-box;display:-ms-flexbox;display:flex; list-style: none;}
.header__menu-list li{margin-right:30px;position:relative}
.header__menu-list li a{font-size:18px}
.header__menu-list li a:before{content:"";width:0;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s}
.header__menu-list li a:hover:before{content:"";position:absolute;background-color:#9468B4;height:2px;width:100%;bottom:-5px}
.header__menu-list li a:hover{text-shadow:1px 0 0 #fff;-webkit-transform:scale(1.15);-ms-transform:scale(1.15);transform:scale(1.15);-webkit-transition:all 0.1s;-o-transition:all 0.1s;transition:all 0.1s}
.header__tel{font-weight:600;font-size:20px;margin-right:20px}
.mainscreen__logos{margin-bottom:40px;max-width:224px;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.mainscreen__logos a{width:26px}
.mainscreen__logos a svg{fill:#fff;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s}
.mainscreen__logos a svg:hover{fill:#9468B4}
.footer{padding-top:90px;padding-bottom:30px;color:rgba(37,50,56,.80);background-color:#ffffff;border-top:1px solid rgba(37,50,56,.10)}
.footer__top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:60px}
.footer__top img{filter:brightness(0) saturate(100%)}
.footer__top-divider{height:1px;margin-left:40px;width:100%;background-color:rgba(37,50,56,.12)}
.footer__inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:90px}
.footer__menu{font-size:16px}
.footer__menu-title{font-weight:700;text-transform:uppercase;margin-bottom:15px}
.footer__menu-list{font-weight:500;line-height:20px;list-style: none;padding-left: 0;}
.footer__menu-list li{margin-bottom:12px;position:relative}
.footer__menu-list li a:before{content:"";width:0;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s}
.footer__menu-list li a:hover:before{content:"";position:absolute;background-color:#9468B4;height:2px;width:100%;bottom:-5px}
.footer__menu-list li a:hover{text-shadow:none;-webkit-transform:scale(1.15);-ms-transform:scale(1.15);transform:scale(1.15);-webkit-transition:all 0.1s;-o-transition:all 0.1s;transition:all 0.1s}
.footer__menu-list-contacts{font-weight:500;line-height:20px;list-style: none;padding-left: 0;}
.footer__menu-list-contacts li{margin-bottom:12px}
.footer__menu-list-contacts li:nth-child(2){font-size:20px;font-weight:600}
.footer__bottom{text-align:center;font-weight:500;line-height:20px;padding-top:30px;border-top:1px solid}
.footer__bottom-title{margin-bottom:5px}
/* topoverlay — see unified block below */
.popup{position:fixed;background-color:rgba(37,50,56,0.8);z-index:85;width:100%;height:100%;top:0;display:none}
.header__brief{position:relative;margin-bottom:0}
.header__brief .header__item-checkbox{color:black;border-color:black}
.header__brief .header__item-light{color:black}
.header__brief .header__item-right{color:black}
.header__brief .header__btn{border-color:black}
.header__portfolio{margin-bottom:140px}
.header__portfolio .header__top{margin-top:0;padding-top:20px}
.pizza__header{margin-bottom:130px;text-align:center;margin-top:120px}
.pizza__inner-header{padding-bottom:20px}
.pizza__phone-header{-webkit-transform:translateY(150px);-ms-transform:translateY(150px);transform:translateY(150px)}
.header__page{margin-bottom:140px;min-height:100vh}
.header__page .header__top{margin-top:0;padding-top:20px}
.header__bottom{margin-top:105px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:95px}
.header__bottom .mainscreen__subtitle{max-width:600px}
.header__bottom .mainscreen__btn{margin-top:100px;padding:14px 71px;font-size:20px}
.header__bottom-hidden{display:none}
.header__bottom-title{font-size:80px;font-weight:700;margin-top:0;margin-bottom:40px}
.header__bottom-subtitle{font-weight:400;max-width:537px;font-size:32px;line-height:39px;margin-bottom:40px;width:100%}
.header__bottom-item-hidden{display:none}
.header__bottom-mobile .header__bottom-item .header__bottom-title{font-size:70px}
.header__bottom-mobile .header__bottom-item .header__bottom-subtitle{font-size:28px;line-height:34px;max-width:730px}
.branding__header-title{font-size:80px !important}
.redesign__header-subtitle{font-size:22px !important}
.tech__item .header__btn{background-color:#9468b4}
.calc__header{margin-bottom:0}
.header__site{min-height:75vh}
.header__site .pizza__title-sub{display:inline-block;text-align:center;top:-12px;left:-3px}
.site__header{margin-bottom:0}
.header__portfolio{margin-bottom:70px}
.portfolio__item .header__btn{display:inline-block;background-color:#9468B4;color:#fff;padding:14px 70px}
.page__order .header__btn{background-color:#9468b4;cursor:pointer}
.body__dark .portfolio__btn-inner .header__btn{background-color:transparent}
.body__dark .tech .header__btn{background-color:transparent}
.body__dark .header__page,.body__dark .header__portfolio{background:-o-linear-gradient(240.17deg, #c4c4c4 -1.81%, #544352 -1.8%, #35344d 74.21%);background:linear-gradient(209.83deg, #c4c4c4 -1.81%, #544352 -1.8%, #35344d 74.21%)}
.body__dark .header__page .header__btn,.body__dark .header__portfolio .header__btn{background:#9468b4;border-color:#9468b4 !important}
.body__dark .header__logo img:nth-child(1){display:none}
.body__dark .header__logo img:nth-child(2){-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);position:relative}
.body__dark .header__item-light{color:#fdea7b !important}
.body__dark .header__item-checkbox{border-color:#fff !important;color:#fff !important}
.body__dark .header__tel{color:#fff}
.body__dark .header__btn{color:#fff;border-color:#fff !important}
.body__dark .hamburger span{background-color:#fff}
.body__dark .popup input{background-color:#253238;color:#fff}
.body__dark .popup input::-webkit-input-placeholder{color:#fff}
.body__dark .popup input::-moz-placeholder{color:#fff}
.body__dark .popup input:-ms-input-placeholder{color:#fff}
.body__dark .popup input::-ms-input-placeholder{color:#fff}
.body__dark .popup input::placeholder{color:#fff}
.body__dark .popup .order{background-color:#253238;border:3px solid #eeeeee}
.body__dark .popup .order__links{color:#c894c4}
.body__dark .popup .order__btn{color:#c894c4}
.body__dark .popup .order__btn::after{background-image:url(../images/main/submit-button-dark.svg)}


/* ===== Hamburger ===== */
.hamburger{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:31px;margin-right:50px;cursor:pointer}
.hamburger span{display:block;height:5px;width:100%;background:#253238;border-radius:3px;margin-bottom:5px}
.hamburger span:nth-child(1){width:100%}
.hamburger span:nth-child(2){width:75%;-webkit-transition:all 200ms ease-in-out;-o-transition:all 200ms ease-in-out;transition:all 200ms ease-in-out}
.hamburger span:nth-child(3){width:50%;-webkit-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;transition:all 400ms ease-in-out}
.hamburger:hover span{width:100%}
.hamburger:hover span:nth-child(1){-webkit-animation:burger-hover 1s infinite ease-in-out alternate;animation:burger-hover 1s infinite ease-in-out alternate}
.hamburger:hover span:nth-child(2){-webkit-animation:burger-hover 1s infinite ease-in-out alternate forwards 200ms;animation:burger-hover 1s infinite ease-in-out alternate forwards 200ms}
.hamburger:hover span:nth-child(3){-webkit-animation:burger-hover 1s infinite ease-in-out alternate forwards 400ms;animation:burger-hover 1s infinite ease-in-out alternate forwards 400ms}
.body__dark .hamburger span{background-color:#fff}

/* ===== Topoverlay ===== */

/* ── Base visual (all sizes) ── */
.topoverlay {
  position: fixed;
  height: 100vh;
  top: 0;
  display: none;
  color: #fff;
  z-index: 4;
  width: 100%;
  background: linear-gradient(160deg, #2b3c44 0%, #1c2b32 100%);
  overflow: hidden;
}
/* Ambient purple glow — mirrors footer */
.topoverlay::before {
  content: "";
  position: absolute;
  top: -60px; right: 8%;
  width: 520px; height: 520px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(148,104,180,.15), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.topoverlay > * { position: relative; z-index: 1; }
.topoverlay__checkbox { display: none; }

/* ── Layout ── */
.topoverlay__wrapper {
  display: flex;
  height: 100vh;
}
/* Content area — grows to fill all space left of the CTA panel */
.topoverlay__inner {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding-left: clamp(20px, 2.5vw, 40px);
  display: flex;
  flex-direction: column;
}
.topoverlay__item {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Three content columns: gap-based, no space-between overflow */
.topoverlay__item-inner {
  display: flex;
  gap: clamp(32px, 5vw, 80px);
  flex-wrap: nowrap;
  padding-right: clamp(20px, 2.5vw, 40px); /* breathing room before CTA panel */
}

/* ── Header row (logo + close) ── */
.topoverlay__header {
  padding: 28px clamp(20px, 2.5vw, 40px) 22px 0;
  display: flex;
  align-items: center;
  margin-bottom: clamp(32px, 5vh, 60px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topoverlay__close {
  cursor: pointer;
  margin-right: clamp(24px, 4vw, 90px);
  opacity: .65;
  transition: opacity .15s, transform .2s;
}
.topoverlay__close:hover { opacity: 1; transform: rotate(90deg); }

/* ── Big decorative logo ── */
.topoverlay__biglogo { position: absolute; top: 539px; right: -250px; z-index: -1; opacity: .08; }

/* ── Primary nav (large links: Services, Projects…) ── */
.topoverlay__title {
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 28px);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.topoverlay__title a {
  color: rgba(255,255,255,.75);
  display: inline-block;
  transition: color .15s, transform .15s;
}
.topoverlay__title a:hover { color: #fff; transform: translateX(6px); }

/* ── Column section labels ("Services", "Contacts") ── */
.topoverlay__title-menu {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.30);
  margin-bottom: 18px;
}

/* ── Sub-navigation links ── */
.topoverlay__menu { font-size: 15px; }
.topoverlay__menu-list { list-style: none; padding: 0; margin: 0; }
.topoverlay__menu-list li { margin-bottom: 12px; position: relative; }
.topoverlay__menu-list li a::before { display: none !important; }
.topoverlay__menu-list li a {
  color: rgba(255,255,255,.55);
  font-weight: 500;
  display: inline-block;
  transition: color .15s, transform .15s;
}
.topoverlay__menu-list li a:hover { color: #fff; transform: translateX(5px); text-shadow: none; }

/* ── Contacts column ── */
.topoverlay__links { font-size: 15px; }
.topoverlay__contacts { list-style: none; padding: 0; margin: 0; }
.topoverlay__contacts li { margin-bottom: 10px; }
.topoverlay__contacts li a {
  color: rgba(255,255,255,.60);
  font-weight: 500;
  transition: color .15s;
  text-decoration: none;
}
.topoverlay__contacts li a:hover { color: #fff; }
/* Phone — prominent (2nd item) */
.topoverlay__contacts li:nth-child(2) a {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.3px;
  display: inline-block;
  margin-top: 6px;
  white-space: nowrap;
}

/* ── CTA order panel (right strip) ── */
.topoverlay__order {
  flex: 0 0 clamp(200px, 18vw, 260px);
  display: flex;
  flex-direction: column;
}
.topoverlay__order-item {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: flex .3s ease;
  text-decoration: none;
}
.topoverlay__order-item:hover { flex: 1.4; }
.topoverlay__order-phone {
  background: linear-gradient(160deg, #9168c8 0%, #6a3a90 100%);
}
.topoverlay__order-manage {
  background: linear-gradient(160deg, #3d5560 0%, #2b3c44 100%);
}
.topoverlay__order-title {
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 22px);
  color: #fff;
  position: relative;
  text-align: center;
  padding: 0 20px;
}
.topoverlay__order-phonetitle { margin-top: 16px; }

/* ===== /Topoverlay ===== */

/* ===== Legacy Footer ===== */

/* ── Base visual styles (all screen sizes) ── */
.footer {
  background: linear-gradient(160deg, #ffffff 0%, #f8f9fa 100%);
  position: relative;
  overflow: hidden;
  color: rgba(37,50,56,.80);
  border-top: 1px solid rgba(37,50,56,.10);
  box-shadow: 0 -4px 20px rgba(148,104,180,.06);
}
.footer::before {
  content: "";
  position: absolute;
  inset: -120px 0 auto 0;
  height: 420px;
  pointer-events: none;
  background: radial-gradient(860px 320px at 20% 30%, rgba(148,104,180,.16), transparent 60%),
             radial-gradient(720px 300px at 86% 60%, rgba(148,104,180,.12), transparent 62%);
  filter: blur(2px);
}
.footer::after {
  content: "";
  position: absolute;
  top: -100px; right: 6%;
  width: 480px; height: 480px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(148,104,180,.14), transparent 65%);
  pointer-events: none;
  filter: blur(45px);
}
.footer .container { position: relative; }
.footer__top-divider { display: none; }
.footer__menu-list { list-style: none; padding: 0; margin: 0; }
.footer__menu-list li a::before { display: none !important; }
.footer__menu-list li a {
  color: rgba(37,50,56,.65);
  font-weight: 500;
  display: inline-block;
  transition: color .15s, transform .15s;
}
.footer__menu-list li a:hover { color: rgba(37,50,56,.90); text-shadow: none; transform: translateX(4px); }
.footer__menu-list-contacts { list-style: none; padding: 0; margin: 0; }
.footer__menu-list-contacts li a { color: rgba(37,50,56,.70); font-weight: 500; transition: color .15s; }
.footer__menu-list-contacts li a:hover { color: rgba(37,50,56,.90); }
.footer__menu-list-contacts li:nth-child(2) a { font-weight: 700; color: rgba(37,50,56,.90); letter-spacing: -.3px; display: inline-block; }
.footer__menu-title { font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: rgba(37,50,56,.45); }
.footer__menu-logos {
  display: flex;
  gap: 8px;
  max-width: none;
  width: auto;
  justify-content: flex-start;
}
.footer__menu-logos a {
  border-radius: 12px;
  border: 1px solid rgba(37,50,56,.15);
  background: rgba(37,50,56,.04);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background .18s, border-color .18s, transform .18s;
}
.footer__menu-logos a:hover {
  background: rgba(148,104,180,.15);
  border-color: rgba(148,104,180,.35);
  transform: translateY(-2px);
}
.footer__menu-logos a svg { fill: rgba(37,50,56,.60); display: block; }
.footer__menu-logos a:hover svg { fill: rgba(37,50,56,.85); }
.footer__bottom {
  border-top: 1px solid rgba(37,50,56,.12);
  text-align: center;
  font-weight: 500;
  color: rgba(37,50,56,.50);
}
.footer__bottom-title { margin: 0; }

/* ── Desktop layout (≥ 769px) ── */
@media (min-width: 769px) {
  .footer { padding: clamp(48px, 5vw, 72px) clamp(50px, 6vw, 100px) 0; }
  .footer__top {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-bottom: 28px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .footer__top img { height: 26px; flex-shrink: 0; filter: brightness(0) saturate(100%); }
  .footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: clamp(24px, 4vw, 60px);
    margin-bottom: 0;
    padding-bottom: 40px;
  }
  .footer__menu { font-size: 14px; }
  .footer__menu-title { font-size: 10px; margin-bottom: 18px; }
  .footer__menu-list li { margin-bottom: 10px; }
  .footer__menu-list li a { font-size: 13px; }
  .footer__menu-list-contacts li { margin-bottom: 8px; }
  .footer__menu-list-contacts li a { font-size: 13px; }
  .footer__menu-list-contacts li:nth-child(2) a { font-size: 20px; margin-top: 6px; }
  .footer__menu-logos { margin-top: 20px; }
  .footer__menu-logos a { width: 36px; height: 36px; }
  .footer__menu-logos a svg { width: 16px; height: 16px; }
  .footer__bottom { padding: 18px 0; font-size: 12px; }
}

/* ===== /Legacy Footer ===== */

/* ===== Mobile Responsive ===== */

/* ── Shared mobile token overrides ── */
@media (max-width: 640px) {
  :root {
    --radius: clamp(14px, 3.5vw, 18px);
    --sp-lg: clamp(14px, 3.5vw, 20px);
    --sp-xl: clamp(18px, 4vw, 28px);
  }
}

/* ── Legacy header logo: always constrained ── */
.header__logo img { height: 28px; width: auto; max-width: none; }
/* The dark-mode logo (2nd img) is absolutely positioned — hide it so it can't push layout width */
.header__logo img:nth-child(2) { display: none; }

/* ── Legacy header: hide nav links & shrink on mobile ── */
@media (max-width: 860px) {
  .header__menu { display: none; }
  .hamburger { margin-right: 14px; }
  .header__logo { margin-right: 0; }
  /* Scale down the CTA button & phone between tablet and phone */
  .header__btn { font-size: 15px; padding: 8px 20px; }
  .header__tel { font-size: 15px; margin-right: 12px; }
}
@media (max-width: 560px) {
  .header__tel { display: none; }
  .header__btn { padding: 8px 16px; font-size: 14px; }
  .header__top { gap: 8px; }
  .header { padding: 0 clamp(32px, 6.5vw, 54px); }
  section { padding-left: clamp(32px, 6.5vw, 54px); padding-right: clamp(32px, 6.5vw, 54px); }
}

/* ── Hero ── */
@media (max-width: 640px) {
  /* Hide project widget card on small phones — hero text takes full width */
  .hero__card { display: none; }
  .hero {
    margin-top: clamp(32px, 8vw, 56px);
    padding-top: clamp(16px, 4vw, 26px);
    padding-bottom: clamp(12px, 3vw, 20px);
  }
}
@media (max-width: 480px) {
  h1 { font-size: clamp(24px, 7.5vw, 30px); letter-spacing: -.3px; }
  .hero__actions { flex-direction: column; gap: 10px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .metrics { gap: 8px; }
  .metric { padding: 8px 10px; flex: 1 1 calc(50% - 4px); }
  .hero p { font-size: var(--fs-base); }
}

/* ── Sections spacing on mobile/tablet ── */
@media (max-width: 640px) {
  section { padding-top: clamp(40px, 8vw, 56px); padding-bottom: clamp(32px, 6vw, 48px); }
}

/* ── Capabilities v5 ── */
@media (max-width: 640px) {
  .capabilities.v5 { padding-top: 36px; }
  .cap5__h { font-size: clamp(26px, 6.5vw, 34px) !important; line-height: 1.08; }
  /* Remove fixed height – let panel grow naturally */
  .cap5__panel { height: auto !important; }
  .cap5__body { max-height: 480px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
  .cap5__cta { flex-direction: column; gap: 10px; }
  .cap5__cta .btn, .cap5__cta .cap5__ghost { width: 100%; justify-content: center; text-align: center; }
  .cap5__nums { grid-template-columns: 1fr 1fr; }
}

/* ── Cases carousel controls (always in DOM, visible only on mobile) ── */
.cases__viewport { overflow: visible; }
.cases__nav { display: none; align-items: center; gap: 8px; }
.cases__btn {
  width: 40px; height: 40px; border-radius: 14px;
  border: 1px solid rgba(37,50,56,.12);
  background: rgba(255,255,255,.85);
  font-size: 20px; font-weight: 900; color: rgba(37,50,56,.75);
  cursor: pointer; box-shadow: 0 8px 22px rgba(20,20,43,.08);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, box-shadow .15s;
}
.cases__btn:hover { background: rgba(148,104,180,.10); border-color: rgba(148,104,180,.28); }
.cases__counter {
  font-size: 13px; font-weight: 700; color: rgba(37,50,56,.55);
  min-width: 36px; text-align: center;
}
.cases__dots { display: none; gap: 6px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.caseDot {
  width: 8px; height: 8px; border-radius: 99px;
  border: 1px solid rgba(37,50,56,.18); background: rgba(37,50,56,.10);
  cursor: pointer; padding: 0; transition: background .2s, width .2s;
}
.caseDot.is-active { background: rgba(148,104,180,.85); border-color: rgba(148,104,180,.85); width: 22px; }

/* Mobile: carousel mode */
@media (max-width: 640px) {
  .cases__nav { display: flex; }
  .cases__dots { display: flex; }

  .cases__viewport {
    overflow: hidden;
    border-radius: var(--radius);
  }

  /* Override grid → flex track */
  #casesTrack.cases {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    -webkit-user-select: none; user-select: none;
  }

  #casesTrack .case {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    border-radius: 0;
    /* remove box shadow on active slide's neighbour gap */
    margin: 0;
    transform: none !important; /* disable hover lift inside carousel */
  }
  #casesTrack .case:first-child { border-radius: var(--radius) 0 0 var(--radius); }
  #casesTrack .case:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
  /* single card: full radius */
  #casesTrack .case:only-child  { border-radius: var(--radius); }
}

/* ── Cases ── */
@media (max-width: 480px) {
  .case__media { height: clamp(140px, 40vw, 180px); }
}

/* ── Process steps ── */
@media (max-width: 480px) {
  .process { gap: 10px; }
  .step { padding: 14px; }
}

/* ── CTA section ── */
@media (max-width: 640px) {
  .cta__box {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .cta__box h2 { font-size: var(--fs-xl); }
}
@media (max-width: 480px) {
  .cta__box > div:last-child { width: 100%; }
  .cta__box > div:last-child a { width: 100%; justify-content: center; }
}

/* ── Reviews v5 ── */
@media (max-width: 480px) {
  .reviews.v5 { padding-top: 48px; padding-bottom: 32px; }
  .rev5__stage { height: clamp(190px, 45vw, 220px); }
  .rev5Card { width: calc(100% - 28px); padding: 14px; }
  .rev5Text { font-size: 14px; }
  .rev5__cta { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rev5__cta .btn { width: 100%; justify-content: center; }
}

/* ── Footer v7 ── */
@media (max-width: 480px) {
  .footer.v7 { padding-top: 40px; }
  .f7__cta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .f7__social { grid-template-columns: 1fr 1fr; }
  .f7__bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .f7__up { align-self: flex-end; }
}

/* ── Legacy footer (footer.ejs) mobile ── */
@media (max-width: 768px) {
  .footer { padding: 32px clamp(32px, 6.5vw, 54px) 0; }

  /* Logo centered, no gap-heavy top row */
  .footer__top {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .footer__top img { height: 24px; filter: brightness(0) saturate(100%); }

  /* Two service columns side-by-side, contacts full-width below */
  .footer__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .footer__menu {
    flex: 0 0 50%;
    font-size: 13px;
    padding: 0 12px 20px 0;
    box-sizing: border-box;
  }
  .footer__menu:last-child {
    flex: 0 0 100%;
    padding: 20px 0 0;
    border-top: 1px solid rgba(37,50,56,.12);
  }
  .footer__menu-title { font-size: 10px; margin-bottom: 12px; }
  .footer__menu-list li { margin-bottom: 8px; }
  .footer__menu-list li a { font-size: 12px; }
  .footer__menu-list-contacts li { margin-bottom: 8px; }
  .footer__menu-list-contacts li a { font-size: 12px; }
  .footer__menu-list-contacts li:nth-child(2) a { font-size: 16px; margin-top: 4px; }

  /* Social icons */
  .footer__menu-logos { margin-top: 14px; gap: 10px; }
  .footer__menu-logos a { width: 34px; height: 34px; }
  .footer__menu-logos a svg { width: 14px; height: 14px; }

  .footer__bottom { padding: 16px 0; font-size: 11px; }
}

@media (max-width: 400px) {
  .footer__menu { font-size: 12px; padding-right: 8px; }
  .footer__menu-list li a { font-size: 11px; }
  .footer__menu-list-contacts li:nth-child(2) a { font-size: 14px; }
}

/* ── Topoverlay: tablet (641–768px) ── */
@media (max-width: 768px) {
  .topoverlay__biglogo { display: none; }
  .topoverlay__close { margin-right: clamp(14px, 3vw, 20px); }
  .topoverlay__header { padding-top: 20px; margin-bottom: 20px; }
  /* Narrower CTA panel, tighter gaps */
  .topoverlay__order { flex: 0 0 160px; }
  .topoverlay__order-title { font-size: 14px; }
  .topoverlay__order-phonetitle { margin-top: 8px; }
  .topoverlay__order-item:hover { flex: 1; } /* disable grow-on-hover for touch */
  .topoverlay__item-inner { gap: clamp(20px, 3vw, 40px); }
  .topoverlay__title { font-size: clamp(16px, 2.2vw, 22px); margin-bottom: 14px; }
  .topoverlay__menu { font-size: 13px; }
  .topoverlay__links { font-size: 13px; }
}

/* ── Topoverlay: mobile (≤ 640px) — vertical stack ── */
@media (max-width: 640px) {
  /* Wrapper stacks content on top, CTA strip fixed at bottom */
  .topoverlay__wrapper { flex-direction: column; }

  /* Content area fills remaining height — no scroll */
  .topoverlay__inner {
    flex: 1 1 0;
    padding: 0 clamp(14px, 4vw, 22px);
    overflow: hidden;
  }

  /* Columns stack vertically */
  .topoverlay__item-inner {
    flex-direction: column;
    gap: 20px;
    padding-right: 0;
    padding-bottom: 16px;
  }

  /* Hide the big primary nav (Services, Projects, Clients…) — redundant on small screens */
  .topoverlay__item-inner > .topoverlay__menu:first-child { display: none; }

  /* Shrink the header logo */
  .topoverlay__logo img { height: 22px; width: auto; }

  /* Typography scale-down */
  .topoverlay__header { padding-top: 14px; margin-bottom: 16px; }
  .topoverlay__title { font-size: 20px; margin-bottom: 10px; }
  .topoverlay__menu { font-size: 14px; }
  .topoverlay__links { font-size: 14px; }
  .topoverlay__contacts li:nth-child(2) a { font-size: 15px; white-space: nowrap; }

  /* CTA strip — horizontal bar at the bottom, fixed height */
  .topoverlay__order {
    flex: 0 0 80px;
    flex-direction: row;
    min-height: 0;
  }
  .topoverlay__order-item {
    flex: 1;
    flex-direction: row;
    gap: 8px;
    padding: 0 12px;
    justify-content: center;
    align-items: center;
  }
  .topoverlay__order-item:hover { flex: 1; } /* no grow on mobile */
  .topoverlay__order-phonetitle { margin-top: 0; }
  .topoverlay__order-title { font-size: 13px; padding: 0; }
}

/* ── Value cards: already handled, just polish ── */
@media (max-width: 480px) {
  .value__card { min-height: 0; }
}

/* ── Sections generic ── */
@media (max-width: 480px) {
  section { padding-top: clamp(48px, 10vw, 64px); padding-bottom: clamp(40px, 8vw, 56px); }
  .section__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  h2, .section__title { font-size: clamp(22px, 6vw, 28px); }
}

/* ── Prevent long text overflow on phones ── */
@media (max-width: 480px) {
  .cap5__lead, .hero p, .section__sub, .rev5__ctaT { font-size: var(--fs-base); }
  .f7__desc { font-size: var(--fs-sm); }
}

/* ===== /Mobile Responsive ===== */

/* ===== Contact Modal ===== */
.cmodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(16px,2vw,32px)}
.cmodal[hidden]{display:none}
.cmodal__backdrop{position:absolute;inset:0;background:rgba(20,20,43,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cmodal__wrap{position:relative;z-index:1;width:100%;max-width:600px;animation:cmodalIn .28s cubic-bezier(.22,.61,.36,1) both}
@keyframes cmodalIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.cmodal__card{background:var(--card);border-radius:var(--radius);box-shadow:0 32px 80px rgba(20,20,43,.22),0 8px 24px rgba(148,104,180,.12);padding:clamp(28px,3.5vw,48px);position:relative;overflow:hidden}
.cmodal__card::before{content:"";position:absolute;top:-80px;right:-80px;width:280px;height:280px;border-radius:999px;background:radial-gradient(circle,rgba(148,104,180,.14),transparent 70%);pointer-events:none}
.cmodal__close{position:absolute;top:clamp(12px,1.2vw,18px);right:clamp(12px,1.2vw,18px);width:36px;height:36px;border-radius:999px;border:1px solid rgba(37,50,56,.12);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:color .18s,background .18s,border-color .18s}
.cmodal__close:hover{color:var(--ink);background:var(--bg);border-color:rgba(37,50,56,.22)}
.cmodal__header{margin-bottom:clamp(20px,2vw,28px)}
.cmodal__kicker{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.cmodal__kicker i{display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--accent)}
.cmodal__title{font-size:var(--fs-2xl);font-weight:800;color:var(--ink);margin:0 0 8px;line-height:1.2}
.cmodal__sub{font-size:var(--fs-sm);color:var(--muted);margin:0}
.cmodal__form{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,18px)}
.cmodal__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1vw,16px)}
@media(max-width:520px){.cmodal__row{grid-template-columns:1fr}}
.cmodal__field{display:flex;flex-direction:column;gap:6px}
.cmodal__label{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.cmodal__input{font-family:inherit;font-size:var(--fs-base);color:var(--ink);background:var(--bg);border:1.5px solid rgba(37,50,56,.12);border-radius:12px;padding:clamp(10px,.9vw,13px) clamp(12px,1vw,16px);transition:border-color .18s,box-shadow .18s;outline:none;resize:none;width:100%}
.cmodal__input::placeholder{color:var(--muted);opacity:.7}
.cmodal__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(148,104,180,.14)}
.cmodal__textarea{line-height:1.6}
.cmodal__actions{display:flex;align-items:center;gap:clamp(12px,1.2vw,18px);flex-wrap:wrap}
.cmodal__submit{padding:clamp(12px,1.1vw,14px) clamp(22px,2vw,30px);font-size:var(--fs-base)}
.cmodal__note{font-size:var(--fs-sm);color:var(--muted)}
.cmodal__success{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:clamp(16px,2vw,24px) 0}
.cmodal__success[hidden]{display:none}
.cmodal__success p{font-size:var(--fs-lg);font-weight:600;color:var(--ink);margin:0}
/* ===== /Contact Modal ===== */