:root{
  --bg: #1a0f08;
  --bg-alt: #2d1810;
  --surface: #fffaf5;
  --text: #1a0f08;
  --muted: #78716c;
  --primary: #ea580c;
  --primary-700: #c2410c;
  --accent: #fff7ed;
  --ring: rgba(234,88,12,.25);
  --container: 1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: var(--surface);
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
@media(min-width:768px){.container{padding:0 24px}}
.section{padding:48px 0}
@media(min-width:768px){.section{padding:64px 0}}
.section-alt{background:#f8fafc}
.section-accent{background:var(--accent)}
.center{text-align:center}

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #e5e7eb;
  padding:12px 0;
}
@media(min-width:768px){
  .site-header{padding:16px 0}
}
.site-header .container{display:flex; justify-content:space-between; align-items:center; gap:12px}
.brand{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:18px; color:var(--text); text-decoration:none; letter-spacing:-0.01em; flex-shrink:0}
@media(min-width:768px){
  .brand{font-size:20px; gap:10px}
}
.brand::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--primary)}
@media(min-width:768px){
  .brand::before{width:12px; height:12px}
}

.hero{padding:48px 0}
@media(min-width:768px){.hero{padding:64px 0}}
@media(min-width:960px){.hero{padding:80px 0}}
.hero .container{display:grid; gap:24px; align-items:center}
@media(min-width:768px){.hero .container{gap:32px}}
@media(min-width:960px){.hero .container{grid-template-columns:1.2fr .8fr}}
.hero__content h1{font-size: clamp(28px, 8vw, 56px); line-height:1.1; margin:0 0 16px; font-weight:800; letter-spacing:-0.02em}
@media(min-width:768px){.hero__content h1{margin:0 0 20px}}
.lead{font-size: clamp(16px, 4vw, 22px); color:var(--muted); margin:0 0 24px; line-height:1.6}
@media(min-width:768px){.lead{margin:0 0 28px}}
.mockup{width:100%; height:auto; filter:drop-shadow(0 10px 24px rgba(2,6,23,.15)); border-radius:12px; object-fit:cover; aspect-ratio:4/3}

.animation-container{
  background:linear-gradient(135deg,#fff 0%,#fff7ed 100%);
  padding:16px;
  border-radius:12px;
  box-shadow:0 4px 24px rgba(234,88,12,.1);
  min-height:280px;
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:center;
  position:relative;
  overflow:visible;
}
@media(min-width:768px){
  .animation-container{
    padding:24px;
    gap:12px;
    min-height:320px;
    border-radius:16px;
  }
}
@media(min-width:960px){
  .animation-container{padding:32px; gap:16px}
}

.notification-push{
  background:rgba(100,100,100,.85);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  padding:8px 10px;
  display:flex;
  gap:8px;
  align-items:center;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  animation:slideFromRight .5s cubic-bezier(0.22,0.61,0.36,1) forwards;
  opacity:0;
  transform:translateX(100%);
  max-width:240px;
  margin-left:auto;
  margin-right:0;
  will-change:transform, opacity;
  -webkit-transform:translateX(100%);
  position:relative;
  z-index:1;
}
@media(min-width:768px){
  .notification-push{
    padding:14px 16px;
    gap:12px;
    border-radius:14px;
    max-width:320px;
  }
}
@media(min-width:960px){
  .notification-push{
    padding:16px 18px;
    gap:14px;
    max-width:360px;
  }
}
.notification-icon{
  font-size:26px;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:bellRing .6s ease .5s;
  line-height:1;
  flex-shrink:0;
  width:32px;
  height:32px;
}
@media(min-width:768px){
  .notification-icon{font-size:32px; width:40px; height:40px}
}
@media(min-width:960px){
  .notification-icon{font-size:36px; width:44px; height:44px}
}
.notification-content{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1;
}
.notification-title{
  font-weight:600;
  font-size:12px;
  color:#ffffff;
  letter-spacing:-0.01em;
  line-height:1.3;
}
@media(min-width:768px){
  .notification-title{font-size:14px}
}
@media(min-width:960px){
  .notification-title{font-size:15px}
}
.notification-text{
  font-size:11px;
  color:#e5e5e5;
  line-height:1.3;
  font-weight:400;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
}
@media(min-width:768px){
  .notification-text{
    font-size:13px;
  }
}
@media(min-width:960px){
  .notification-text{font-size:14px}
}

.stock-card{
  background:white;
  border:2px solid #fed7aa;
  border-radius:12px;
  padding:12px;
  display:grid;
  grid-template-columns:40px 1fr 70px;
  gap:10px;
  align-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  animation:slideIn .6s ease forwards;
  opacity:0;
  transform:translateX(-20px);
}
@media(min-width:768px){
  .stock-card{
    padding:16px;
    grid-template-columns:48px 1fr 90px;
    gap:12px;
  }
}
.stock-card:nth-child(2){animation-delay:.5s}
.stock-card:nth-child(3){animation-delay:.8s}
.stock-card:nth-child(4){animation-delay:1.1s}

.stock-icon{
  font-size:28px;
  text-align:center;
}
@media(min-width:768px){
  .stock-icon{font-size:32px}
}
.stock-label{font-weight:600; color:var(--text)}
.stock-bar{
  height:10px;
  background:#f1f5f9;
  border-radius:6px;
  overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.1);
}
@media(min-width:768px){
  .stock-bar{height:12px}
}
.stock-level{
  height:100%;
  border-radius:6px;
  animation:fillBar 1.5s ease forwards;
  width:0;
}
.stock-level.low{
  background:linear-gradient(90deg,#dc2626,#ef4444);
  animation-delay:1s;
  --target-width:20%;
}
.stock-level.ok{
  background:linear-gradient(90deg,#f59e0b,#fbbf24);
  animation-delay:1.3s;
  --target-width:55%;
}
.stock-level.good{
  background:linear-gradient(90deg,#10b981,#34d399);
  animation-delay:1.6s;
  --target-width:85%;
}
.stock-alert{
  grid-column:2/4;
  font-size:12px;
  color:#dc2626;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:4px;
  animation:pulse 2s ease infinite;
  animation-delay:1.2s;
}
@media(min-width:768px){
  .stock-alert{font-size:13px}
}
.command-pulse{
  background:linear-gradient(135deg,#10b981,#059669);
  color:white;
  padding:12px 16px;
  border-radius:10px;
  text-align:center;
  font-weight:600;
  font-size:14px;
  box-shadow:0 4px 16px rgba(16,185,129,.25);
  margin-top:4px;
  animation:slideUp 1s ease 2.2s forwards, glowGreen 2s ease 2.5s infinite;
  opacity:0;
  transform:translateY(10px);
}
@media(min-width:768px){
  .command-pulse{
    padding:14px 20px;
    font-size:15px;
  }
}

@keyframes slideIn{
  from{opacity:0; transform:translateX(-20px)}
  to{opacity:1; transform:translateX(0)}
}
@keyframes slideFromRight{
  from{
    opacity:0;
    transform:translateX(100%);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}
@keyframes slideDown{
  from{
    opacity:0;
    transform:translateY(-30px) scale(0.95);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
@keyframes bellRing{
  0%,100%{transform:rotate(0deg)}
  15%{transform:rotate(-12deg)}
  30%{transform:rotate(12deg)}
  45%{transform:rotate(-8deg)}
  60%{transform:rotate(8deg)}
  75%{transform:rotate(-4deg)}
  90%{transform:rotate(4deg)}
}
@keyframes fillBar{
  from{width:0}
  to{width:var(--target-width, 50%)}
}
@keyframes slideUp{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.6}
}
@keyframes glowGreen{
  0%,100%{box-shadow:0 4px 16px rgba(16,185,129,.25)}
  50%{box-shadow:0 6px 24px rgba(16,185,129,.5)}
}

h2{font-size: clamp(22px, 3vw, 28px); margin:0 0 16px}
.benefits-title{margin-top:64px}
ul{padding-left: 18px}
.grid{list-style:square; display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:768px){.grid{grid-template-columns:1fr 1fr}}

.problems-grid,.benefits-grid{display:grid; gap:20px; grid-template-columns:1fr; margin-bottom:32px}
@media(min-width:768px){.problems-grid,.benefits-grid{grid-template-columns:1fr 1fr}}
.problem-card,.benefit-card{background:white; border:2px solid #fef3e2; border-radius:12px; padding:24px; transition:.2s ease}
.problem-card:hover,.benefit-card:hover{border-color:#fbbf24; box-shadow:0 4px 12px rgba(251,191,36,.15)}
.problem-icon,.benefit-icon{font-size:36px; display:block; margin-bottom:12px}
.problem-card h3,.benefit-card h3{font-size:18px; margin:0 0 8px; font-weight:700}
.problem-card p,.benefit-card p{margin:0; color:var(--muted); line-height:1.5; font-size:15px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:10px;
  padding:14px 20px;
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  cursor:pointer;
  transition:.2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  min-height:48px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
@media(min-width:768px){
  .btn{
    padding:14px 24px;
    font-size:16px;
  }
}
.btn-primary{color:white; background:var(--primary)}
.btn-primary:hover,.btn-primary:active{background:var(--primary-700); transform:translateY(-1px); box-shadow:0 4px 12px rgba(234,88,12,.3)}
@media(hover:none){
  .btn-primary:active{transform:translateY(0); box-shadow:0 2px 8px rgba(0,0,0,.08)}
}
.btn-block{width:100%}
.note{color:var(--muted); font-size:14px; margin-top:8px}
.tiny{color:var(--muted); font-size:12px}

.section-alt .testimonials{
  display:grid;
  gap:20px;
  margin-top:32px;
}
@media(min-width:768px){
  .section-alt .testimonials{grid-template-columns:1fr 1fr; gap:24px}
}
.testimonial-card{
  background:white;
  border:2px solid #fef3e2;
  border-radius:16px;
  padding:24px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:all .3s ease;
}
.testimonial-card:hover{
  border-color:#fbbf24;
  box-shadow:0 4px 16px rgba(251,191,36,.15);
  transform:translateY(-2px);
}
.testimonial-quote{
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  margin-bottom:20px;
  font-style:italic;
}
@media(min-width:768px){
  .testimonial-quote{font-size:17px}
}
.testimonial-author{
  display:flex;
  align-items:center;
  gap:12px;
}
.author-avatar{
  font-size:40px;
  line-height:1;
  flex-shrink:0;
}
.author-info{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.author-name{
  font-weight:600;
  font-size:15px;
  color:var(--text);
}
.author-role{
  font-size:13px;
  color:var(--muted);
}

.features-grid{
  display:grid;
  gap:20px;
  grid-template-columns:1fr;
  margin-top:32px;
}
@media(min-width:640px){
  .features-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:960px){
  .features-grid{grid-template-columns:1fr 1fr 1fr; gap:24px}
}
.feature-item{
  background:white;
  border:2px solid #fef3e2;
  border-radius:12px;
  padding:24px;
  text-align:center;
  transition:all .3s ease;
}
.feature-item:hover{
  border-color:var(--primary);
  box-shadow:0 4px 16px rgba(234,88,12,.15);
  transform:translateY(-4px);
}
.feature-title{
  font-size:16px;
  font-weight:700;
  color:var(--text);
  margin-bottom:8px;
}
.feature-desc{
  font-size:14px;
  color:var(--muted);
  line-height:1.5;
}

.faq-list{
  max-width:800px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.faq-item{
  background:white;
  border:2px solid #fef3e2;
  border-radius:12px;
  overflow:hidden;
  transition:all .3s ease;
}
.faq-item:hover{
  border-color:#fbbf24;
}
.faq-item[open]{
  border-color:var(--primary);
}
.faq-question{
  padding:20px 24px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-weight:600;
  font-size:16px;
  color:var(--text);
  list-style:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.faq-question::-webkit-details-marker{
  display:none;
}
.faq-question:hover{
  color:var(--primary);
}
.faq-icon{
  font-size:24px;
  font-weight:300;
  color:var(--primary);
  transition:transform .3s ease;
  flex-shrink:0;
}
.faq-item[open] .faq-icon{
  transform:rotate(45deg);
}
.faq-answer{
  padding:0 24px 20px 24px;
  color:var(--muted);
  line-height:1.6;
  font-size:15px;
  animation:fadeIn .3s ease;
}
.faq-answer p{
  margin:0;
}
@keyframes fadeIn{
  from{opacity:0; transform:translateY(-8px)}
  to{opacity:1; transform:translateY(0)}
}

.form{max-width:520px; margin:0 auto}
.form-row-group{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
@media(max-width:640px){
  .form-row-group{grid-template-columns:1fr}
}
.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.form-row-group .form-row{margin-bottom:0}
input{
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:14px;
  font-size:16px;
  min-height:48px;
  -webkit-appearance:none;
  appearance:none;
}
input:focus{
  outline:none;
  border-color: var(--primary);
  box-shadow:0 0 0 4px var(--ring);
}
.form-message{min-height:20px; margin:10px 0 0}

.site-footer{border-top:1px solid #e5e7eb; padding:32px 0; margin-top:24px}