:root{
  --bg:#f7f5f1;
  --paper:#fffefa;
  --ink:#111111;
  --muted:#68645f;
  --line:#ded9d1;
  --line-dark:#2a2825;
  --orange:#ff6b35;
  --orange-dark:#d94f1e;
  --peach:#ffe4d5;
  --peach-2:#ffd3bd;
  --sand:#eee9e1;
  --lav:#ebe5ff;
  --white:#ffffff;
  --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,Arial,Helvetica,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
.container{width:min(calc(100% - 44px),var(--max));margin:auto}
.section{padding:112px 0}
.section-tight{padding:76px 0}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{
  line-height:1;
  letter-spacing:-.045em;
}
h1{
  font-size:clamp(62px,7.6vw,116px);
  max-width:1020px;
  margin-bottom:26px;
  font-weight:650;
}
h2{
  font-size:clamp(44px,5vw,76px);
  margin-bottom:24px;
  font-weight:650;
}
h3{
  font-size:clamp(24px,2.3vw,34px);
  margin-bottom:14px;
}
.lead{font-size:clamp(18px,1.8vw,23px);max-width:760px;color:#514e49}
.copy-lg{font-size:19px;max-width:760px}
.muted{color:var(--muted)}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#8a3e1c
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--orange)
}
.mono{
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase
}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btn{
  min-height:50px;
  padding:0 21px;
  border-radius:10px;
  border:1px solid var(--line-dark);
  background:transparent;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:800;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(17,17,17,.10)
}
.btn-primary{
  background:#111;
  color:#fff;
  border-color:#111
}
.btn-primary:hover{
  background:#2b2926;
  border-color:#2b2926
}
.btn-orange{
  background:var(--orange);
  color:#111;
  border-color:var(--orange)
}
.btn-orange:hover{
  background:#ff7f51;
  border-color:#ff7f51
}

/* Announcement */
.top-note{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--orange);
  color:#111;
  font-size:11px;
  font-weight:850;
  letter-spacing:.01em;
  position:relative;
  z-index:102
}

/* Header */
.site-header{
  position:fixed;
  top:34px;
  left:0;right:0;
  z-index:100;
  background:rgba(247,245,241,.94);
  border-bottom:1px solid rgba(17,17,17,.08);
  backdrop-filter:blur(16px);
  transition:background .25s ease,box-shadow .25s ease
}
.site-header.scrolled{
  background:rgba(247,245,241,.82);
  box-shadow:0 12px 32px rgba(17,17,17,.06)
}
.nav{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  transition:min-height .25s ease
}
.site-header.scrolled .nav{min-height:60px}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:900;
  font-size:18px;
  letter-spacing:-.035em
}
.brand-symbol{
  width:29px;height:29px;
  border:2px solid #111;
  border-radius:8px;
  display:grid;
  place-items:center;
  position:relative
}
.brand-symbol::before{
  content:"";
  width:9px;height:9px;
  background:var(--orange);
  border-radius:50%
}
.nav-links{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:780}
.nav-links>a,.nav-dropdown-toggle{color:#2f2d2a}
.nav-links>a:hover,.nav-dropdown-toggle:hover{color:var(--orange-dark)}
.menu-toggle{display:none;background:none;border:0;color:#111;font-size:27px;cursor:pointer}

.nav-dropdown{position:relative}
.nav-dropdown-toggle{
  display:flex;align-items:center;gap:8px;
  background:none;border:0;padding:10px 0;
  font:inherit;font-weight:780;cursor:pointer
}
.nav-dropdown-toggle::after{
  content:"";
  width:7px;height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-top:-4px;
  transition:.2s ease
}
.nav-dropdown.open .nav-dropdown-toggle::after{transform:rotate(225deg);margin-top:4px}
.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 13px);
  left:-18px;
  width:300px;
  background:#fff;
  border:1px solid #d9d5cf;
  border-radius:14px;
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(7px);
  transition:.2s ease;
  box-shadow:0 26px 60px rgba(25,20,15,.12)
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:none
}
.nav-dropdown-menu a{
  display:block;
  padding:12px;
  border-radius:9px;
  color:#33312e
}
.nav-dropdown-menu a:hover{background:#fff2eb;color:#b84518}
.nav-dropdown-menu small{
  display:block;
  color:#918c84;
  font-size:9px;
  margin-top:3px
}

/* Hero */
.hero{
  padding:160px 0 82px;
  background:
    radial-gradient(circle at 84% 22%,rgba(255,107,53,.10),transparent 24%),
    linear-gradient(180deg,#faf8f4,#f7f5f1);
  position:relative;
  overflow:hidden
}
.hero-grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:58px;
  align-items:center
}
.hero-copy h1 span{color:var(--orange-dark)}
.hero-copy .lead{max-width:650px}
.hero-review{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  color:#5f5a54;
  font-size:12px;
  font-weight:750
}
.hero-review .stars{letter-spacing:2px;color:#111}
.hero-review .score{padding-left:12px;border-left:1px solid #cbc6be}
.hero-mini-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:18px;
  color:#6a655f;
  font-size:12px
}
.hero-mini-link b{color:#111}

/* Warm product visual */
.hero-product{
  min-height:555px;
  background:linear-gradient(135deg,#fff0e8,#ffd8c3 65%,#ffc8ad);
  border-radius:24px;
  padding:24px;
  position:relative;
  overflow:hidden
}
.hero-product::before{
  content:"";
  position:absolute;
  width:340px;height:340px;
  border-radius:50%;
  background:rgba(255,255,255,.38);
  right:-80px;top:-70px
}
.product-stage{
  position:relative;
  z-index:2;
  height:100%;
  display:grid;
  place-items:center
}
.product-dashboard{
  width:92%;
  min-height:400px;
  background:#fbfbfa;
  border:1px solid rgba(17,17,17,.12);
  border-radius:16px;
  box-shadow:0 26px 70px rgba(54,32,20,.18);
  padding:14px;
  transform:rotate(-2deg)
}
.product-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 4px 14px
}
.product-top strong{font-size:12px}
.product-status{
  padding:5px 8px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:8px;
  font-weight:900
}
.product-grid{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:10px
}
.product-side{
  background:#f0ede7;
  border-radius:11px;
  padding:12px
}
.product-side span{
  display:block;
  padding:8px;
  border-radius:7px;
  color:#757069;
  font-size:9px;
  margin-bottom:4px
}
.product-side span.active{
  background:#111;
  color:#fff
}
.product-main{display:grid;gap:10px}
.product-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.product-card{
  min-height:82px;
  border:1px solid #e2ded8;
  border-radius:10px;
  padding:10px;
  background:#fff
}
.product-card span{
  display:block;
  color:#817b73;
  font-size:8px;
  margin-bottom:9px;
  text-transform:uppercase
}
.product-card strong{font-size:17px}
.product-card .ok{color:#b9481d}
.product-chart{
  min-height:185px;
  border:1px solid #e2ded8;
  border-radius:11px;
  background:
    linear-gradient(rgba(17,17,17,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,17,17,.05) 1px,transparent 1px),
    #fff;
  background-size:27px 27px;
  position:relative
}
.product-chart::after{
  content:"";
  position:absolute;
  left:8%;right:8%;
  top:56%;
  height:3px;
  background:var(--orange);
  transform:rotate(-7deg);
  border-radius:99px
}
.product-float{
  position:absolute;
  left:20px;
  bottom:28px;
  width:210px;
  background:#111;
  color:#fff;
  border-radius:13px;
  padding:14px 15px;
  box-shadow:0 22px 50px rgba(0,0,0,.20);
  z-index:3;
  transform:rotate(2deg)
}
.product-float span{
  display:block;
  color:#b7b1aa;
  font-size:8px;
  text-transform:uppercase;
  margin-bottom:6px
}
.product-float strong{
  display:block;
  font-size:13px;
  line-height:1.25
}

/* Logos / trust */
.trust-strip{
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff
}
.trust-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap
}
.trust-inner>span{
  font-size:10px;
  color:#8c867f;
  text-transform:uppercase;
  font-weight:800
}
.trust-items{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.trust-items b{
  color:#5d5954;
  font-size:12px;
  letter-spacing:.04em
}

/* Section heads */
.section-head{
  display:grid;
  grid-template-columns:1fr .62fr;
  gap:60px;
  align-items:end;
  margin-bottom:50px
}
.section-head p{color:var(--muted);max-width:470px}

/* Product category / services */
.services-showcase{background:#fff}
.service-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:28px 0 34px
}
.service-tab{
  background:#f4f1ec;
  color:#6e6963;
  border:1px solid #e0dbd3;
  border-radius:10px;
  padding:11px 15px;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease
}
.service-tab:hover,
.service-tab.active{
  background:#111;
  border-color:#111;
  color:#fff
}
.service-panel{display:none}
.service-panel.active{
  display:grid;
  grid-template-columns:.83fr 1.17fr;
  gap:42px;
  align-items:center
}
.service-copy p{color:#66615b;font-size:18px;max-width:550px}
.service-points{
  display:grid;
  gap:0;
  margin-top:26px;
  border-top:1px solid #ded9d1
}
.service-point{
  padding:14px 0;
  border-bottom:1px solid #ded9d1;
  display:flex;
  gap:11px;
  color:#5d5954;
  font-size:14px
}
.service-point::before{
  content:"✓";
  color:var(--orange-dark);
  font-weight:900
}
.service-visual{
  min-height:430px;
  border-radius:20px;
  background:linear-gradient(135deg,#fff0e8,#ffd8c4);
  padding:22px
}
.visual-window{
  height:100%;
  border-radius:14px;
  background:#fff;
  border:1px solid #e2d8d0;
  padding:16px;
  box-shadow:0 16px 42px rgba(72,41,23,.10)
}
.visual-head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:18px
}
.visual-head b{font-size:11px}
.visual-head span{font-size:8px;color:#a9461e}
.visual-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.visual-card{
  min-height:120px;
  background:#f8f6f2;
  border:1px solid #e6e1da;
  border-radius:11px;
  padding:13px
}
.visual-card span{
  display:block;
  font-size:8px;
  color:#8c867f;
  margin-bottom:10px;
  text-transform:uppercase
}
.visual-card strong{font-size:18px}
.visual-card.wide{grid-column:span 2;min-height:150px}
.server-lines{display:grid;gap:8px;margin-top:13px}
.server-line{height:8px;border-radius:99px;background:#e7e1da;overflow:hidden}
.server-line::after{
  content:"";display:block;height:100%;
  background:var(--orange);border-radius:99px
}
.server-line:nth-child(1)::after{width:76%}
.server-line:nth-child(2)::after{width:42%}
.server-line:nth-child(3)::after{width:64%}
.security-list{display:grid;gap:8px;margin-top:7px}
.security-row{
  display:flex;justify-content:space-between;
  padding:9px;background:#eeeae4;border-radius:8px;font-size:9px
}
.security-row i{font-style:normal;color:#b3441c}

/* Threat / friction section */
.problem-section{
  background:#111;
  color:#fff
}
.problem-section .eyebrow{color:#ff9c77}
.problem-section .section-head p{color:#b9b4ae}
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.problem-card{
  min-height:300px;
  background:#191919;
  border:1px solid #2b2b2b;
  border-radius:19px;
  padding:27px;
  position:relative;
  overflow:hidden
}
.problem-card.large{
  grid-column:span 2;
  min-height:390px;
  background:linear-gradient(135deg,#191919,#251a15)
}
.problem-card .tag{
  font-size:9px;
  color:#98938e;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em
}
.problem-card h3{
  margin-top:66px;
  max-width:650px;
  font-size:clamp(34px,4vw,56px)
}
.problem-card p{color:#aaa59f;max-width:560px}
.problem-meter{
  position:absolute;
  right:26px;
  bottom:24px;
  width:34%;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:end;
  gap:8px;
  height:150px
}
.problem-meter i{display:block;background:var(--orange);border-radius:4px 4px 0 0}
.problem-meter i:nth-child(1){height:30%}
.problem-meter i:nth-child(2){height:45%}
.problem-meter i:nth-child(3){height:62%}
.problem-meter i:nth-child(4){height:80%}
.problem-meter i:nth-child(5){height:100%}

/* Attack anatomy-like original workflow section */
.anatomy-section{
  background:#f7f5f1;
  color:#111
}
.anatomy-grid{
  display:grid;
  grid-template-columns:.62fr 1.38fr;
  gap:80px;
  align-items:start
}
.anatomy-copy{position:sticky;top:100px}
.anatomy-copy p{color:#67625d;font-size:18px}
.anatomy-steps{border-top:1px solid #d7d2ca}
.anatomy-step{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:20px;
  padding:27px 0;
  border-bottom:1px solid #d7d2ca
}
.anatomy-step span{
  font-size:10px;
  font-weight:900;
  color:#8a847e
}
.anatomy-step h3{font-size:30px;margin-bottom:7px}
.anatomy-step p{color:#6d6862;margin:0;max-width:650px}

/* Why */
.why-section{background:#fff}
.why-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}
.why-card{
  min-height:300px;
  border:1px solid #ded9d1;
  border-radius:18px;
  padding:25px;
  background:#fbfaf7
}
.why-card .num{
  font-size:9px;
  font-weight:900;
  color:#b3431c
}
.why-card h3{margin-top:74px}
.why-card p{color:#6a655f}

/* CTA */
.cta{
  background:var(--orange);
  color:#111;
  padding:92px 0
}
.cta h2{max-width:840px}
.cta p{max-width:620px;color:#572610;font-size:18px}
.cta .eyebrow{color:#642b12}

/* Inner pages */
.page-hero{
  min-height:64vh;
  padding:150px 0 80px;
  display:flex;
  align-items:flex-end;
  background:
    radial-gradient(circle at 83% 18%,rgba(255,107,53,.10),transparent 25%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.page-hero .lead{color:#5b5752}
.content-grid{
  display:grid;
  grid-template-columns:.48fr 1.52fr;
  gap:90px;
  align-items:start
}
.sticky-label{position:sticky;top:96px}
.rich p{font-size:18px;color:#5e5a55}
.rich h3{margin-top:36px}
.quote{
  margin:36px 0;
  padding:24px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:30px;
  letter-spacing:-.03em
}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.service-tile{
  min-height:270px;
  padding:28px;
  border:1px solid #ded9d1;
  border-radius:17px;
  background:#fff
}
.service-tile:hover{border-color:#c7b2a5}
.service-icon{
  display:block;
  color:#b3431c;
  font-size:10px;
  font-weight:900;
  margin-bottom:58px
}
.service-tile p{color:#6a655f}

/* FAQ */
.faq-section{
  background:#fff;
  border-top:1px solid var(--line)
}
.faq-layout{
  display:grid;
  grid-template-columns:.58fr 1.42fr;
  gap:80px;
  align-items:start
}
.faq-intro{position:sticky;top:96px}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:1fr 32px;
  gap:20px;
  align-items:center;
  padding:22px 0;
  font-size:17px;
  font-weight:800
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  width:30px;height:30px;
  border:1px solid #cfc9c2;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#b3431c;
  transition:.2s ease
}
.faq-item[open] summary::after{
  transform:rotate(45deg);
  background:#111;
  color:#fff;
  border-color:#111
}
.faq-answer{padding:0 54px 23px 0;color:#68635d}

/* Contact */
.contact-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px}
.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px;
  box-shadow:0 18px 50px rgba(17,17,17,.06)
}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{
  font-size:10px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#77716b
}
.field input,.field textarea,.field select{
  width:100%;
  background:#fbfaf7;
  color:#111;
  border:1px solid #ded9d1;
  border-radius:9px;
  padding:12px 13px;
  outline:none
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#e49a77}
.form-note{font-size:10px;color:#8a847e;margin-top:12px}
.form-success{display:none;margin-top:12px;padding:12px;background:#fff0e8;border-radius:9px;color:#9b3d18}
.address-card{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.address-card span{display:block;color:#6c6761}

/* Footer */
.footer{
  background:#111;
  color:#fff;
  padding:68px 0 28px
}
.footer-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr .85fr .85fr;
  gap:46px;
  padding-bottom:56px
}
.footer p,.footer a{color:#96918b}
.footer a:hover{color:#fff}
.footer-links{display:grid;gap:9px;font-size:13px}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding-top:22px;
  border-top:1px solid #2d2b29;
  font-size:10px;
  color:#77726d
}

.back-to-top{
  position:fixed;
  right:20px;bottom:20px;
  width:44px;height:44px;
  border-radius:11px;
  border:1px solid #d0c9c1;
  background:rgba(255,255,255,.92);
  color:#111;
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.22s ease;
  z-index:90
}
.back-to-top.visible{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:#111;color:#fff}

/* Motion */
.reveal,.reveal-left,.reveal-right,.fade-scale,.stagger-child{
  opacity:0;
  transition:
    opacity .72s cubic-bezier(.2,.72,.2,1),
    transform .72s cubic-bezier(.2,.72,.2,1);
}
.reveal{transform:translateY(24px)}
.reveal-left{transform:translateX(-30px)}
.reveal-right{transform:translateX(30px)}
.fade-scale{transform:scale(.97)}
.stagger-child{transform:translateY(18px);transition-delay:var(--delay,0ms)}
.reveal.in,.reveal-left.in,.reveal-right.in,.fade-scale.in,.stagger-child.in{
  opacity:1;
  transform:none
}

@media(max-width:980px){
  .top-note{display:none}
  .site-header{top:0}
  .nav-links{
    position:fixed;
    top:76px;left:20px;right:20px;
    background:#fff;
    border:1px solid #d9d5cf;
    border-radius:16px;
    padding:20px;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    box-shadow:0 24px 60px rgba(17,17,17,.12)
  }
  .nav-links.open{display:flex}
  .menu-toggle{display:block}
  .nav-dropdown{width:100%}
  .nav-dropdown-toggle{width:100%;justify-content:space-between}
  .nav-dropdown-menu{
    position:static;
    width:100%;
    margin-top:8px;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none
  }
  .nav-dropdown:hover .nav-dropdown-menu{display:none}
  .nav-dropdown.open .nav-dropdown-menu{display:block}
  .hero-grid,.service-panel.active,.anatomy-grid,.content-grid,.contact-grid,.faq-layout{grid-template-columns:1fr}
  .anatomy-copy,.sticky-label,.faq-intro{position:static}
  .why-cards{grid-template-columns:1fr 1fr}
  .section-head{grid-template-columns:1fr}
}
@media(max-width:650px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .section{padding:78px 0}
  .hero{padding-top:124px}
  .hero-product{min-height:500px;padding:14px}
  .product-dashboard{width:100%}
  .product-grid{grid-template-columns:1fr}
  .product-side{display:none}
  .product-cards{grid-template-columns:1fr 1fr}
  .product-card:nth-child(3){grid-column:span 2}
  .problem-grid{grid-template-columns:1fr}
  .problem-card.large{grid-column:auto}
  .problem-meter{display:none}
  .why-cards,.service-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal,.reveal-left,.reveal-right,.fade-scale,.stagger-child{
    opacity:1!important;
    transform:none!important
  }
}


/* TOCHKA NET v7 interaction refinements */

/* Dropdown: remove hover dead-zone and keep menu selectable */
.nav-dropdown{
  position:relative;
  padding-bottom:8px;
  margin-bottom:-8px;
}
.nav-dropdown-menu{
  top:calc(100% - 1px) !important;
  z-index:300;
}
.nav-dropdown-menu::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-12px;
  height:12px;
}

/* FAQ questions lighter */
.faq-item summary{
  font-weight:600 !important;
  letter-spacing:-.012em;
}

/* Whole sections fade in */
.section-enter{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .82s cubic-bezier(.2,.72,.2,1), transform .82s cubic-bezier(.2,.72,.2,1);
}
.section-enter.in{
  opacity:1;
  transform:none;
}

/* Extra motion */
.hero-product{
  animation:heroProductFloat 7s ease-in-out infinite;
}
.product-dashboard{
  transition:transform .45s cubic-bezier(.2,.72,.2,1), box-shadow .45s ease;
}
.hero-product:hover .product-dashboard{
  transform:rotate(0deg) translateY(-4px);
  box-shadow:0 34px 82px rgba(54,32,20,.24);
}
.product-float{
  animation:floatCard 5.6s ease-in-out infinite;
}
.product-chart::after{
  animation:chartPulse 4.8s ease-in-out infinite;
  transform-origin:left center;
}
.service-visual{
  transition:transform .42s ease, box-shadow .42s ease;
}
.service-panel.active .service-visual:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 56px rgba(72,41,23,.13);
}
.visual-card{
  transition:transform .28s ease, border-color .28s ease;
}
.visual-card:hover{
  transform:translateY(-3px);
  border-color:#d9b9a8;
}
.problem-card{
  transition:transform .34s ease, border-color .34s ease;
}
.problem-card:hover{
  transform:translateY(-5px);
  border-color:#4a3931;
}
.problem-meter i{
  transform-origin:bottom;
  animation:meterBreath 4.2s ease-in-out infinite alternate;
}
.problem-meter i:nth-child(2){animation-delay:.18s}
.problem-meter i:nth-child(3){animation-delay:.36s}
.problem-meter i:nth-child(4){animation-delay:.54s}
.problem-meter i:nth-child(5){animation-delay:.72s}
.why-card{
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.why-card:hover{
  transform:translateY(-5px);
  border-color:#cdb9ad;
  box-shadow:0 16px 36px rgba(34,22,16,.07);
}

/* New anatomy layout */
.anatomy-section{
  position:relative;
  overflow:hidden;
}
.anatomy-section::before{
  content:"";
  position:absolute;
  width:460px;height:460px;
  border:1px solid rgba(255,107,53,.14);
  border-radius:50%;
  right:-180px;top:-150px;
}
.anatomy-top{
  display:grid;
  grid-template-columns:1fr .72fr;
  gap:70px;
  align-items:end;
  margin-bottom:56px;
  position:relative;
  z-index:2;
}
.anatomy-top p{
  color:#67625d;
  font-size:18px;
  max-width:520px;
}
.issue-route{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  padding-top:34px;
}
.issue-route::before{
  content:"";
  position:absolute;
  left:6%;right:6%;top:11px;
  height:2px;
  background:linear-gradient(90deg,#111 0 22%,var(--orange) 22% 52%,#111 52% 76%,var(--orange) 76% 100%);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s cubic-bezier(.2,.72,.2,1);
}
.issue-route.in::before{transform:scaleX(1)}
.issue-step{
  min-height:310px;
  background:#fff;
  border:1px solid #d7d2ca;
  border-radius:18px;
  padding:25px;
  position:relative;
  transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}
.issue-step:nth-child(even){margin-top:42px}
.issue-step:hover{
  transform:translateY(-5px);
  border-color:#d8a68f;
  box-shadow:0 18px 42px rgba(48,30,20,.08);
}
.issue-node{
  position:absolute;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--orange);
  border:4px solid var(--bg);
  top:-32px;left:24px;
  box-shadow:0 0 0 1px #111;
}
.issue-step:nth-child(even) .issue-node{background:#111}
.issue-step .step-code{
  display:block;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  color:#8b857e;
  margin-bottom:64px;
}
.issue-step h3{font-size:28px;margin-bottom:10px}
.issue-step p{color:#6c6761;margin-bottom:0}
.issue-step .step-output{
  position:absolute;
  left:25px;right:25px;bottom:22px;
  padding-top:13px;
  border-top:1px solid #ddd8d0;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  color:#8b857e;
  text-transform:uppercase;
}

@keyframes heroProductFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes floatCard{
  0%,100%{transform:rotate(2deg) translateY(0)}
  50%{transform:rotate(1deg) translateY(-7px)}
}
@keyframes chartPulse{
  0%,100%{opacity:.72;transform:rotate(-7deg) scaleX(.96)}
  50%{opacity:1;transform:rotate(-7deg) scaleX(1.03)}
}
@keyframes meterBreath{
  from{transform:scaleY(.94)}
  to{transform:scaleY(1.03)}
}

@media(max-width:980px){
  .anatomy-top{grid-template-columns:1fr;gap:18px}
  .issue-route{grid-template-columns:1fr 1fr;gap:18px}
  .issue-route::before{display:none}
  .issue-step:nth-child(even){margin-top:0}
  .issue-node{top:18px;right:18px;left:auto;border-color:#fff}
}
@media(max-width:650px){
  .issue-route{grid-template-columns:1fr}
  .issue-step{min-height:290px}
}
@media(prefers-reduced-motion:reduce){
  .hero-product,.product-float,.product-chart::after,.problem-meter i{animation:none!important}
  .section-enter{opacity:1!important;transform:none!important}
}


/* =========================================================
   TOCHKA NET v8: navigation, buttons and new company pages
   ========================================================= */

/* Main nav CTA must stay white */
.nav-links > a.btn-primary{
  color:#fff !important;
}
.nav-links > a.btn-primary:hover{
  color:#fff !important;
}

/* More premium button hover */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(105deg,transparent 0 33%,rgba(255,255,255,.40) 46%,transparent 60%);
  transform:translateX(-130%);
  transition:transform .62s cubic-bezier(.2,.72,.2,1);
  z-index:-1;
  pointer-events:none;
}
.btn::after{
  content:"↗";
  width:0;
  overflow:hidden;
  opacity:0;
  transform:translate(-5px,4px);
  transition:width .28s ease,opacity .28s ease,transform .28s ease;
  white-space:nowrap;
}
.btn:hover::before{
  transform:translateX(130%);
}
.btn:hover::after{
  width:16px;
  opacity:1;
  transform:translate(0,0);
}
.btn:hover{
  transform:translateY(-2px) scale(1.012);
}
.btn:active{
  transform:translateY(0) scale(.985);
}

/* Generic Company dropdown uses same stable hover bridge */
.company-dropdown{
  position:relative;
  padding-bottom:8px;
  margin-bottom:-8px;
}
.company-dropdown-menu{
  position:absolute;
  top:calc(100% - 1px);
  left:-18px;
  width:285px;
  background:#fff;
  border:1px solid #d9d5cf;
  border-radius:14px;
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(7px);
  transition:.2s ease;
  box-shadow:0 26px 60px rgba(25,20,15,.12);
  z-index:300;
}
.company-dropdown-menu::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-12px;height:12px;
}
.company-dropdown:hover .company-dropdown-menu,
.company-dropdown.open .company-dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:none;
}
.company-dropdown-menu a{
  display:block;
  padding:12px;
  border-radius:9px;
  color:#33312e;
}
.company-dropdown-menu a:hover{
  background:#fff2eb;
  color:#b84518;
}
.company-dropdown-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:0;
  padding:10px 0;
  font:inherit;
  font-weight:780;
  cursor:pointer;
  color:#2f2d2a;
}
.company-dropdown-toggle::after{
  content:"";
  width:7px;height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-top:-4px;
  transition:.2s ease;
}
.company-dropdown.open .company-dropdown-toggle::after{
  transform:rotate(225deg);
  margin-top:4px;
}

/* New editorial company pages */
.company-hero{
  min-height:72vh;
  display:flex;
  align-items:flex-end;
  padding:160px 0 84px;
  background:
    radial-gradient(circle at 82% 20%,rgba(255,107,53,.12),transparent 24%),
    linear-gradient(180deg,#faf8f4,#f7f5f1);
  border-bottom:1px solid var(--line);
}
.company-hero h1{
  max-width:980px;
}
.company-hero .lead{
  max-width:820px;
}

.page-intro-grid{
  display:grid;
  grid-template-columns:.58fr 1.42fr;
  gap:88px;
  align-items:start;
}
.page-intro-side{
  position:sticky;
  top:100px;
}
.page-intro-main p{
  font-size:19px;
  color:#5f5a55;
  max-width:760px;
}
.page-intro-main .quote{
  font-size:31px;
}

/* Innovation */
.innovation-focus{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.innovation-card{
  min-height:330px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:28px;
  position:relative;
  overflow:hidden;
  transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease;
}
.innovation-card:hover{
  transform:translateY(-5px);
  border-color:#d7b6a5;
  box-shadow:0 18px 40px rgba(46,30,20,.07);
}
.innovation-card .num{
  display:block;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  color:#b3431c;
}
.innovation-card h3{
  margin-top:74px;
  max-width:460px;
}
.innovation-card p{
  color:#6a655f;
  max-width:500px;
}
.innovation-card::after{
  content:"";
  position:absolute;
  width:130px;height:130px;
  border-radius:50%;
  border:1px solid rgba(255,107,53,.16);
  right:-45px;top:-45px;
}

.innovation-process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-dark);
  border-left:1px solid var(--line-dark);
}
.innovation-stage{
  min-height:250px;
  padding:26px;
  border-right:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  background:#fff;
}
.innovation-stage span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  color:#9b4a28;
}
.innovation-stage h3{
  margin-top:62px;
  font-size:27px;
}
.innovation-stage p{
  color:#69645e;
}

/* Partners */
.partner-pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.partner-pillar{
  min-height:330px;
  padding:28px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
}
.partner-pillar .icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#111;
  color:#fff;
  margin-bottom:68px;
  font-size:13px;
  font-weight:900;
}
.partner-pillar p{color:#69645e}
.partner-principles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line-dark);
}
.partner-principle{
  padding:28px 0;
  border-bottom:1px solid var(--line-dark);
}
.partner-principle:nth-child(odd){
  padding-right:38px;
}
.partner-principle:nth-child(even){
  border-left:1px solid var(--line-dark);
  padding-left:38px;
}
.partner-principle span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  color:#a44a25;
}
.partner-principle h3{
  margin-top:18px;
  font-size:29px;
}

/* Careers */
.career-areas{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.career-area{
  min-height:280px;
  background:#111;
  color:#fff;
  border-radius:17px;
  padding:24px;
  transition:transform .3s ease,background .3s ease;
}
.career-area:hover{
  transform:translateY(-5px);
  background:#211b18;
}
.career-area span{
  color:#ff9d78;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}
.career-area h3{
  margin-top:70px;
  font-size:28px;
}
.career-area p{
  color:#aba49e;
}
.career-note{
  background:#fff0e8;
  border:1px solid #f2c8b4;
  border-radius:18px;
  padding:28px;
}
.career-note p{
  margin:0;
  color:#664735;
}

/* FAQ page */
.faq-page-categories{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:34px;
}
.faq-filter{
  border:1px solid #d9d4cc;
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:750;
  color:#6b655f;
  transition:.2s ease;
}
.faq-filter:hover,
.faq-filter.active{
  background:#111;
  color:#fff;
  border-color:#111;
}
.faq-page-list{
  border-top:1px solid var(--line-dark);
}
.faq-page-item{
  border-bottom:1px solid var(--line-dark);
}
.faq-page-item summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:80px 1fr 36px;
  gap:20px;
  align-items:center;
  padding:24px 0;
  font-size:18px;
  font-weight:600;
}
.faq-page-item summary::-webkit-details-marker{display:none}
.faq-page-item summary .category{
  font-size:9px;
  font-weight:900;
  letter-spacing:.07em;
  color:#9d4a27;
  text-transform:uppercase;
}
.faq-page-item summary::after{
  content:"+";
  width:32px;height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid #ccc6be;
  color:#a54620;
  transition:.2s ease;
}
.faq-page-item[open] summary::after{
  transform:rotate(45deg);
  background:#111;
  color:#fff;
  border-color:#111;
}
.faq-page-answer{
  padding:0 60px 24px 100px;
  color:#68635d;
}

/* Reusable dark collaboration section */
.dark-company{
  background:#111;
  color:#fff;
}
.dark-company .eyebrow{
  color:#ff9d78;
}
.dark-company p{
  color:#b7b0aa;
}

/* Footer */
.footer-company-links{
  display:grid;
  gap:9px;
  font-size:13px;
}

@media(max-width:980px){
  .innovation-focus,
  .partner-pillars{
    grid-template-columns:1fr 1fr;
  }
  .career-areas{
    grid-template-columns:1fr 1fr;
  }
  .innovation-process{
    grid-template-columns:1fr 1fr;
  }
  .page-intro-grid{
    grid-template-columns:1fr;
  }
  .page-intro-side{
    position:static;
  }
  .company-dropdown{
    width:100%;
  }
  .company-dropdown-toggle{
    width:100%;
    justify-content:space-between;
  }
  .company-dropdown-menu{
    position:static;
    width:100%;
    margin-top:8px;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
  }
  .company-dropdown:hover .company-dropdown-menu{display:none}
  .company-dropdown.open .company-dropdown-menu{display:block}
}
@media(max-width:650px){
  .innovation-focus,
  .partner-pillars,
  .career-areas,
  .innovation-process,
  .partner-principles{
    grid-template-columns:1fr;
  }
  .partner-principle:nth-child(even){
    border-left:0;
    padding-left:0;
  }
  .partner-principle:nth-child(odd){
    padding-right:0;
  }
  .faq-page-item summary{
    grid-template-columns:1fr 34px;
  }
  .faq-page-item summary .category{
    grid-column:1/-1;
  }
  .faq-page-answer{
    padding-left:0;
  }
}


/* =========================================================
   TOCHKA NET v9: fixed-size button transitions + richer motion
   ========================================================= */

/* Buttons: NEVER change size/scale on hover */
.btn,
.btn:hover,
.btn:active{
  transform:none !important;
}

/* Fancy background transition instead of movement */
.btn{
  background-image:linear-gradient(110deg,#111 0 49%,transparent 51% 100%);
  background-size:210% 100%;
  background-position:100% 0;
  transition:
    background-position .46s cubic-bezier(.2,.72,.2,1),
    color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease !important;
}
.btn:hover{
  background-position:0 0;
  color:#fff;
  box-shadow:0 10px 26px rgba(17,17,17,.10);
}
.btn::before,
.btn::after{
  display:none !important;
}

/* Primary button gets inverse sweep, stays same size */
.btn-primary{
  background-image:linear-gradient(110deg,var(--orange) 0 49%,#111 51% 100%) !important;
  background-size:210% 100% !important;
  background-position:100% 0 !important;
  color:#fff !important;
}
.btn-primary:hover{
  background-position:0 0 !important;
  color:#111 !important;
  border-color:var(--orange) !important;
}

/* Orange button */
.btn-orange{
  background-image:linear-gradient(110deg,#111 0 49%,var(--orange) 51% 100%) !important;
  background-size:210% 100% !important;
  background-position:100% 0 !important;
  color:#111;
}
.btn-orange:hover{
  background-position:0 0 !important;
  color:#fff;
}

/* White/secondary button */
.btn-secondary{
  background-image:linear-gradient(110deg,var(--orange) 0 49%,#fff 51% 100%) !important;
  background-size:210% 100% !important;
  background-position:100% 0 !important;
  color:#111;
}
.btn-secondary:hover{
  background-position:0 0 !important;
  color:#111;
  border-color:var(--orange);
}

/* Scroll progress */
.site-progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0;
  background:var(--orange);
  z-index:1000;
  pointer-events:none;
  transition:width .08s linear;
}

/* Ambient hero movement */
.hero,
.company-hero,
.page-hero{
  position:relative;
  overflow:hidden;
}
.hero::after,
.company-hero::after,
.page-hero::after{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  border:1px solid rgba(255,107,53,.16);
  right:-120px;
  top:18%;
  animation:ambientOrbit 11s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero::before,
.company-hero::before{
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  border-radius:50%;
  background:rgba(255,107,53,.07);
  left:7%;
  bottom:8%;
  filter:blur(4px);
  animation:ambientFloat 8s ease-in-out infinite;
  pointer-events:none;
}

/* Hero UI comes alive */
.product-dashboard{
  animation:dashboardBreath 7s ease-in-out infinite;
}
.product-card{
  transition:
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}
.product-card:hover{
  background:#fff8f3;
  border-color:#dfb8a5;
  box-shadow:0 10px 24px rgba(58,34,20,.08);
}
.product-status{
  animation:statusPulse 2.8s ease-in-out infinite;
}
.product-chart{
  overflow:hidden;
}
.product-chart::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:70px;
  background:linear-gradient(90deg,transparent,rgba(255,107,53,.13),transparent);
  animation:chartScan 5.2s linear infinite;
}

/* Trust strip gently moves */
.trust-items{
  animation:trustDrift 9s ease-in-out infinite alternate;
}

/* Section headings get animated rule */
.section-head{
  position:relative;
}
.section-head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-14px;
  width:0;
  height:2px;
  background:var(--orange);
  transition:width .8s cubic-bezier(.2,.72,.2,1);
}
.section-enter.in .section-head::after,
.section-head.in::after{
  width:72px;
}

/* Service tabs */
.service-tab{
  position:relative;
  overflow:hidden;
}
.service-tab::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:5px;
  height:2px;
  background:var(--orange);
  transform:scaleX(0);
  transition:transform .28s ease;
}
.service-tab:hover::after,
.service-tab.active::after{
  transform:scaleX(1);
}

/* Visual windows: subtle scan line */
.visual-window{
  position:relative;
  overflow:hidden;
}
.visual-window::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-40px;
  height:40px;
  background:linear-gradient(180deg,transparent,rgba(255,107,53,.08),transparent);
  animation:windowScan 6.4s linear infinite;
  pointer-events:none;
}

/* Problem cards feel more active */
.problem-card::after{
  content:"";
  position:absolute;
  left:-30%;
  top:0;
  width:28%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,107,53,.08),transparent);
  transform:skewX(-12deg);
  transition:left .55s ease;
  pointer-events:none;
}
.problem-card:hover::after{
  left:115%;
}

/* Innovation / partner / careers cards */
.innovation-card,
.partner-pillar,
.career-area,
.why-card{
  position:relative;
  overflow:hidden;
}
.innovation-card::before,
.partner-pillar::before,
.career-area::before,
.why-card::before{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  border-radius:50%;
  border:1px solid rgba(255,107,53,.15);
  right:-42px;
  bottom:-42px;
  transition:transform .5s ease,opacity .5s ease;
  opacity:.65;
}
.innovation-card:hover::before,
.partner-pillar:hover::before,
.career-area:hover::before,
.why-card:hover::before{
  transform:scale(1.35);
  opacity:1;
}

/* FAQ hover is less static */
.faq-item summary,
.faq-page-item summary{
  transition:padding-left .25s ease,color .25s ease;
}
.faq-item summary:hover,
.faq-page-item summary:hover{
  padding-left:8px;
  color:#9d421d;
}

/* Contact inputs */
.field input,
.field textarea,
.field select{
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,107,53,.08);
}

/* Footer logo glow */
.footer .brand-symbol{
  transition:box-shadow .3s ease,background .3s ease;
}
.footer .brand:hover .brand-symbol{
  box-shadow:0 0 0 6px rgba(255,107,53,.10);
}

/* Additional motion classes */
.motion-drift{
  animation:softDrift 7s ease-in-out infinite alternate;
}
.motion-pulse{
  animation:softPulse 4.5s ease-in-out infinite;
}

/* Keyframes */
@keyframes ambientOrbit{
  from{transform:translate3d(0,0,0) rotate(0deg)}
  to{transform:translate3d(-24px,20px,0) rotate(7deg)}
}
@keyframes ambientFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-18px) scale(1.08)}
}
@keyframes dashboardBreath{
  0%,100%{transform:rotate(-2deg) translateY(0)}
  50%{transform:rotate(-1deg) translateY(-5px)}
}
@keyframes statusPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,107,53,0)}
  50%{box-shadow:0 0 0 6px rgba(255,107,53,.10)}
}
@keyframes chartScan{
  from{left:-80px}
  to{left:110%}
}
@keyframes trustDrift{
  from{transform:translateX(0)}
  to{transform:translateX(-10px)}
}
@keyframes windowScan{
  from{top:-50px}
  to{top:110%}
}
@keyframes softDrift{
  from{transform:translateY(0)}
  to{transform:translateY(-8px)}
}
@keyframes softPulse{
  0%,100%{opacity:.75}
  50%{opacity:1}
}

/* Reduce motion */
@media(prefers-reduced-motion:reduce){
  .hero::after,
  .hero::before,
  .company-hero::after,
  .company-hero::before,
  .page-hero::after,
  .product-dashboard,
  .product-status,
  .product-chart::before,
  .trust-items,
  .visual-window::after,
  .motion-drift,
  .motion-pulse{
    animation:none !important;
  }
  .site-progress{
    transition:none !important;
  }
}


/* =========================================================
   TOCHKA NET v10: extra motion in homepage hero visual
   ========================================================= */

.product-stage{
  position:relative;
}
.hero-floating-chip{
  position:absolute;
  right:10px;
  top:26px;
  width:190px;
  background:#fff;
  border:1px solid rgba(17,17,17,.10);
  border-radius:14px;
  padding:14px 14px 12px;
  box-shadow:0 18px 40px rgba(58,34,20,.12);
  z-index:4;
  animation:chipFloat 5.8s ease-in-out infinite;
}
.hero-floating-chip .chip-label{
  display:block;
  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
  color:#8d867f;
  margin-bottom:7px;
  text-transform:uppercase;
}
.hero-floating-chip strong{
  display:block;
  font-size:14px;
  line-height:1.25;
  margin-bottom:12px;
}
.chip-bars{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  align-items:end;
  height:40px;
}
.chip-bars i{
  display:block;
  border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--orange),#ffb18e);
  animation:chipBar 2.8s ease-in-out infinite alternate;
}
.chip-bars i:nth-child(1){height:34%; animation-delay:.1s}
.chip-bars i:nth-child(2){height:82%; animation-delay:.35s}
.chip-bars i:nth-child(3){height:56%; animation-delay:.55s}
.chip-bars i:nth-child(4){height:94%; animation-delay:.8s}

.hero-orbit-visual{
  position:absolute;
  right:-8px;
  bottom:58px;
  width:136px;
  height:136px;
  z-index:2;
  animation:orbitFloat 8s ease-in-out infinite;
}
.orbit-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(255,107,53,.22);
}
.orbit-ring.ring-2{
  inset:16px;
  border-style:dashed;
  animation:spinSlow 12s linear infinite;
}
.orbit-dot{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#111;
  box-shadow:0 0 0 4px rgba(255,107,53,.14);
}
.orbit-dot.dot-1{
  top:6px;
  left:56px;
  animation:dotOrbitA 6.4s linear infinite;
}
.orbit-dot.dot-2{
  top:40px;
  left:14px;
  background:var(--orange);
  animation:dotOrbitB 5.4s linear infinite reverse;
}
.orbit-core{
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--orange);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 0 rgba(255,107,53,.18);
  animation:corePulse 2.6s ease-in-out infinite;
}

@keyframes chipFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-8px) rotate(.6deg)}
}
@keyframes chipBar{
  from{transform:scaleY(.8); filter:saturate(.9)}
  to{transform:scaleY(1.06); filter:saturate(1.08)}
}
@keyframes orbitFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes spinSlow{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
@keyframes dotOrbitA{
  0%{transform:translate(0,0)}
  25%{transform:translate(44px,16px)}
  50%{transform:translate(30px,66px)}
  75%{transform:translate(-20px,44px)}
  100%{transform:translate(0,0)}
}
@keyframes dotOrbitB{
  0%{transform:translate(0,0)}
  25%{transform:translate(70px,-6px)}
  50%{transform:translate(78px,56px)}
  75%{transform:translate(6px,76px)}
  100%{transform:translate(0,0)}
}
@keyframes corePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,107,53,.10)}
  50%{box-shadow:0 0 0 12px rgba(255,107,53,0)}
}

@media(max-width:980px){
  .hero-floating-chip{
    right:10px;
    top:18px;
    width:172px;
  }
  .hero-orbit-visual{
    right:4px;
    bottom:30px;
    width:120px;
    height:120px;
  }
}
@media(max-width:650px){
  .hero-floating-chip{
    right:8px;
    top:auto;
    bottom:16px;
    width:154px;
    padding:12px;
  }
  .hero-floating-chip strong{
    font-size:12px;
  }
  .hero-orbit-visual{
    right:-4px;
    bottom:110px;
    width:96px;
    height:96px;
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-floating-chip,
  .chip-bars i,
  .hero-orbit-visual,
  .orbit-ring.ring-2,
  .orbit-dot,
  .orbit-core{
    animation:none !important;
  }
}


/* =========================================================
   TOCHKA NET v12: tighter hero typography
   ========================================================= */

/* Homepage hero */
.hero h1{
  font-size:clamp(48px,5.7vw,84px) !important;
  line-height:1.02 !important;
  max-width:880px !important;
}
.hero .lead{
  font-size:clamp(17px,1.55vw,21px) !important;
}

/* Inner page heroes */
.company-hero h1,
.page-hero h1{
  font-size:clamp(46px,5.4vw,78px) !important;
  line-height:1.03 !important;
  max-width:920px !important;
}
.company-hero h2,
.page-hero h2{
  font-size:clamp(36px,4.2vw,62px) !important;
  line-height:1.04 !important;
}

/* General section H2s slightly tighter too */
.section h2,
.cta h2{
  font-size:clamp(38px,4.4vw,66px);
  line-height:1.03;
}

/* Keep first viewport more compact */
.hero{
  padding-top:145px !important;
  padding-bottom:62px !important;
}
.company-hero,
.page-hero{
  padding-top:142px !important;
  padding-bottom:68px !important;
}

@media(max-width:650px){
  .hero h1{
    font-size:clamp(44px,12vw,62px) !important;
  }
  .company-hero h1,
  .page-hero h1{
    font-size:clamp(42px,11vw,58px) !important;
  }
  .section h2,
  .cta h2{
    font-size:clamp(34px,9vw,50px);
  }
}


/* =========================================================
   TOCHKA NET v13: tighter typography + glass nav
   ========================================================= */

/* Slightly smaller hero H1s again */
.hero h1{
  font-size:clamp(44px,5.15vw,74px) !important;
  line-height:1.03 !important;
  max-width:820px !important;
}
.company-hero h1,
.page-hero h1{
  font-size:clamp(42px,4.9vw,70px) !important;
  line-height:1.04 !important;
  max-width:880px !important;
}

/* Slightly smaller major H2s */
.section h2,
.cta h2{
  font-size:clamp(36px,4vw,60px) !important;
  line-height:1.04 !important;
}

/* Service-point / benefit sentences: larger and darker */
.service-point{
  font-size:16px !important;
  color:#3f3b37 !important;
  line-height:1.5;
}
.service-point::before{
  color:var(--orange-dark) !important;
}

/* Make supporting service copy a little stronger too */
.service-copy p{
  color:#4d4944 !important;
  font-size:19px !important;
}

/* Header moves to viewport top after scroll */
.site-header{
  transition:
    top .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    backdrop-filter .28s ease !important;
}

.site-header.scrolled{
  top:0 !important;
  background:rgba(247,245,241,.58) !important;
  backdrop-filter:blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(165%) !important;
  border-bottom:1px solid rgba(17,17,17,.08) !important;
  box-shadow:0 10px 34px rgba(17,17,17,.055) !important;
}

/* Slightly more compact nav once sticky */
.site-header.scrolled .nav{
  min-height:58px !important;
}

/* Glass highlight */
.site-header.scrolled::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.82),
    transparent
  );
  pointer-events:none;
}

@media(max-width:650px){
  .hero h1{
    font-size:clamp(40px,10.8vw,56px) !important;
  }
  .company-hero h1,
  .page-hero h1{
    font-size:clamp(38px,10vw,54px) !important;
  }
  .section h2,
  .cta h2{
    font-size:clamp(32px,8.5vw,46px) !important;
  }
  .service-point{
    font-size:15px !important;
  }
}


/* =========================================================
   TOCHKA NET v14: animated hero tech visual
   ========================================================= */

.hero-product{
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-tech-visual{
  position:relative;
  width:min(100%, 760px);
  height:560px;
  border-radius:34px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.72), transparent 22%),
    radial-gradient(circle at 88% 84%, rgba(255,107,53,.14), transparent 26%),
    linear-gradient(145deg, #f6ede7, #f0e0d5 58%, #efcfba);
  box-shadow:0 26px 80px rgba(62, 35, 18, .14);
  overflow:hidden;
  border:1px solid rgba(17,17,17,.06);
}

.tech-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.65));
  opacity:.44;
  animation:gridDrift 18s linear infinite;
}

.signal-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(4px);
  opacity:.85;
}
.signal-orb.orb-a{
  width:210px;
  height:210px;
  left:-55px;
  top:66px;
  background:radial-gradient(circle, rgba(255,107,53,.20), rgba(255,107,53,.02) 72%, transparent 74%);
  animation:orbPulseA 8.2s ease-in-out infinite;
}
.signal-orb.orb-b{
  width:160px;
  height:160px;
  right:22px;
  bottom:18px;
  background:radial-gradient(circle, rgba(255,255,255,.65), rgba(255,255,255,.02) 72%, transparent 74%);
  animation:orbPulseB 7.4s ease-in-out infinite;
}

.server-cluster{
  position:absolute;
  left:32px;
  top:110px;
  width:180px;
  display:grid;
  gap:14px;
  z-index:2;
  animation:clusterFloat 7s ease-in-out infinite;
}
.server-unit{
  background:rgba(17,17,17,.96);
  color:#fff;
  border-radius:18px;
  padding:14px 16px 15px;
  box-shadow:0 14px 28px rgba(17,17,17,.16);
  position:relative;
  overflow:hidden;
}
.server-unit strong{
  display:block;
  font-size:14px;
  margin-bottom:8px;
}
.server-unit i{
  display:block;
  width:100%;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  margin-top:6px;
  position:relative;
  overflow:hidden;
}
.server-unit i::after{
  content:"";
  position:absolute;
  left:-45%;
  top:0;
  width:45%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,107,53,.95), transparent);
  animation:lineTravel 3.6s linear infinite;
}
.server-unit i:nth-of-type(2)::after{animation-delay:.45s}
.server-unit i:nth-of-type(3)::after{animation-delay:.9s}
.server-led{
  position:absolute;
  right:14px;
  top:14px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff7e46;
  box-shadow:0 0 0 0 rgba(255,126,70,.24);
  animation:ledPulse 2.4s ease-in-out infinite;
}

.monitor-screen{
  position:absolute;
  left:210px;
  top:56px;
  width:360px;
  min-height:340px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:28px;
  padding:24px;
  box-shadow:0 24px 58px rgba(67,40,24,.16);
  border:1px solid rgba(17,17,17,.07);
  z-index:3;
  animation:screenFloat 7.8s ease-in-out infinite;
}
.screen-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.screen-top strong{
  font-size:20px;
}
.screen-top span{
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  color:#fff;
  background:#111;
  padding:7px 10px;
  border-radius:999px;
}
.screen-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:16px;
}
.screen-stat{
  background:#fbf8f6;
  border:1px solid #e3ddd6;
  border-radius:16px;
  padding:14px 12px;
}
.screen-stat small{
  display:block;
  color:#7a726b;
  font-size:11px;
  margin-bottom:7px;
}
.screen-stat b{
  font-size:25px;
  color:#171513;
}
.screen-stat b.ok{
  color:#c15321;
}

.screen-body{
  display:grid;
  gap:14px;
}
.chart-panel{
  position:relative;
  height:140px;
  border-radius:18px;
  background:
    linear-gradient(rgba(17,17,17,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.05) 1px, transparent 1px),
    linear-gradient(180deg, #fff, #fbf7f4);
  background-size:24px 24px, 24px 24px, auto;
  border:1px solid #e4ddd6;
  overflow:hidden;
}
.chart-lines{
  position:absolute;
  inset:0;
}
.chart-lines .line{
  position:absolute;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,107,53,.25), #ff6b35 65%, rgba(255,107,53,.18));
}
.chart-lines .line-1{width:78px; left:18px; top:92px; transform:rotate(-14deg)}
.chart-lines .line-2{width:88px; left:86px; top:82px; transform:rotate(8deg)}
.chart-lines .line-3{width:78px; left:158px; top:74px; transform:rotate(-8deg)}
.chart-lines .line-4{width:92px; left:224px; top:62px; transform:rotate(12deg)}
.chart-lines .line-5{width:84px; left:292px; top:49px; transform:rotate(-6deg)}
.chart-wave{
  position:absolute;
  left:-28%;
  top:0;
  width:28%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,107,53,.12), rgba(255,255,255,.5), transparent);
  animation:chartSweep 4.6s linear infinite;
}

.security-panel{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:12px;
  align-items:center;
  background:#111;
  color:#fff;
  border-radius:18px;
  padding:18px;
  position:relative;
  overflow:hidden;
}
.security-panel::after{
  content:"";
  position:absolute;
  left:-35%;
  top:0;
  width:35%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation:securitySweep 5.2s linear infinite;
}
.shield-icon{
  width:72px;
  height:72px;
  border-radius:22px;
  background:linear-gradient(180deg, #2a2724, #1a1816);
  display:grid;
  place-items:center;
  position:relative;
}
.shield-icon::before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(255,107,53,.36);
  border-radius:18px;
}
.shield-core{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#ff6b35;
  display:grid;
  place-items:center;
  font-weight:900;
  box-shadow:0 0 0 0 rgba(255,107,53,.18);
  animation:shieldPulse 2.8s ease-in-out infinite;
}
.security-copy small{
  display:block;
  color:#f7b699;
  margin-bottom:6px;
  font-size:11px;
}
.security-copy strong{
  font-size:16px;
  line-height:1.35;
}

.status-card{
  position:absolute;
  width:182px;
  background:#fff;
  border-radius:18px;
  padding:16px;
  box-shadow:0 18px 40px rgba(52,31,20,.12);
  border:1px solid rgba(17,17,17,.08);
  z-index:4;
}
.status-card-top{
  right:28px;
  top:80px;
  animation:cardFloatTop 6s ease-in-out infinite;
}
.status-card-bottom{
  right:36px;
  bottom:64px;
  animation:cardFloatBottom 7.1s ease-in-out infinite;
}
.mono-label{
  display:block;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  color:#8a8179;
  margin-bottom:8px;
}
.status-card strong{
  display:block;
  font-size:15px;
  line-height:1.32;
  color:#181614;
}

.mini-bars{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:end;
  gap:7px;
  height:42px;
  margin-top:12px;
}
.mini-bars i{
  display:block;
  border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg, #ff6b35, #ffb08d);
  animation:barsDance 3.2s ease-in-out infinite alternate;
}
.mini-bars i:nth-child(1){height:38%; animation-delay:.08s}
.mini-bars i:nth-child(2){height:86%; animation-delay:.34s}
.mini-bars i:nth-child(3){height:58%; animation-delay:.57s}
.mini-bars i:nth-child(4){height:92%; animation-delay:.83s}

.backup-flow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
}
.cloud-dot, .db-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  display:block;
  position:relative;
}
.cloud-dot{
  background:#111;
}
.db-dot{
  background:#ff6b35;
}
.flow-line{
  flex:1;
  height:4px;
  border-radius:999px;
  background:rgba(17,17,17,.12);
  position:relative;
  overflow:hidden;
}
.flow-line::after{
  content:"";
  position:absolute;
  left:-34%;
  top:0;
  width:34%;
  height:100%;
  background:linear-gradient(90deg, transparent, #ff6b35, transparent);
  animation:flowMove 2.8s linear infinite;
}

.tech-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}
.flow-path{
  fill:none;
  stroke:#ff6b35;
  stroke-opacity:.42;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:8 14;
  animation:pathShift 4.6s linear infinite;
}
.flow-path.path-2{animation-duration:5.4s}
.flow-path.path-3{animation-duration:4.2s}

@keyframes gridDrift{
  from{transform:translate(0,0)}
  to{transform:translate(42px,42px)}
}
@keyframes orbPulseA{
  0%,100%{transform:scale(1); opacity:.72}
  50%{transform:scale(1.12); opacity:1}
}
@keyframes orbPulseB{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.16)}
}
@keyframes clusterFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes screenFloat{
  0%,100%{transform:translateY(0) rotate(-1.3deg)}
  50%{transform:translateY(-8px) rotate(-.4deg)}
}
@keyframes ledPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,126,70,0)}
  50%{box-shadow:0 0 0 8px rgba(255,126,70,.10)}
}
@keyframes lineTravel{
  from{left:-45%}
  to{left:120%}
}
@keyframes chartSweep{
  from{left:-28%}
  to{left:118%}
}
@keyframes securitySweep{
  from{left:-35%}
  to{left:120%}
}
@keyframes shieldPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,107,53,.08)}
  50%{box-shadow:0 0 0 14px rgba(255,107,53,0)}
}
@keyframes cardFloatTop{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
@keyframes cardFloatBottom{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(9px)}
}
@keyframes barsDance{
  from{transform:scaleY(.82)}
  to{transform:scaleY(1.05)}
}
@keyframes flowMove{
  from{left:-34%}
  to{left:120%}
}
@keyframes pathShift{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-88}
}

@media(max-width:1100px){
  .hero-tech-visual{
    height:520px;
  }
  .monitor-screen{
    left:180px;
    width:340px;
  }
  .server-cluster{
    left:20px;
    width:150px;
  }
  .status-card-top{right:16px}
  .status-card-bottom{right:18px}
}
@media(max-width:860px){
  .hero-tech-visual{
    height:500px;
  }
  .server-cluster{
    top:92px;
    width:138px;
  }
  .server-unit strong{
    font-size:13px;
  }
  .monitor-screen{
    left:152px;
    width:320px;
    padding:20px;
  }
  .status-card{
    width:168px;
  }
}
@media(max-width:650px){
  .hero-tech-visual{
    height:470px;
    border-radius:26px;
  }
  .server-cluster{
    left:14px;
    top:116px;
    width:114px;
    gap:10px;
  }
  .server-unit{
    padding:12px;
    border-radius:14px;
  }
  .server-unit strong{
    font-size:11px;
    margin-bottom:6px;
  }
  .monitor-screen{
    left:118px;
    top:54px;
    width:230px;
    min-height:300px;
    border-radius:20px;
    padding:15px;
  }
  .screen-top strong{
    font-size:15px;
  }
  .screen-top span{
    font-size:9px;
    padding:6px 8px;
  }
  .screen-stats{
    gap:6px;
  }
  .screen-stat{
    padding:10px 8px;
    border-radius:12px;
  }
  .screen-stat b{
    font-size:18px;
  }
  .chart-panel{
    height:110px;
  }
  .security-panel{
    grid-template-columns:58px 1fr;
    padding:12px;
  }
  .shield-icon{
    width:48px;
    height:48px;
    border-radius:14px;
  }
  .shield-core{
    width:28px;
    height:28px;
    font-size:12px;
  }
  .security-copy strong{
    font-size:13px;
  }
  .status-card{
    width:138px;
    padding:12px;
    border-radius:14px;
  }
  .status-card strong{
    font-size:12px;
  }
  .status-card-top{
    top:16px;
    right:10px;
  }
  .status-card-bottom{
    right:10px;
    bottom:18px;
  }
}

@media(prefers-reduced-motion:reduce){
  .tech-grid-bg,
  .signal-orb,
  .server-cluster,
  .monitor-screen,
  .server-led,
  .server-unit i::after,
  .chart-wave,
  .security-panel::after,
  .shield-core,
  .status-card-top,
  .status-card-bottom,
  .mini-bars i,
  .flow-line::after,
  .flow-path{
    animation:none !important;
  }
}


/* =========================================================
   TOCHKA NET v15: dark navy + electric cyan brand system
   ========================================================= */

:root{
  --bg:#06131F !important;
  --paper:#091A29 !important;
  --ink:#F4F8FC !important;
  --muted:#93A8B8 !important;
  --line:rgba(72,176,220,.20) !important;
  --line-dark:rgba(0,229,244,.32) !important;
  --orange:#00E5F4 !important;
  --orange-dark:#00BDD4 !important;
  --peach:#0A2435 !important;
  --peach-2:#0D3044 !important;
  --sand:#0A1B29 !important;
  --lav:#0B2031 !important;
  --white:#FFFFFF !important;
  --cyan:#00E5F4;
  --blue:#2A7CFF;
  --navy:#06131F;
  --navy-2:#081A28;
  --navy-3:#0A2232;
  --text:#F4F8FC;
  --text-soft:#A7BDCC;
}

/* Global */
body{
  background:
    radial-gradient(circle at 85% 6%, rgba(0,229,244,.08), transparent 26%),
    radial-gradient(circle at 10% 45%, rgba(42,124,255,.07), transparent 28%),
    var(--navy) !important;
  color:var(--text) !important;
}
h1,h2,h3,strong,b{color:var(--text)}
p,.muted{color:var(--text-soft)}
.eyebrow{
  color:var(--cyan) !important;
}
.eyebrow::before{
  background:var(--cyan) !important;
}

/* Selected logo */
.brand-logo-link{
  display:inline-flex !important;
  align-items:center;
  min-width:172px;
}
.brand-logo-img{
  width:172px;
  height:auto;
  display:block;
}
.footer-brand-logo .brand-logo-img{
  width:190px;
}

/* Announcement */
.top-note{
  background:linear-gradient(90deg,#002B3D,#003C50,#002B3D) !important;
  color:#BDF8FF !important;
  border-bottom:1px solid rgba(0,229,244,.20);
}

/* Navigation */
.site-header{
  background:rgba(6,19,31,.90) !important;
  border-bottom:1px solid rgba(0,229,244,.15) !important;
}
.site-header.scrolled{
  background:rgba(6,19,31,.68) !important;
  backdrop-filter:blur(24px) saturate(155%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(155%) !important;
  box-shadow:0 12px 40px rgba(0,0,0,.24) !important;
}
.nav-links>a,
.nav-dropdown-toggle,
.company-dropdown-toggle{
  color:#DDEAF2 !important;
}
.nav-links>a:hover,
.nav-dropdown-toggle:hover,
.company-dropdown-toggle:hover{
  color:var(--cyan) !important;
}
.nav-dropdown-menu,
.company-dropdown-menu{
  background:#081A28 !important;
  border:1px solid rgba(0,229,244,.22) !important;
  box-shadow:0 26px 65px rgba(0,0,0,.34) !important;
}
.nav-dropdown-menu a,
.company-dropdown-menu a{
  color:#DCEAF2 !important;
}
.nav-dropdown-menu a:hover,
.company-dropdown-menu a:hover{
  background:rgba(0,229,244,.09) !important;
  color:#00E5F4 !important;
}
.nav-dropdown-menu small{
  color:#7794A7 !important;
}

/* Buttons: cyan sweep */
.btn{
  border-color:rgba(0,229,244,.55) !important;
  color:#EAF7FC !important;
  background-image:linear-gradient(110deg,#00E5F4 0 49%,transparent 51% 100%) !important;
}
.btn:hover{
  color:#041018 !important;
  border-color:#00E5F4 !important;
}
.btn-primary{
  background-image:linear-gradient(110deg,#0A1A27 0 49%,#00E5F4 51% 100%) !important;
  background-color:#00E5F4 !important;
  color:#041018 !important;
  border-color:#00E5F4 !important;
}
.btn-primary:hover{
  color:#FFFFFF !important;
  border-color:#00E5F4 !important;
}
.btn-secondary{
  background-image:linear-gradient(110deg,#00E5F4 0 49%,#F5FAFD 51% 100%) !important;
}
.btn-orange{
  background-image:linear-gradient(110deg,#06131F 0 49%,#00E5F4 51% 100%) !important;
  border-color:#00E5F4 !important;
}

/* Hero */
.hero{
  background:
    radial-gradient(circle at 78% 28%,rgba(0,229,244,.12),transparent 24%),
    radial-gradient(circle at 92% 65%,rgba(42,124,255,.12),transparent 28%),
    linear-gradient(180deg,#06131F,#071825) !important;
}
.hero h1 span{
  color:#00E5F4 !important;
}
.hero .lead{
  color:#A9C0CF !important;
}
.hero-review{
  color:#82A1B4 !important;
}
.hero-review .stars{
  color:#00E5F4 !important;
}
.hero-review .score{
  border-left-color:rgba(0,229,244,.26) !important;
}

/* Animated hero tech visual */
.hero-tech-visual{
  background:
    radial-gradient(circle at 18% 22%,rgba(0,229,244,.10),transparent 24%),
    radial-gradient(circle at 88% 84%,rgba(42,124,255,.12),transparent 26%),
    linear-gradient(145deg,#071724,#082130 58%,#0A2B3C) !important;
  border:1px solid rgba(0,229,244,.18) !important;
  box-shadow:0 32px 95px rgba(0,0,0,.42) !important;
}
.tech-grid-bg{
  background-image:
    linear-gradient(rgba(0,229,244,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,244,.08) 1px, transparent 1px) !important;
}
.signal-orb.orb-a{
  background:radial-gradient(circle,rgba(0,229,244,.20),rgba(0,229,244,.02) 72%,transparent 74%) !important;
}
.signal-orb.orb-b{
  background:radial-gradient(circle,rgba(42,124,255,.18),rgba(42,124,255,.02) 72%,transparent 74%) !important;
}
.server-unit{
  background:rgba(4,15,23,.96) !important;
  border:1px solid rgba(0,229,244,.18);
  box-shadow:0 15px 32px rgba(0,0,0,.34) !important;
}
.server-unit i{
  background:rgba(0,229,244,.10) !important;
}
.server-unit i::after{
  background:linear-gradient(90deg,transparent,#00E5F4,transparent) !important;
}
.server-led{
  background:#00E5F4 !important;
}
.monitor-screen{
  background:rgba(8,26,40,.94) !important;
  border:1px solid rgba(0,229,244,.18) !important;
  box-shadow:0 28px 65px rgba(0,0,0,.38) !important;
}
.screen-top span{
  background:#00E5F4 !important;
  color:#041018 !important;
}
.screen-stat{
  background:#0A2232 !important;
  border-color:rgba(0,229,244,.14) !important;
}
.screen-stat small{
  color:#7EA0B5 !important;
}
.screen-stat b{
  color:#F5FAFD !important;
}
.screen-stat b.ok{
  color:#00E5F4 !important;
}
.chart-panel{
  background:
    linear-gradient(rgba(0,229,244,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,244,.07) 1px,transparent 1px),
    linear-gradient(180deg,#071A28,#081E2D) !important;
  border-color:rgba(0,229,244,.14) !important;
}
.chart-lines .line{
  background:linear-gradient(90deg,rgba(0,229,244,.20),#00E5F4 65%,rgba(42,124,255,.22)) !important;
}
.chart-wave{
  background:linear-gradient(90deg,transparent,rgba(0,229,244,.14),rgba(42,124,255,.20),transparent) !important;
}
.security-panel{
  background:#041018 !important;
  border:1px solid rgba(0,229,244,.16);
}
.security-panel::after{
  background:linear-gradient(90deg,transparent,rgba(0,229,244,.10),transparent) !important;
}
.shield-icon{
  background:linear-gradient(180deg,#0B2A3C,#071B28) !important;
}
.shield-icon::before{
  border-color:rgba(0,229,244,.40) !important;
}
.shield-core{
  background:#00E5F4 !important;
  color:#041018 !important;
}
.security-copy small{
  color:#7FEAF3 !important;
}
.status-card{
  background:#081B29 !important;
  border:1px solid rgba(0,229,244,.18) !important;
  box-shadow:0 20px 46px rgba(0,0,0,.34) !important;
}
.mono-label{
  color:#78A4B8 !important;
}
.status-card strong{
  color:#F5FAFD !important;
}
.mini-bars i{
  background:linear-gradient(180deg,#00E5F4,#2A7CFF) !important;
}
.cloud-dot{
  background:#00E5F4 !important;
}
.db-dot{
  background:#2A7CFF !important;
}
.flow-line{
  background:rgba(0,229,244,.12) !important;
}
.flow-line::after{
  background:linear-gradient(90deg,transparent,#00E5F4,transparent) !important;
}
.flow-path{
  stroke:#00E5F4 !important;
}

/* Trust strip */
.trust-strip{
  background:#071723 !important;
  border-color:rgba(0,229,244,.16) !important;
}
.trust-inner>span{
  color:#7794A7 !important;
}
.trust-items b{
  color:#B4CCD9 !important;
}

/* Main sections */
.services-showcase,
.anatomy-section,
.why-section,
.faq-section,
.company-hero,
.page-hero{
  background:#071723 !important;
  color:#F4F8FC !important;
}
.section{
  color:#F4F8FC;
}
.section-head p,
.service-copy p,
.anatomy-top p,
.page-intro-main p,
.rich p,
.faq-answer,
.faq-page-answer{
  color:#9FB6C5 !important;
}
.service-tabs .service-tab{
  background:#0A2232 !important;
  color:#A7BFCD !important;
  border-color:rgba(0,229,244,.16) !important;
}
.service-tab:hover,
.service-tab.active{
  background:#00E5F4 !important;
  color:#041018 !important;
  border-color:#00E5F4 !important;
}
.service-tab::after{
  background:#2A7CFF !important;
}
.service-visual{
  background:linear-gradient(135deg,#071B29,#0A2D41) !important;
}
.visual-window{
  background:#081B29 !important;
  border-color:rgba(0,229,244,.16) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.30) !important;
}
.visual-head span{
  color:#00E5F4 !important;
}
.visual-card{
  background:#0A2232 !important;
  border-color:rgba(0,229,244,.13) !important;
}
.visual-card:hover{
  background:#0D2A3D !important;
  border-color:rgba(0,229,244,.40) !important;
}
.visual-card span{
  color:#799AAD !important;
}
.server-line{
  background:#0E3145 !important;
}
.server-line::after{
  background:linear-gradient(90deg,#00E5F4,#2A7CFF) !important;
}
.security-row{
  background:#0D2A3D !important;
  color:#B8D0DC !important;
}
.security-row i{
  color:#00E5F4 !important;
}

/* Dark problem section */
.problem-section{
  background:#030A10 !important;
}
.problem-card{
  background:#071723 !important;
  border-color:rgba(0,229,244,.14) !important;
}
.problem-card.large{
  background:linear-gradient(135deg,#071723,#092536) !important;
}
.problem-card .tag{
  color:#72A3B7 !important;
}
.problem-card p{
  color:#9EB4C2 !important;
}
.problem-meter i{
  background:linear-gradient(180deg,#00E5F4,#2A7CFF) !important;
}

/* Anatomy cards */
.issue-route::before{
  background:linear-gradient(90deg,#00E5F4 0 22%,#2A7CFF 22% 52%,#00E5F4 52% 76%,#2A7CFF 76% 100%) !important;
}
.issue-step{
  background:#081B29 !important;
  border-color:rgba(0,229,244,.16) !important;
}
.issue-step:hover{
  border-color:rgba(0,229,244,.48) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.28) !important;
}
.issue-node{
  background:#00E5F4 !important;
  border-color:#071723 !important;
}
.issue-step:nth-child(even) .issue-node{
  background:#2A7CFF !important;
}
.issue-step .step-code,
.issue-step .step-output{
  color:#77A1B5 !important;
}
.issue-step p{
  color:#9EB5C3 !important;
}
.issue-step .step-output{
  border-top-color:rgba(0,229,244,.14) !important;
}

/* Why cards */
.why-card,
.innovation-card,
.partner-pillar{
  background:#081B29 !important;
  border-color:rgba(0,229,244,.14) !important;
  color:#F4F8FC !important;
}
.why-card:hover,
.innovation-card:hover,
.partner-pillar:hover{
  border-color:rgba(0,229,244,.45) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.28) !important;
}
.why-card .num,
.innovation-card .num{
  color:#00E5F4 !important;
}
.why-card p,
.innovation-card p,
.partner-pillar p{
  color:#9FB6C5 !important;
}

/* Company pages */
.company-hero,
.page-hero{
  background:
    radial-gradient(circle at 82% 20%,rgba(0,229,244,.10),transparent 26%),
    linear-gradient(180deg,#06131F,#071723) !important;
  border-color:rgba(0,229,244,.14) !important;
}
.page-intro-main .quote,
.quote{
  color:#F4F8FC !important;
  border-color:rgba(0,229,244,.16) !important;
}
.innovation-stage{
  background:#081B29 !important;
  border-color:rgba(0,229,244,.14) !important;
  color:#F4F8FC !important;
}
.innovation-stage span{
  color:#00E5F4 !important;
}
.innovation-stage p{
  color:#9FB6C5 !important;
}
.dark-company{
  background:#030A10 !important;
}
.career-area{
  background:#071723 !important;
  border:1px solid rgba(0,229,244,.14);
}
.career-area:hover{
  background:#0A2435 !important;
}
.career-area span{
  color:#00E5F4 !important;
}
.career-note{
  background:#0A2232 !important;
  border-color:rgba(0,229,244,.18) !important;
}
.career-note p{
  color:#A7BFCD !important;
}
.partner-principle{
  border-color:rgba(0,229,244,.16) !important;
}
.partner-principle span{
  color:#00E5F4 !important;
}

/* FAQ */
.faq-page-categories .faq-filter{
  background:#081B29 !important;
  color:#9FB6C5 !important;
  border-color:rgba(0,229,244,.16) !important;
}
.faq-filter:hover,
.faq-filter.active{
  background:#00E5F4 !important;
  color:#041018 !important;
  border-color:#00E5F4 !important;
}
.faq-page-list,
.faq-list,
.faq-page-item,
.faq-item{
  border-color:rgba(0,229,244,.15) !important;
}
.faq-item summary,
.faq-page-item summary{
  color:#EAF5FA !important;
}
.faq-item summary:hover,
.faq-page-item summary:hover{
  color:#00E5F4 !important;
}
.faq-item summary::after,
.faq-page-item summary::after{
  border-color:rgba(0,229,244,.30) !important;
  color:#00E5F4 !important;
}
.faq-item[open] summary::after,
.faq-page-item[open] summary::after{
  background:#00E5F4 !important;
  color:#041018 !important;
  border-color:#00E5F4 !important;
}

/* Forms */
.contact-card{
  background:#081B29 !important;
  border-color:rgba(0,229,244,.16) !important;
  box-shadow:0 18px 55px rgba(0,0,0,.26) !important;
}
.field label{
  color:#88A9B9 !important;
}
.field input,
.field textarea,
.field select{
  background:#071723 !important;
  color:#F4F8FC !important;
  border-color:rgba(0,229,244,.16) !important;
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  border-color:#00E5F4 !important;
  box-shadow:0 0 0 4px rgba(0,229,244,.08) !important;
}

/* CTA */
.cta{
  background:linear-gradient(135deg,#00CFE2,#008CD7) !important;
  color:#041018 !important;
}
.cta h2,
.cta p,
.cta .eyebrow{
  color:#041018 !important;
}

/* Footer */
.footer{
  background:#030A10 !important;
  border-top:1px solid rgba(0,229,244,.12);
}
.footer p,
.footer a{
  color:#7F9AAB !important;
}
.footer a:hover{
  color:#00E5F4 !important;
}
.footer-bottom{
  color:#668396 !important;
  border-top-color:rgba(0,229,244,.12) !important;
}

/* Progress + back to top */
.site-progress{
  background:linear-gradient(90deg,#00E5F4,#2A7CFF) !important;
}
.back-to-top{
  background:rgba(6,19,31,.86) !important;
  color:#00E5F4 !important;
  border-color:rgba(0,229,244,.42) !important;
}
.back-to-top:hover{
  background:#00E5F4 !important;
  color:#041018 !important;
}

/* Animated decorative elements */
.hero::after,
.company-hero::after,
.page-hero::after{
  border-color:rgba(0,229,244,.16) !important;
}
.hero::before,
.company-hero::before{
  background:rgba(42,124,255,.08) !important;
}
.product-status{
  background:#00E5F4 !important;
  color:#041018 !important;
}
.section-head::after{
  background:linear-gradient(90deg,#00E5F4,#2A7CFF) !important;
}

/* Mobile dropdown */
@media(max-width:980px){
  .nav-links{
    background:#071723 !important;
    border-color:rgba(0,229,244,.20) !important;
    box-shadow:0 24px 65px rgba(0,0,0,.36) !important;
  }
}


/* =========================================================
   TOCHKA NET v16: hero cleanup + stronger text contrast
   ========================================================= */

/* -----------------------------------------
   Better readability for service bullet text
   ----------------------------------------- */
.service-point{
  color:#DCEAF2 !important;
  font-size:18px !important;
  line-height:1.58 !important;
  font-weight:500 !important;
}
.service-point::before{
  color:#00E5F4 !important;
}
.service-copy p{
  color:#B5CBD8 !important;
  font-size:19px !important;
}
.visual-card p,
.security-row,
.issue-step p,
.problem-card p,
.why-card p,
.innovation-card p,
.partner-pillar p,
.career-note p,
.faq-page-answer,
.faq-answer{
  color:#B7CBD8 !important;
}

/* -----------------------------------------
   Hero right visual: remove off-white feel
   ----------------------------------------- */
.hero-tech-visual{
  background:
    radial-gradient(circle at 20% 18%, rgba(0,229,244,.10), transparent 24%),
    radial-gradient(circle at 85% 76%, rgba(42,124,255,.12), transparent 28%),
    linear-gradient(145deg, #06131F 0%, #081A28 48%, #0A2435 100%) !important;
  border:1px solid rgba(0,229,244,.12) !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.02) !important;
}

.tech-grid-bg{
  opacity:.34 !important;
}

.server-unit{
  background:linear-gradient(180deg,#081923,#06121B) !important;
  border:1px solid rgba(0,229,244,.14) !important;
  box-shadow:
    0 16px 28px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}
.server-unit strong{
  color:#F1F8FC !important;
}
.server-unit i{
  background:rgba(0,229,244,.12) !important;
}

.monitor-screen{
  background:linear-gradient(180deg, rgba(7,21,32,.96), rgba(8,25,38,.94)) !important;
  border:1px solid rgba(0,229,244,.14) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,.42),
    0 0 0 1px rgba(0,229,244,.05),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}

.screen-top strong,
.screen-stat b,
.security-copy strong{
  color:#F4FAFD !important;
}
.screen-top span{
  background:linear-gradient(90deg,#00E5F4,#2A7CFF) !important;
  color:#041018 !important;
  box-shadow:0 0 18px rgba(0,229,244,.16);
}

.screen-stat{
  background:linear-gradient(180deg,#0A1F2E,#0A2435) !important;
  border:1px solid rgba(0,229,244,.10) !important;
}
.screen-stat small{
  color:#8FB1C3 !important;
}

.chart-panel{
  background:
    linear-gradient(rgba(0,229,244,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,244,.05) 1px, transparent 1px),
    linear-gradient(180deg, #071825, #091E2C) !important;
  border:1px solid rgba(0,229,244,.10) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015) !important;
}

.security-panel{
  background:linear-gradient(135deg,#071723,#06121B) !important;
  border:1px solid rgba(0,229,244,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important;
}

.shield-icon{
  background:linear-gradient(180deg,#0B2A3C,#081A28) !important;
  border:1px solid rgba(0,229,244,.12) !important;
}
.shield-core{
  box-shadow:
    0 0 0 0 rgba(0,229,244,.14),
    0 0 24px rgba(0,229,244,.18) !important;
}

.status-card{
  background:linear-gradient(180deg,#081824,#07131D) !important;
  border:1px solid rgba(0,229,244,.13) !important;
  box-shadow:
    0 20px 46px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}
.status-card strong{
  color:#F4FAFD !important;
}

.cloud-dot{
  box-shadow:0 0 18px rgba(0,229,244,.18) !important;
}
.db-dot{
  box-shadow:0 0 18px rgba(42,124,255,.16) !important;
}
.flow-path{
  stroke:#22EAF7 !important;
  stroke-opacity:.46 !important;
}

/* Soften harsh light separators that may look off-white */
.visual-window,
.visual-card,
.issue-step,
.problem-card,
.why-card,
.innovation-card,
.partner-pillar,
.career-area,
.contact-card,
.career-note{
  box-shadow:0 14px 34px rgba(0,0,0,.18) !important;
}

.visual-window,
.visual-card,
.issue-step,
.problem-card,
.why-card,
.innovation-card,
.partner-pillar,
.career-area,
.contact-card,
.career-note,
.faq-item,
.faq-page-item{
  border-color:rgba(0,229,244,.12) !important;
}

/* Headings and important supporting copy slightly brighter */
.section-head p,
.anatomy-top p,
.page-intro-main p,
.rich p{
  color:#AEC4D1 !important;
}

/* Slightly improve mobile readability too */
@media(max-width:650px){
  .service-point{
    font-size:17px !important;
    line-height:1.55 !important;
  }
  .service-copy p{
    font-size:18px !important;
  }
}


/* =========================================================
   TOCHKA NET v17: remove light hero frame + stronger animation
   ========================================================= */

/* Main hero visual becomes a floating scene, no light frame */
.hero-product{
  position:relative;
}

.hero-tech-visual{
  position:relative;
  width:min(100%,760px);
  height:560px;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* Large dark floating canvas replaces the off-white framed shell */
.tech-grid-bg{
  position:absolute;
  inset:46px 28px 38px 112px !important;
  border-radius:34px !important;
  background:
    linear-gradient(rgba(0,229,244,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,244,.05) 1px, transparent 1px),
    linear-gradient(145deg, rgba(6,19,31,.94), rgba(8,25,38,.92) 56%, rgba(10,36,53,.90)) !important;
  background-size:28px 28px, 28px 28px, auto !important;
  border:1px solid rgba(0,229,244,.12) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,229,244,.03),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
  opacity:1 !important;
  animation:gridPanelFloat 8s ease-in-out infinite;
  overflow:hidden;
}
.tech-grid-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(0,229,244,.12), transparent 20%),
    radial-gradient(circle at 82% 74%, rgba(42,124,255,.10), transparent 22%);
  pointer-events:none;
}
.tech-grid-bg::after{
  content:"";
  position:absolute;
  left:-28%;
  top:0;
  width:28%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(0,229,244,.10), rgba(42,124,255,.12), transparent);
  animation:gridScan 7.2s linear infinite;
  pointer-events:none;
}

/* More subtle ambient orbs */
.signal-orb.orb-a{
  left:72px !important;
  top:44px !important;
  width:180px !important;
  height:180px !important;
  filter:blur(14px) !important;
  opacity:.8 !important;
}
.signal-orb.orb-b{
  right:18px !important;
  bottom:26px !important;
  width:170px !important;
  height:170px !important;
  filter:blur(10px) !important;
  opacity:.62 !important;
}

/* Server stack floats independently */
.server-cluster{
  left:36px !important;
  top:132px !important;
  z-index:3 !important;
  animation:clusterAdvancedFloat 8s ease-in-out infinite !important;
}
.server-unit{
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.server-unit::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.02), transparent 35%, rgba(0,229,244,.03));
  pointer-events:none;
}

/* Main screen becomes the star element */
.monitor-screen{
  left:230px !important;
  top:84px !important;
  width:370px !important;
  min-height:356px !important;
  border-radius:30px !important;
  z-index:4 !important;
  animation:screenAdvancedFloat 8.8s ease-in-out infinite !important;
}
.monitor-screen::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:30px;
  padding:1px;
  background:linear-gradient(135deg, rgba(0,229,244,.28), rgba(42,124,255,.10), rgba(0,229,244,.06));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
.monitor-screen::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:30px;
  box-shadow:0 0 40px rgba(0,229,244,.07);
  pointer-events:none;
}

.chart-panel{
  position:relative;
}
.chart-panel::after{
  content:"";
  position:absolute;
  inset:auto 18px 16px 18px;
  height:2px;
  background:linear-gradient(90deg, rgba(0,229,244,.0), rgba(0,229,244,.7), rgba(42,124,255,.0));
  filter:blur(.2px);
  animation:chartPulseLine 3s ease-in-out infinite;
}
.chart-lines .line{
  animation:linePulse 3.6s ease-in-out infinite;
}
.chart-lines .line-2{animation-delay:.3s}
.chart-lines .line-3{animation-delay:.6s}
.chart-lines .line-4{animation-delay:.9s}
.chart-lines .line-5{animation-delay:1.2s}

/* Floating status cards get clearer motion */
.status-card-top{
  right:18px !important;
  top:116px !important;
  animation:cardOrbitTop 6.8s ease-in-out infinite !important;
}
.status-card-bottom{
  right:46px !important;
  bottom:92px !important;
  animation:cardOrbitBottom 7.6s ease-in-out infinite !important;
}
.status-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  background:linear-gradient(120deg, rgba(255,255,255,.02), transparent 40%, rgba(0,229,244,.03));
  pointer-events:none;
}

/* Animated connector lines stronger */
.tech-lines{
  opacity:1 !important;
  z-index:2 !important;
}
.flow-path{
  stroke-width:2.2 !important;
  stroke-dasharray:6 11 !important;
  filter:drop-shadow(0 0 3px rgba(0,229,244,.16));
  animation:pathShift 3.8s linear infinite, pathGlow 2.4s ease-in-out infinite !important;
}
.flow-path.path-2{
  animation-duration:4.5s, 2.6s !important;
}
.flow-path.path-3{
  animation-duration:3.4s, 2.2s !important;
}

/* Extra floating data dots */
.hero-tech-visual .data-dot{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#00E5F4;
  box-shadow:0 0 0 0 rgba(0,229,244,.18);
}
.hero-tech-visual::before,
.hero-tech-visual::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.hero-tech-visual::before{
  width:10px;
  height:10px;
  left:210px;
  top:74px;
  background:#00E5F4;
  box-shadow:0 0 0 0 rgba(0,229,244,.15);
  animation:dataDotPulseA 2.8s ease-in-out infinite;
}
.hero-tech-visual::after{
  width:12px;
  height:12px;
  right:126px;
  bottom:122px;
  background:#2A7CFF;
  box-shadow:0 0 0 0 rgba(42,124,255,.16);
  animation:dataDotPulseB 3.2s ease-in-out infinite;
}

/* Keyframes */
@keyframes gridPanelFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes gridScan{
  from{left:-28%}
  to{left:120%}
}
@keyframes clusterAdvancedFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes screenAdvancedFloat{
  0%,100%{transform:translateY(0) rotate(-.55deg)}
  50%{transform:translateY(-8px) rotate(.25deg)}
}
@keyframes chartPulseLine{
  0%,100%{opacity:.4; transform:scaleX(.92)}
  50%{opacity:1; transform:scaleX(1)}
}
@keyframes linePulse{
  0%,100%{filter:brightness(.92)}
  50%{filter:brightness(1.22)}
}
@keyframes cardOrbitTop{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-8px) rotate(.6deg)}
}
@keyframes cardOrbitBottom{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(10px) rotate(-.5deg)}
}
@keyframes pathGlow{
  0%,100%{stroke-opacity:.36}
  50%{stroke-opacity:.78}
}
@keyframes dataDotPulseA{
  0%,100%{box-shadow:0 0 0 0 rgba(0,229,244,0)}
  50%{box-shadow:0 0 0 12px rgba(0,229,244,0)}
}
@keyframes dataDotPulseB{
  0%,100%{box-shadow:0 0 0 0 rgba(42,124,255,0)}
  50%{box-shadow:0 0 0 14px rgba(42,124,255,0)}
}

/* Mobile adjustments */
@media(max-width:860px){
  .tech-grid-bg{
    inset:48px 18px 34px 86px !important;
  }
  .monitor-screen{
    left:190px !important;
    width:330px !important;
  }
}
@media(max-width:650px){
  .hero-tech-visual{
    height:470px !important;
  }
  .tech-grid-bg{
    inset:60px 8px 24px 60px !important;
    border-radius:24px !important;
  }
  .monitor-screen{
    left:122px !important;
    top:62px !important;
    width:230px !important;
    min-height:300px !important;
    border-radius:22px !important;
  }
  .monitor-screen::before{
    border-radius:22px !important;
  }
  .status-card-top{
    right:6px !important;
    top:22px !important;
  }
  .status-card-bottom{
    right:14px !important;
    bottom:18px !important;
  }
  .server-cluster{
    left:8px !important;
    top:120px !important;
  }
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  .tech-grid-bg,
  .tech-grid-bg::after,
  .signal-orb,
  .server-cluster,
  .monitor-screen,
  .chart-panel::after,
  .chart-lines .line,
  .status-card-top,
  .status-card-bottom,
  .flow-path,
  .hero-tech-visual::before,
  .hero-tech-visual::after{
    animation:none !important;
  }
}


/* =========================================================
   TOCHKA NET v18: fully remove cream hero shell
   ========================================================= */

/* The original warm hero container was still visible behind v17 */
.hero-product{
  min-height:560px !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
  overflow:visible !important;
  box-shadow:none !important;
  animation:none !important;
}

.hero-product::before,
.hero-product::after{
  display:none !important;
  content:none !important;
}

/* Dark scene should visually merge into the page */
.hero-tech-visual{
  margin:0 !important;
  background:transparent !important;
}

/* Slight cyan bloom behind the floating interface */
.hero-tech-visual .tech-grid-bg{
  box-shadow:
    0 30px 76px rgba(0,0,0,.34),
    0 0 60px rgba(0,229,244,.045),
    inset 0 1px 0 rgba(255,255,255,.018) !important;
}

/* No white/cream surfaces anywhere in the hero UI */
.monitor-screen,
.status-card,
.server-unit,
.screen-stat,
.chart-panel,
.security-panel{
  color:#F4F8FC !important;
}

.monitor-screen{
  background:linear-gradient(160deg,#071824,#092333) !important;
}

.status-card{
  background:linear-gradient(160deg,#071722,#081F2D) !important;
}

.screen-stat{
  background:#092231 !important;
}

.chart-panel{
  background:
    linear-gradient(rgba(0,229,244,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,244,.045) 1px,transparent 1px),
    #071A27 !important;
}

.security-panel{
  background:linear-gradient(145deg,#05111A,#071C29) !important;
}

/* Enhance floating scene separation without a visible frame */
.server-cluster,
.monitor-screen,
.status-card{
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.22));
}

@media(max-width:650px){
  .hero-product{
    min-height:470px !important;
  }
}


/* =========================================================
   TOCHKA NET v19: official Option 1 logo
   ========================================================= */
.brand-logo-link{
  min-width:178px !important;
}
.brand-logo-img{
  width:178px !important;
  height:auto !important;
}
.site-header.scrolled .brand-logo-img{
  width:158px !important;
}
.footer-brand-logo .brand-logo-img{
  width:204px !important;
}

@media(max-width:650px){
  .brand-logo-img{
    width:152px !important;
  }
  .site-header.scrolled .brand-logo-img{
    width:138px !important;
  }
  .footer-brand-logo .brand-logo-img{
    width:178px !important;
  }
}


/* =========================================================
   TOCHKA NET v20: inner service page readability
   ========================================================= */

/* Hero supporting text on inner service pages */
.page-hero .lead,
.company-hero .lead{
  color:#C5D8E4 !important;
  font-size:20px !important;
  line-height:1.58 !important;
  max-width:820px !important;
}

/* Intro copy */
.content-grid .rich p,
.page-intro-main p{
  color:#BED1DD !important;
  font-size:19px !important;
  line-height:1.68 !important;
}

/* Service tiles on individual pages */
.service-grid{
  gap:16px !important;
}

.service-tile{
  background:
    linear-gradient(160deg, rgba(8,27,41,.98), rgba(7,23,35,.98)) !important;
  border:1px solid rgba(0,229,244,.17) !important;
  color:#F4F8FC !important;
  min-height:300px !important;
  padding:32px !important;
  border-radius:18px !important;
  box-shadow:0 16px 36px rgba(0,0,0,.20) !important;
  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease !important;
}

.service-tile:hover{
  transform:translateY(-4px) !important;
  background:
    linear-gradient(160deg, rgba(10,37,54,.99), rgba(8,29,43,.99)) !important;
  border-color:rgba(0,229,244,.42) !important;
  box-shadow:
    0 22px 44px rgba(0,0,0,.26),
    0 0 24px rgba(0,229,244,.035) !important;
}

/* Numbers / labels */
.service-icon{
  color:#00E5F4 !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;
  margin-bottom:46px !important;
}

/* Service headings */
.service-tile h3{
  color:#F7FBFD !important;
  font-size:30px !important;
  line-height:1.12 !important;
  margin-bottom:16px !important;
}

/* Service body text */
.service-tile p{
  color:#C0D3DE !important;
  font-size:18px !important;
  line-height:1.62 !important;
  margin-bottom:0 !important;
}

/* Sticky section label */
.sticky-label .eyebrow{
  color:#00E5F4 !important;
}

/* FAQ readability on inner service pages */
.faq-section .faq-intro p{
  color:#B9CDD8 !important;
  font-size:18px !important;
  line-height:1.58 !important;
}

.faq-item summary{
  color:#F0F7FA !important;
  font-size:18px !important;
  font-weight:600 !important;
}

.faq-answer{
  color:#BBD0DA !important;
  font-size:17px !important;
  line-height:1.62 !important;
}

/* CTA copy on dark pages */
.cta .lead,
.cta p{
  font-size:19px !important;
  line-height:1.58 !important;
}

/* Tablet/mobile */
@media(max-width:980px){
  .service-tile{
    min-height:270px !important;
  }
}

@media(max-width:650px){
  .page-hero .lead,
  .company-hero .lead{
    font-size:18px !important;
  }

  .content-grid .rich p,
  .page-intro-main p{
    font-size:18px !important;
  }

  .service-tile{
    min-height:auto !important;
    padding:26px !important;
  }

  .service-tile h3{
    font-size:27px !important;
  }

  .service-tile p{
    font-size:17px !important;
  }
}


/* =========================================================
   TOCHKA NET v21: full-site dark-theme readability pass
   ========================================================= */

/* Ensure no legacy inline white content section breaks dark theme */
.section[style*="background:#fff"],
.section[style*="background: #fff"]{
  background:#071723 !important;
  color:#F4F8FC !important;
}

/* Global readable body copy on dark sections */
.section p:not(.form-note),
.section li,
.copy-lg,
.rich p,
.page-intro-main p,
.contact-grid p,
.address-card span,
.partner-principle p,
.innovation-stage p,
.innovation-card p,
.partner-pillar p,
.career-area p,
.why-card p,
.problem-card p,
.issue-step p,
.service-tile p,
.service-copy p{
  color:#BED2DE !important;
}

/* Main descriptive copy slightly larger */
.rich p,
.page-intro-main p,
.copy-lg,
.contact-grid p,
.partner-principle p,
.innovation-stage p,
.innovation-card p,
.partner-pillar p,
.career-area p{
  font-size:18px !important;
  line-height:1.66 !important;
}

/* All major headings consistently bright */
.section h1,
.section h2,
.section h3,
.page-hero h1,
.company-hero h1,
.page-hero h2,
.company-hero h2,
.page-hero h3,
.company-hero h3{
  color:#F6FBFD !important;
}

/* Muted text was too dim */
.muted,
.section .muted{
  color:#AFC5D2 !important;
}

/* FAQ page: strongest readability */
.faq-page-list{
  border-top-color:rgba(0,229,244,.22) !important;
}

.faq-page-item{
  border-bottom-color:rgba(0,229,244,.20) !important;
}

.faq-page-item summary{
  color:#F2F9FC !important;
  font-size:19px !important;
  line-height:1.45 !important;
  font-weight:600 !important;
}

.faq-page-item summary .category{
  color:#00E5F4 !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.09em !important;
}

.faq-page-answer{
  color:#C4D7E1 !important;
  font-size:18px !important;
  line-height:1.68 !important;
}

/* FAQ category tabs */
.faq-page-categories .faq-filter{
  background:#092231 !important;
  color:#C2D5DF !important;
  border-color:rgba(0,229,244,.22) !important;
  font-size:15px !important;
  font-weight:700 !important;
}

.faq-page-categories .faq-filter:hover,
.faq-page-categories .faq-filter.active{
  background:#00E5F4 !important;
  color:#031018 !important;
  border-color:#00E5F4 !important;
}

/* Standard FAQ blocks on all other pages */
.faq-item summary{
  color:#F2F9FC !important;
  font-size:18px !important;
  line-height:1.48 !important;
  font-weight:600 !important;
}

.faq-answer{
  color:#C2D6E0 !important;
  font-size:17px !important;
  line-height:1.67 !important;
}

/* Innovation / Partnerships / Careers content blocks */
.innovation-card,
.partner-pillar,
.innovation-stage,
.career-area,
.partner-principle,
.career-note{
  color:#F4F8FC !important;
}

.innovation-card h3,
.partner-pillar h3,
.innovation-stage h3,
.career-area h3,
.partner-principle h3{
  color:#F6FBFD !important;
}

.partner-principle{
  border-color:rgba(0,229,244,.18) !important;
}

/* Careers note: no low contrast */
.career-note{
  background:#092535 !important;
  border-color:rgba(0,229,244,.20) !important;
}
.career-note p,
.career-note strong{
  color:#C6D9E3 !important;
}

/* Legal pages */
.content-grid .sticky-label .muted{
  color:#9FB8C7 !important;
}
.content-grid .rich h3{
  color:#F4FAFD !important;
  font-size:27px !important;
}
.content-grid .rich p{
  color:#BED2DE !important;
}

/* Contact page */
.address-card strong{
  color:#F5FAFD !important;
}
.address-card span{
  color:#BBD0DC !important;
}

/* Footer remains intentionally lower contrast but still readable */
.footer p,
.footer a{
  color:#91ABBA !important;
}
.footer a:hover{
  color:#00E5F4 !important;
}
.footer-bottom{
  color:#7694A6 !important;
}

/* Mobile */
@media(max-width:650px){
  .faq-page-item summary{
    font-size:17px !important;
  }
  .faq-page-answer{
    font-size:17px !important;
  }
  .rich p,
  .page-intro-main p,
  .copy-lg{
    font-size:17px !important;
  }
}