/*
Theme Name: chmod775
Theme URI: https://chmod775.ru
Author: chmod775.ru
Author URI: https://chmod775.ru
Description: Кастомная одностраничная тема для ИТ-компании chmod775.ru: настройка 1С, серверы, виртуализация, внедрение Битрикс24. Форма заявки отправляется через wp_mail() с защитой от ботов и CSRF (nonce).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chmod775
*/

:root{
    --paper:#EEF2F6;
    --paper-2:#E3EAF1;
    --ink:#142438;
    --ink-soft:#4A5F76;
    --ink-faint:#7C8FA3;
    --line:#BCCBDB;
    --line-soft:#D3DEE9;
    --blue:#2F6FA5;
    --blue-deep:#1E4D77;
    --amber:#C97A2B;
    --white:#FFFFFF;
    --max:1180px;
    --gap:24px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Space Grotesk',sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:'JetBrains Mono',monospace;}

  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  ul{margin:0;padding:0;list-style:none;}
  h1,h2,h3,p{margin:0;}

  ::selection{background:var(--blue);color:var(--white);}

  :focus-visible{
    outline:2px solid var(--blue);
    outline-offset:3px;
  }

  /* ---------- blueprint background ---------- */
  .grid-bg{
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size:40px 40px;
    background-position:-1px -1px;
  }

  .wrap{
    max-width:var(--max);
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- corner bracket decoration ---------- */
  .bracket{
    position:relative;
  }
  .bracket::before,.bracket::after{
    content:"";
    position:absolute;
    width:16px;height:16px;
    border:1.5px solid var(--blue);
    opacity:.55;
  }
  .bracket::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
  .bracket::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}

  .tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'JetBrains Mono',monospace;
    font-size:12.5px;
    letter-spacing:.02em;
    color:var(--blue-deep);
    background:rgba(47,111,165,.08);
    border:1px solid rgba(47,111,165,.25);
    padding:5px 10px;
  }
  .tag .dot{
    width:6px;height:6px;
    background:var(--amber);
    border-radius:50%;
    flex-shrink:0;
  }
  @media (prefers-reduced-motion:no-preference){
    .tag .dot{animation:pulse 2.6s ease-in-out infinite;}
  }
  @keyframes pulse{
    0%,100%{opacity:1;}
    50%{opacity:.25;}
  }

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(238,242,246,.9);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 0;
  }
  .logo{
    display:flex;
    align-items:baseline;
    gap:10px;
    font-weight:700;
    font-size:20px;
    letter-spacing:.01em;
  }
  .logo .mark{
    display:inline-block;
    width:11px;height:11px;
    background:var(--blue);
  }
  .logo .sub{
    font-family:'JetBrains Mono',monospace;
    font-weight:400;
    font-size:12px;
    color:var(--ink-faint);
  }
  nav.main-nav{
    display:flex;
    gap:34px;
  }
  nav.main-nav a{
    font-size:14.5px;
    color:var(--ink-soft);
    position:relative;
    padding:4px 0;
    transition:color .15s ease;
  }
  nav.main-nav a:hover{color:var(--ink);}
  nav.main-nav a::after{
    content:"";
    position:absolute;left:0;right:100%;bottom:-1px;
    height:1.5px;background:var(--blue);
    transition:right .2s ease;
  }
  nav.main-nav a:hover::after{right:0;}

  .header-right{display:flex;align-items:center;gap:22px;}
  .phone{
    font-family:'JetBrains Mono',monospace;
    font-size:14.5px;
    color:var(--ink);
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--ink);
    color:var(--paper);
    border:1px solid var(--ink);
    padding:11px 20px;
    font-family:'Space Grotesk',sans-serif;
    font-size:14.5px;
    font-weight:500;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);}
  .btn-ghost{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--line);
  }
  .btn-ghost:hover{border-color:var(--blue);color:var(--blue-deep);background:transparent;}

  .nav-toggle{display:none;}

  /* ---------- hero ---------- */
  .hero{
    padding:72px 0 96px;
    border-bottom:1px solid var(--line);
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:56px;
    align-items:center;
  }
  .hero-eyebrow{
    margin-bottom:22px;
  }
  .hero h1{
    font-size:46px;
    line-height:1.14;
    font-weight:600;
    letter-spacing:-.01em;
    max-width:15ch;
  }
  .hero p.lead{
    margin-top:22px;
    max-width:46ch;
    font-size:17px;
    color:var(--ink-soft);
  }
  .hero-cta{
    display:flex;
    gap:14px;
    margin-top:34px;
    flex-wrap:wrap;
  }
  .hero-metrics{
    display:flex;
    gap:40px;
    margin-top:52px;
    padding-top:28px;
    border-top:1px solid var(--line);
  }
  .metric .num{
    font-family:'JetBrains Mono',monospace;
    font-size:26px;
    font-weight:600;
    color:var(--blue-deep);
  }
  .metric .label{
    margin-top:4px;
    font-size:13px;
    color:var(--ink-faint);
    max-width:16ch;
  }

  .hero-diagram{padding:24px;}

  /* ---------- section shell ---------- */
  section{padding:88px 0;}
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:32px;
    margin-bottom:52px;
    padding-bottom:24px;
    border-bottom:1px solid var(--line);
  }
  .section-head h2{
    font-size:32px;
    font-weight:600;
    letter-spacing:-.01em;
    max-width:14ch;
  }
  .section-head .note{
    max-width:34ch;
    font-size:14.5px;
    color:var(--ink-soft);
    text-align:right;
  }
  @media (max-width:720px){
    .section-head{flex-direction:column;align-items:flex-start;}
    .section-head .note{text-align:left;}
  }

  /* ---------- services ---------- */
  .services{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .service{
    background:var(--paper);
    padding:36px 36px 32px;
  }
  .service-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:22px;
  }
  .service-icon{
    width:44px;height:44px;
    flex-shrink:0;
  }
  .service-index{
    font-family:'JetBrains Mono',monospace;
    font-size:12.5px;
    color:var(--ink-faint);
  }
  .service h3{
    font-size:21px;
    font-weight:600;
    margin-bottom:10px;
  }
  .service p{
    color:var(--ink-soft);
    font-size:14.5px;
    max-width:46ch;
  }
  .service-list{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:9px;
  }
  .service-list li{
    font-size:13.5px;
    color:var(--ink-soft);
    padding-left:16px;
    position:relative;
  }
  .service-list li::before{
    content:"";
    position:absolute;left:0;top:7px;
    width:6px;height:1.5px;
    background:var(--blue);
  }

  /* ---------- process ---------- */
  .process{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
  }
  .step{
    padding:0 26px 0 0;
    border-right:1px solid var(--line);
    position:relative;
  }
  .step:last-child{border-right:none;padding-right:0;}
  .step .step-num{
    font-family:'JetBrains Mono',monospace;
    font-size:13px;
    color:var(--blue);
    margin-bottom:16px;
  }
  .step h3{
    font-size:18px;
    font-weight:600;
    margin-bottom:10px;
  }
  .step p{
    font-size:14px;
    color:var(--ink-soft);
  }
  .step-line{
    height:1px;
    background:var(--line);
    margin-bottom:24px;
    position:relative;
  }
  .step-line::after{
    content:"";
    position:absolute;
    top:-3px;left:0;
    width:7px;height:7px;
    border-radius:50%;
    background:var(--blue);
  }

  /* ---------- stack / tools ---------- */
  .stack-panel{
    border:1px solid var(--line);
    padding:44px;
    background:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size:28px 28px;
  }
  .stack-groups{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:32px;
  }
  .stack-group .g-title{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    color:var(--ink-faint);
    margin-bottom:14px;
    padding-bottom:10px;
    border-bottom:1px solid var(--line);
  }
  .stack-group ul{display:flex;flex-direction:column;gap:10px;}
  .stack-group li{
    font-size:14px;
    color:var(--ink);
  }

  /* ---------- reliability ---------- */
  .reliability{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--gap);
  }
  .rel-card{
    border:1px solid var(--line);
    padding:28px 26px;
  }
  .rel-card .rn{
    font-family:'JetBrains Mono',monospace;
    font-size:24px;
    color:var(--blue-deep);
    margin-bottom:14px;
  }
  .rel-card h3{font-size:16px;font-weight:600;margin-bottom:8px;}
  .rel-card p{font-size:13.5px;color:var(--ink-soft);}

  /* ---------- contact ---------- */
  .contact-panel{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    border:1px solid var(--line);
  }
  .contact-info{
    background:var(--ink);
    color:var(--paper);
    padding:48px 42px;
  }
  .contact-info h2{
    font-size:28px;
    font-weight:600;
    max-width:12ch;
    margin-bottom:18px;
  }
  .contact-info p{
    color:#AEBFD1;
    font-size:14.5px;
    max-width:38ch;
    margin-bottom:36px;
  }
  .contact-detail{
    margin-bottom:20px;
  }
  .contact-detail .k{
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px;
    color:#6E86A0;
    margin-bottom:4px;
  }
  .contact-detail .v{font-size:15px;}

  .contact-form{padding:48px 42px;}
  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px;
  }
  .field{display:flex;flex-direction:column;gap:8px;}
  .field.full{grid-column:1 / -1;}
  .field label{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    color:var(--ink-faint);
  }
  .field input,.field select,.field textarea{
    border:1px solid var(--line);
    background:var(--white);
    padding:11px 12px;
    font-family:'Space Grotesk',sans-serif;
    font-size:14.5px;
    color:var(--ink);
  }
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:2px solid var(--blue);
    outline-offset:1px;
    border-color:var(--blue);
  }
  .field textarea{resize:vertical;min-height:88px;}
  .form-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:6px;
    flex-wrap:wrap;
  }
  .form-foot .fine{font-size:12.5px;color:var(--ink-faint);max-width:32ch;}
  .form-note{
    margin-top:18px;
    font-size:13px;
    color:var(--blue-deep);
    display:none;
  }
  .form-note.show{display:block;}

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:40px 0;
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }
  .footer-nav{display:flex;gap:26px;}
  .footer-nav a{font-size:13.5px;color:var(--ink-soft);}
  .footer-nav a:hover{color:var(--ink);}
  .footer-legal{font-size:12.5px;color:var(--ink-faint);}

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-diagram{order:-1;max-width:420px;margin:0 auto;}
    .services{grid-template-columns:1fr;}
    .process{grid-template-columns:1fr 1fr;row-gap:36px;}
    .step{border-right:none;padding-right:0;}
    .stack-groups{grid-template-columns:1fr 1fr;row-gap:32px;}
    .reliability{grid-template-columns:1fr 1fr;}
    .contact-panel{grid-template-columns:1fr;}
  }
  @media (max-width:720px){
    .wrap{padding:0 20px;}
    nav.main-nav{
      position:absolute;top:100%;left:0;right:0;
      background:var(--paper);
      border-bottom:1px solid var(--line);
      flex-direction:column;
      padding:18px 20px 24px;
      gap:16px;
      display:none;
    }
    nav.main-nav.open{display:flex;}
    .header-right .phone{display:none;}
    .nav-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:38px;height:38px;
      border:1px solid var(--line);
      background:none;
      cursor:pointer;
    }
    .hero h1{font-size:34px;max-width:100%;}
    .hero-metrics{flex-wrap:wrap;row-gap:20px;}
    .section-head h2{font-size:26px;}
    .process{grid-template-columns:1fr;}
    .stack-groups{grid-template-columns:1fr;}
    .reliability{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
    .footer-inner{flex-direction:column;align-items:flex-start;}
  }

/* ---------- honeypot (скрыто визуально, доступно ботам-парсерам) ---------- */
.hp-field{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}

.field-error{
  display:none;
  font-size:13px;
  color:#B3401F;
  margin-bottom:14px;
}
.field-error.show{display:block;}

.field input:invalid:not(:placeholder-shown){
  border-color:#B3401F;
}

/* ---------- wp_nav_menu markup (ul/li внутри nav) ---------- */
nav.main-nav ul{
  display:flex;
  gap:34px;
  list-style:none;
  margin:0;
  padding:0;
}
nav.main-nav li{list-style:none;}
.footer-nav ul{
  display:flex;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}
.footer-nav li{list-style:none;}

@media (max-width:720px){
  nav.main-nav ul{
    flex-direction:column;
    gap:16px;
  }
}

/* ---------- pricing ---------- */
.pricing-intro{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.pricing-intro p{
  max-width:52ch;
  font-size:14.5px;
  color:var(--ink-soft);
}
.pricing-groups{
  display:flex;
  flex-direction:column;
  gap:40px;
}
.pricing-group-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.pricing-group-head .idx{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  color:var(--blue-deep);
}
.pricing-group-head h3{
  font-size:19px;
  font-weight:600;
}

table.pricing-table{
  width:100%;
  border-collapse:collapse;
}
table.pricing-table th{
  text-align:left;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  font-weight:400;
  color:var(--ink-faint);
  padding:0 10px 10px 0;
  border-bottom:1px solid var(--line);
}
table.pricing-table td{
  padding:14px 10px 14px 0;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
  font-size:14.5px;
}
table.pricing-table tr:last-child td{border-bottom:1px solid var(--line);}
table.pricing-table td.svc{font-weight:600;width:26%;}
table.pricing-table td.desc{color:var(--ink-soft);font-size:13.5px;width:50%;}
table.pricing-table td.cost{
  font-family:'JetBrains Mono',monospace;
  text-align:right;
  white-space:nowrap;
  width:24%;
  color:var(--blue-deep);
  font-weight:600;
}
table.pricing-table td.cost .unit{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-weight:400;
  font-size:11.5px;
  color:var(--ink-faint);
  margin-top:2px;
}

.pricing-plans{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:36px;
}
.plan-card{
  background:var(--paper);
  padding:28px 26px;
}
.plan-card .plan-name{font-size:17px;font-weight:600;margin-bottom:8px;}
.plan-card .plan-price{
  font-family:'JetBrains Mono',monospace;
  font-size:22px;
  font-weight:600;
  color:var(--blue-deep);
  margin-bottom:18px;
}
.plan-card .plan-price .unit{
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;
  font-weight:400;
  color:var(--ink-faint);
}
.plan-card ul{display:flex;flex-direction:column;gap:9px;}
.plan-card li{
  font-size:13.5px;
  color:var(--ink-soft);
  padding-left:16px;
  position:relative;
}
.plan-card li::before{
  content:"";
  position:absolute;left:0;top:7px;
  width:6px;height:1.5px;
  background:var(--blue);
}

.pricing-note{
  margin-top:28px;
  border:1px solid var(--line);
  background:var(--paper-2);
  padding:20px 24px;
  font-size:13.5px;
  color:var(--ink-soft);
  max-width:80ch;
}
.pricing-note b{color:var(--ink);}

.pricing-download{margin-top:8px;}

@media (max-width:900px){
  table.pricing-table td.desc{display:none;}
  table.pricing-table th:nth-child(2){display:none;}
  table.pricing-table td.svc{width:60%;}
  table.pricing-table td.cost{width:40%;}
  .pricing-plans{grid-template-columns:1fr;}
}
@media (max-width:600px){
  table.pricing-table thead{display:none;}
  table.pricing-table, table.pricing-table tbody, table.pricing-table tr, table.pricing-table td{
    display:block;
    width:100% !important;
  }
  table.pricing-table tr{padding:12px 0;border-bottom:1px solid var(--line-soft);}
  table.pricing-table td{border:none !important;padding:2px 0;}
  table.pricing-table td.cost{text-align:left;}
}