:root{
  --bg:#000000;
  --panel:#0f1116;
  --panel2:#0c0e13;
  --line:#2b2f3a;
  --line2:#242833;
  --text:#ffffff;
  --muted:#c9ceda;
  --muted2:#9aa2b2;
  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size:15px;
  background: #000000;
  color: var(--text);
  overflow-x:hidden;
}
.js body{
  opacity:0;
  transition: opacity .35s ease;
}
.js body.page-ready{opacity:1}
.js body.page-exit{opacity:0; transition: opacity .25s ease}
@media (prefers-reduced-motion: reduce){
  .js body{transition:none}
  .js body.page-exit{transition:none}
}

a{color:inherit;text-decoration:none}
.container{width:min(1120px, calc(100% - 48px)); margin:0 auto}

.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:16px; top:16px; width:auto; height:auto; padding:10px 12px;
  border-radius:12px; background: rgba(255,255,255,.06); border:1px solid var(--line);
  z-index: 1000;
}

#starfield{position:fixed; inset:0; z-index:-2; width:100%; height:100%; display:block}

/* NAV */
.nav{position:sticky; top:0; z-index:50; background: rgba(0,0,0,.72); backdrop-filter: blur(10px)}
.nav .container{width:100%;max-width:none;margin:0;padding:0 32px}
.nav-inner{display:flex;align-items:center;gap:14px;padding:12px 0}
.nav-divider{height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent)}

.brand{display:flex;align-items:center;gap:12px}
.mark{width:46px;height:46px;border-radius:16px;background: transparent;border:none;overflow:hidden;position:relative}
.mark img{width:100%;height:100%;display:block;object-fit:cover}
.logo-img{
  width:100%;height:100%;display:block;object-fit:cover;
  animation: logoSpin 1.4s ease both;
  animation-delay:.2s;
}
.logo-part{
  position:absolute;
  width:17px;height:17px;border-radius:6px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  opacity:0;
  animation: logoAssemble 1.2s ease forwards;
}
.logo-part.part-a{top:7px;left:7px;animation-delay:.05s}
.logo-part.part-b{top:7px;right:7px;animation-delay:.12s}
.logo-part.part-c{bottom:7px;left:14px;animation-delay:.2s}
.brand-text{display:flex;flex-direction:column;line-height:1.2;gap:2px}
.bn{font-weight:500;font-size:17px;letter-spacing:.2px}
.bs-line{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.bs{font-weight:350;font-size:14px;color:var(--muted2);margin-top:0}
.brand-quote{
  font-size:12px;
  font-style:italic;
  color:var(--muted2);
  letter-spacing:.2px;
}

.links{margin-left:auto;display:flex;gap:40px}
.links a{
  font-weight:300;
  color:var(--muted);
  opacity:.92;
  letter-spacing:.15px;
}
.links a:hover{opacity:1}
.links a.active{
  color:var(--text);
  position:relative;
  opacity:1;
}
.links a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-9px;
  height:2px;
  background: rgba(255,255,255,.85);
}

.burger{
  display:none;
  margin-left:auto;
  width:44px;height:40px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  cursor:pointer;
}
.burger span{
  display:block; height:1px; margin:7px 10px;
  background: rgba(255,255,255,.78);
}
.mobile{
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(5,7,12,.86);
  padding: 10px 0;
}
.mobile a{
  display:block;
  padding: 12px 22px;
  color: var(--muted);
  font-weight:300;
}
.mobile a:hover{color: var(--text)}
.mobile a.active{color: var(--text); position:relative}
.mobile a.active::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  bottom:6px;
  height:1px;
  background: rgba(255,255,255,.85);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--text);
  font-weight:450;
  cursor:pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.btn:hover{transform: translateY(-1px); border-color:#3a4050}
.btn-primary{background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04))}
.btn-ghost{background: transparent}
.btn-mini{
  padding:6px 10px;
  font-size:12px;
  border-radius:12px;
}

/* HERO */
.hero{padding:46px 0 14px}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  align-items:start;
}
.hero-text{
  border:none;
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
}
h1{margin:0 0 8px;font-size: clamp(28px, 3.8vw, 46px);line-height:1.06;letter-spacing:-.02em;font-weight:600}
.hero-title{position:relative;font-weight:350;perspective:800px}
.headline-swap{
  display:inline-block;
  font-weight:300;
  transform-origin: 50% 50%;
  transition: opacity .32s ease, transform .32s ease;
}
.headline-swap.swap-out{opacity:0; transform: translateY(6px)}
.headline-swap.flip{animation: flipClock .5s ease}
.sub{margin:0;color:var(--muted);font-weight:350;line-height:1.5;max-width:68ch}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.cta-row .btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.10));
  border-color: rgba(255,255,255,.35);
}

.hero-gallery{
  margin:0 0 14px;
  display:flex;
  justify-content:center;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0));
  mask-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0));
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.hero-gallery::-webkit-scrollbar{display:none}
.gallery-track{
  display:flex;
  gap:34px;
  width:max-content;
  padding:0 28px;
  margin:0 auto;
  justify-content:center;
}
.gallery-img{
  width: 230px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius:12px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.02);
  opacity:0;
  --parallax-y: 0px;
  --orbit-x: 0px;
  --orbit-y: 0px;
  --reveal-y: 14px;
  transform: translate3d(calc(var(--orbit-x)), calc(var(--parallax-y) + var(--reveal-y) + var(--orbit-y)), 0);
  transition: transform .6s ease, opacity .6s ease;
  will-change: transform;
  scroll-snap-align: center;
}
.gallery-img:hover{
  transform: translate3d(calc(var(--orbit-x)), calc(var(--parallax-y) + var(--orbit-y)), 0) scale(1.08);
  z-index:2;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}
.gallery-img.in{
  opacity:1;
  --reveal-y: 0px;
}
.gallery-divider{margin:18px 0 14px}
.gallery-modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.82);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:120;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}
.gallery-modal.open{opacity:1;pointer-events:auto}
.gallery-modal-inner{
  position:relative;
  max-width:90vw;
  max-height:85vh;
}
.gallery-modal img{
  width:auto;
  max-width:90vw;
  max-height:85vh;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  display:block;
}
.gallery-modal-close{
  position:absolute;
  top:-14px;
  right:-14px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.6);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:16px;
}


.reviews{padding: 12px 0 18px}
.reviews-carousel{
  overflow:hidden;
  padding:6px 0;
  display:flex;
  justify-content:center;
  -webkit-mask-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1) 12%, rgba(255,255,255,1) 88%, rgba(255,255,255,0));
  mask-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1) 12%, rgba(255,255,255,1) 88%, rgba(255,255,255,0));
}
.reviews-track{
  display:flex;
  gap:36px;
  width:max-content;
  padding:0 22px;
  align-items:center;
  justify-content:center;
  will-change: transform;
}
.review-img{
  width:110px;
  height:70px;
  object-fit: contain;
  border-radius:10px;
  border:none;
  background: transparent;
}

@keyframes logoAssemble{
  0%{opacity:0; transform: scale(0.6) rotate(-20deg)}
  70%{opacity:1; transform: scale(1.05) rotate(10deg)}
  100%{opacity:0; transform: scale(0.9) rotate(0)}
}
@keyframes logoSpin{
  0%{opacity:0; transform: scale(0.8) rotate(-90deg)}
  60%{opacity:1; transform: scale(1.02) rotate(8deg)}
  100%{opacity:1; transform: scale(1) rotate(0)}
}
@keyframes flipClock{
  0%{transform: rotateX(0deg)}
  50%{transform: rotateX(90deg)}
  100%{transform: rotateX(0deg)}
}
@keyframes nodePulse{
  0%, 100%{box-shadow: 0 0 0 6px rgba(255,255,255,.02), 0 0 16px rgba(255,255,255,.08)}
  50%{box-shadow: 0 0 0 9px rgba(255,255,255,.04), 0 0 22px rgba(255,255,255,.12)}
}
@keyframes cardGlow{
  0%{box-shadow: var(--shadow); transform: translateY(0)}
  50%{box-shadow: 0 24px 90px rgba(0,0,0,.65); transform: translateY(-2px)}
  100%{box-shadow: var(--shadow); transform: translateY(0)}
}

#timeline.section{
  padding-top: 20px;
}
#timeline .hero-gallery{
  margin:12px 0 42px;
}
#warum.section{
  padding-top: 46px;
}

.mini-proofs{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
}
.mini{border:1px solid var(--line2);border-radius:16px;padding:10px;background: rgba(0,0,0,.18)}
.mini .k{display:block;color:var(--muted2);font-size:12px;font-weight:350}
.mini .v{display:block;margin-top:4px;font-weight:450;color:var(--text)}

/* Simulator */
.panel{border:1px solid var(--line);background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));border-radius: var(--radius);box-shadow: var(--shadow);overflow:hidden}
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line2)}
.panel-title{font-weight:450;color:var(--muted)}
.seg{display:flex;gap:8px}
.seg-btn{
  padding:8px 10px;border-radius:12px;border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  color: var(--muted);
  font-weight:450;
  cursor:pointer;
}
.seg-btn.active{color: var(--text);border-color:#3a4050;background: rgba(255,255,255,.04)}
.panel-body{padding:12px}
.panel-foot{display:flex;gap:10px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--line2);background: rgba(0,0,0,.14)}

.bubble{border:1px solid var(--line2);background: rgba(0,0,0,.18);border-radius:16px;padding:10px;margin-bottom:8px}
.who{font-size:12px;color:var(--muted2);font-weight:350}
.txt{margin-top:8px;color:var(--text);font-weight:350;line-height:1.6}
.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background: rgba(255,255,255,.02);margin-top:8px}
.kv span:first-child{color:var(--muted2);font-size:12px;font-weight:350}
.kv span:last-child{font-weight:450}
.typing-indicator{display:inline-flex;align-items:center;gap:8px;color:var(--muted2);font-size:12px}
.typing-label{letter-spacing:.2px}
.typing-dots{display:inline-flex;gap:4px}
.typing-dots span{
  width:4px;height:4px;border-radius:50%;
  background: rgba(255,255,255,.75);
  animation: typingDot 1.1s infinite ease-in-out;
}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}

@keyframes typingDot{
  0%, 80%, 100%{opacity:.25; transform: translateY(0)}
  40%{opacity:1; transform: translateY(-2px)}
}
.sim-log .logline{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:12.5px;border:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);border-radius:12px;padding:10px;margin-bottom:8px;color: var(--text)
}
.sim-log .tag{color: var(--muted2); font-weight:450}
.sim-log .muted{color: var(--muted); opacity:.9}
.hidden{display:none}

/* Media */
.media{margin:0}
.media-frame{border:1px solid var(--line);border-radius: var(--radius);overflow:hidden;background: rgba(255,255,255,.02);box-shadow: var(--shadow)}
.img{width:100%;height:auto;display:block}
.cap{margin-top:10px;color:var(--muted2);font-size:12px;font-weight:350}

/* Dividers */
.section-divider{height:1px;background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);margin: 18px 0}

/* Sections */
.section{padding: 22px 0 32px}
.page-spaced .section:first-of-type{padding-top:46px}
.section-head{margin-bottom:10px}
.section-head h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.01em}
.section-head h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.01em}
.section-head h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}
.section-head p{margin:6px 0 0;color:var(--muted);line-height:1.5;font-weight:350}
.section-head.center{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.section-head.center h2,
.section-head.center p{text-align:center}
.section-head.center p{max-width:520px;margin:6px auto 0}
.section-head.right{
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  width:100%;
}
.section-head.right h2,
.section-head.right p{text-align:right}
.section-head.right p{max-width:520px;margin:6px 0 0 auto}

/* Services */
.services-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}
.service-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.service-card:hover{transform: translateY(-1px);border-color:#3a4050;background: rgba(255,255,255,.03)}
.service-card h3{margin:0 0 8px;font-size:16px;font-weight:600}
.service-card p{margin:0;color:var(--muted);line-height:1.5;font-weight:350}
.service-compact .service-card{width:100%}
.service-collapsed{
  appearance:none;
  text-align:left;
  cursor:pointer;
  display:grid;
  gap:8px;
  font: inherit;
  color: inherit;
}
.service-collapsed:focus-visible{
  outline:2px solid rgba(255,255,255,.5);
  outline-offset:2px;
}
.service-more{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  color: var(--text);
}
.service-detail-list{
  margin:8px 0 0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.5;
  font-weight:350;
}
.service-detail-example{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: var(--muted);
}
.service-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:120;
}
.service-modal[hidden]{display:none}
.service-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}
.service-modal-card{
  position:relative;
  width:min(680px, calc(100% - 32px));
  max-height: calc(100vh - 80px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,10,10,.92);
  border-radius:18px;
  padding:16px;
  box-shadow: var(--shadow);
  z-index:1;
  display:grid;
  gap:10px;
}
.service-modal-close{
  position:absolute;
  top:10px;
  right:12px;
  border:none;
  background: transparent;
  color: var(--text);
  font-size:20px;
  cursor:pointer;
}
.service-modal-summary{
  color: var(--muted);
  margin:0;
}
.service-modal-body{display:grid;gap:10px}
.service-modal-actions{display:flex;gap:8px;justify-content:flex-end}
body.modal-open{overflow:hidden}
.service-examples{margin-top:12px}
.tag{display:inline-block;color:var(--muted2);font-size:12px;font-weight:350}
.example-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.example{
  position:relative;
  padding:6px 10px 6px 24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color:var(--muted);
  font-size:12px;
  font-weight:350;
}
.example::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:3px;
  transform: translateY(-50%);
  border:1px solid rgba(255,255,255,.3);
  background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.05));
  box-shadow: 0 0 0 3px rgba(255,255,255,.04);
}
.service-meta{margin-top:8px;color:var(--muted2);font-size:12px;font-weight:350}
.service-detail{margin-top:6px;color:var(--muted);line-height:1.5;font-weight:350}
.mini-case{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: var(--muted);
  font-size:12px;
  font-weight:350;
  line-height:1.5;
}


/* Steps */
.steps{
  display:grid;
  gap:10px;
}
.steps.right{justify-items:end}
.steps.right .step-card{
  text-align:right;
  grid-template-columns: 1fr auto;
}
.steps.right .step-num{order:2}
.step-card{
  display:grid;
  grid-template-columns: auto 1fr;
  gap:12px;
  align-items:start;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  width:min(100%, 640px);
  padding:12px;
  box-shadow: var(--shadow);
}
.step-num{
  width:28px;height:28px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color: var(--text);
  font-weight:600;
  font-size:12px;
}
.step-card h3{margin:0 0 4px;font-size:14px;font-weight:600}
.step-card p{margin:0;color:var(--muted);line-height:1.5;font-weight:350}

/* Offers */
.offer-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.offer-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  display:grid;
  gap:8px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.offer-card:hover{transform: translateY(-1px);border-color:#3a4050;background: rgba(255,255,255,.03)}
.offer-card.highlight{border-color: rgba(255,255,255,.35)}
.offer-title{font-size:16px;font-weight:600;margin:0}
.offer-price{font-size:18px;font-weight:600;color:var(--text)}
.offer-note{font-size:12px;color:var(--muted2);font-weight:350}
.offer-list{margin:0;padding-left:18px;color:var(--muted);line-height:1.5;font-weight:350}

/* Shop */
.shop-hero{position:relative;overflow:hidden;padding-top:28px}
.shop-hero::before{
  content:"";
  position:absolute;
  inset:-20% -10% auto -10%;
  height:320px;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), rgba(0,0,0,0) 60%),
              radial-gradient(circle at 80% 30%, rgba(120,170,255,.18), rgba(0,0,0,0) 62%);
  pointer-events:none;
  z-index:0;
}
.shop-hero-grid{display:grid;grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr);gap:24px;align-items:center;position:relative;z-index:1}
.shop-hero-copy{display:grid;gap:12px}
.shop-hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.shop-hero-note{margin:0;color:var(--muted2);font-size:12px}
.shop-hero-meta{display:flex;gap:12px;flex-wrap:wrap}
.shop-metric{display:flex;flex-direction:column;gap:4px;min-width:90px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background: rgba(0,0,0,.18)}
.shop-metric strong{font-size:16px;font-weight:600}
.shop-metric span{font-size:12px;color:var(--muted2);font-weight:350}
.shop-proof-line{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted2)}
.shop-proof-line strong{font-size:14px;font-weight:600;color:var(--text);padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background: rgba(255,255,255,.08)}
.shop-proof-row{display:flex;flex-wrap:wrap;gap:8px}
.shop-proof-pill{padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background: rgba(0,0,0,.18);font-size:11px;color:var(--muted2);font-weight:350}
.shop-hero-media{
  position:relative;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 40%, rgba(0,0,0,.28) 100%);
  box-shadow: var(--shadow);
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.shop-hero-img{width:min(320px, 70%);height:auto;filter: drop-shadow(0 30px 40px rgba(0,0,0,.55));animation: shopFloat 6s ease-in-out infinite}
.shop-orb{
  position:absolute;
  width:260px;height:260px;border-radius:50%;
  background: radial-gradient(circle, rgba(120,170,255,.45), rgba(0,0,0,0) 65%);
  top:18%;right:8%;
  animation: shopPulse 7s ease-in-out infinite;
}
.shop-orb.secondary{
  width:180px;height:180px;
  background: radial-gradient(circle, rgba(255,200,120,.35), rgba(0,0,0,0) 65%);
  top:55%;left:12%;
  animation-delay: -2s;
}
.shop-hero-chip{
  position:absolute;
  top:18px;left:18px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.32);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.shop-hero-chip.alt{top:auto;bottom:18px;left:18px}

.shop-feature-grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap:12px;margin-top:16px}
.shop-feature-card{border:1px solid var(--line);background: rgba(255,255,255,.02);border-radius: var(--radius);padding:14px;box-shadow: var(--shadow);display:grid;gap:6px}
.shop-feature-card h3{margin:0;font-size:15px;font-weight:600}
.shop-feature-card p{margin:0;color:var(--muted);line-height:1.5;font-weight:350}

.shop-info-grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap:12px;margin-top:16px}
.shop-info{padding:16px;display:grid;gap:12px}
.shop-info h2{margin:0;font-size:16px;font-weight:600}
.shop-info-list{margin:0;padding-left:18px;color:var(--muted);line-height:1.5;font-weight:350}
.shop-requirements{display:grid;gap:8px;margin-top:10px}
.shop-require-list{margin:0;padding-left:18px;color:var(--muted);line-height:1.5;font-weight:350}

.shop-compare{margin-top:16px;padding:16px;display:grid;gap:12px}
.shop-compare-grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap:12px}
.shop-compare h3{margin:0 0 8px;font-size:15px;font-weight:600}

.shop-grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap:14px;margin-top:14px}
.shop-card{border:1px solid var(--line);background: rgba(255,255,255,.02);border-radius: var(--radius);padding:14px;box-shadow: var(--shadow);display:grid;gap:10px;transition: transform .2s ease, border-color .2s ease, background .2s ease}
.shop-card:hover{transform: translateY(-2px);border-color:#3a4050;background: rgba(255,255,255,.03)}
.shop-card.highlight{border-color: rgba(255,255,255,.45)}
.shop-card-media{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.3));
  height:180px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
}
.shop-card-img{width:140px;height:auto;transform: translateY(10px);filter: drop-shadow(0 18px 26px rgba(0,0,0,.45))}
.shop-card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.shop-title{margin:6px 0 0;font-size:16px;font-weight:600}
.shop-tagline{margin:6px 0 0;color:var(--muted);font-size:12px;font-weight:350;line-height:1.5}
.shop-price{display:grid;justify-items:end;gap:2px;text-align:right}
.shop-price span{font-size:18px;font-weight:600}
.shop-price small{font-size:11px;color:var(--muted2);font-weight:350}
.shop-list{margin:0;padding-left:18px;color:var(--muted);line-height:1.5;font-weight:350}
.shop-card-proof{font-size:11px;color:var(--muted2);display:flex;align-items:center;gap:6px}
.shop-card-proof::before{content:"";width:8px;height:8px;border-radius:3px;border:1px solid rgba(255,255,255,.35);background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.05))}
.shop-actions{display:flex;flex-wrap:wrap;gap:8px}
.shop-support{margin-top:16px;padding:16px;display:grid;gap:6px}
.shop-support h3{margin:0;font-size:15px;font-weight:600}
.shop-support p{margin:0;color:var(--muted);line-height:1.5;font-weight:350}

.shop-cta{position:relative;overflow:hidden;box-shadow: 0 18px 40px rgba(0,0,0,.35)}
.shop-cta::after{
  content:"";
  position:absolute;
  inset:-40% 0 auto -120%;
  height:200%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 45%, rgba(255,255,255,0) 100%);
  opacity:0;
  transform: translateX(0);
  transition: transform .6s ease, opacity .6s ease;
}
.shop-cta:hover::after{opacity:1;transform: translateX(220%)}
.shop-cta:hover{box-shadow: 0 18px 45px rgba(120,170,255,.25)}
.shop-download{border-color: rgba(255,255,255,.12)}
.shop-download:hover{border-color: rgba(255,255,255,.35)}

.shop-promo{padding-top:10px}
.shop-promo-grid{display:grid;grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr);gap:18px;align-items:center}
.shop-promo-copy{display:grid;gap:10px}
.shop-promo-copy h2{margin:0;font-size:24px;font-weight:600}
.shop-promo-copy p{margin:0;color:var(--muted);line-height:1.6;font-weight:350}
.shop-promo-media{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 40%, rgba(0,0,0,.28) 100%);
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:240px;
  box-shadow: var(--shadow);
}
.shop-promo-media img{width:min(200px, 70%);filter: drop-shadow(0 18px 26px rgba(0,0,0,.45))}

.btn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

@keyframes shopFloat{
  0%{transform: translateY(0)}
  50%{transform: translateY(-12px)}
  100%{transform: translateY(0)}
}
@keyframes shopPulse{
  0%{transform: scale(1);opacity:.7}
  50%{transform: scale(1.05);opacity:.45}
  100%{transform: scale(1);opacity:.7}
}

/* CTA */
.cta-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* FAQ */
.faq-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.faq-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
}
.faq-card h3{margin:0 0 6px;font-size:15px;font-weight:600}
.faq-card p{margin:0;color:var(--muted);line-height:1.5;font-weight:350}

/* Stack */
.stack-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
}
.stack-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  display:grid;
  gap:10px;
}
.stack-card h3{margin:0;font-size:16px;font-weight:600}
.stack-card p{margin:0;color:var(--muted);line-height:1.5;font-weight:350}
.stack-steps{display:grid;gap:8px}
.stack-step{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start}
.stack-step strong{color:var(--text);font-weight:600}
.stack-step-num{
  width:24px;height:24px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color: var(--text);
  font-weight:600;
  font-size:11px;
}
.stack-pill-list{display:flex;flex-wrap:wrap;gap:8px}
.stack-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color:var(--muted);
  font-size:12px;
  font-weight:350;
}
.stack-pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.3);
  background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.05));
}

/* Apps */
.apps-grid{display:grid;gap:16px}
.app-card{
  display:grid;
  grid-template-columns: 84px 1fr;
  gap:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  align-items:center;
}
.app-icon{
  width:84px;height:84px;border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;
}
.app-icon img{width:70%;height:70%;object-fit:contain}
.app-content h3{margin:0 0 8px;font-size:17px;font-weight:600}
.app-content p{margin:0;color:var(--muted);line-height:1.5;font-weight:350}

/* Admin settings */
.link-manager{margin-top:12px}
.links-head{color:var(--muted2);font-size:12px;font-weight:350;margin-bottom:8px}
.links-list{display:grid;gap:10px}
.link-row{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap:10px;
  align-items:center;
}
.link-row input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  color: var(--text);
  font-weight:350;
}
.link-remove{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.link-remove:hover{color:var(--text);border-color:#3a4050}

/* Timeline */
.timeline{position:relative;padding: 2px 0; --p: 0%}
.rail{
  position:absolute; left:50%; top:0; bottom:0; width:1px; transform: translateX(-0.5px);
  background:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(255,255,255,.16) 12%,
      rgba(255,255,255,.62) var(--p),
      rgba(255,255,255,.16) calc(var(--p) + 1px),
      transparent 100%);
  opacity:.95;
}
.titem{position:relative;display:grid;grid-template-columns: 1fr 1fr;align-items:start;padding: 0}
.titem + .titem{margin-top:6px}
.node{
  position:absolute; left:50%; top: 20px; width:12px;height:12px;border-radius:999px;
  border:1px solid #3a4050;background: rgba(255,255,255,.06);transform: translateX(-50%);
  box-shadow: 0 0 0 6px rgba(255,255,255,.012);
  transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.titem.active .node{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 7px rgba(255,255,255,.02), 0 0 18px rgba(255,255,255,.08);
  animation: nodePulse 2.4s ease-in-out infinite;
}
.titem.active .tcard{animation: cardGlow .6s ease}

.tcard{
  border:1px solid var(--line);background: rgba(255,255,255,.02);
  border-radius: var(--radius);padding:12px;box-shadow: var(--shadow);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.timeline .tcard{margin-top:-14px}
.tcard:hover{transform: translateY(-1px);border-color:#3a4050;background: rgba(255,255,255,.03)}
.tcard h3{margin:0 0 6px;font-size:15px;font-weight:600}
.tcard p{margin:0;color:var(--muted);line-height:1.5;font-weight:350}
.list{margin:6px 0 0;padding-left:18px;color:var(--muted);line-height:1.5;font-weight:350}
.tcard-actions{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.out{
  margin-top:8px;display:flex;justify-content:space-between;gap:10px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:8px;color: var(--muted2);font-size:12px;font-weight:350
}
.out span:last-child{color:var(--text);font-weight:450}
.inner-media{margin-top:12px;border:1px solid rgba(255,255,255,.06);border-radius: 16px;overflow:hidden;background: rgba(0,0,0,.18)}

.left .tcard{grid-column:1; margin-right:14px}
.right .tcard{grid-column:2; margin-left:14px}

@media (min-width: 981px){
  #svc-process{position:relative; top:0}
  #svc-apps{position:relative; top:0}
  #svc-content{position:relative; top:0}
}

/* Reveal */
.js .reveal{opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease}
@media (min-width: 981px){
  .js .titem.left.reveal{transform: translate(-14px, 10px)}
  .js .titem.right.reveal{transform: translate(14px, 10px)}
}
.js .reveal.in{opacity:1; transform: translateY(0)}
.typewriter{position:relative}
.typing::after{
  content:"";
  display:inline-block;
  width:0;
  height:1em;
  margin-left:2px;
  border-right:2px solid rgba(255,255,255,.78);
  animation: caret 0.9s steps(2, start) infinite;
}
.typed::after{display:none}

@keyframes caret{
  0%, 49% {opacity:1}
  50%, 100% {opacity:0}
}

/* Why */
.why-grid{display:grid;grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.why-slider{
  overflow:hidden;
  position:relative;
  padding:4px 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0));
  mask-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0));
}
.why-track{
  display:flex;
  gap:12px;
  width:max-content;
  align-items:stretch;
  animation: whySlide 36s linear infinite;
}
.why-slider.reverse .why-track{animation-direction: reverse}
.why-track:hover{animation-play-state:paused}
.why{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  min-width:260px;
}
.why h3{margin:0 0 6px;font-size:15px;font-weight:600}
.why p{margin:0;color:var(--muted);line-height:1.65;font-weight:350}

@keyframes whySlide{
  0%{transform: translateX(0)}
  100%{transform: translateX(-50%)}
}

/* Deliverables */
.card{border:1px solid var(--line);background: rgba(255,255,255,.02);border-radius: var(--radius);box-shadow: var(--shadow)}
.deliver{padding:12px}
.deliver.card{max-width:560px;margin:0 auto}
.deliver ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.deliver li{display:flex;justify-content:space-between;gap:12px;padding:8px;border:1px solid rgba(255,255,255,.06);border-radius:16px;background: rgba(0,0,0,.16)}
.deliver li span:first-child{font-weight:450}
.deliver li span:last-child{color:var(--muted);font-weight:350}

/* Contact */
.contact-center{display:grid;gap:14px}
.contact-center.split{grid-template-columns:1fr 1fr;align-items:stretch}
.agent-widget{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0;
  min-height:100%;
  height:100%;
  background: transparent;
  border:none;
  box-shadow:none;
}
.agent-stage{
  position:relative;
  flex:1;
  min-height:420px;
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:16px;
}
.agent-figure{
  position:relative;
  width:min(60%, 225px);
  animation: agentFloat 3.2s ease-in-out infinite;
  will-change: transform;
}
.agent-figure img{
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
  animation: agentSway 4.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.agent-figure.laugh{
  animation: agentFloat 3.2s ease-in-out infinite;
}
.agent-figure.laugh img{
  animation: agentSway 4.4s ease-in-out infinite, agentLaugh .6s ease-in-out 3;
}
.agent-bubble{
  position:absolute;
  top:14px;
  left:50%;
  transform: translateX(-50%);
  min-height:70px;
  max-width:90%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,10,10,.78);
  color: var(--text);
  font-size:13px;
  line-height:1.5;
  text-align:center;
  box-shadow: var(--shadow);
  animation: bubbleFloat 5.6s ease-in-out infinite;
}
.agent-bubble.laugh{
  animation: bubblePop .6s ease-in-out 2;
}
.agent-bubble::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  width:14px;
  height:14px;
  background: rgba(10,10,10,.78);
  border-left:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  transform: translateX(-50%) rotate(45deg);
}
.agent-caption{
  text-align:center;
  color: var(--muted2);
  font-size:12px;
  font-weight:350;
}
@keyframes agentFloat{
  0%{transform: translateY(0)}
  50%{transform: translateY(-8px)}
  100%{transform: translateY(0)}
}
@keyframes agentSway{
  0%{transform: rotate(-1deg)}
  50%{transform: rotate(1.5deg)}
  100%{transform: rotate(-1deg)}
}
@keyframes agentLaugh{
  0%{transform: translateX(0)}
  25%{transform: translateX(-4px)}
  50%{transform: translateX(4px)}
  75%{transform: translateX(-3px)}
  100%{transform: translateX(0)}
}
@keyframes bubbleFloat{
  0%{transform: translateX(-50%) translateY(0)}
  50%{transform: translateX(-50%) translateY(-5px)}
  100%{transform: translateX(-50%) translateY(0)}
}
@keyframes bubblePop{
  0%{transform: translateX(-50%) scale(1)}
  50%{transform: translateX(-50%) scale(1.04)}
  100%{transform: translateX(-50%) scale(1)}
}
.contact-form{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow);
  padding:12px;
  max-width: none;
  margin: 0;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.contact-form label{display:block;color:var(--muted2);font-size:12px;font-weight:350;margin-bottom:8px}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;margin-top:6px;padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);background: rgba(0,0,0,.22);
  color: var(--text);outline:none;font-weight:350
}
.contact-form textarea{resize:none}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:#3a4050}
.form-row{display:grid;grid-template-columns: 1fr 1fr; gap:10px}
.form-row:nth-child(2), .form-row:nth-child(3), .form-row:nth-child(4){grid-template-columns:1fr}
.form-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.fine{color:var(--muted2);font-size:12px;font-weight:350}
.contact-meta{
  max-width: none;
  margin: 0;
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  background: rgba(0,0,0,.16);
  padding: 10px 14px;
  display:grid;
  gap:10px;
}
.contact-meta > div{display:flex;justify-content:space-between;gap:12px;color:var(--muted2);font-weight:350}
.contact-meta > div span:last-child{color:var(--text)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace}

/* Admin */
.admin-grid{margin-top:12px}
.admin-grid{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))}
.admin-panel{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.admin-panel > summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:600;
  font-size:14px;
  color: var(--text);
}
.admin-panel > summary::-webkit-details-marker{display:none}
.admin-panel > summary::after{
  content:"+";
  color: var(--muted2);
  font-weight:600;
}
.admin-panel[open] > summary::after{content:"-"}
.admin-panel-body{
  padding:0 14px 14px;
  display:grid;
  gap:10px;
}
.admin-fields{display:grid;gap:10px}
.admin-fields label{display:block;color:var(--muted2);font-size:12px;font-weight:350}
.admin-fields input,.admin-fields textarea,.admin-fields select{
  width:100%;margin-top:6px;padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);background: rgba(0,0,0,.22);
  color: var(--text);outline:none;font-weight:350
}
.admin-fields textarea{resize:vertical}
.admin-fields.split{grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))}
.admin-fields .admin-span{grid-column: 1 / -1}
.admin-subpanel{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px 12px;
  background: rgba(0,0,0,.16);
  display:grid;
  gap:10px;
}
.admin-subpanel + .admin-subpanel{margin-top:10px}
.admin-subpanel h4{margin:0;font-size:13px;font-weight:600;color:var(--text)}
.admin-fields input[type="checkbox"]{
  width:auto;
  margin:0 8px 0 0;
  accent-color:#fff;
}
.admin-actions{margin-top:10px;display:flex;justify-content:flex-end}
.admin-actions-split{justify-content:space-between;gap:8px;align-items:center}
.admin-error{color:#ff7676;font-size:12px;margin:8px 0 0}
.admin-toggle-grid{display:grid;gap:12px;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))}
.admin-toggle{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px 12px;
  background: rgba(0,0,0,.2);
}
.admin-toggle label{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--text);
  font-weight:450;
}
.admin-toggle .fine{margin:6px 0 0}
.admin-chat{margin-top:18px;padding:14px;display:flex;flex-direction:column;gap:12px}
.admin-chat-head h3{margin:0 0 6px;font-size:16px;font-weight:600}
.admin-chat-head .fine{margin:0}
.admin-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 6px;
}
.admin-summary-item{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.2);
  color: var(--muted);
  font-size:12px;
  font-weight:350;
}
.key-status{display:flex;align-items:center;gap:8px}
.status-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.2);
  box-shadow: 0 0 0 4px rgba(255,255,255,.03);
}
.status-dot.ok{background:#22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18)}
.status-dot.bad{background:#ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.18)}
.admin-chat-log{
  min-height:220px;
  max-height:360px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
  background: rgba(0,0,0,.24);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-chat-msg{display:flex}
.admin-chat-msg.user{justify-content:flex-end}
.admin-chat-bubble{
  max-width:88%;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  color: var(--text);
  font-size:12.5px;
  line-height:1.5;
}
.admin-chat-msg.user .admin-chat-bubble{
  background: rgba(255,255,255,.9);
  color:#111;
}
.admin-chat-bubble.system{
  background: rgba(255,255,255,.04);
  color: var(--muted2);
  font-size:12px;
}
.admin-chat-form{
  display:grid;
  gap:10px;
}
.admin-chat-form textarea{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  color: var(--text);
  font-weight:350;
}
.admin-chat-actions{display:flex;justify-content:flex-end}
.admin-workflows,
.admin-examples{margin-top:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.admin-workflow-list{display:flex;flex-wrap:wrap;gap:8px}
.admin-workflow{
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
}
.admin-example-list{display:grid;gap:8px}
.admin-example{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: var(--text);
  border-radius:12px;
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
  font-size:12.5px;
}
.admin-example:hover{border-color:#3a4050}

/* Chat widget */
.chat-widget{
  position:fixed;
  right:22px;
  top:50%;
  transform: translateY(-50%);
  z-index:140;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chat-fab{
  position:relative;
  width:58px;
  height:58px;
  border-radius:999px;
  border:1px solid #111;
  background: linear-gradient(180deg, #ffffff, #e9e9e9);
  color:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 18px 46px rgba(0,0,0,.35);
  cursor:pointer;
}
.chat-fab svg{width:24px;height:24px}
.chat-fab-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #f0f0f0;
  font-weight:600;
}
.chat-panel{
  position:absolute;
  right:72px;
  top:50%;
  width:340px;
  max-height:78vh;
  background: #0b0b0b;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  overflow:visible;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform: translateY(-50%) scale(.98);
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
.chat-widget.open .chat-panel{
  opacity:1;
  transform: translateY(-50%) scale(1);
  pointer-events:auto;
}
.chat-widget.open .chat-fab{
  opacity:0;
  pointer-events:none;
}
.chat-avatar{
  position:absolute;
  right:18px;
  top:-150px;
  width:140px;
  z-index:2;
  pointer-events:none;
  animation: avatarFloat 5.4s ease-in-out infinite, avatarTilt 8.2s ease-in-out infinite;
}
.chat-avatar img{
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.45));
}
.chat-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background: rgba(0,0,0,.75);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.chat-logo{
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  object-fit:cover;
}
.chat-title{display:flex;flex-direction:column;font-weight:500}
.chat-title span{font-size:13.5px}
.chat-title small{color:var(--muted2);font-size:11px}
.chat-close{
  margin-left:auto;
  border:none;
  background: transparent;
  color: var(--muted2);
  font-size:20px;
  cursor:pointer;
}
.chat-body{
  flex:1;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-y:auto;
  background: #0f0f0f;
}
.chat-msg{display:flex}
.chat-msg.user{justify-content:flex-end}
.chat-bubble{
  max-width:78%;
  padding:10px 12px;
  border-radius:16px;
  background: #1a1a1a;
  color: var(--text);
  font-size:12.5px;
  line-height:1.5;
  border:1px solid rgba(255,255,255,.08);
}
.chat-msg.user .chat-bubble{
  background: #ffffff;
  color:#111;
  font-weight:500;
  border-color: rgba(255,255,255,.2);
}
.chat-bubble.chat-typing{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.chat-bubble.chat-typing span{
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.75);
  animation: chatTyping 1.1s infinite ease-in-out;
}
.chat-bubble.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-bubble.chat-typing span:nth-child(3){animation-delay:.3s}
.chat-suggestions{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.08);
  background: #0f0f0f;
}
.chat-suggest{
  border:1px solid rgba(255,255,255,.14);
  background: #111;
  color:#fff;
  border-radius:18px;
  padding:10px 12px;
  font-size:12.5px;
  text-align:left;
  cursor:pointer;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}
.chat-input{
  display:flex;
  gap:8px;
  padding:10px 12px 12px;
  border-top:1px solid rgba(255,255,255,.08);
  background: #0f0f0f;
}
.chat-input input{
  flex:1;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding:10px 12px;
  font-size:12.5px;
}
.chat-input input::placeholder{color: rgba(255,255,255,.5)}
.chat-send{
  width:38px;
  height:38px;
  border-radius:999px;
  border:none;
  background: #ffffff;
  color:#111;
  font-size:16px;
  cursor:pointer;
}

@keyframes chatTyping{
  0%, 80%, 100%{opacity:.3; transform: translateY(0)}
  40%{opacity:1; transform: translateY(-2px)}
}
@keyframes avatarFloat{
  0%, 100%{transform: translateY(0)}
  50%{transform: translateY(-10px)}
}
@keyframes avatarTilt{
  0%, 100%{transform: rotate(0deg)}
  50%{transform: rotate(-2.5deg)}
}

/* Accordion */
.accordion{display:grid;gap:12px}
.accordion-item{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow);
}
.accordion-toggle{
  width:100%;
  padding:12px 14px;
  background: transparent;
  border:0;
  color: var(--text);
  font-weight:450;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}
.accordion-toggle::after{
  content:"+";
  color: var(--muted2);
  font-weight:450;
}
.accordion-toggle[aria-expanded="true"]::after{content:"-"}
.accordion-panel{padding: 0 14px 14px}

/* Footer */
.footer{padding:26px 0}
.footer .container{width:100%;max-width:none;margin:0;padding:0 32px}
.footer-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  color: var(--muted2);
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:16px;
  flex-wrap:nowrap;
}
.foot-brand{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}
.foot-brand .sig{margin-left:0}
.sig{
  height:92px;
  width:auto;
  margin-left:8px;
  vertical-align:middle;
  opacity:.85;
}
.social-icons .sig{
  margin:0;
  height:92px;
  width:auto;
  transform: translateY(4px);
}
.foot-links a{color:var(--muted2);font-weight:350}
.foot-links a:hover{color:var(--text)}
.foot-links{align-self:flex-end}
.social-icons{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  align-self:flex-end;
}
.foot-links{align-self:flex-end}
.sig-link{display:inline-flex; align-items:center}
.social-icons a{
  width:52px;height:52px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  background: transparent;
  color: var(--muted);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.social-icons svg{
  width:26px;height:26px;
  fill:none;
  stroke: currentColor;
  stroke-width:1.6;
}
.social-icons a:hover{transform: translateY(-1px);color:var(--text)}

/* Modern columns */
.card,
.contact-form,
.service-card,
.app-card,
.why,
.faq-card,
.offer-card,
.shop-card,
.tcard,
.step-card,
.cta-card,
.media-frame{
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 40%, rgba(0,0,0,.28) 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}

/* Responsive */
@media (max-width: 1020px){
  .hero-grid{grid-template-columns: 1fr; }
  .mini-proofs{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .gallery-img{width:200px}
  .services-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .offer-grid{grid-template-columns:1fr}
  .shop-hero-grid{grid-template-columns:1fr}
  .shop-hero-media{min-height:300px}
  .shop-promo-grid{grid-template-columns:1fr}
  .app-card{grid-template-columns:1fr}
}
@media (max-width: 980px){
  .links{display:none}
  .burger{display:inline-flex; align-items:center; justify-content:center}
  .nav .container{padding:0 20px}
  .footer .container{padding:0 20px}
  .rail{left:18px}
  .node{left:18px; transform:none}
  .titem{grid-template-columns:1fr}
  .titem + .titem{margin-top:8px}
  .left .tcard, .right .tcard{grid-column:1; margin:0 0 0 42px}
  .form-row{grid-template-columns:1fr}
  .contact-center.split{grid-template-columns:1fr}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .js .reveal{transition:none}
  .btn{transition:none}
  .tcard{transition:none}
  .gallery-img{opacity:1; --reveal-y:0px; transition:none}
  .logo-img,.logo-part{animation:none}
  .why-track{animation:none}
  .chat-avatar{animation:none}
  .agent-figure{animation:none}
  .agent-figure.laugh{animation:none}
  .agent-figure img{animation:none}
  .agent-bubble{animation:none}
  .agent-bubble.laugh{animation:none}
  .shop-hero-img{animation:none}
  .shop-orb{animation:none}
}

@media (max-width: 640px){
  .gallery-img{width:170px}
  .review-img{width:96px;height:60px}
  .footer-inner{flex-direction:column;text-align:center;align-items:center}
  .foot-brand{align-items:center}
  .foot-links{justify-self:center}
  .link-row{grid-template-columns:1fr}
  .link-remove{width:100%}
  .nav .container{padding:0 16px}
  .footer .container{padding:0 16px}
  .chat-widget{right:12px;top:50%}
  .chat-panel{width:min(360px, calc(100vw - 32px)); right:12px}
  .chat-avatar{width:110px; right:12px; top:-120px}
  .agent-stage{min-height:320px}
  .agent-figure{width:70%}
  .shop-card-top{flex-direction:column;align-items:flex-start}
  .shop-price{justify-items:start;text-align:left}
  .shop-hero-img{width:min(240px, 80%)}
  .shop-card-media{height:160px}
}