/*
Theme Name: Bits and Byte Solutions
Theme URI: https://www.bitsandbytesolutions.com
Author: Bits and Byte Solutions
Description: Company site for Bits and Byte Solutions - software products, packages and support. Built around the company mark, with the licensing server at /bls.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.1
License: Proprietary
Text Domain: bitsandbyte
*/

/* ---------------------------------------------------------------------------
   Palette taken from the company mark: the burnt orange is the letter form, the
   lighter orange is the dot and the bar. Everything else is neutral, so the two
   brand colours stay the only saturated things on a page and always mean
   "this is the thing to click".
   --------------------------------------------------------------------------- */

:root{
    --brand:#C2410C;
    --brand-light:#FB923C;
    --brand-dark:#9A3412;
    --brand-wash:#FFF7ED;

    --ink:#1C1917;
    --ink-2:#44403C;
    --muted:#78716C;
    --line:#E7E5E4;
    --panel:#FFFFFF;
    --page:#FAFAF9;
    --dark:#1C1917;

    --good:#15803D;
    --good-wash:#F0FDF4;
    --radius:12px;
    --wrap:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;background:var(--page);color:var(--ink);
    font:16px/1.65 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(30px,5vw,50px);font-weight:800}
h2{font-size:clamp(24px,3.4vw,34px);font-weight:750}
h3{font-size:20px;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}
.center{text-align:center}
.lead{font-size:18px;color:var(--ink-2);max-width:62ch}
.center .lead{margin-left:auto;margin-right:auto}

/* --- buttons ------------------------------------------------------------ */
.btn{display:inline-block;background:var(--brand);color:#fff;border:1px solid var(--brand);
    padding:12px 22px;border-radius:10px;font-weight:650;font-size:15px;cursor:pointer;
    font-family:inherit;transition:background .15s ease}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark);text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--brand-wash);color:var(--brand-dark)}
.btn.on-dark{background:var(--brand-light);border-color:var(--brand-light);color:#3B1A05}
.btn.on-dark:hover{background:#fdb772;border-color:#fdb772;color:#3B1A05}
.btn.wide{width:100%;text-align:center}

/* --- header ------------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:26px;padding:14px 0}
.brand{display:flex;align-items:center;gap:11px}
.brand img{height:42px;width:auto;display:block}
.brand-name{font-weight:800;font-size:16px;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.brand-sub{font-size:11.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav a{color:var(--ink-2);font-size:15px;font-weight:550}
.nav a:hover{color:var(--brand);text-decoration:none}
.nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}

/* --- hero --------------------------------------------------------------- */
.hero{background:linear-gradient(160deg,#FFF7ED 0%,#FFFFFF 55%);
    border-bottom:1px solid var(--line);padding:76px 0 68px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.eyebrow{display:inline-block;background:var(--brand-wash);color:var(--brand-dark);
    border:1px solid #FED7AA;padding:5px 13px;border-radius:999px;
    font-size:12.5px;font-weight:650;margin-bottom:16px}
.hero h1 span{color:var(--brand)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-mark{display:flex;justify-content:center;align-items:center}
.hero-mark img{width:min(300px,80%);filter:drop-shadow(0 18px 34px rgba(194,65,12,.20))}

/* --- sections ----------------------------------------------------------- */
section{padding:72px 0}
section.alt{background:var(--panel);border-block:1px solid var(--line)}
.sec-head{max-width:64ch;margin:0 auto 44px}
.sec-head.left{margin-left:0}

/* --- cards -------------------------------------------------------------- */
.grid{display:grid;gap:22px}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:26px;transition:border-color .15s ease,transform .15s ease}
.card:hover{border-color:var(--brand-light);transform:translateY(-2px)}
.card h3{margin-bottom:6px}
.card .tag{font-size:12.5px;color:var(--brand);font-weight:650;text-transform:uppercase;
    letter-spacing:.05em;display:block;margin-bottom:10px}
.icon{width:44px;height:44px;border-radius:11px;background:var(--brand-wash);
    display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:14px}

/* --- pricing ------------------------------------------------------------ */
.price-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.price{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:26px;display:flex;flex-direction:column;position:relative}
.price.featured{border-color:var(--brand);box-shadow:0 10px 30px rgba(194,65,12,.10)}
.price .flag{position:absolute;top:-12px;left:26px;background:var(--brand);color:#fff;
    font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;letter-spacing:.03em}
.price h4{margin:0 0 4px;font-size:17px;font-weight:700}
.amount{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:12px 0 2px}
.was{color:var(--muted);text-decoration:line-through;font-size:15px;font-weight:500;margin-right:8px}
.period{color:var(--muted);font-size:13.5px}
.save{display:inline-block;background:var(--good-wash);color:var(--good);border:1px solid #BBF7D0;
    font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;margin-top:10px}
.feat{list-style:none;margin:18px 0 22px;padding:0;flex:1}
.feat li{padding:6px 0 6px 25px;position:relative;font-size:14.5px;color:var(--ink-2);
    border-bottom:1px solid var(--line)}
.feat li:last-child{border-bottom:none}
.feat li::before{content:"";position:absolute;left:2px;top:12px;width:11px;height:6px;
    border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}

/* --- currency switcher --------------------------------------------------- */
.cur-row{display:flex;align-items:center;justify-content:center;gap:11px;
    flex-wrap:wrap;margin-top:18px}
.cur-switch{display:inline-flex;align-items:center;gap:8px;background:var(--panel);
    border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 14px}
.cur-switch label{font-size:13px;color:var(--muted);font-weight:600}
.cur-switch select{border:none;background:transparent;font:inherit;font-size:14px;
    font-weight:700;color:var(--brand);padding:3px 6px;cursor:pointer}
.cur-switch select:focus{outline:2px solid var(--brand-light);border-radius:6px}
.small{font-size:12.5px}

/* --- forms -------------------------------------------------------------- */
.form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.field{margin-bottom:15px}
.field label{display:block;font-size:13.5px;font-weight:650;margin-bottom:6px}
.field input,.field select,.field textarea{
    width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
    font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(194,65,12,.12)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.hp{position:absolute;left:-9999px;top:-9999px}

/* --- captcha ------------------------------------------------------------ */
.captcha-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.captcha-img{line-height:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;
    flex:0 0 auto;background:var(--brand-wash)}
.captcha-img svg{display:block}
.captcha-field input{flex:1;min-width:130px;text-transform:uppercase;
    letter-spacing:.3em;font-weight:700;text-align:center}
@media (max-width:520px){
    .captcha-row{flex-direction:column;align-items:stretch}
    .captcha-img{align-self:center}
}
.notice{border-radius:9px;padding:11px 14px;font-size:14px;margin-bottom:16px}
.notice.ok{background:var(--good-wash);color:var(--good);border:1px solid #BBF7D0}
.notice.bad{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA}

/* --- support / chat ----------------------------------------------------- */
.chat{position:fixed;right:20px;bottom:20px;z-index:60;max-width:320px}
.chat-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 14px 40px rgba(0,0,0,.13);padding:17px;display:none}
.chat-card.open{display:block}
.chat-toggle{background:var(--brand);color:#fff;border:none;border-radius:999px;
    padding:13px 21px;font-weight:650;font-size:14.5px;cursor:pointer;font-family:inherit;
    box-shadow:0 8px 22px rgba(194,65,12,.32);display:block;margin-left:auto}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
.dot.on{background:var(--good)}
.dot.off{background:var(--muted)}

/* --- footer ------------------------------------------------------------- */
.site-foot{background:var(--dark);color:#D6D3D1;padding:56px 0 26px;margin-top:0}
.site-foot h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.site-foot a{color:#D6D3D1;font-size:14.5px}
.site-foot a:hover{color:var(--brand-light)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:34px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:9px}
.foot-brand img{height:44px;margin-bottom:14px;
    /* The mark is dark orange on transparent; on the dark footer it needs lifting. */
    filter:brightness(1.15)}
.foot-bottom{border-top:1px solid #44403C;padding-top:20px;display:flex;
    justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:#A8A29E}

/* --- content pages ------------------------------------------------------ */
.entry{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:34px;max-width:78ch;margin:0 auto}
.entry h1{font-size:34px}

@media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:32px}
    .hero-mark{order:-1}
    .hero-mark img{width:180px}
    .foot-grid{grid-template-columns:1fr 1fr}
    .nav{display:none}
    .two{grid-template-columns:1fr}
    section{padding:52px 0}
}