/* FireOps Calc unified web design layer
   Applies a clean, consistent look to the homepage and existing tool pages.
   Loaded after older inline styles so it can standardize the site without rewriting every calculator. */

@media screen {
  :root{
    --fo-bg:#f4f5f7;
    --fo-surface:#ffffff;
    --fo-surface-2:#f8f9fb;
    --fo-ink:#121317;
    --fo-muted:#5d6370;
    --fo-soft:#838a96;
    --fo-dark:#08090c;
    --fo-dark-2:#11131a;
    --fo-red:#e32929;
    --fo-red-dark:#a91515;
    --fo-red-soft:#fff0f0;
    --fo-line:#e2e5eb;
    --fo-line-dark:rgba(255,255,255,.13);
    --fo-radius:22px;
    --fo-radius-sm:14px;
    --fo-shadow:0 18px 48px rgba(15,23,42,.10);
    --fo-shadow-soft:0 10px 30px rgba(15,23,42,.07);
    --fo-max:1180px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0 !important;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
    color:var(--fo-ink) !important;
    background:
      radial-gradient(circle at 18% -12%,rgba(227,41,41,.09),transparent 34rem),
      linear-gradient(180deg,#ffffff 0%,var(--fo-bg) 42%,#ffffff 100%) !important;
    line-height:1.55 !important;
    text-rendering:optimizeLegibility;
  }
  img{max-width:100%}
  a{color:inherit}
  .skip{position:absolute;left:-999px;top:12px;z-index:100;background:#fff;color:#000;padding:9px 12px;border-radius:12px;font-weight:900;text-decoration:none}
  .skip:focus{left:12px}
  .wrap{max-width:var(--fo-max) !important;margin-left:auto !important;margin-right:auto !important;padding-left:20px !important;padding-right:20px !important}

  /* Unified top navigation: supports both newer homepage classes and older tool classes. */
  .site-header,.top,.topbar{
    position:sticky !important;
    top:0 !important;
    z-index:50 !important;
    background:rgba(8,9,12,.92) !important;
    border-bottom:1px solid var(--fo-line-dark) !important;
    backdrop-filter:blur(18px) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.18) !important;
  }
  .site-nav,.nav{
    min-height:72px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:18px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  .brand,.site-brand{
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
    text-decoration:none !important;
    color:#fff !important;
    font-weight:1000 !important;
    letter-spacing:-.045em !important;
    text-transform:uppercase !important;
    font-size:22px !important;
    white-space:nowrap !important;
  }
  .brand img,.site-brand img{
    width:40px !important;
    height:40px !important;
    border-radius:12px !important;
    object-fit:contain !important;
    background:rgba(255,255,255,.06);
    padding:2px;
  }
  .brand-mark{color:var(--fo-red)}
  .nav-links{display:flex;align-items:center;gap:22px;color:#d9dbe2;font-size:14px;font-weight:850}
  .nav-links a{text-decoration:none;opacity:.88}
  .nav-links a:hover{opacity:1;color:#fff}

  .btn,.nav-button,.store-badge,.nav-cta{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    min-height:46px !important;
    padding:11px 16px !important;
    border-radius:999px !important;
    text-decoration:none !important;
    border:1px solid rgba(255,255,255,.18) !important;
    font-weight:950 !important;
    cursor:pointer !important;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease !important;
  }
  .btn:hover,.nav-button:hover,.store-badge:hover,.nav-cta:hover{transform:translateY(-1px)}
  .btn.primary,.nav-button.primary,.nav-cta,.btn.red,.btn.fire{
    color:#fff !important;
    background:linear-gradient(135deg,#ff4545,var(--fo-red-dark)) !important;
    border-color:rgba(255,255,255,.18) !important;
    box-shadow:0 14px 28px rgba(227,41,41,.25) !important;
  }
  .btn.secondary,.btn.dark,.nav-button.secondary{
    color:#fff !important;
    background:rgba(255,255,255,.08) !important;
    border-color:rgba(255,255,255,.18) !important;
  }
  .btn.light,.nav-button.light{background:#fff !important;color:var(--fo-ink) !important;border-color:var(--fo-line) !important}

  /* Homepage */
  .home-page .site-header{position:sticky}
  .home-hero{
    position:relative;
    overflow:hidden;
    color:#fff;
    background:var(--fo-dark);
  }
  .home-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg,rgba(8,9,12,.96) 0%,rgba(8,9,12,.86) 42%,rgba(8,9,12,.45) 72%,rgba(8,9,12,.88) 100%),
      url('../assets/engine181.png');
    background-size:cover;
    background-position:center right;
    filter:saturate(1.05) contrast(1.05);
  }
  .home-hero::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:120px;
    background:linear-gradient(0deg,var(--fo-bg),transparent);
  }
  .home-hero .wrap{position:relative;z-index:1}
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(320px,.72fr);
    gap:34px;
    align-items:center;
    min-height:620px;
    padding-top:68px;
    padding-bottom:78px;
  }
  .eyebrow,.kicker,.eyered{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    max-width:100%;
    color:#ff6a6a !important;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:12px !important;
    font-weight:1000 !important;
    margin-bottom:14px;
  }
  .home-hero h1{
    margin:0 0 18px;
    max-width:760px;
    font-size:clamp(44px,7vw,82px);
    line-height:.96;
    letter-spacing:-.07em;
    color:#fff;
  }
  .red-text{color:#ff4a4a}
  .lead,.home-hero .lead{
    font-size:clamp(17px,2vw,21px) !important;
    color:#e9ebf0 !important;
    max-width:680px !important;
    margin:0 0 22px !important;
  }
  .hero-actions,.actions,.cta-row{display:flex !important;flex-wrap:wrap !important;gap:12px !important;margin-top:20px !important}
  .trust-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
  .trust-pill{
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:38px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    color:#f4f5f7;
    font-size:13px;
    font-weight:850;
  }
  .hero-panel{
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.17);
    border-radius:30px;
    padding:22px;
    box-shadow:0 26px 70px rgba(0,0,0,.32);
    backdrop-filter:blur(16px);
  }
  .hero-panel-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}
  .status-dot{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:900}
  .status-dot::before{content:"";width:10px;height:10px;border-radius:50%;background:#37d67a;box-shadow:0 0 0 5px rgba(55,214,122,.14)}
  .calculator-card{
    background:#fff;
    color:var(--fo-ink);
    border-radius:24px;
    padding:18px;
    box-shadow:var(--fo-shadow);
  }
  .calc-row{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--fo-line)}
  .calc-row:last-child{border-bottom:0}
  .calc-row span{color:var(--fo-muted);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
  .calc-row strong{font-size:22px;letter-spacing:-.04em}
  .calc-footer{margin-top:14px;color:#d7d9df;font-size:13px}

  .home-section{padding:66px 0}
  .section-head{max-width:820px;margin:0 auto 30px;text-align:center}
  .section-head.left{text-align:left;margin-left:0}
  .section-head h2{font-size:clamp(32px,4.6vw,54px);line-height:1.04;letter-spacing:-.055em;margin:0 0 10px;color:var(--fo-ink)}
  .section-head p{margin:0;color:var(--fo-muted);font-size:18px}
  .quick-strip{margin-top:-54px;position:relative;z-index:4}
  .quick-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#fff;
    border:1px solid var(--fo-line);
    border-radius:28px;
    box-shadow:var(--fo-shadow);
    overflow:hidden;
  }
  .quick-item{padding:24px;border-right:1px solid var(--fo-line)}
  .quick-item:last-child{border-right:0}
  .quick-icon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:var(--fo-red-soft);color:var(--fo-red);font-size:22px;margin-bottom:12px}
  .quick-item h3{margin:0 0 5px;font-size:18px;letter-spacing:-.02em}
  .quick-item p{margin:0;color:var(--fo-muted);font-size:14px}

  .tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .tool-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:228px;
    padding:22px !important;
    color:var(--fo-ink) !important;
    background:#fff !important;
    border:1px solid var(--fo-line) !important;
    border-radius:24px !important;
    text-decoration:none !important;
    text-align:left !important;
    box-shadow:var(--fo-shadow-soft) !important;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease !important;
  }
  .tool-card:hover{transform:translateY(-4px) !important;box-shadow:var(--fo-shadow) !important;border-color:rgba(227,41,41,.35) !important}
  .tool-icon,.tool-card .icon,.bigicon{
    width:48px !important;
    height:48px !important;
    border-radius:16px !important;
    display:grid !important;
    place-items:center !important;
    color:var(--fo-red) !important;
    background:var(--fo-red-soft) !important;
    font-size:24px !important;
    margin:0 0 15px !important;
  }
  .tool-icon svg{width:28px;height:28px;color:currentColor}
  .tool-card h3{margin:0 0 8px !important;font-size:19px !important;letter-spacing:-.025em !important;color:var(--fo-ink) !important}
  .tool-card p{margin:0 0 16px !important;color:var(--fo-muted) !important;font-size:14px !important;min-height:0 !important}
  .tool-card .open,.card-link{margin-top:auto;color:var(--fo-red) !important;font-weight:1000 !important;font-size:14px !important}
  .tool-badge{position:absolute;right:18px;top:18px;border-radius:999px;background:#f3f4f6;color:#5c6470;padding:5px 9px;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}

  .split-section{background:#fff;border-top:1px solid var(--fo-line);border-bottom:1px solid var(--fo-line)}
  .split-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:32px;align-items:center}
  .feature-list{display:grid;gap:12px;margin:22px 0 0;padding:0;list-style:none}
  .feature-list li{display:flex;gap:12px;align-items:flex-start;color:var(--fo-muted);font-weight:700}
  .feature-list li::before{content:"✓";display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:#eaf8ef;color:#117a3a;font-weight:1000}
  .preview-card{background:var(--fo-dark);color:#fff;border-radius:30px;padding:22px;box-shadow:var(--fo-shadow);overflow:hidden}
  .preview-header{display:flex;justify-content:space-between;gap:12px;color:#cdd1d8;font-size:13px;font-weight:900;margin-bottom:14px}
  .preview-scene{position:relative;height:260px;border-radius:22px;background:linear-gradient(135deg,#242a33,#12151c);border:1px solid rgba(255,255,255,.12);overflow:hidden}
  .preview-road{position:absolute;left:-20%;right:-20%;bottom:30px;height:44px;background:#3b4049;transform:rotate(-7deg)}
  .preview-hose{position:absolute;left:86px;right:62px;top:132px;height:8px;background:#d7b14a;border-radius:999px;transform:rotate(-17deg);box-shadow:0 0 0 3px rgba(215,177,74,.12)}
  .preview-engine{position:absolute;left:22px;bottom:44px;background:#cf2525;color:#fff;border-radius:16px;padding:16px 12px;font-weight:1000;box-shadow:0 12px 24px rgba(0,0,0,.24)}
  .preview-nozzle{position:absolute;right:36px;top:82px;background:#f1f3f7;color:#111;border-radius:14px;padding:9px 10px;font-weight:1000;font-size:13px}
  .preview-label{position:absolute;background:#fff;color:#111;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:950;box-shadow:0 8px 18px rgba(0,0,0,.18)}
  .preview-label.a{left:98px;top:92px}.preview-label.b{right:20px;top:126px}
  .app-grid{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:linear-gradient(135deg,#12141a,#08090c);border-radius:30px;padding:28px;color:#fff;box-shadow:var(--fo-shadow)}
  .store-row{display:flex;flex-wrap:wrap;gap:12px}.store-badge{background:#fff !important;color:#111 !important;border-color:#fff !important}

  .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .guide-card{display:block;background:#fff;border:1px solid var(--fo-line);border-radius:22px;padding:20px;text-decoration:none;box-shadow:var(--fo-shadow-soft)}
  .guide-card:hover{border-color:rgba(227,41,41,.35);box-shadow:var(--fo-shadow)}
  .guide-card small{color:var(--fo-red);font-weight:1000;text-transform:uppercase;letter-spacing:.07em}
  .guide-card h3{margin:8px 0 7px;font-size:20px;letter-spacing:-.03em}.guide-card p{margin:0;color:var(--fo-muted);font-size:14px}

  .site-footer{background:var(--fo-dark);color:#fff;padding:34px 0;border-top:1px solid var(--fo-line-dark)}
  .footer-grid{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap;color:#c9cdd5;font-size:14px}.footer-grid a{color:#fff;text-decoration:none;font-weight:850}

  /* Unified tool/reference pages */
  body:not(.home-page) .hero{
    background:
      radial-gradient(circle at 82% 10%,rgba(227,41,41,.24),transparent 30rem),
      linear-gradient(135deg,#08090c 0%,#141720 60%,#2a0d0d 100%) !important;
    color:#fff !important;
    padding:48px 0 34px !important;
    border-bottom:1px solid var(--fo-line) !important;
  }
  body:not(.home-page) .hero h1,
  body:not(.home-page) h1{
    color:inherit;
    font-size:clamp(34px,5.4vw,60px) !important;
    line-height:1.02 !important;
    letter-spacing:-.055em !important;
    margin:8px 0 10px !important;
  }
  body:not(.home-page) main.wrap{padding-top:0 !important}
  body:not(.home-page) .grid{
    display:grid !important;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) !important;
    gap:20px !important;
    align-items:start !important;
    margin-top:24px !important;
    margin-bottom:34px !important;
  }
  .panel,.info-card,.result-card{
    background:#fff !important;
    color:var(--fo-ink) !important;
    border:1px solid var(--fo-line) !important;
    border-radius:22px !important;
    box-shadow:var(--fo-shadow-soft) !important;
  }
  .panel{padding:22px !important}
  .panel h2,.panel h3{color:var(--fo-ink) !important;letter-spacing:-.03em !important}
  .form-grid{gap:14px !important}
  .field label,label{color:#29303a !important;font-weight:900 !important;font-size:13px !important}
  input,select,textarea,
  .field input,.field select,.field textarea{
    width:100% !important;
    min-height:46px !important;
    border:1px solid #cfd5df !important;
    border-radius:14px !important;
    background:#fff !important;
    color:var(--fo-ink) !important;
    padding:11px 12px !important;
    font-size:16px !important;
    font-weight:700 !important;
    outline:none !important;
  }
  input:focus,select:focus,textarea:focus{border-color:rgba(227,41,41,.65) !important;box-shadow:0 0 0 4px rgba(227,41,41,.10) !important}
  .note,.hint,.learn p{color:var(--fo-muted) !important}
  .result-grid{gap:14px !important}
  .result-card{background:var(--fo-surface-2) !important;padding:17px !important}
  .result-card small{color:var(--fo-muted) !important;font-weight:1000 !important;letter-spacing:.06em !important;text-transform:uppercase !important}
  .big{color:var(--fo-ink) !important;font-weight:1000 !important;letter-spacing:-.045em !important}.good{color:#117a3a !important}.warn{color:#a65300 !important}.bad{color:#ae1616 !important}
  .formula{
    background:#0c0e13 !important;
    color:#f5f7fb !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:16px !important;
    padding:15px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  }
  .pill,.chip{background:#fff !important;border:1px solid var(--fo-line) !important;color:var(--fo-muted) !important;border-radius:999px !important}

  @media(max-width:980px){
    .hero-grid,.split-grid,.app-grid{grid-template-columns:1fr !important}
    .hero-grid{min-height:auto;padding-top:50px;padding-bottom:78px}
    .quick-grid{grid-template-columns:repeat(2,1fr)}
    .quick-item:nth-child(2){border-right:0}.quick-item:nth-child(-n+2){border-bottom:1px solid var(--fo-line)}
    .tools-grid{grid-template-columns:repeat(2,1fr)}
    .guide-grid{grid-template-columns:1fr}
    .nav-links{display:none}
    body:not(.home-page) .grid{grid-template-columns:1fr !important}
  }
  @media(max-width:640px){
    .wrap{padding-left:16px !important;padding-right:16px !important}
    .site-nav,.nav{min-height:64px !important}
    .brand,.site-brand{font-size:18px !important}.brand img,.site-brand img{width:34px !important;height:34px !important}
    .home-hero h1{font-size:clamp(38px,12vw,58px)}
    .tools-grid,.quick-grid{grid-template-columns:1fr}
    .quick-item{border-right:0 !important}.quick-item{border-bottom:1px solid var(--fo-line)}.quick-item:last-child{border-bottom:0}
    .tool-card{min-height:auto}
    .hero-actions .btn,.actions .btn{width:100% !important}
    .home-section{padding:48px 0}
    .preview-scene{height:230px}
  }
}