/*
Theme Name: DCiEra Landing
Theme URI: https://dciera.com
Author: OHM Electricals
Description: Single-page theme for the DCiEra Multisite network's main site (dciera.com). Not intended as a general-purpose theme — the whole design lives in front-page.php.
Version: 1.0
Requires PHP: 7.4
Text Domain: dciera-landing
*/

:root{
    --ink:#1A1A1A;
    --ink-70:rgba(26,26,26,0.7);
    --ink-45:rgba(26,26,26,0.45);
    --paper:#FBFAF6;
    --paper-line:#E4E0D3;
    --stone:#F1EAD9;
    --card:#FFFFFF;
    --orange:#E8630A;
    --safety:#4F8A45;
    --efficiency:#1565C0;
    --risk:#C13B35;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .display{font-family:'Chakra Petch', sans-serif;}
  .stencil{font-family:'IBM Plex Mono', monospace;}
  .mono{font-family:'IBM Plex Mono', monospace;}
  a{color:inherit;}
  .wrap{max-width:1160px; margin:0 auto; padding:0 24px;}
  ::selection{background:var(--orange); color:#fff;}
  a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  /* ---------- NAV ---------- */
  nav{
    position:sticky; top:0; z-index:40;
    background:rgba(241,234,217,0.92);
    backdrop-filter:blur(8px);
  }
  .nav-inner{ max-width:1160px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; }
  .logo{display:flex; align-items:center; gap:9px; font-family:'Chakra Petch'; font-weight:700; font-size:24px; letter-spacing:.005em;}
  .logo-mark{width:11px; height:11px; background:var(--orange); border:1.5px solid var(--ink); flex-shrink:0;}
  .nav-links{display:flex; align-items:center; gap:30px; font-size:14px; color:var(--ink-70); font-weight:500;}
  .nav-links a{text-decoration:none; transition:color .15s; border-bottom:1px solid transparent; padding-bottom:2px;}
  .nav-links a:hover{color:var(--ink); border-color:var(--orange);}
  @media (max-width:760px){ .nav-links{display:none;} }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 22px; border-radius:0; font-size:13.5px; font-weight:600;
    letter-spacing:.02em; border:1.5px solid var(--ink); cursor:pointer; text-decoration:none;
    transition:transform .1s ease, background .15s, color .15s;
    font-family:'IBM Plex Sans'; text-transform:uppercase;
  }
  .btn:active{transform:scale(0.97);}
  .btn-primary{background:var(--orange); color:#fff; border-color:var(--orange);}
  .btn-primary:hover{background:#c9530a;}
  .btn-ghost{background:transparent; color:var(--ink);}
  .btn-ghost:hover{background:var(--ink); color:var(--paper);}
  .nav-cta{display:flex; align-items:center; gap:10px;}
  @media (max-width:520px){ .nav-cta .btn:first-child{display:none;} }

  /* ---------- KICKER (dimension-line motif) ---------- */
  .kicker{display:inline-flex; align-items:center; font-family:'IBM Plex Mono'; font-weight:500; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-70); margin-bottom:16px; background:rgba(26,26,26,0.045); border:1px solid rgba(26,26,26,0.13); border-radius:999px; padding:7px 16px;}

  /* ---------- HERO ---------- */
  .hero{ padding:64px 0 80px; background:var(--card); }
  .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center; }
  h1{
    font-family:'IBM Plex Sans'; font-weight:500;
    letter-spacing:-0.015em; font-size:clamp(34px, 4.8vw, 52px); line-height:1.14; margin-bottom:22px;
  }
  h1 span{color:var(--orange); font-weight:600;}
  .hero-sub{ font-size:17px; color:var(--ink-70); max-width:460px; margin-bottom:30px; }
  .hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px;}
  .hero-meta{display:flex; gap:24px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-45); font-family:'IBM Plex Mono';}
  .hero-meta span{display:flex; align-items:center; gap:7px;}
  .dot-live{width:6px; height:6px; background:var(--safety); animation:blink 2s infinite;}
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}

  /* ---------- SCHEMATIC PANEL (signature element) ---------- */
  .schem-panel{ position:relative; padding:6px; }
  .schem-panel::before,.schem-panel::after,
  .schem-inner::before,.schem-inner::after{
    content:''; position:absolute; width:14px; height:14px; z-index:2;
  }
  .schem-panel::before{ top:0; left:0; border-top:2px solid var(--ink); border-left:2px solid var(--ink); }
  .schem-panel::after{ top:0; right:0; border-top:2px solid var(--ink); border-right:2px solid var(--ink); }
  .schem-inner{ position:relative; border:1px solid var(--paper-line); background:var(--card); padding:18px 14px 10px; }
  .schem-inner::before{ bottom:-6px; left:-6px; border-bottom:2px solid var(--ink); border-left:2px solid var(--ink); }
  .schem-inner::after{ bottom:-6px; right:-6px; border-bottom:2px solid var(--ink); border-right:2px solid var(--ink); }
  .schem-cap{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-45); padding:6px 4px 0; }
  .flow-dash{ stroke-dasharray:6 10; animation:flow 2.2s linear infinite; }
  @keyframes flow{ to{ stroke-dashoffset:-32; } }

  @media (max-width:860px){ .hero-grid{grid-template-columns:1fr;} }

  /* ---------- SECTIONS ---------- */
  .section{padding:80px 0;}
  .section-stone{background:var(--stone);}
  .section-head{max-width:640px; margin-bottom:44px;}
  .section-head h2{font-family:'IBM Plex Sans'; font-weight:500; font-size:clamp(25px,3.2vw,36px); letter-spacing:-0.015em; line-height:1.16; margin-bottom:14px;}
  .section-head p{color:var(--ink-70); font-size:15.5px;}

  /* ---------- PILLARS ---------- */
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .pillar-card{position:relative; background:var(--card); border:1.5px solid var(--ink); padding:26px 22px;}
  .pillar-card::before,.pillar-card::after{ content:''; position:absolute; width:10px; height:10px; }
  .pillar-card::before{ top:-1.5px; left:-1.5px; border-top:2px solid var(--ink); border-left:2px solid var(--ink); }
  .pillar-card::after{ bottom:-1.5px; right:-1.5px; border-bottom:2px solid var(--ink); border-right:2px solid var(--ink); }
  .plate{
    display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
    font-family:'IBM Plex Mono'; font-weight:600; font-size:16px; color:#fff;
    border:1.5px solid var(--ink); margin-bottom:16px;
  }
  .plate-r{background:var(--orange);} .plate-s{background:var(--safety);} .plate-e{background:var(--efficiency);}
  .pillar-card h3{font-family:'IBM Plex Sans'; font-weight:500; font-size:21px; margin-bottom:9px; letter-spacing:-0.01em;}
  .pillar-card p{font-size:14px; color:var(--ink-70);}
  @media (max-width:760px){ .pillars{grid-template-columns:1fr;} }

  /* ---------- AUDIENCE TABS ---------- */
  .aud-tabs{display:flex; gap:0; margin-bottom:38px; border-bottom:1.5px solid var(--ink);}
  .aud-tab{
    background:none; border:none; color:var(--ink-45); font-family:'IBM Plex Sans'; font-weight:500;
    letter-spacing:0; font-size:16px; padding:11px 22px 13px; cursor:pointer; position:relative;
  }
  .aud-tab.on{color:var(--ink); background:var(--ink);}
  .aud-tab.on{color:#fff;}
  .aud-panel{display:none; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
  .aud-panel.on{display:grid;}
  .aud-panel h3{font-family:'IBM Plex Sans'; font-weight:500; font-size:25px; margin-bottom:14px; letter-spacing:-0.015em;}
  .aud-panel > div:first-child p{color:var(--ink-70); font-size:15px; margin-bottom:22px; max-width:440px;}
  .feat-list{list-style:none; display:flex; flex-direction:column; gap:13px;}
  .feat-list li{display:flex; gap:12px; font-size:14.5px;}
  .feat-list li::before{content:'▸'; color:var(--orange); flex-shrink:0; font-size:12px; margin-top:3px;}
  .device-card{position:relative; background:var(--card); border:1.5px solid var(--ink); padding:22px;}
  .device-card .mono{font-size:10.5px; color:var(--ink-45); text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; display:block;}
  .readout{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--paper-line); font-size:13.5px;}
  .readout:last-child{border-bottom:none;}
  .readout span:last-child{font-family:'IBM Plex Mono'; color:var(--orange); font-weight:500;}
  @media (max-width:760px){ .aud-panel.on{grid-template-columns:1fr;} }

  /* ---------- FOOTER ---------- */
  footer{background:var(--stone); padding:36px 0; font-size:12.5px; color:var(--ink-45); font-family:'IBM Plex Mono';}
  .footer-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center;}
  .footer-inner a{text-decoration:none; color:var(--ink-70);}
  .footer-inner a:hover{color:var(--orange);}

  /* ---------- MODAL ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(26,26,26,0.55); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
  }
  .modal-overlay.on{display:flex;}
  .modal{
    background:var(--paper); color:var(--ink); border:2px solid var(--ink); width:100%; max-width:400px;
    padding:30px 28px 28px; position:relative; animation:pop .16s ease;
  }
  @keyframes pop{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
  .modal-close{position:absolute; top:14px; right:16px; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink-45); line-height:1;}
  .modal h2{font-family:'Chakra Petch'; font-weight:700; font-size:27px; margin-bottom:6px; letter-spacing:-0.005em;}
  .modal .sub{font-size:13.5px; color:var(--ink-45); margin-bottom:22px; font-family:'IBM Plex Mono';}
  .login-tabs{display:flex; border:1.5px solid var(--ink); margin-bottom:22px;}
  .login-tab{flex:1; background:var(--card); border:none; padding:10px 0; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; cursor:pointer; color:var(--ink-45); font-family:'IBM Plex Sans'; border-right:1.5px solid var(--ink);}
  .login-tab:last-child{border-right:none;}
  .login-tab.on{background:var(--ink); color:#fff;}
  .form-panel{display:none; flex-direction:column; gap:14px;}
  .form-panel.on{display:flex;}
  label{font-size:11.5px; font-weight:600; margin-bottom:6px; display:block; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-70);}
  input{
    width:100%; padding:11px 12px; border:1.5px solid var(--ink); border-radius:0;
    background:#fff; font-size:14.5px; font-family:'IBM Plex Sans'; color:var(--ink);
  }
  input:focus{border-color:var(--orange);}
  .pin-boxes{display:flex; gap:8px;}
  .pin-boxes input{text-align:center; font-family:'IBM Plex Mono'; letter-spacing:.1em; font-size:18px; padding:11px 0;}
  .field-hint{font-size:12px; color:var(--ink-45);}
  .modal-cta{margin-top:6px;}
  .modal-alt{text-align:center; font-size:13px; color:var(--ink-45); margin-top:16px;}
  .modal-alt a{color:var(--orange); text-decoration:none; font-weight:600;}