/*
Theme Name:   MikrotikAdmin (Salient Child)
Theme URI:    https://mikrotikadmin.com
Description:  Marketing site for MikrotikAdmin. Adds full-width page templates
              for the home, product, pricing, docs and legal pages. All rules
              are scoped under .mta so the parent theme cannot bleed into them
              and they cannot bleed into the rest of the site.
Author:       Penmedia Tech Services
Author URI:   https://mikrotikadmin.com
Template:     salient
Version:      1.0.0
License:      GPL-2.0+
Text Domain:  mta
*/

/* ============================================================
   Design tokens
   ============================================================ */
.mta{
    --ink:#0b1220;
    --navy:#0f1b2d;
    --navy-2:#16283f;
    --blue:#1668e3;
    --blue-deep:#0f4fb0;
    --cyan:#22d3ee;
    --green:#0f9d58;
    --amber:#f0a500;
    --bg:#ffffff;
    --soft:#f5f8fc;
    --border:#e3ebf3;
    --muted:#5b7089;
    --radius:16px;
    --shadow:0 20px 50px rgba(11,18,32,.10);
    --shadow-sm:0 2px 8px rgba(11,18,32,.06);
    --max:1160px;

    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

/* Salient styles headings, buttons, inputs and lists aggressively. Neutralise
   that inside our pages only, then restate what we want. Without this the
   theme's own rules win and the layout drifts. */
.mta *,.mta *::before,.mta *::after{box-sizing:border-box;}
.mta h1,.mta h2,.mta h3,.mta h4,.mta p,.mta ul,.mta ol,.mta li,.mta figure{
    margin:0;padding:0;color:inherit;font-family:inherit;letter-spacing:normal;
}
.mta ul,.mta ol{list-style:none;}
.mta img,.mta svg{max-width:100%;display:block;}
.mta a{color:var(--blue);text-decoration:none;}
.mta a:hover{color:var(--blue-deep);}
.mta button,.mta input,.mta select,.mta textarea{font:inherit;color:inherit;margin:0;}

/* ============================================================
   Layout
   ============================================================ */
.mta-wrap{max-width:var(--max);margin:0 auto;padding:0 22px;}
.mta-section{padding:74px 0;}
.mta-section--soft{background:var(--soft);}
.mta-section--tight{padding:52px 0;}

.mta-eyebrow{
    display:inline-flex;align-items:center;gap:7px;
    font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--blue);background:rgba(22,104,227,.09);
    border:1px solid rgba(22,104,227,.2);border-radius:100px;padding:5px 13px;
}
.mta-h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.12;}
.mta-h3{font-size:19px;font-weight:700;letter-spacing:-.015em;}
.mta-lede{font-size:17px;color:var(--muted);max-width:62ch;margin-top:12px;}
.mta-center{text-align:center;}
.mta-center .mta-lede{margin-left:auto;margin-right:auto;}
.mta-head{margin-bottom:38px;}

/* ============================================================
   Buttons
   ============================================================ */
.mta-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 26px;border-radius:12px;border:1.5px solid transparent;
    font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;
    transition:transform .14s,box-shadow .2s,background .2s,color .2s;
}
.mta-btn--primary{background:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(22,104,227,.3);}
.mta-btn--primary:hover{background:var(--blue-deep);color:#fff;transform:translateY(-2px);box-shadow:0 14px 32px rgba(22,104,227,.4);}
.mta-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);}
.mta-btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;}
.mta-btn--outline{background:#fff;color:var(--blue);border-color:var(--blue);}
.mta-btn--outline:hover{background:var(--blue);color:#fff;}
.mta-btn--lg{padding:16px 32px;font-size:16px;}
.mta-btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.mta-center .mta-btn-row{justify-content:center;}

/* ============================================================
   Hero
   ============================================================ */
.mta-hero{
    position:relative;overflow:hidden;
    background:linear-gradient(160deg,#0b1220 0%,#12263f 58%,#0f1b2d 100%);
    color:#eaf1fa;padding:86px 0 78px;
}
.mta-hero::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 55% 55% at 82% 12%,rgba(34,211,238,.22),transparent 62%),
               radial-gradient(ellipse 60% 60% at 8% 88%,rgba(22,104,227,.3),transparent 60%);
}
.mta-hero::after{
    content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;
    background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:52px 52px;
    -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000 30%,transparent 100%);
            mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000 30%,transparent 100%);
}
.mta-hero .mta-wrap{position:relative;z-index:2;}
.mta-hero .mta-eyebrow{color:#8fd6ff;background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.32);}
.mta-hero h1{
    font-size:clamp(32px,5.2vw,58px);font-weight:800;letter-spacing:-.04em;
    line-height:1.04;margin:18px 0 0;color:#fff;
}
.mta-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--cyan),#7cc4ff);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.mta-hero .mta-lede{color:rgba(234,241,250,.72);font-size:18px;}
.mta-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;}

.mta-hero-note{margin-top:16px;font-size:13px;color:rgba(234,241,250,.55);}

/* Terminal-ish product frame in the hero */
.mta-shot{
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
    border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.mta-shot-bar{display:flex;align-items:center;gap:7px;padding:10px 13px;
    background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.12);}
.mta-shot-bar i{width:10px;height:10px;border-radius:50%;display:block;}
.mta-shot-bar i:nth-child(1){background:#ff5f57}.mta-shot-bar i:nth-child(2){background:#febc2e}.mta-shot-bar i:nth-child(3){background:#28c840}
.mta-shot-bar span{margin-left:8px;font-size:11px;color:rgba(234,241,250,.5);}
.mta-shot img{width:100%;display:block;}
.mta-shot-ph{padding:26px;display:grid;gap:10px;}
.mta-shot-ph i{display:block;height:10px;border-radius:4px;background:rgba(255,255,255,.1);}
.mta-shot-ph i:nth-child(1){width:52%}.mta-shot-ph i:nth-child(2){width:88%}
.mta-shot-ph i:nth-child(3){width:74%}.mta-shot-ph i:nth-child(4){width:94%;height:34px;background:rgba(22,104,227,.35)}

/* Trust strip */
.mta-strip{border-top:1px solid rgba(255,255,255,.12);margin-top:52px;padding-top:26px;
    display:flex;flex-wrap:wrap;gap:30px;}
.mta-strip div{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(234,241,250,.68);}
.mta-strip b{color:#fff;font-weight:700;}

/* ============================================================
   Cards & grids
   ============================================================ */
.mta-grid{display:grid;gap:20px;}
.mta-grid--2{grid-template-columns:repeat(2,1fr);}
.mta-grid--3{grid-template-columns:repeat(3,1fr);}
.mta-grid--4{grid-template-columns:repeat(4,1fr);}

.mta-card{
    background:#fff;border:1px solid var(--border);border-radius:var(--radius);
    padding:26px;box-shadow:var(--shadow-sm);transition:box-shadow .22s,transform .18s,border-color .22s;
}
.mta-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:#cfe0f2;}
.mta-card .mta-h3{margin-bottom:8px;}
.mta-card p{font-size:14.5px;color:var(--muted);}
.mta-ico{
    width:42px;height:42px;border-radius:12px;margin-bottom:16px;
    display:flex;align-items:center;justify-content:center;font-size:19px;
    background:linear-gradient(140deg,rgba(22,104,227,.14),rgba(34,211,238,.14));
    border:1px solid rgba(22,104,227,.18);
}

/* Numbered steps */
.mta-step{display:flex;gap:16px;align-items:flex-start;}
.mta-step-n{
    width:32px;height:32px;flex-shrink:0;border-radius:10px;
    background:var(--blue);color:#fff;font-weight:800;font-size:14px;
    display:flex;align-items:center;justify-content:center;
}
.mta-step h3{font-size:16px;font-weight:700;margin-bottom:4px;}
.mta-step p{font-size:14px;color:var(--muted);}

/* ============================================================
   Pricing
   ============================================================ */
.mta-price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;}
.mta-plan{
    background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);
    padding:26px 22px;display:flex;flex-direction:column;position:relative;
}
.mta-plan--best{border-color:var(--blue);box-shadow:0 18px 44px rgba(22,104,227,.16);}
.mta-plan-tag{
    position:absolute;top:-11px;left:50%;transform:translateX(-50%);
    background:var(--blue);color:#fff;font-size:10px;font-weight:800;
    letter-spacing:.14em;text-transform:uppercase;padding:4px 12px;border-radius:100px;white-space:nowrap;
}
.mta-plan-name{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.mta-plan-price{font-size:34px;font-weight:800;letter-spacing:-.035em;margin:10px 0 2px;}
.mta-plan-price small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0;}
.mta-plan-sub{font-size:12.5px;color:var(--muted);min-height:34px;}
.mta-plan ul{margin:18px 0 22px;display:grid;gap:9px;}
.mta-plan li{font-size:14px;display:flex;gap:9px;align-items:flex-start;color:var(--ink);}
.mta-plan li::before{content:'\2713';color:var(--green);font-weight:800;flex-shrink:0;}
.mta-plan li.no{color:#9aa9b9;}
.mta-plan li.no::before{content:'\2715';color:#c7d2dd;}
.mta-plan .mta-btn{margin-top:auto;width:100%;}

.mta-note{
    margin-top:26px;padding:18px 20px;background:#fff;border:1px solid var(--border);
    border-left:4px solid var(--amber);border-radius:12px;font-size:14px;color:var(--muted);
}
.mta-note b{color:var(--ink);}

/* Comparison table */
.mta-tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:#fff;}
.mta-table{width:100%;border-collapse:collapse;min-width:640px;}
.mta-table th,.mta-table td{padding:13px 16px;text-align:left;font-size:14px;border-bottom:1px solid var(--border);}
.mta-table thead th{background:var(--soft);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.mta-table tbody tr:last-child td{border-bottom:none;}
.mta-table td.y{color:var(--green);font-weight:700;}
.mta-table td.n{color:#b6c3d0;}

/* ============================================================
   FAQ
   ============================================================ */
.mta-faq{display:grid;gap:12px;max-width:820px;margin:0 auto;}
.mta-faq details{background:#fff;border:1px solid var(--border);border-radius:12px;padding:0;overflow:hidden;}
.mta-faq summary{
    cursor:pointer;list-style:none;padding:17px 20px;font-weight:700;font-size:15.5px;
    display:flex;justify-content:space-between;gap:14px;align-items:center;
}
.mta-faq summary::-webkit-details-marker{display:none;}
.mta-faq summary::after{content:'+';font-size:20px;color:var(--blue);font-weight:700;flex-shrink:0;}
.mta-faq details[open] summary::after{content:'\2013';}
.mta-faq details p{padding:0 20px 18px;font-size:14.5px;color:var(--muted);}

/* ============================================================
   CTA band
   ============================================================ */
.mta-cta{
    background:linear-gradient(140deg,var(--navy),#123a63);color:#fff;
    border-radius:22px;padding:52px 44px;text-align:center;position:relative;overflow:hidden;
}
.mta-cta::before{content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 82% 14%,rgba(34,211,238,.28),transparent 55%);}
.mta-cta>*{position:relative;z-index:1;}
.mta-cta h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.03em;color:#fff;}
.mta-cta p{color:rgba(255,255,255,.72);margin-top:10px;font-size:16px;}

/* ============================================================
   Prose (legal & docs)
   ============================================================ */
.mta-prose{max-width:820px;margin:0 auto;}
.mta-prose h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:34px 0 10px;}
.mta-prose h3{font-size:17px;font-weight:700;margin:22px 0 8px;}
.mta-prose p{margin-bottom:13px;color:#31435a;font-size:15.5px;}
.mta-prose ul{list-style:disc;padding-left:22px;margin-bottom:14px;}
.mta-prose ol{list-style:decimal;padding-left:22px;margin-bottom:14px;}
.mta-prose li{margin-bottom:7px;color:#31435a;font-size:15.5px;}
.mta-prose strong{color:var(--ink);}
.mta-prose code{background:var(--soft);border:1px solid var(--border);border-radius:6px;
    padding:2px 7px;font-size:13.5px;font-family:ui-monospace,'JetBrains Mono',monospace;}
.mta-prose pre{background:var(--ink);color:#dbe7f5;border-radius:12px;padding:16px 18px;
    overflow-x:auto;margin-bottom:16px;font-size:13.5px;line-height:1.7;}
.mta-prose pre code{background:none;border:none;padding:0;color:inherit;}
.mta-updated{font-size:13px;color:var(--muted);margin-bottom:8px;}

/* ============================================================
   Page header (non-home pages)
   ============================================================ */
.mta-phead{
    background:linear-gradient(160deg,#0b1220,#14283f);color:#fff;
    padding:60px 0 54px;text-align:center;position:relative;overflow:hidden;
}
.mta-phead::before{content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 60% 60% at 50% 0%,rgba(22,104,227,.35),transparent 62%);}
.mta-phead>*{position:relative;z-index:1;}
.mta-phead h1{font-size:clamp(28px,4.2vw,44px);font-weight:800;letter-spacing:-.035em;color:#fff;margin-top:14px;}
.mta-phead p{color:rgba(234,241,250,.7);font-size:16.5px;max-width:60ch;margin:12px auto 0;}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1000px){
    .mta-price-grid{grid-template-columns:repeat(2,1fr);}
    .mta-grid--4{grid-template-columns:repeat(2,1fr);}
    .mta-hero-grid{grid-template-columns:1fr;gap:34px;}
}
@media(max-width:760px){
    .mta-section{padding:52px 0;}
    .mta-hero{padding:62px 0 56px;}
    .mta-grid--2,.mta-grid--3,.mta-grid--4,.mta-price-grid{grid-template-columns:1fr;}
    .mta-cta{padding:38px 22px;}
    .mta-btn{width:100%;}
    .mta-btn-row{flex-direction:column;}
    .mta-strip{gap:14px;flex-direction:column;}
}

@media (prefers-reduced-motion: reduce){
    .mta *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* ============================================================
   Salient override guard
   ------------------------------------------------------------
   Salient styles anchors and .button elements with rules more
   specific than a single class, so plain .mta-btn--primary lost
   the colour fight and the label rendered the same colour as the
   fill. These restate every button state at a specificity the
   parent theme cannot beat.
   ============================================================ */
.mta a.mta-btn,
.mta button.mta-btn,
.mta a.mta-btn:visited{
    text-decoration:none !important;
    line-height:1.2 !important;
    letter-spacing:normal !important;
    text-transform:none !important;
    font-family:inherit !important;
}

.mta a.mta-btn--primary,
.mta a.mta-btn--primary:link,
.mta a.mta-btn--primary:visited,
.mta button.mta-btn--primary{
    background:var(--blue) !important;
    color:#ffffff !important;
    border-color:var(--blue) !important;
}
.mta a.mta-btn--primary:hover,
.mta a.mta-btn--primary:focus,
.mta button.mta-btn--primary:hover{
    background:var(--blue-deep) !important;
    color:#ffffff !important;
}

.mta a.mta-btn--ghost,
.mta a.mta-btn--ghost:link,
.mta a.mta-btn--ghost:visited{
    background:transparent !important;
    color:#ffffff !important;
    border-color:rgba(255,255,255,.4) !important;
}
.mta a.mta-btn--ghost:hover,
.mta a.mta-btn--ghost:focus{
    background:rgba(255,255,255,.14) !important;
    color:#ffffff !important;
}

.mta a.mta-btn--outline,
.mta a.mta-btn--outline:link,
.mta a.mta-btn--outline:visited{
    background:#ffffff !important;
    color:var(--blue) !important;
    border-color:var(--blue) !important;
}
.mta a.mta-btn--outline:hover,
.mta a.mta-btn--outline:focus{
    background:var(--blue) !important;
    color:#ffffff !important;
}

/* Salient also colours headings and paragraph text inside sections it
   controls; restate ours so the hero and cards keep their contrast. */
.mta .mta-hero h1,
.mta .mta-hero h1 *,
.mta .mta-phead h1,
.mta .mta-cta h2{ color:#ffffff !important; }
.mta .mta-hero h1 em{ -webkit-text-fill-color:transparent !important; }
.mta .mta-card .mta-h3,
.mta .mta-plan-price{ color:var(--ink) !important; }
.mta .mta-plan-name{ color:var(--muted) !important; }

/* ============================================================
   Real product screenshots
   ------------------------------------------------------------
   The hero frame originally held an abstract placeholder. With a
   real capture the frame becomes an app window: keep the title
   bar, drop the padding, and let the image fill the width.
   ============================================================ */
.mta .mta-shot--real{ background:#ffffff; }
.mta .mta-shot--real img{
    display:block; width:100%; height:auto; border:0;
    border-radius:0 0 13px 13px;
}
/* On the dark hero the white capture needs a defined edge. */
.mta-hero .mta-shot--real{
    border-color:rgba(255,255,255,.22);
    box-shadow:0 34px 80px rgba(0,0,0,.55);
}
/* On light sections it needs the opposite: a soft, grounded edge. */
.mta-section .mta-shot--real{
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    background:#fff;
}
.mta-section .mta-shot--real .mta-shot-bar{
    background:#f2f6fb; border-bottom:1px solid var(--border);
}
.mta-section .mta-shot--real .mta-shot-bar span{ color:#7b8ca1; }
.mta-shotwrap{ max-width:920px; margin:0 auto; }
.mta-shotcap{
    text-align:center; font-size:13px; color:var(--muted); margin-top:14px;
}

/* ============================================================
   Currency switch
   ------------------------------------------------------------
   Shown above any price list. Deliberately quiet: most visitors
   are served the right currency already and should not be made
   to think about it, but the few who are not need an obvious
   way out.
   ============================================================ */