/* ============================================================
   ABOSOFT TECHNOLOGY
   Color: White bg · Black text · Green (#2b9348 / #52b788) accent
   Font: Inter
============================================================ */

/* ============================================================
   TOPBAR (thin strip above nav)
============================================================ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
	--yellow: #FCFF36;
	--purple: #5103A8;
    --orange: #e8720c;
    --dark: #0e0e0e;
    --nav-height: 72px;
	
  }

  /* ─── NAVBAR ─────────────────────────────────────────── */
  .navbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 9999;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    background: rgba(0,0,0,0.3);
    transition: all .3s ease;
  }
  .logo { display: flex; align-items: center; text-decoration: none; }
  .logo svg { width: 130px; height: auto; }
  .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
  .nav-links a {
    color: #fff;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color .2s;
  }
  .nav-links a:hover { color: var(--orange); }
  .nav-right { display: flex; align-items: center; gap: 20px; }
  .nav-phone {
    display: flex; align-items: center; gap: 8px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px; font-weight: 600;
    text-decoration: none;
  }
  .btn-nav {
    background: var(--green);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 22px;
    border: none; cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s;
  }
  .btn-nav:hover { background: #4aa82f; }

  /* ─── HERO SLIDER ─────────────────────────────────────── */
  .hero-sliders {
    position: relative;
    width: 100%; height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: var(--dark);
  }

  .slide-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity .7s ease;
    z-index: 1;
  }
  .slide-item.active { opacity: 1; z-index: 2; }

  /* ─── SLIDE BACKGROUNDS ───────────────────────────────── */
  /* No background images — pure dark. Add url() here if you want them back */
  .slide-bg {
    position: absolute; inset: 0; z-index: 0;
  }
  .slide-bg::after {
    content: '';
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  /* Subtle per-slide tint using your brand colours — keeps slides visually distinct */
  .bg1::after { background: linear-gradient(135deg, rgba(14,14,14,1) 50%, rgba(92,185,60,0.06) 100%); }
  .bg2::after { background: linear-gradient(135deg, rgba(14,14,14,1) 50%, rgba(232,114,12,0.07) 100%); }
  .bg3::after { background: linear-gradient(135deg, rgba(14,14,14,1) 50%, rgba(92,185,60,0.06) 100%); }
  .bg4::after { background: linear-gradient(135deg, rgba(14,14,14,1) 50%, rgba(232,114,12,0.07) 100%); }
  .bg5::after { background: linear-gradient(135deg, rgba(14,14,14,1) 50%, rgba(92,185,60,0.06) 100%); }
  .bg6::after { background: linear-gradient(135deg, rgba(14,14,14,1) 50%, rgba(232,114,12,0.07) 100%); }

  /* ─── CAPTION ─────────────────────────────────────────── */
  .slide-caption-holder {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    padding-top: var(--nav-height);
    display: flex;
    align-items: center;
  }
  .slide-caption { max-width: 480px; }
  .slide-caption-inner {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity .9s .35s, transform .9s .35s cubic-bezier(0.34,1.2,0.64,1);
  }
  .slide-item.active .slide-caption-inner { opacity: 1; transform: translateX(0); }

  .subheadline {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 14px;
  }
  .headline {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(30px, 3.8vw, 52px);
    font-weight: 800;
    line-height: 0.92;
    color: #fff;
    margin-bottom: 18px;
  }
  .tagline {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px; font-weight: 300;
    color: rgba(255,255,255,.75);
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 400px;
  }
  .btns { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
  .btn-primary {
    background: var(--purple);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 26px;
    text-decoration: none;
    transition: background .2s, transform .15s;
    display: inline-block;
  }
  .btn-primary:hover { background: #7E34EF; transform: translateY(-1px); }
  .btn-primary:active { transform: scale(0.97); }

  /* ─── DIAGONAL SLASH MOCKUP ───────────────────────────── */
  .hero-mockup-wrap {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 55%;
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* Accent slash line */
  .diag-slash {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
      transparent 0%, var(--orange) 25%, var(--green) 75%, transparent 100%
    );
    transform: skewX(-4deg);
    z-index: 6;
    opacity: 0;
    transition: opacity .6s .5s;
  }
  .slide-item.active .diag-slash { opacity: 1; }

  .diag-glow {
    position: absolute;
    left: -40px; top: 10%;
    width: 100px; height: 80%;
    background: radial-gradient(ellipse at left, rgba(92,185,60,0.1), transparent 70%);
    z-index: 5;
    pointer-events: none;
  }

  /* ─── BROWSER FRAME ───────────────────────────────────── */
  .browser-mockup {
    position: relative;
    width: calc(100% - 32px);
    max-width: 680px;
    border-radius: 8px 8px 4px 4px;
    overflow: hidden;
    border: 1.5px solid rgba(255,255,255,0.1);
    box-shadow:
      -20px 0 60px rgba(0,0,0,0.7),
      0 20px 60px rgba(0,0,0,0.5),
      inset 0 0 0 0.5px rgba(255,255,255,0.04);
    transform: skewX(-2deg);
    opacity: 0;
    translate: 60px 0;
    transition: opacity .6s .3s, translate .7s .3s cubic-bezier(0.34,1.1,0.64,1);
  }
  .slide-item.active .browser-mockup {
    opacity: 1;
    translate: 0 0;
  }

  /* Chrome-style top bar */
  .browser-bar {
    height: 32px;
    background: #1c1c1c;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
  }
  .b-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .b-dot-r { background: #ff5f57; }
  .b-dot-y { background: #febc2e; }
  .b-dot-g { background: #28c840; }
  .b-url {
    flex: 1; height: 18px;
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
    margin: 0 10px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    overflow: hidden;
  }
  .b-url-text {
    font-family: 'Montserrat', monospace;
    font-size: 9px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* ─── DUAL SCREENSHOT LAYOUT ──────────────────────────── */
  /*
   * Two screenshots sit SIDE BY SIDE inside the browser frame.
   * Left panel  = second page (about / product / inner page)  ~45% width
   * Right panel = main/homepage  ~55% width
   * A thin divider line separates them.
   */
  .browser-screen {
    width: 100%;
    display: flex;
    flex-direction: row;
    background: #111;
    /* Fixed px height so children can do height:100% reliably */
    height: 500px;
    position: relative;
    overflow: hidden;
  }

  /* Thin centre divider */
  .browser-screen::before {
    content: '';
    position: absolute;
    left: 45%;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--orange), var(--green));
    z-index: 4;
    opacity: 0.7;
  }

  /* Both screenshot panels — explicit height so images fill fully */
  .ss-panel {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    height: 100%;
  }
  .ss-left  { width: 45%; }
  .ss-right { width: 55%; }

  /* Image fills the entire panel */
  .ss-panel img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 8s linear;
  }

  /* Slow pan on active slide */
  .slide-item.active .ss-left img  { transform: translateY(-5%); }
  .slide-item.active .ss-right img { transform: translateY(-8%); }

  /* Subtle label tags so visitors know which page is which */
  .ss-label {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.65);
    color: rgba(255,255,255,0.7);
    font-family: 'Montserrat', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    white-space: nowrap;
    z-index: 5;
  }

  /* Gloss overlay */
  .browser-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.025) 0%, transparent 55%, rgba(0,0,0,0.12) 100%);
    pointer-events: none;
    z-index: 6;
  }

  /* Bottom fade blends frame into dark background */
  .browser-mockup::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 25%;
    background: linear-gradient(to bottom, transparent, rgba(14,14,14,0.55));
    z-index: 7;
    pointer-events: none;
  }

  /* ─── SLIDE DOTS ──────────────────────────────────────── */
  .slide-dots {
    position: absolute;
    left: 24px; top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex; flex-direction: column;
    gap: 10px; align-items: center;
  }
  .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    cursor: pointer;
    transition: background .3s, transform .3s;
  }
  .dot.active { background: #fff; transform: scale(1.5); }

  /* ─── SLIDE COUNTER ───────────────────────────────────── */
  .slide-counter {
    position: absolute;
    left: 24px; bottom: 110px;
    z-index: 20;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,.45);
    letter-spacing: 0.06em;
  }
  .slide-counter span { color: #fff; }

  /* ─── PROGRESS BAR ────────────────────────────────────── */
  .slide-progress {
    position: absolute;
    bottom: 72px; left: 40px;
    width: 120px; height: 2px;
    background: rgba(255,255,255,0.15);
    z-index: 20; overflow: hidden; border-radius: 2px;
  }
  .slide-progress-fill {
    height: 100%; width: 0%;
    background: var(--green);
    transition: width 6s linear;
    border-radius: 2px;
  }
  .slide-progress-fill.running { width: 100%; }

  /* ─── CLIENT LOGO BAR ─────────────────────────────────── */
  .hero-logos-slider-wrapper {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 20;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
  }
  .hero-logos-slider {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    gap: 0;
  }
  .client-logo {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    border-right: 1px solid rgba(255,255,255,.12);
  }
  .client-logo:last-child { border-right: none; }
  .client-logo img, .client-logo svg {
    height: 34px; width: 100%;
    opacity: .5; filter: brightness(10);
    transition: opacity .2s;
  }
  .client-logo:hover img, .client-logo:hover svg { opacity: 1; }

  /* ─── RESPONSIVE ──────────────────────────────────────── */
  @media (max-width: 1000px) { .hero-mockup-wrap { width: 50%; } }
  @media (max-width: 860px) {
    .hero-mockup-wrap { display: none; }
    .slide-caption { max-width: 90%; }
    .nav-links, .nav-phone { display: none; }
    .headline { font-size: clamp(28px, 6vw, 40px); }

    /* Mobile: full-bleed project image from --slide-bg-img + dark overlay */
    .slide-bg::after,
    .bg1::after,
    .bg2::after,
    .bg3::after,
    .bg4::after,
    .bg5::after,
    .bg6::after {
      background-image:
        linear-gradient(135deg, rgba(14,14,14,0.68) 0%, rgba(14,14,14,0.5) 40%, rgba(14,14,14,0.75) 100%),
        var(--slide-bg-img) !important;
      background-size: cover !important;
      background-position: center top !important;
      background-repeat: no-repeat !important;
      background-color: #0e0e0e;
    }
  }
  @media (max-width: 600px) {
    .navbar { padding: 0 20px; }
    .slide-caption-holder { padding: 0 20px; padding-top: var(--nav-height); }
    .slide-progress { left: 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }