/*
Theme Name: Centerville One (Static Import)
Theme URI: https://example.com/
Author: Generated by ChatGPT
Description: WordPress theme generated from a static HTML site export.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: centervilleone
*/

:root{
      --bg:#0b1220;
      --panel:#0f1a33;
      --text:#eaf0ff;
      --muted:#a9b7e6;
      --line:rgba(255,255,255,.12);
      --brand:#5eead4;
      --brand2:#60a5fa;
      --shadow: 0 12px 40px rgba(0,0,0,.35);
      --radius: 18px;
      --max: 1120px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:var(--sans);
      color:var(--text);
      background: radial-gradient(1200px 800px at 10% 5%, rgba(96,165,250,.22), transparent 55%),
                  radial-gradient(900px 600px at 80% 10%, rgba(94,234,212,.18), transparent 55%),
                  radial-gradient(1100px 700px at 60% 80%, rgba(167,139,250,.14), transparent 55%),
                  var(--bg);
      line-height:1.5;
    }
    a{ color:inherit; text-decoration:none; }
    .container{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

    .pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.05); color:var(--muted); font-size:.92rem;}
    .badge{
      display:inline-flex; gap:.5rem; align-items:center;
      padding:.4rem .65rem; border-radius: 999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: var(--muted); font-size:.9rem;
    }

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:.9rem 1.1rem; border-radius:14px;
      border:1px solid var(--line); background:rgba(255,255,255,.06);
      color:var(--text); font-weight:650; letter-spacing:.2px;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      cursor:pointer;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); }
    .btn.primary{
      background: linear-gradient(90deg, rgba(94,234,212,.95), rgba(96,165,250,.95));
      color:#06101b; border-color: transparent;
    }
    .btn.primary:hover{ background: linear-gradient(90deg, rgba(94,234,212,1), rgba(96,165,250,1)); }
    .btn.small{ padding:.65rem .9rem; border-radius:12px; font-weight:650; }

    header{
      position: sticky; top:0; z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(11,18,32,.55);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding: 14px 0;
      gap: 14px;
    }
    .brand{
      display:flex; align-items:center; gap:.75rem;
      font-weight:800; letter-spacing:.2px;
    }
    .brand svg{ width:34px; height:34px; }
    .navlinks{ display:flex; align-items:center; gap: 14px; }
    .navlinks a{ color: var(--muted); padding:.55rem .7rem; border-radius: 12px; }
    .navlinks a:hover{ background: rgba(255,255,255,.06); color: var(--text); }
    .navcta{ display:flex; align-items:center; gap: 10px; }

    .mobile-toggle{
      display:none; border:1px solid var(--line); background:rgba(255,255,255,.06);
      border-radius: 14px; padding:.6rem .75rem; color: var(--text);
    }
    .mobile-panel{ display:none; padding: 0 0 14px 0; }
    .mobile-panel a{
      display:block; padding: 12px 10px; border-radius: 12px; color: var(--muted);
      border: 1px solid transparent;
    }
    .mobile-panel a:hover{ background: rgba(255,255,255,.06); color: var(--text); }
    .mobile-panel .row{ display:flex; gap: 10px; padding-top: 10px; flex-wrap: wrap; }
    .mobile-panel .row .btn{ flex: 1 1 180px; }

    /* HR is intentionally hidden for now (remove this rule to display HR sections) */
    .private-hr{ display:none !important; }

    /* Layout */
    .card{
      border:1px solid rgba(255,255,255,90);
      background: rgba(255,255,255,.04);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    section{ padding: 36px 0; }

    /* Hero */
    .hero{ padding: 56px 0 10px; }
    .hero-grid{ display:grid; grid-template-columns: 1.08fr .92fr; gap: 28px; align-items: stretch; }
    .hero-card{ padding: 28px; overflow:hidden; position:relative; }
    .hero h1{ font-size: clamp(2.1rem, 4vw, 3.25rem); line-height:1.05; margin: 40px 0 10px; }
    .hero p{ color: var(--muted); font-size: 1.06rem; margin: 0 0 18px; max-width: 55ch; }

    .kpis{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 18px; }
    .kpi{
      flex: 1 1 160px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      border-radius: 16px;
      padding: 12px 14px;
    }
    .kpi .num{ font-family:var(--mono); font-weight:800; font-size: 1.05rem; }
    .kpi .lbl{ color: var(--muted); font-size: .92rem; margin-top: 4px; }

    .hero-visual{ padding: 18px; overflow:hidden; position:relative; }
    .shot{
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      padding: 14px;
    }
    .shot img{
      width:100%;
      height:auto;
      border-radius: 14px;
      display:block;
    }
    .shot .cap{
      margin: 12px 2px 0;
      color: var(--muted);
      font-size: .95rem;
    }

    /* Section head */
    .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 18px; margin-bottom: 18px; }
    .section-head h2{ margin:0; font-size: 1.8rem; letter-spacing:.2px; }
    .section-head p{ margin:0; color: var(--muted); max-width: 65ch; }

    /* Grids */
    .grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .panel{ padding: 18px; }

    /* Products */
    .product-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .product{
      padding: 16px;
      display:grid;
      gap: 10px;
      overflow:hidden;
      position:relative;
    }
    .product img{
      width:100%;
      height: 170px;
      object-fit: cover;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      display:block;
      background: rgba(255,255,255,.02);
    }
    .product h3{ margin: 2px 0 0; font-size: 1.12rem; }
    .product p{ margin:0; color: var(--muted); }
    .product .meta{ display:flex; gap:10px; flex-wrap:wrap; }

    /* Why split */
    .split{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items:stretch; }
    .quote{ padding: 20px; }
    .quote blockquote{ margin: 0; font-size: 1.08rem; }
    .quote footer{ margin-top: 10px; color: var(--muted); }

    /* Contact */
    form{ display:grid; gap: 10px; }
    input, textarea{
      width:100%;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      color: var(--text);
      font: inherit;
      outline: none;
    }
    input:focus, textarea:focus{ border-color: rgba(94,234,212,.55); box-shadow: 0 0 0 4px rgba(94,234,212,.12); }
    textarea{ min-height: 120px; resize: vertical; }
    .fine{ color: var(--muted); font-size: .92rem; }

    footer{
      padding: 26px 0 38px;
      border-top: 1px solid rgba(255,255,255,.08);
      background: rgba(11,18,32,.55);
      margin-top: 24px;
    }
    .footgrid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
    .footgrid h4{ margin: 0 0 8px; }
    .footgrid a{ color: var(--muted); display:block; padding: 6px 0; }
    .footgrid a:hover{ color: var(--text); }

    /* Responsive */
    @media (max-width: 980px){
      .hero-grid{ grid-template-columns: 1fr; }
      .split{ grid-template-columns: 1fr; }
      .grid-3{ grid-template-columns: 1fr; }
      .grid-2{ grid-template-columns: 1fr; }
      .product-grid{ grid-template-columns: 1fr; }
      .navlinks, .navcta{ display:none; }
      .mobile-toggle{ display:inline-flex; }
      .footgrid{ grid-template-columns: 1fr; }
      .product img{ height: 190px; }
    }