:root{
    --void:#0A0E11;
    --panel:#11171B;
    --panel-2:#161E23;
    --line: rgba(255,255,255,0.09);
    --line-strong: rgba(255,255,255,0.16);
    --fog:#C7D1D3;
    --fog-dim:#828D90;
    --signal:#3D8BFF;
    --signal-2:#8C5CFF;
    --signal-dim: rgba(61,139,255,0.16);
    --rec:#D1543A;
    --white:#EDF4F4;
    --radius: 2px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background-color:var(--void);
    background-image:
      linear-gradient(rgba(61,139,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(61,139,255,0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    color:var(--fog);
    font-family:'IBM Plex Sans Hebrew', sans-serif;
    font-weight:300;
    line-height:1.65;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--signal); color:#0A0E18;}
  :focus-visible{outline:2px solid var(--signal); outline-offset:3px;}

  .mono{font-family:'IBM Plex Mono', monospace;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.14em;
    color:var(--signal);
    display:flex; align-items:center; gap:10px;
    text-transform:uppercase;
  }
  h1,h2,h3{font-family:'Suez One', serif; color:var(--white); font-weight:400; line-height:1.15;}
  h2{font-size:clamp(28px,4vw,42px); margin-bottom:14px;}
  h3{font-size:20px;}
  p.lede{color:var(--fog-dim); font-size:17px; max-width:640px;}
  .section{padding:96px 0;}
  .section-head{margin-bottom:48px;}
  .hairline{border:none; border-top:1px solid var(--line); margin:0;}

  /* REC dot */
  .dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--rec);
    box-shadow:0 0 0 0 rgba(209,84,58,0.6);
    animation: pulse 1.8s infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(209,84,58,0.55);}
    70%{box-shadow:0 0 0 6px rgba(209,84,58,0);}
    100%{box-shadow:0 0 0 0 rgba(209,84,58,0);}
  }
  @media (prefers-reduced-motion: reduce){
    .dot{animation:none;}
    *{scroll-behavior:auto !important;}
  }

  /* ===== NAV ===== */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(10,14,17,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .navbar{
    display:flex; align-items:center; justify-content:space-between;
    height:78px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:'Suez One', serif; font-size:19px; color:var(--white);
  }
  .brand .dot{margin-inline-end:2px;}
  .brand small{
    display:block; font-family:'IBM Plex Mono'; font-size:10px; color:var(--fog-dim);
    letter-spacing:.08em; font-weight:400;
  }
  nav.primary{display:flex; align-items:center; gap:2px;}
  nav.primary > div{position:relative;}
  nav.primary a, nav.primary button.navlink{
    display:flex; align-items:center; gap:5px;
    padding:14px 14px; font-size:14.5px; color:var(--fog);
    background:none; border:none; cursor:pointer; font-family:inherit;
  }
  nav.primary a:hover, nav.primary button.navlink:hover{color:var(--white);}
  nav.primary svg{width:9px; height:9px; opacity:.7;}
  .dropdown{
    position:absolute; top:100%; insert-inline-start:0;
    background:var(--panel-2); border:1px solid var(--line-strong);
    min-width:230px; padding:8px; display:none;
    box-shadow:0 18px 40px rgba(0,0,0,0.45);
  }
  .dropdown.open{display:block;}
  .dropdown a{display:block; padding:10px 12px; font-size:14px; border-radius:1px;}
  .dropdown a:hover{background:var(--signal-dim); color:var(--signal);}
  .nav-right{display:flex; align-items:center; gap:18px;}
  .phone-link{
    display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono';
    font-size:14px; color:var(--fog); white-space:nowrap;
  }
  .phone-link svg{width:15px; height:15px; stroke:var(--signal); flex-shrink:0;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--signal); color:var(--signal);
    padding:11px 20px; font-size:14px; letter-spacing:.02em;
    transition:background .15s, color .15s; white-space:nowrap;
    cursor:pointer; background:none; font-family:'IBM Plex Sans Hebrew';
  }
  .btn:hover{background:var(--signal); color:#06111F;}
  .btn.solid{
    background:linear-gradient(90deg, var(--signal), var(--signal-2));
    border-color:transparent; color:#0A0E18;
    box-shadow:0 0 24px rgba(61,139,255,0.35);
  }
  .btn.solid:hover{background:transparent; background-image:none; color:var(--signal); box-shadow:none; border:1px solid var(--signal);}
  .hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
  .hamburger span{width:22px; height:2px; background:var(--fog);}

  /* ===== HERO ===== */
  .hero{
    padding:64px 0 80px;
    position:relative;
    background:
      radial-gradient(ellipse 900px 500px at 85% -10%, rgba(61,139,255,0.14), transparent 60%),
      radial-gradient(ellipse 700px 400px at 10% 110%, rgba(140,92,255,0.10), transparent 60%);
  }
  .hero-grid{
    display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center;
  }
  .hero h1{
    font-size:clamp(38px,5.6vw,62px);
    margin:18px 0 20px;
  }
  .hero h1 span{
    background:linear-gradient(90deg, var(--signal), var(--signal-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero-cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
  .hero-stats{display:flex; gap:32px; margin-top:42px; flex-wrap:wrap;}
  .stat .num{font-family:'IBM Plex Mono'; font-size:26px; color:var(--white);}
  .stat .lbl{font-size:12.5px; color:var(--fog-dim);}

  /* monitor wall */
  .wall{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
  }
  .feed{
    position:relative; aspect-ratio:4/3; background:var(--panel);
    border:1px solid var(--line); overflow:hidden;
  }
  .feed::before{ /* scanlines */
    content:""; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  }
  .feed .corner{
    position:absolute; width:14px; height:14px; border-color:var(--signal); opacity:.85;
  }
  .feed .corner.tl{top:6px; insert-inline-start:6px; border-top:2px solid; border-inline-start:2px solid;}
  .feed .corner.tr{top:6px; inset-inline-end:6px; border-top:2px solid; border-inline-end:2px solid;}
  .feed .corner.bl{bottom:6px; insert-inline-start:6px; border-bottom:2px solid; border-inline-start:2px solid;}
  .feed .corner.br{bottom:6px; inset-inline-end:6px; border-bottom:2px solid; border-inline-end:2px solid;}
  .feed .tag{
    position:absolute; bottom:6px; insert-inline-start:6px;
    font-family:'IBM Plex Mono'; font-size:10px; color:var(--fog-dim);
    display:flex; align-items:center; gap:5px;
  }
  .feed .label{
    position:absolute; top:6px; insert-inline-start:24px;
    font-family:'IBM Plex Mono'; font-size:10px; color:var(--fog);
    background:rgba(0,0,0,0.4); padding:2px 6px;
  }
  .feed .glow{
    position:absolute; inset:0;
    background:radial-gradient(circle at 50% 40%, rgba(61,139,255,0.14), transparent 65%);
  }
  .feed .icon{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    opacity:.18;
  }
  .feed .icon svg{width:46%; height:46%; stroke:var(--fog);}

  /* ===== MODE TOGGLE (home/business) ===== */
  .mode-section{padding:0 0 96px;}
  .toggle-wrap{
    display:flex; justify-content:center; margin-bottom:46px;
  }
  .toggle{
    display:inline-flex; border:1px solid var(--line-strong); padding:4px; gap:4px;
  }
  .toggle button{
    font-family:'IBM Plex Sans Hebrew'; font-size:14.5px; padding:10px 26px;
    background:none; border:none; color:var(--fog-dim); cursor:pointer;
  }
  .toggle button.active{background:var(--signal); color:#0A0E18;}
  .mode-panels{position:relative;}
  .mode-panel{display:none; animation:fadein .25s ease;}
  .mode-panel.active{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
  @keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
  .mode-panel ul{margin-top:18px; display:flex; flex-direction:column; gap:12px;}
  .mode-panel ul li{
    display:flex; gap:10px; font-size:15px; color:var(--fog);
    align-items:flex-start;
  }
  .mode-panel ul li svg{width:16px; height:16px; stroke:var(--signal); margin-top:3px; flex-shrink:0;}
  .mode-visual{
    border:1px solid var(--line); background:var(--panel); padding:26px; position:relative;
  }
  .mode-visual .corner{position:absolute; width:16px; height:16px; border-color:var(--line-strong);}
  .mode-visual .corner.tl{top:0; insert-inline-start:0; border-top:2px solid; border-inline-start:2px solid;}
  .mode-visual .corner.br{bottom:0; inset-inline-end:0; border-bottom:2px solid; border-inline-end:2px solid;}

  /* ===== PRODUCTS / SYSTEMS ===== */
  .products-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  .product-card{
    background:var(--panel); padding:30px 24px; transition:background .15s;
  }
  .product-card:hover{background:var(--panel-2);}
  .product-card .pnum{font-family:'IBM Plex Mono'; font-size:11px; color:var(--signal); letter-spacing:.1em;}
  .product-card h3{margin:14px 0 10px; font-size:19px;}
  .product-card p{font-size:14px; color:var(--fog-dim);}
  .product-card .sig{
    display:flex; gap:3px; margin-top:18px; align-items:flex-end; height:18px;
  }
  .product-card .sig i{width:4px; background:var(--line-strong); display:block;}
  .product-card.active{position:relative;}
  .product-card.active::before{
    content:""; position:absolute; top:0; insert-inline-start:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--signal), var(--signal-2));
  }
  .product-card.active .sig i{background:linear-gradient(180deg, var(--signal-2), var(--signal));}

  /* ===== COVERAGE / AREAS ===== */
  .coverage{
    display:grid; grid-template-columns:280px 1fr; gap:60px; align-items:center;
  }
  .strip{
    display:flex; flex-direction:column; border:1px solid var(--line-strong);
  }
  .strip > div{
    padding:20px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;
  }
  .strip > div:last-child{border-bottom:none;}
  .strip .region{font-size:15px; color:var(--white);}
  .strip .bars{display:flex; gap:3px;}
  .strip .bars i{width:4px; height:12px; background:var(--signal); display:block;}
  .strip .bars i:nth-child(1){height:6px;}
  .strip .bars i:nth-child(2){height:9px;}
  .areas-list{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
  .area-item{
    border:1px solid var(--line); padding:18px 20px; font-size:14.5px;
    display:flex; justify-content:space-between; align-items:center;
  }
  .area-item span.tag{font-family:'IBM Plex Mono'; font-size:11px; color:var(--fog-dim);}

  /* ===== GUIDES ===== */
  .guides-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .guide-card{background:var(--panel); padding:28px;}
  .guide-card .gtag{font-family:'IBM Plex Mono'; font-size:11px; color:var(--fog-dim);}
  .guide-card h3{margin:12px 0 10px; font-size:18px;}
  .guide-card p{font-size:14px; color:var(--fog-dim); margin-bottom:16px;}
  .guide-card a{font-size:13px; color:var(--signal); display:inline-flex; gap:6px; align-items:center;}

  /* ===== GALLERY ===== */
  .gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
  .gallery-note{
    margin-top:22px; font-size:13.5px; color:var(--fog-dim); border:1px dashed var(--line-strong);
    padding:14px 18px; display:flex; gap:10px; align-items:center;
  }

  /* ===== FAQ ===== */
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%; text-align:start; background:none; border:none; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center;
    padding:22px 0; font-size:16.5px; color:var(--white); font-family:inherit;
  }
  .faq-q svg{width:14px; height:14px; stroke:var(--signal); flex-shrink:0; transition:transform .2s;}
  .faq-item.open .faq-q svg{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .faq-a p{padding:0 0 22px; font-size:15px; color:var(--fog-dim); max-width:680px;}

  /* ===== CONTACT ===== */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
  .contact-info > div{display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line);}
  .contact-info svg{width:18px; height:18px; stroke:var(--signal); flex-shrink:0; margin-top:2px;}
  .contact-info .lbl{font-size:12px; color:var(--fog-dim); margin-bottom:3px;}
  .contact-info .val{font-size:15.5px; color:var(--white);}
  form.lead{display:flex; flex-direction:column; gap:14px;}
  form.lead input, form.lead textarea, form.lead select{
    background:var(--panel); border:1px solid var(--line-strong); color:var(--white);
    padding:13px 14px; font-family:'IBM Plex Sans Hebrew'; font-size:14.5px; width:100%;
  }
  form.lead label{font-size:12.5px; color:var(--fog-dim); margin-bottom:6px; display:block;}
  form.lead textarea{resize:vertical; min-height:90px;}

  footer{border-top:1px solid var(--line); padding:56px 0 30px;}
  .footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px;}
  .footer-grid h4{font-size:13px; color:var(--white); margin-bottom:14px; font-weight:500;}
  .footer-grid ul{display:flex; flex-direction:column; gap:9px;}
  .footer-grid ul a{font-size:14px; color:var(--fog-dim);}
  .footer-grid ul a:hover{color:var(--signal);}
  .footer-bottom{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--fog-dim); flex-wrap:wrap; gap:10px;}

  @media (max-width:920px){
    .hamburger{display:flex;}
    nav.primary, .nav-right .phone-link, .nav-right .btn{display:none;}
    .hero-grid{grid-template-columns:1fr;}
    .mode-panel.active{grid-template-columns:1fr;}
    .products-grid{grid-template-columns:repeat(2,1fr);}
    .guides-grid{grid-template-columns:1fr;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .coverage{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }

/* ========================================
   WORDPRESS-SPECIFIC ADDITIONS
   ======================================== */

/* About grid */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}

/* Info rows in about panel */
.info-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px;font-size:14px;}
.info-row span:first-child{color:var(--fog-dim);}
.info-row span:last-child{color:var(--white);}

/* Contact info rows */
.ci-row{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.ci-row svg{width:18px;height:18px;stroke:var(--signal);flex-shrink:0;margin-top:2px;}

/* Gallery card image */
.gallery-card img{width:100%;height:100%;object-fit:cover;}

/* Footer nav */
.footer-nav{list-style:none;display:flex;flex-direction:column;gap:9px;}
.footer-nav a{font-size:14px;color:var(--fog-dim);}
.footer-nav a:hover{color:var(--signal);}

/* Footer tagline */
.footer-tagline{font-size:14px;color:var(--fog-dim);max-width:280px;margin-top:10px;}

/* Form feedback */
.form-feedback{font-size:13.5px;margin-top:6px;}
.form-feedback.success{color:var(--signal);}
.form-feedback.error{color:var(--rec);}

/* Blog / guides template */
.blog-wrap{padding-top:60px;}
.pagination{margin-top:40px;text-align:center;}

/* WordPress alignment classes */
.alignleft{float:right;margin-inline-start:1.5rem;margin-bottom:1rem;}
.alignright{float:left;margin-inline-end:1.5rem;margin-bottom:1rem;}
.aligncenter{display:block;margin:0 auto 1rem;}

/* Responsive additions */
@media(max-width:920px){
  .about-grid{grid-template-columns:1fr;}
}

/* ========================================
   NAV FIX — WordPress ul wrapper
   ======================================== */
nav.primary > ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-direction: row;
}
nav.primary > ul > li { display: contents; }

/* Mobile open state via class (not inline style) */
@media (max-width: 920px) {
  nav.primary.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    inset-inline-start: 0;
    top: 78px;
    width: 100%;
    background: var(--panel);
    border-top: 1px solid var(--line);
    z-index: 40;
  }
  nav.primary.mobile-open > div,
  nav.primary.mobile-open > ul > li {
    width: 100%;
  }
  nav.primary.mobile-open a,
  nav.primary.mobile-open button.navlink {
    width: 100%;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
  }
  nav.primary.mobile-open .dropdown {
    position: static;
    border: none;
    box-shadow: none;
    background: var(--void);
  }
}