/* ==========================================================================
   VibeFactory — design system
   Modern / Minimal / Product / AI / Factory
   ========================================================================== */

:root{
  --bg:#0A0A10;
  --bg-elevated:#131320;
  --bg-card:#15151F;
  --bg-card-hover:#1B1B2A;
  --text-primary:#F5F5FA;
  --text-secondary:#9497AC;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);
  --accent:#7C6CFF;
  --accent-soft:rgba(124,108,255,.14);
  --accent-2:#47E0C2;
  --cta:#FF6B3D;
  --cta-hover:#E85A2E;
  --cta-soft:rgba(255,107,61,.14);

  --font-display:'Manrope', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;

  --container-w:1240px;
  --radius-s:10px;
  --radius-m:18px;
  --radius-l:28px;
  --header-h:76px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important;transition-duration:.001ms !important;} }

body{
  margin:0;
  background:var(--bg);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
input,textarea,select{font-family:inherit;font-size:16px;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-primary);margin:0 0 .5em;line-height:1.14;font-weight:800;letter-spacing:-.01em;}
p{margin:0 0 1em;color:var(--text-secondary);}
.tabular{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

.container{width:100%;max-width:var(--container-w);margin:0 auto;padding:0 20px;}
@media (min-width:768px){ .container{padding:0 40px;} }
@media (min-width:1440px){ .container{padding:0 60px;} }

section{padding:76px 0;position:relative;}
@media (min-width:1024px){ section{padding:120px 0;} }

.section-head{max-width:680px;margin:0 0 48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:18px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--accent-2);display:inline-block;}
.section-head h2{font-size:clamp(28px,4.4vw,44px);}
.section-head p{font-size:17px;margin-top:10px;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 70ms);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:999px;font-weight:700;font-size:15.5px;
  border:1.5px solid transparent;transition:all .2s var(--ease);white-space:nowrap;font-family:var(--font-body);
}
.btn-cta{background:var(--cta);color:#0A0A10;}
.btn-cta:hover{background:var(--cta-hover);transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,107,61,.28);}
.btn-outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-2);}
.btn-ghost{background:var(--accent-soft);color:var(--accent-2);}
.btn-ghost:hover{background:rgba(124,108,255,.22);}
.btn-block{width:100%;}
.btn-sm{padding:11px 20px;font-size:14px;}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;}
.btn-row.center{justify-content:center;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;height:var(--header-h);
  background:rgba(10,10,16,.7);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);transition:background .2s;
}
.site-header .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--text-primary);}
.brand .mark{
  width:38px;height:38px;border-radius:11px;flex:none;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.brand .mark::before,.brand .mark::after{content:"";position:absolute;background:rgba(10,10,16,.85);}
.brand .mark::before{width:100%;height:2px;top:13px;left:0;}
.brand .mark::after{width:2px;height:100%;left:18px;top:0;}
.brand small{display:block;font-weight:500;color:var(--text-secondary);font-size:11px;letter-spacing:.02em;margin-top:1px;}

.main-nav{display:none;}
.main-nav ul{display:flex;align-items:center;gap:30px;}
.main-nav a{font-weight:600;font-size:14.5px;color:var(--text-secondary);transition:color .15s;}
.main-nav a:hover{color:var(--text-primary);}
@media (min-width:960px){ .main-nav{display:block;} }

.header-actions{display:flex;align-items:center;gap:10px;}
.lang-switch{display:flex;border:1.5px solid var(--border-strong);border-radius:999px;padding:3px;gap:2px;}
.lang-switch a{padding:6px 11px;border-radius:999px;font-weight:700;font-size:12px;color:var(--text-secondary);}
.lang-switch a.active{background:var(--text-primary);color:var(--bg);}
.header-actions .btn-cta{display:none;}
@media (min-width:600px){ .header-actions .btn-cta{display:inline-flex;} }

.nav-toggle{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius-s);border:1.5px solid var(--border-strong);}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:18px;height:2px;background:var(--text-primary);position:relative;transition:.2s;}
.nav-toggle span::before{position:absolute;top:-6px;}
.nav-toggle span::after{position:absolute;top:6px;}
@media (min-width:960px){ .nav-toggle{display:none;} }

.mobile-nav{display:none;position:fixed;inset:var(--header-h) 0 0 0;background:var(--bg);z-index:99;overflow-y:auto;padding:20px 20px 40px;}
.mobile-nav.open{display:block;}
.mobile-nav ul{display:flex;flex-direction:column;}
.mobile-nav a{display:block;padding:16px 4px;font-size:19px;font-weight:700;color:var(--text-primary);border-bottom:1px solid var(--border);}
.mobile-nav .btn{margin-top:22px;}

/* ---------- Hero ---------- */
.hero{padding:64px 0 40px;overflow:hidden;}
@media (min-width:1024px){ .hero{padding:96px 0 60px;} }
.hero-grid{display:grid;gap:52px;align-items:center;}
@media (min-width:1024px){ .hero-grid{grid-template-columns:1.05fr .95fr;gap:40px;} }
.hero .eyebrow{color:var(--accent-2);}
.hero h1{font-size:clamp(38px,6.4vw,68px);}
.hero h1 .accent-word{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero .sub{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,2vw,21px);color:var(--text-primary);margin:6px 0 20px;}
.hero .lead{font-size:17.5px;max-width:520px;}
.hero .lead-2{font-size:15px;color:var(--accent-2);font-weight:600;margin-bottom:28px;}

/* Abstract "factory" visual: connected product nodes, no literal robots/brains */
.hero-visual{position:relative;min-height:380px;}
.factory-graphic{
  position:relative;border:1px solid var(--border);border-radius:var(--radius-l);
  background:
    radial-gradient(420px 300px at 85% 10%, rgba(124,108,255,.22), transparent 60%),
    radial-gradient(380px 280px at 10% 90%, rgba(71,224,194,.16), transparent 60%),
    var(--bg-elevated);
  padding:32px;height:100%;overflow:hidden;
}
.factory-graphic::before{
  content:"";position:absolute;inset:0;background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(circle at 60% 40%, black, transparent 75%);
}
.node-flow{position:relative;display:flex;flex-direction:column;gap:14px;}
.node-row{display:flex;align-items:center;gap:10px;}
.node{
  background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-s);
  padding:12px 16px;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--text-primary);
  display:flex;align-items:center;gap:9px;box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.node .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);flex:none;}
.node.active{border-color:var(--accent);background:linear-gradient(135deg, rgba(124,108,255,.18), var(--bg-card));}
.node.active .dot{background:var(--cta);}
.node-line{flex:1;height:1.5px;background:linear-gradient(90deg, var(--border-strong), transparent);position:relative;min-width:20px;}
.node-line::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateY(-50%);}
.factory-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;position:relative;}
.factory-kpis .k{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-s);padding:14px 16px;}
.factory-kpis .k .t{font-family:var(--font-display);font-weight:800;font-size:14.5px;color:var(--text-primary);}
.factory-kpis .k .l{font-size:12.5px;color:var(--text-secondary);margin-top:2px;}

/* ---------- Cards grid ---------- */
.card-grid{display:grid;gap:20px;}
@media (min-width:640px){ .card-grid.cols-2{grid-template-columns:1fr 1fr;} }
@media (min-width:900px){
  .card-grid.cols-3{grid-template-columns:repeat(3,1fr);}
  .card-grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .card-grid.cols-5{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1200px){
  .card-grid.cols-4{grid-template-columns:repeat(4,1fr);}
  .card-grid.cols-5{grid-template-columns:repeat(5,1fr);}
}

.card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:28px;display:flex;flex-direction:column;gap:12px;transition:transform .25s var(--ease), border-color .25s, background .25s;
}
.card:hover{transform:translateY(-4px);border-color:var(--border-strong);background:var(--bg-card-hover);}
.card .icon{
  width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent-2);
  display:flex;align-items:center;justify-content:center;
}
.card h3{font-size:18.5px;}
.card p{font-size:14.5px;margin:0;flex:1;}

/* ---------- Process (7 steps) ---------- */
.process-track{display:grid;gap:16px;}
@media (min-width:900px){ .process-track{grid-template-columns:repeat(7,1fr);gap:0;} }
.process-step{
  position:relative;padding:22px 18px;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--bg-card);
}
@media (min-width:900px){
  .process-step{border-radius:0;border-right:none;}
  .process-step:first-child{border-radius:var(--radius-s) 0 0 var(--radius-s);}
  .process-step:last-child{border-radius:0 var(--radius-s) var(--radius-s) 0;border-right:1px solid var(--border);}
}
.process-step .num{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--accent);margin-bottom:10px;}
.process-step h4{font-family:var(--font-display);font-size:14px;color:var(--text-primary);margin-bottom:6px;letter-spacing:.02em;}
.process-step p{font-size:13px;margin:0;}

/* ---------- Products ---------- */
.product-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:30px;display:flex;flex-direction:column;gap:14px;transition:transform .25s var(--ease), border-color .25s;
}
.product-card:hover{transform:translateY(-4px);border-color:var(--accent);}
.product-card .top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.product-card .icon{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg, var(--accent-soft), var(--cta-soft));color:var(--accent-2);display:flex;align-items:center;justify-content:center;}
.product-card .idx{font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--text-secondary);}
.product-card h3{font-size:19px;margin-bottom:0;}
.product-card .tagline{font-size:14px;color:var(--accent-2);font-weight:600;margin:0;}
.product-card .pblock{border-top:1px solid var(--border);padding-top:14px;margin-top:2px;}
.product-card .pblock h5{font-family:var(--font-display);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin:0 0 6px;}
.product-card .pblock p{font-size:14px;margin:0;color:var(--text-primary);opacity:.85;}
.product-card .btn{align-self:flex-start;margin-top:6px;}

/* ---------- Gifts (lead magnets) ---------- */
.gift-card{position:relative;border-color:var(--cta-soft);}
.gift-card:hover{border-color:var(--cta);}
.gift-card::before{
  content:"FREE";position:absolute;top:20px;right:20px;font-family:var(--font-display);font-weight:800;
  font-size:10.5px;letter-spacing:.08em;color:var(--cta);background:var(--cta-soft);padding:4px 9px;border-radius:999px;
}
.gift-card .icon{background:var(--cta-soft);color:var(--cta);}
.gift-card .btn{align-self:flex-start;margin-top:auto;}

/* ---------- Factory philosophy band ---------- */
.factory-band{
  background:linear-gradient(180deg, var(--bg-elevated), var(--bg));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.factory-band .container{max-width:880px;text-align:center;}
.factory-band .eyebrow{justify-content:center;}
.factory-band p{font-size:18px;color:var(--text-primary);opacity:.82;}
.factory-quote{
  font-family:var(--font-display);font-weight:800;font-size:clamp(24px,4vw,36px);
  margin-top:32px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- About company ---------- */
.about-grid{display:grid;gap:44px;align-items:center;}
@media (min-width:1024px){ .about-grid{grid-template-columns:1fr 1fr;} }
.about-visual{
  border:1px solid var(--border);border-radius:var(--radius-l);padding:36px;background:var(--bg-card);
  display:grid;gap:14px;
}
.about-visual .row{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--bg-elevated);}
.about-visual .row .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);flex:none;}
.about-visual .row span{font-size:14px;font-weight:600;color:var(--text-primary);}

/* ---------- Final CTA ---------- */
.cta-final{
  text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(700px 380px at 50% 0%, rgba(255,107,61,.16), transparent 65%);
}
.cta-final .container{max-width:720px;position:relative;}
.cta-final h2{font-size:clamp(32px,5vw,52px);}
.cta-final .lead{font-size:18px;max-width:520px;margin:0 auto 32px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-elevated);border-top:1px solid var(--border);padding:56px 0 26px;}
.footer-grid{display:grid;gap:36px;margin-bottom:36px;}
@media (min-width:768px){ .footer-grid{grid-template-columns:1.3fr .8fr .8fr 1fr;} }
.footer-brand p{margin-top:14px;font-size:14px;color:var(--text-secondary);max-width:280px;}
.site-footer h4{color:var(--text-primary);font-family:var(--font-display);font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
.site-footer ul li{margin-bottom:10px;}
.site-footer a{font-size:14.5px;color:var(--text-secondary);transition:color .15s;}
.site-footer a:hover{color:var(--accent-2);}
.footer-social{display:flex;gap:10px;margin-top:16px;}
.footer-social a{width:38px;height:38px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.footer-social a:hover{border-color:var(--accent);color:var(--accent-2);}
.footer-lang{display:flex;gap:8px;margin-top:6px;}
.footer-lang a{padding:6px 13px;border-radius:999px;border:1.5px solid var(--border-strong);font-weight:700;font-size:12.5px;color:var(--text-secondary);}
.footer-lang a.active{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg);}
.footer-bottom{border-top:1px solid var(--border);padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-secondary);}

/* ---------- Forms ---------- */
.form-field{margin-bottom:17px;}
.form-field label{display:block;font-weight:600;font-size:13.5px;color:var(--text-primary);margin-bottom:7px;}
.form-field input[type=text],.form-field input[type=tel],.form-field input[type=email],
.form-field select,.form-field textarea{
  width:100%;border:1.5px solid var(--border-strong);border-radius:var(--radius-s);
  padding:13px 14px;font-size:15px;color:var(--text-primary);background:var(--bg-elevated);transition:border-color .15s;
}
.form-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239497AC' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--accent);}
.form-field textarea{resize:vertical;min-height:96px;}
.form-field input::placeholder,.form-field textarea::placeholder{color:#5A5D70;}
.form-error{color:#FF7A6E;font-size:12.5px;margin-top:6px;display:none;}
.form-field.invalid input,.form-field.invalid textarea,.form-field.invalid select{border-color:#FF7A6E;}
.form-field.invalid .form-error{display:block;}

.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;}
.form-status{font-size:13.5px;margin-top:10px;display:none;}
.form-status.error{display:block;color:#FF7A6E;}

.form-success{text-align:center;padding:24px 4px;display:none;}
.form-success.show{display:block;}
.form-success .icon-circle{width:60px;height:60px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.form-success h3{font-size:20px;}
.form-success p{color:var(--text-secondary);}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(5,5,10,.72);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto;backdrop-filter:blur(3px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-l);max-width:520px;width:100%;padding:32px;position:relative;margin:40px 0;box-shadow:0 30px 70px rgba(0,0,0,.5);}
.modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:var(--bg-card);display:flex;align-items:center;justify-content:center;border:1px solid var(--border);color:var(--text-primary);}
.modal-close:hover{border-color:var(--accent);color:var(--accent-2);}
.modal h3{font-size:22px;margin-bottom:6px;}
.modal .modal-sub{color:var(--text-secondary);font-size:14px;margin-bottom:22px;}

/* ---------- Floating Telegram button ---------- */
.fab-tg{
  position:fixed;right:20px;bottom:20px;z-index:150;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#2AA8E0,#229ED9);display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 10px 28px rgba(34,158,217,.4);transition:transform .15s;
}
.fab-tg:hover{transform:scale(1.08);}

/* ---------- Misc ---------- */
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.mini-badge{font-size:12.5px;font-weight:600;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border);padding:7px 13px;border-radius:999px;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#0A0A10;padding:12px 18px;z-index:300;border-radius:0 0 8px 0;font-weight:700;}
.skip-link:focus{left:0;}

@media (max-width:639px){
  .btn-row{flex-direction:column;align-items:stretch;}
  .hero .btn-row .btn{width:100%;}
}