/* ==========================================================================
   MKV Academy — Design Tokens
   Palette: engineering blueprint. Body copy on warm paper white,
   ink-navy text, MKV blue for structure, signal-amber for the one
   action that matters (Buy Now / checkout).
   ========================================================================== */
:root{
  --ink:            #0B1526;
  --ink-soft:       #3A4B63;
  --paper:          #F7F8FA;
  --paper-raised:   #FFFFFF;
  --line:           #DFE4EC;
  --line-strong:    #C3CBD9;
  --blue:           #2F5FE0;
  --blue-deep:      #1B3B99;
  --blue-tint:      #EAF0FF;
  --amber:          #E8871E;
  --amber-deep:     #C46A0C;
  --green:          #1B8A5A;
  --shadow-sm:      0 1px 2px rgba(11,21,38,.06), 0 1px 1px rgba(11,21,38,.04);
  --shadow-md:      0 8px 24px rgba(11,21,38,.10), 0 2px 6px rgba(11,21,38,.06);
  --shadow-lg:      0 24px 64px rgba(11,21,38,.16), 0 8px 16px rgba(11,21,38,.08);
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --font-display:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --container:      1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-0.01em;color:var(--ink)}
p{margin:0}
.mono{font-family:var(--font-mono)}

.wrap{max-width:var(--container);margin:0 auto;padding:0 20px}

/* focus visibility */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* Blueprint grid — the recurring signature motif: faint crosshair grid
   used behind the hero and section dividers, like a CAD viewport. */
.blueprint-grid{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:40px 40px;
}

/* corner-bracket frame used on cards, like a drawing viewport marker */
.bracket-frame{position:relative}
.bracket-frame::before,.bracket-frame::after,
.bracket-frame > .bf-tr, .bracket-frame > .bf-bl{
  content:"";
  position:absolute;
  width:14px;height:14px;
  border:2px solid var(--blue);
  opacity:.55;
  pointer-events:none;
}
.bracket-frame::before{top:8px;left:8px;border-right:none;border-bottom:none}
.bracket-frame::after{bottom:8px;right:8px;border-left:none;border-top:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:15px;
  border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--blue-deep);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-amber{background:var(--amber);color:#fff}
.btn-amber:hover{background:var(--amber-deep)}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue-deep);
  display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:16px;height:1.5px;background:var(--amber)}

.tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:4px;
  background:var(--blue-tint);
  color:var(--blue-deep);
  font-weight:600;
}
.tag.best-seller{background:#FFF1DF;color:var(--amber-deep)}

.stars{color:var(--amber);font-size:14px;letter-spacing:1px}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}