:root{
  --bg:#0b0f14;
  --panel:#0f1621;
  --panel2:#0c121b;
  --text:#e8eef7;
  --muted:#a9b6c7;
  --line:rgba(255,255,255,.10);
  --accent:#7cc4ff;
  --accent2:#9bffcf;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 700px at 15% 0%, rgba(124,196,255,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 15%, rgba(155,255,207,.12), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:inherit}
.container{max-width:1120px;margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;z-index:9999}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,15,20,.72);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{
  width:42px;height:42px;display:grid;place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(124,196,255,.32), rgba(155,255,207,.22));
  border:1px solid rgba(255,255,255,.14);
  font-weight:800;
}
.brand-text small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

.nav{display:flex;align-items:center;gap:12px}
.nav-link{
  text-decoration:none;
  color:var(--muted);
  padding:8px 10px;
  border-radius:12px;
}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav-link.active{color:var(--text);background:rgba(255,255,255,.08)}

.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
}

.button{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(124,196,255,.28), rgba(155,255,207,.18));
  text-decoration:none;
  font-weight:700;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.button:hover{filter:brightness(1.08)}
.button.small{padding:10px 12px;border-radius:12px;font-weight:700}
.button.ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:none;
}
.button.full{width:100%}

.hero{padding:52px 0 28px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start}
.hero-copy h1{font-size:40px;line-height:1.15;margin:0 0 12px}
.lead{color:var(--muted);font-size:18px;margin:0 0 18px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.badge{
  font-size:13px;color:var(--text);
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.fine{color:var(--muted);font-size:13px;margin:12px 0 0}

.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}
.hero-card h2{margin:0 0 8px;font-size:18px}
.hero-card p{color:var(--muted);margin:0 0 12px}

.section{padding:40px 0}
.section.alt{background: rgba(255,255,255,.03); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section.cta{padding:44px 0}
.cta-inner{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:22px;
  background: linear-gradient(135deg, rgba(124,196,255,.14), rgba(155,255,207,.10));
}

.page-hero{padding:40px 0 10px;border-bottom:1px solid var(--line)}
.page-hero h1{margin:0 0 8px;font-size:34px}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.card h3,.card h2{margin:0 0 8px}
.card p{color:var(--muted);margin:0 0 10px}
.text-link{color:var(--accent);text-decoration:none}
.text-link:hover{text-decoration:underline}
.price{font-weight:900;font-size:18px;color:var(--text)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.callout{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
  background: rgba(255,255,255,.04);
}
.big{font-size:22px;font-weight:900;margin:6px 0 10px}
.note{
  margin-top:18px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  border-radius:14px;
  padding:12px 14px;
  color:var(--muted);
}

.prose{max-width:860px}
.prose h2{margin-top:28px}
.checklist{list-style:none;padding:0;margin:12px 0}
.checklist li{margin:10px 0;padding-left:26px;position:relative;color:var(--muted)}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent2);font-weight:900}

.form{display:grid;gap:12px}
label{display:grid;gap:6px;color:var(--muted);font-size:13px}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color: rgba(124,196,255,.6)}

.faq details{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding:12px 14px;
  margin:10px 0;
}
.faq summary{cursor:pointer;font-weight:800}
.faq p{color:var(--muted);margin:10px 0 0}

.site-footer{
  border-top:1px solid var(--line);
  padding:26px 0 36px;
  background: rgba(0,0,0,.10);
}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px}
.footer-grid p{margin:8px 0 0}

@media (max-width: 980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;align-items:stretch;position:absolute;right:18px;top:64px;width:min(320px, calc(100vw - 36px));padding:12px;background:rgba(11,15,20,.96);border:1px solid var(--line);border-radius:16px}
  .nav-toggle{display:inline-flex}
  .footer-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .hero-copy h1{font-size:34px}
}

:root { --handle-size: 44px; }

    body {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      margin: 0;
      padding: 24px;
      background: #0b0b0c;
      color: #fff;
    }

    .wrap {
      max-width: 900px;
      margin: 0 auto;
    }

    .ba {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9; /* change if your images are different */
      border-radius: 16px;
      overflow: hidden;
      background: #222;
      user-select: none;
      touch-action: none; /* important for mobile drag */
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
    }

    /* Base image (bottom) */
    .ba img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* keeps it pretty; use "contain" if needed */
      pointer-events: none;
    }

    /* Top image gets clipped by width */
    .ba .top {
      width: 50%;          /* default split */
      overflow: hidden;
      height: 100%;
      position: absolute;
      inset: 0 auto 0 0;
    }

    .ba .top img { position: absolute; inset: 0; }

    /* Handle */
    .ba .handle {
      position: absolute;
      top: 0;
      left: calc(50% - var(--handle-size) / 2);
      height: 100%;
      width: var(--handle-size);
      display: grid;
      place-items: center;
      cursor: ew-resize;
    }

    .ba .handle::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 3px;
      background: rgba(255,255,255,.85);
      border-radius: 999px;
      box-shadow: 0 0 0 1px rgba(0,0,0,.35);
    }

    .ba .knob {
      width: var(--handle-size);
      height: var(--handle-size);
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      color: #111;
      display: grid;
      place-items: center;
      font-weight: 700;
      box-shadow: 0 8px 20px rgba(0,0,0,.45);
    }

    .labels {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      opacity: .9;
      font-size: 14px;
    }

    /* Optional: little corner badges */
    .badge {
      position: absolute;
      top: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      background: rgba(0,0,0,.45);
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(6px);
    }
    .badge.left { left: 12px; }
    .badge.right { right: 12px; }
	}
	body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:#0b0b0c;
      color:#fff;
    }
    .wrap{
      max-width:1100px;
      margin:0 auto;
      padding:28px 18px 60px;
    }
    h1{
      font-size: clamp(22px, 2.2vw, 34px);
      margin:0 0 8px;
      letter-spacing:-0.02em;
    }
    .sub{
      margin:0 0 18px;
      opacity:.78;
      line-height:1.5;
    }

    /* Masonry via CSS columns (simple + great-looking) */
    .gallery{
      column-count: 1;
      column-gap: 14px;
    }
    @media (min-width: 640px){ .gallery{ column-count: 2; } }
    @media (min-width: 960px){ .gallery{ column-count: 3; } }

    .card{
      break-inside: avoid;
      margin: 0 0 14px;
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      position: relative;
      cursor: zoom-in;
      transform: translateZ(0);
    }
    .card img{
      width:100%;
      height:auto;
      display:block;
      transition: transform .25s ease, opacity .25s ease;
      opacity:.98;
    }
    .card:hover img{
      transform: scale(1.02);
      opacity: 1;
    }

    /* subtle overlay label (optional) */
    .tag{
      position:absolute;
      left:12px;
      bottom:12px;
      padding:6px 10px;
      font-size:12px;
      border-radius:999px;
      background: rgba(0,0,0,.45);
      border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(6px);
      opacity:0;
      transform: translateY(6px);
      transition: .2s ease;
    }
    .card:hover .tag{
      opacity:1;
      transform: translateY(0);
    }

    /* Lightbox */
    .lightbox{
      position: fixed;
      inset: 0;
      display:none;
      place-items:center;
      background: rgba(0,0,0,.78);
      backdrop-filter: blur(10px);
      padding: 24px;
      z-index: 999;
    }
    .lightbox.open{ display:grid; }

    .lightbox-inner{
      width:min(1100px, 96vw);
      max-height: 86vh;
      border-radius: 18px;
      overflow:hidden;
      background:#111;
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 20px 60px rgba(0,0,0,.6);
      position: relative;
    }
    .lightbox img{
      width:100%;
      height: 86vh;
      max-height: 86vh;
      object-fit: contain;
      display:block;
      background:#0b0b0c;
    }
    .close{
      position:absolute;
      top:10px;
      right:10px;
      width:42px;
      height:42px;
      border-radius:999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.45);
      color:#fff;
      font-size:18px;
      cursor:pointer;
      display:grid;
      place-items:center;
    }
    .close:hover{ background: rgba(255,255,255,.12); }
	}