/*
Theme Name: FraudBlok
Theme URI: https://fraudblok.mn
Author: Creative Apps LLC
Author URI: https://creativeapps.mn
Description: Санхүүгийн залилан илрүүлэх ухаалаг систем — FraudBlok компанийн нүүр хуудасны WordPress загвар. Hero, боломж, dashboard жишээ, архитектур болон холбоо барих хэсгүүдтэй нэг хуудаст (single-page) загвар. Customizer-оор гарчиг, статистик, тухай, холбоо барих мэдээлэл болон нийгмийн сүлжээний холбоосыг тохируулах боломжтой.
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: fraudblok
*/

  :root{
    --ink:#080B12;
    --panel:#10151F;
    --panel-2:#161D2C;
    --border:#232B3D;
    --border-soft:#1A2233;
    --text:#EAF0F6;
    --muted:#8A96AC;
    --muted-2:#5D6880;
    --signal:#4FD8C4;
    --signal-strong:#7CF0DE;
    --signal-soft:rgba(79,216,196,.12);
    --alert:#FF6659;
    --alert-soft:rgba(255,102,89,.15);
    --warn:#F5B95C;
    --warn-soft:rgba(245,185,92,.15);
    --radius:14px;
    --maxw:1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }
  body{
    background:var(--ink);
    color:var(--text);
    font-family:'IBM Plex Sans',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:'IBM Plex Sans',sans-serif; letter-spacing:-0.02em; font-weight:700;}
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  section{position:relative;}

  /* background grid texture */
  .grid-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(var(--border-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
    mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
    opacity:.5;
  }

  /* ---------- NAV ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(8,11,18,.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border-soft);
  }
  .nav__inner{
    max-width:var(--maxw); margin:0 auto; padding:16px 32px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo svg{height:28px; width:auto; display:block;}
  .nav__links{display:flex; gap:36px; font-size:14.5px; color:var(--muted);}
  .nav__links a{transition:color .2s;}
  .nav__links a:hover{color:var(--text);}
  .nav__lang{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border-radius:999px; border:1px solid var(--border);
    color:var(--muted); font-size:13px; font-weight:600; font-family:'IBM Plex Sans',sans-serif;
    transition:all .2s; margin-right:4px;
  }
  .nav__lang:hover{border-color:var(--signal); color:var(--signal);}
  .nav__lang svg{flex:0 0 auto; opacity:.85;}
  .nav__lang--mobile{width:fit-content; margin:14px 0;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:999px; font-size:14px; font-weight:600;
    cursor:pointer; border:1px solid transparent; transition:all .2s;
    font-family:'IBM Plex Sans',sans-serif;
  }
  .btn--primary{background:var(--signal); color:#04140F;}
  .btn--primary:hover{background:var(--signal-strong); transform:translateY(-1px);}
  .btn--ghost{background:transparent; border-color:var(--border); color:var(--text);}
  .btn--ghost:hover{border-color:var(--muted-2);}
  .nav__toggle{display:none; background:none; border:none; color:var(--text); cursor:pointer;}
  .nav__mobile{display:none;}

  @media (max-width:860px){
    .nav__links, .nav__cta, .nav__inner > .nav__lang{display:none;}
    .nav__toggle{display:block;}
    .nav__mobile{
      display:none; flex-direction:column; gap:2px;
      background:var(--panel); border-top:1px solid var(--border-soft);
      padding:8px 32px 20px;
    }
    .nav__mobile.open{display:flex;}
    .nav__mobile a{padding:12px 0; border-bottom:1px solid var(--border-soft); color:var(--muted); font-size:15px;}
    .nav__mobile a.btn{border-bottom:none; margin-top:10px; justify-content:center;}
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:168px 0 0;
    position:relative;
    overflow:hidden;
  }
  .hero__inner{
    max-width:var(--maxw); margin:0 auto; padding:0 32px;
    position:relative; z-index:2;
    text-align:center;
  }
  .eyebrow{
    font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.14em;
    color:var(--signal); text-transform:uppercase; margin-bottom:22px;
    display:inline-flex; align-items:center; gap:9px;
  }
  .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px var(--signal-soft);}
  .hero h1{
    font-size:clamp(32px, 5.2vw, 60px); line-height:1.08; max-width:920px; margin:0 auto 24px;
  }
  .text-signal{color:var(--signal);}
  .hero__sub{
    color:var(--muted); font-size:17px; line-height:1.6; max-width:600px; margin:0 auto 38px;
  }
  .hero__actions{display:flex; gap:14px; justify-content:center; margin-bottom:76px;}

  /* pulse visualization */
  .pulse{
    position:relative; max-width:var(--maxw); margin:0 auto;
    border:1px solid var(--border); border-radius:var(--radius);
    background:linear-gradient(180deg, var(--panel), var(--ink));
    padding:0; overflow:hidden;
  }
  .pulse__head{
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 22px; border-bottom:1px solid var(--border-soft);
    font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted-2);
  }
  .pulse__head .live{color:var(--signal); display:flex; align-items:center; gap:7px;}
  .pulse__head .live .dot{width:6px;height:6px;border-radius:50%;background:var(--signal); animation:blink 1.6s infinite;}
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
  .pulse__track{
    position:relative; height:150px; display:flex; align-items:flex-end; gap:5px;
    padding:0 4px; overflow:hidden;
  }
  .pulse__track::before{
    content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--border-soft); z-index:0;
  }
  .tick{
    flex:0 0 auto; width:5px; border-radius:2px 2px 0 0;
    background:linear-gradient(180deg, var(--signal), rgba(79,216,196,.15));
    opacity:.65; transition:background .3s, opacity .3s, box-shadow .3s;
    position:relative; z-index:1;
  }
  .tick.flag{
    background:linear-gradient(180deg, var(--alert), rgba(255,102,89,.2));
    opacity:1;
    box-shadow:0 0 18px rgba(255,102,89,.55);
  }
  .pulse__callout{
    position:absolute; top:14px; transform:translateX(-50%);
    background:var(--alert-soft); border:1px solid var(--alert);
    color:#FFD5D0; font-family:'JetBrains Mono',monospace; font-size:11px;
    padding:5px 10px; border-radius:6px; white-space:nowrap;
    opacity:0; transition:opacity .35s, top .35s; pointer-events:none; z-index:3;
  }
  .pulse__callout.show{opacity:1; top:18px;}
  .pulse__foot{
    display:flex; justify-content:space-between; padding:14px 22px;
    border-top:1px solid var(--border-soft); font-family:'JetBrains Mono',monospace;
    font-size:11.5px; color:var(--muted-2);
  }

  .hero__stats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--border-soft); border:1px solid var(--border-soft);
    border-radius:var(--radius); overflow:hidden; margin-top:0; margin-bottom:0;
    max-width:var(--maxw); margin-left:auto; margin-right:auto;
  }
  .hero__stats > div{
    background:var(--panel); padding:22px 18px; text-align:center;
  }
  .hero__stats .mono{display:block; font-size:22px; color:var(--signal); margin-bottom:4px;}
  .hero__stats small{color:var(--muted-2); font-size:12px; letter-spacing:.02em;}

  @media (max-width:700px){
    .hero{padding-top:130px;}
    .hero__stats{grid-template-columns:repeat(2,1fr);}
  }

  /* ---------- SECTION HEADERS ---------- */
  .section-pad{padding:120px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head .eyebrow{margin-bottom:16px;}
  .section-head h2{font-size:clamp(26px,3.4vw,38px); line-height:1.18; margin-bottom:14px;}
  .section-head p{color:var(--muted); font-size:16px; line-height:1.6;}

  /* ---------- ABOUT ---------- */
  .about{border-top:1px solid var(--border-soft);}
  .about .wrap{
    display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding-top:120px; padding-bottom:120px;
  }
  .about h2{font-size:clamp(24px,3vw,34px); margin-bottom:20px; line-height:1.2;}
  .about p{color:var(--muted); font-size:16px; line-height:1.7; margin-bottom:16px;}
  .about .tagline{
    font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--signal);
    text-transform:uppercase; letter-spacing:.12em; margin-bottom:14px; display:block;
  }
  .about__visual{
    border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
    background:var(--panel); position:relative;
  }
  .about__visual img{width:100%; display:block; opacity:.94;}
  .badge-soon{
    display:inline-flex; align-items:center; gap:8px; margin-top:8px;
    font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted-2);
    border:1px dashed var(--border); padding:7px 12px; border-radius:8px;
  }
  @media (max-width:860px){
    .about .wrap{grid-template-columns:1fr; padding-top:80px; padding-bottom:80px;}
    .about__visual{order:-1;}
  }

  /* ---------- FEATURES ---------- */
  .features{border-top:1px solid var(--border-soft);}
  .feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden;}
  .feature-card{background:var(--panel); padding:34px 30px; transition:background .25s;}
  .feature-card:hover{background:var(--panel-2);}
  .feature-card .icon{
    width:42px; height:42px; border-radius:10px; background:var(--signal-soft);
    display:flex; align-items:center; justify-content:center; margin-bottom:22px;
    color:var(--signal);
  }
  .feature-card h3{font-size:18px; margin-bottom:10px;}
  .feature-card p{color:var(--muted); font-size:14.5px; line-height:1.6;}
  @media (max-width:860px){ .feature-grid{grid-template-columns:1fr;} }

  /* ---------- DASHBOARD SHOWCASE ---------- */
  .dashboard{border-top:1px solid var(--border-soft); background:var(--panel);}
  .dash-row{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;
    padding:64px 0; border-bottom:1px solid var(--border-soft);
  }
  .dash-row:last-child{border-bottom:none;}
  .dash-row.reverse{grid-template-columns:1.1fr 0.9fr;}
  .dash-row.reverse .dash-copy{order:2;}
  .dash-num{font-family:'JetBrains Mono',monospace; color:var(--signal); font-size:12px; letter-spacing:.1em; margin-bottom:12px; text-transform:uppercase;}
  .dash-copy h3{font-size:24px; margin-bottom:14px;}
  .dash-copy p{color:var(--muted); font-size:15.5px; line-height:1.7;}
  .dash-visual{
    border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
    background:var(--ink); box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  }
  .dash-visual img{width:100%;}
  .dash-visual.stack{display:grid; gap:1px; background:var(--border-soft);}
  .dash-visual.stack img{background:var(--ink);}
  @media (max-width:860px){
    .dash-row, .dash-row.reverse{grid-template-columns:1fr; padding:44px 0;}
    .dash-row.reverse .dash-copy{order:0;}
  }

  /* ---------- TECH ---------- */
  .tech{border-top:1px solid var(--border-soft);}
  .tech-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden; margin-bottom:56px;}
  .tech-card{background:var(--panel); padding:38px;}
  .tech-card .mono-label{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--signal); letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; display:block;}
  .tech-card h3{font-size:20px; margin-bottom:12px;}
  .tech-card p{color:var(--muted); font-size:15px; line-height:1.7;}
  @media (max-width:860px){ .tech-grid{grid-template-columns:1fr;} }

  /* ---------- CTA / CONTACT ---------- */
  .cta{border-top:1px solid var(--border-soft); background:var(--panel);}
  .cta-box{
    border:1px solid var(--border); border-radius:20px; padding:64px;
    background:radial-gradient(ellipse 120% 100% at 50% -20%, var(--signal-soft), transparent 60%), var(--ink);
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
  }
  .cta-box h2{font-size:clamp(24px,3.2vw,34px); line-height:1.2; margin-bottom:16px;}
  .cta-box p{color:var(--muted); font-size:15.5px; line-height:1.7; margin-bottom:24px;}
  .cta-meta{display:flex; flex-direction:column; gap:14px; margin-top:28px;}
  .cta-meta div{display:flex; gap:10px; align-items:center; font-size:14px; color:var(--muted);}
  .cta-meta .mono{color:var(--text);}
  form{display:flex; flex-direction:column; gap:14px;}
  .field{display:flex; flex-direction:column; gap:7px;}
  .field label{font-size:12.5px; color:var(--muted-2); font-family:'JetBrains Mono',monospace; letter-spacing:.04em;}
  .field input, .field textarea{
    background:var(--panel); border:1px solid var(--border); border-radius:10px;
    padding:12px 14px; color:var(--text); font-family:'IBM Plex Sans',sans-serif; font-size:14.5px;
    outline:none; transition:border-color .2s;
  }
  .field input:focus, .field textarea:focus{border-color:var(--signal);}
  .field textarea{resize:vertical; min-height:80px;}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .cta-box .btn--primary{width:100%; justify-content:center; padding:13px; margin-top:4px;}
  .form-note{font-size:12px; color:var(--muted-2); margin-top:10px;}
  .form-success{
    display:none; border:1px solid var(--signal); background:var(--signal-soft); border-radius:10px;
    padding:16px; font-size:14px; color:var(--signal-strong); align-items:center; gap:10px;
  }
  .form-success.show{display:flex;}
  @media (max-width:860px){ .cta-box{grid-template-columns:1fr; padding:36px 24px;} .row2{grid-template-columns:1fr;} }

  /* ---------- CONTACT FORM 7 (restyled to match theme) ---------- */
  /* Targets CF7's own default markup/classes, so it works with whatever
     field layout you built in Contact > Contact Forms — no per-field
     customization needed. Optional: wrap pairs of fields in the CF7 form
     editor with <div class="row2">...</div> to get the same 2-column layout
     as the built-in form; it isn't required. */
  .cf7-wrap .wpcf7-form{display:flex; flex-direction:column; gap:14px;}
  .cf7-wrap .wpcf7-form p,
  .cf7-wrap .wpcf7-form .form-group{margin:0; display:flex; flex-direction:column; gap:7px;}
  .cf7-wrap .wpcf7-form label{
    font-size:12.5px; color:var(--muted-2); font-family:'JetBrains Mono',monospace; letter-spacing:.04em;
    display:flex; flex-direction:column; gap:7px;
  }
  .cf7-wrap .wpcf7-form-control-wrap{display:block; margin-top:2px;}
  .cf7-wrap input.wpcf7-form-control,
  .cf7-wrap textarea.wpcf7-form-control,
  .cf7-wrap select.wpcf7-form-control{
    width:100%; background:var(--panel); border:1px solid var(--border); border-radius:10px;
    padding:12px 14px; color:var(--text); font-family:'IBM Plex Sans',sans-serif; font-size:14.5px;
    outline:none; transition:border-color .2s; box-sizing:border-box;
  }
  .cf7-wrap input.wpcf7-form-control:focus,
  .cf7-wrap textarea.wpcf7-form-control:focus{border-color:var(--signal);}
  .cf7-wrap textarea.wpcf7-form-control{resize:vertical; min-height:80px;}
  .cf7-wrap input.wpcf7-form-control::placeholder,
  .cf7-wrap textarea.wpcf7-form-control::placeholder{color:var(--muted-2);}
  .cf7-wrap .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .cf7-wrap input[type="submit"].wpcf7-form-control,
  .cf7-wrap button.wpcf7-form-control,
  .cf7-wrap button[type="submit"],
  .cf7-wrap .theme-btn.submit-btn{
    display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
    width:100% !important; padding:13px !important; margin-top:4px !important; border-radius:999px !important;
    font-size:14px !important; font-weight:600 !important;
    cursor:pointer !important; border:1px solid transparent !important; transition:all .2s !important;
    background:var(--signal) !important; color:#04140F !important; font-family:'IBM Plex Sans',sans-serif !important;
    -webkit-appearance:none; appearance:none; box-sizing:border-box !important; line-height:1.4 !important;
    text-transform:none !important; box-shadow:none !important;
  }
  .cf7-wrap input[type="submit"].wpcf7-form-control:hover,
  .cf7-wrap button.wpcf7-form-control:hover,
  .cf7-wrap button[type="submit"]:hover,
  .cf7-wrap .theme-btn.submit-btn:hover{background:var(--signal-strong) !important;}
  .cf7-wrap .wpcf7-spinner{margin-left:10px;}
  .cf7-wrap .wpcf7-not-valid-tip{
    color:var(--alert); font-size:12.5px; margin-top:4px; font-family:'IBM Plex Sans',sans-serif; font-weight:400;
  }
  .cf7-wrap .wpcf7-form-control.wpcf7-not-valid{border-color:var(--alert);}
  .cf7-wrap .wpcf7-response-output{
    border-radius:10px; padding:14px 16px; font-size:13.5px; margin:14px 0 0; border-width:1px; border-style:solid;
  }
  .cf7-wrap .wpcf7-form.sent .wpcf7-response-output{
    border-color:var(--signal); background:var(--signal-soft); color:var(--signal-strong);
  }
  .cf7-wrap .wpcf7-form.invalid .wpcf7-response-output,
  .cf7-wrap .wpcf7-form.unaccepted .wpcf7-response-output,
  .cf7-wrap .wpcf7-form.payment-required .wpcf7-response-output,
  .cf7-wrap .wpcf7-form.spam .wpcf7-response-output,
  .cf7-wrap .wpcf7-form.aborted .wpcf7-response-output{
    border-color:var(--alert); background:var(--alert-soft); color:var(--alert);
  }
  .cf7-wrap .screen-reader-response{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);}
  @media (max-width:860px){ .cf7-wrap .row2{grid-template-columns:1fr;} }

  /* ---------- FOOTER ---------- */
  footer{border-top:1px solid var(--border-soft); padding:56px 0 32px;}
  .footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; margin-bottom:40px;}
  .footer-brand svg{height:24px; width:auto; display:block; margin-bottom:14px; opacity:.85;}
  .footer-brand p{color:var(--muted-2); font-size:13.5px; max-width:280px; line-height:1.6;}
  .footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
  .footer-col h4{font-size:12px; color:var(--muted-2); font-family:'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px;}
  .footer-col a, .footer-col span{display:block; color:var(--muted); font-size:14px; margin-bottom:10px; transition:color .2s;}
  .footer-col a:hover{color:var(--signal);}
  .footer-bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding-top:24px; border-top:1px solid var(--border-soft);
    font-size:12.5px; color:var(--muted-2); font-family:'JetBrains Mono',monospace;
  }

  /* ---------- SVG MOCKUP UTILITIES ---------- */
  .mockup{width:100%; height:auto; display:block; font-family:'IBM Plex Sans',sans-serif;}
  .mockup text{font-family:'IBM Plex Sans',sans-serif;}
  .mockup .mono{font-family:'JetBrains Mono',monospace;}
  .mockup .bg-ink{fill:var(--ink);}
  .mockup .bg-panel{fill:var(--panel-2);}
  .mockup .bg-panel-soft{fill:#12182566;}
  .mockup .ln-border{stroke:var(--border);}
  .mockup .ln-soft{stroke:var(--border-soft);}
  .mockup .tx-text{fill:var(--text);}
  .mockup .tx-muted{fill:var(--muted);}
  .mockup .tx-muted2{fill:var(--muted-2);}
  .mockup .fg-signal{fill:var(--signal);}
  .mockup .ln-signal{stroke:var(--signal);}
  .mockup .fg-alert{fill:var(--alert);}
  .mockup .fg-warn{fill:var(--warn);}
  .mockup .bg-signal-soft{fill:var(--signal-soft);}
  .mockup .bg-alert-soft{fill:var(--alert-soft);}
  .mockup .bg-warn-soft{fill:var(--warn-soft);}
  .mockup .dot-traffic{fill:var(--border);}
  .mockup-caption{
    display:flex; align-items:center; gap:8px; padding:12px 22px;
    border-top:1px solid var(--border-soft); font-family:'JetBrains Mono',monospace;
    font-size:11px; color:var(--muted-2); background:var(--panel-2);
  }
  .mockup-caption .dot{width:5px; height:5px; border-radius:50%; background:var(--signal);}

  /* reveal on scroll */
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}