/* Viking Bros IT - shared stylesheet */

:root{
  --navy-950:#0a1420;
  --navy-900:#0e1e30;
  --navy-800:#142c44;
  --steel-700:#3c5871;
  --ice-400:#5ab4e8;
  --ice-300:#8fd0f5;
  --silver-300:#c7d0d9;
  --silver-500:#8fa0af;
  --paper-50:#f5f7f9;
  --paper-100:#eceff2;
  --ink-900:#10161d;
  --ink-700:#2b3946;
  --rule:#e4e9ee;
  --grid-line:rgba(90,180,232,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--ink-900);
  background:#fff;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

h1,h2,h3,h4{
  font-family:'Rajdhani','Arial Narrow',Arial,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.08;
  color:var(--navy-950);
}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

/* accessibility */
.skip{
  position:absolute;left:-9999px;top:8px;z-index:200;
  background:var(--ice-400);color:var(--navy-950);
  padding:10px 16px;font-weight:600;border-radius:2px;
}
.skip:focus{left:8px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ice-400);outline-offset:2px;
}

/* ===== TOP BAR ===== */
.topbar{
  background:var(--navy-950);
  color:var(--silver-500);
  font:500 11px/1 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid rgba(90,180,232,.12);
}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}

/* ===== HEADER / NAV ===== */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,20,32,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(90,180,232,.15);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:42px;height:42px;flex:none}
.brand span{display:flex;flex-direction:column;line-height:1}
.brand b{font:700 19px/1 'Rajdhani','Arial Narrow',sans-serif;color:#fff;text-transform:uppercase;letter-spacing:.02em}
.brand small{
  font:500 10px/1 'IBM Plex Mono',ui-monospace,monospace;color:var(--ice-400);
  letter-spacing:.16em;text-transform:uppercase;margin-top:4px;
}
.links{display:flex;gap:2px}
.links a{color:var(--silver-300);font-size:14px;font-weight:500;padding:8px 12px;border-radius:2px;white-space:nowrap}
.links a:hover{color:#fff;background:rgba(90,180,232,.1)}
.links a.active{color:#fff;box-shadow:inset 0 -2px 0 var(--ice-400)}

/* ===== BUTTONS ===== */
.btn,.navbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:2px;
  background:var(--ice-400);color:var(--navy-950);
  border:1px solid var(--ice-400);
  font:600 12px/1.2 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:background .2s,border-color .2s;
}
.btn:hover,.navbtn:hover{background:var(--ice-300);border-color:var(--ice-300)}
.navbtn{padding:10px 18px;flex:none}
.btn.secondary{background:transparent;color:var(--ice-300);border-color:rgba(90,180,232,.5)}
.btn.secondary:hover{background:rgba(90,180,232,.1);border-color:var(--ice-400)}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.cards + .actions,.panel + .actions{margin-top:40px}

/* ===== EYEBROW ===== */
.eyebrow{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
  font:500 12px/1.2 'IBM Plex Mono',ui-monospace,monospace;
  color:var(--ice-400);letter-spacing:.22em;text-transform:uppercase;
}
.eyebrow::before{content:'';width:26px;height:1px;background:currentColor;flex:none}
.section-head .eyebrow{color:var(--steel-700)}
.dark .eyebrow,.dark .section-head .eyebrow{color:var(--ice-400)}

/* ===== HERO & PAGE HEADER ===== */
.hero,.pagehead{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(ellipse at 70% 20%,var(--navy-800) 0%,var(--navy-950) 65%);
}
.hero::before,.pagehead::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 65% 35%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse at 65% 35%,#000 0%,transparent 72%);
}
.hero{padding:88px 0 80px}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,56px);color:#fff;margin-bottom:22px}
.hero h1 span{color:var(--ice-400)}
.hero p{font-size:17px;color:var(--silver-300);max-width:540px;margin-bottom:30px}

.pagehead{padding:72px 0 64px}
.pagehead .wrap{position:relative}
.pagehead h1{font-size:clamp(32px,4.6vw,50px);color:#fff;max-width:820px;margin-bottom:18px}
.pagehead p{font-size:17px;color:var(--silver-300);max-width:640px}

.security-card{
  position:relative;
  background:rgba(14,30,48,.9);
  border:1px solid rgba(90,180,232,.25);
  padding:32px;
}
.security-card img{width:112px;height:112px;margin-bottom:18px}
.security-card h3{color:#fff;font-size:24px;margin-bottom:12px}
.security-card p{color:var(--silver-300);font-size:14.5px;margin:0 0 24px;max-width:none}
.status{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.status div{
  background:var(--navy-950);border:1px solid rgba(90,180,232,.18);
  padding:12px 14px;color:#fff;font-size:14px;
}
.status b{
  display:block;margin-bottom:3px;
  font:600 10px/1.2 'IBM Plex Mono',ui-monospace,monospace;
  color:var(--ice-400);letter-spacing:.14em;
}

/* ===== TRUST STRIP ===== */
.trust{background:var(--navy-950);border-top:1px solid rgba(90,180,232,.15);padding:26px 0}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.trust b{display:block;font:700 26px/1.1 'Rajdhani','Arial Narrow',sans-serif;color:var(--ice-400);text-transform:uppercase}
.trust span{
  display:block;margin-top:4px;
  font:500 10.5px/1.3 'IBM Plex Mono',ui-monospace,monospace;
  color:var(--silver-500);letter-spacing:.12em;text-transform:uppercase;
}

/* ===== SECTIONS ===== */
section{padding:88px 0;scroll-margin-top:96px}
.hero,.pagehead{scroll-margin-top:0}
.section-head{max-width:700px;margin-bottom:48px}
.section-head h2{font-size:clamp(28px,3.6vw,40px)}
.section-head p{font-size:16px;color:var(--ink-700);margin-top:16px}
.shaded{background:var(--paper-50);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* ===== CARDS ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--rule);padding:28px 26px;transition:border-color .2s}
.card:hover{border-color:var(--ice-400)}
.icon{
  display:inline-block;margin-bottom:16px;padding:4px 9px;
  background:var(--navy-950);color:var(--ice-400);
  font:600 10.5px/1.3 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.1em;
}
.card h3{font-size:19px;margin-bottom:10px}
.card p{font-size:14.5px;color:var(--ink-700)}

/* ===== DARK SECTION ===== */
section.dark{background:var(--navy-950);color:#fff}
.dark h2,.dark h3{color:#fff}
.dark .section-head p,.dark p{color:var(--silver-300)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split .section-head{margin-bottom:0}
.split .section-head .btn{margin-top:26px}
.featurebox{background:var(--navy-900);border:1px solid rgba(90,180,232,.2);padding:36px}
.featurebox h3{font-size:22px;margin-bottom:14px}
.checklist li{
  position:relative;padding:12px 0 12px 30px;
  border-bottom:1px solid rgba(90,180,232,.14);
  color:var(--silver-300);font-size:15px;
}
.checklist li:last-child{border-bottom:0}
.checklist li::before{
  content:'';position:absolute;left:4px;top:17px;width:6px;height:11px;
  border-right:2px solid var(--ice-400);border-bottom:2px solid var(--ice-400);
  transform:rotate(45deg);
}
.featurebox .note{margin-top:18px}

/* ===== TEXT BLOCKS ===== */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.prose p{color:var(--ink-700);margin-bottom:16px;max-width:62ch}
.prose h3{font-size:22px;margin-bottom:12px}
.panel{background:var(--paper-50);border:1px solid var(--rule);padding:32px}
.panel h3{font-size:20px;margin-bottom:14px}
.panel .checklist li{color:var(--ink-700);border-bottom-color:var(--rule)}
.panel .checklist li::before{border-color:var(--steel-700)}
.note{
  border-left:3px solid var(--ice-400);background:rgba(90,180,232,.08);
  padding:14px 18px;font-size:14px;color:var(--ink-700);max-width:none;
}
.dark .note{color:var(--silver-300);background:rgba(90,180,232,.08)}

/* numbered process (a true sequence) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:step}
.step{counter-increment:step;border-top:2px solid var(--navy-950);padding-top:22px}
.step::before{
  content:counter(step,decimal-leading-zero);display:block;margin-bottom:12px;
  font:600 12px/1 'IBM Plex Mono',ui-monospace,monospace;color:var(--steel-700);letter-spacing:.1em;
}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--ink-700)}

/* ===== CTA ===== */
.cta{
  padding:64px 0;color:#fff;
  background:linear-gradient(90deg,var(--navy-900),var(--navy-800));
  border-top:1px solid rgba(90,180,232,.2);
}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta h2{color:#fff;font-size:clamp(26px,3.2vw,34px);margin-bottom:8px}
.cta p{color:var(--silver-300);max-width:560px}

/* ===== CONTACT ===== */
.contactgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.info h2{font-size:clamp(26px,3vw,34px);margin-bottom:14px}
.info > p{color:var(--ink-700);margin-bottom:24px;max-width:46ch}
.infoline{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--rule)}
.infoline .k{
  flex:none;width:96px;padding-top:2px;
  font:600 10.5px/1.4 'IBM Plex Mono',ui-monospace,monospace;
  color:var(--steel-700);letter-spacing:.12em;text-transform:uppercase;
}
.infoline .v{font-size:16px;font-weight:500}
.infoline .v span{display:block;font-size:14px;font-weight:400;color:var(--ink-700);margin-top:2px}
.info .note{margin-top:8px}

.form{background:var(--paper-50);border:1px solid var(--rule);padding:32px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
label{
  display:block;margin-bottom:7px;
  font:600 10.5px/1.3 'IBM Plex Mono',ui-monospace,monospace;
  color:var(--steel-700);letter-spacing:.1em;text-transform:uppercase;
}
input,textarea{
  width:100%;padding:12px 14px;border-radius:2px;
  background:#fff;color:var(--ink-900);border:1px solid var(--silver-300);
  font:400 15px/1.4 'Inter',system-ui,sans-serif;
}
input:focus,textarea:focus{border-color:var(--ice-400)}
textarea{min-height:120px;resize:vertical}
.form .note{margin:4px 0 18px;background:#fff}
.form .btn{width:100%;padding:14px}

/* ===== FOOTER ===== */
.footer{background:var(--navy-950);color:var(--silver-300);padding:56px 0 28px;border-top:1px solid rgba(90,180,232,.12)}
.footergrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer p{font-size:14px;color:var(--silver-500);margin-top:14px;max-width:340px}
.footer h4{
  margin-bottom:12px;
  font:600 11px/1.2 'IBM Plex Mono',ui-monospace,monospace;
  color:var(--ice-400);letter-spacing:.16em;
}
.footer a:not(.brand){display:block;padding:4px 0;font-size:14px;color:var(--silver-300)}
.footer a:not(.brand):hover{color:#fff}
.footer .legal{
  margin-top:40px;padding-top:22px;max-width:none;
  border-top:1px solid rgba(90,180,232,.12);
  font-size:12px;color:var(--silver-500);
}

/* ===== RESPONSIVE ===== */
@media(max-width:1000px){
  .nav{flex-wrap:wrap;row-gap:10px}
  .links{order:3;width:100%;overflow-x:auto;margin:0 -8px;padding-bottom:2px}
  .cards,.cards.four{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hero-grid,.split,.twocol,.contactgrid{grid-template-columns:1fr;gap:40px}
  .trust .wrap{grid-template-columns:repeat(2,1fr);gap:28px}
  .footergrid{grid-template-columns:1fr 1fr}
  section{padding:64px 0}
  .hero{padding:64px 0}
  .pagehead{padding:56px 0 48px}
}
@media(max-width:600px){
  .wrap{padding:0 20px}
  .topbar .wrap span:last-child{display:none}
  .cards,.cards.two,.cards.four,.steps,.form .row{grid-template-columns:1fr}
  .brand small{display:none}
  .navbtn{padding:9px 12px;font-size:11px}
  .footergrid{grid-template-columns:1fr}
  .form{padding:22px}
  .infoline{flex-direction:column;gap:4px}
  .infoline .k{width:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ===== ADDITIONS ===== */
.actions + .note,.cards + .note{margin-top:32px}
.note a{color:var(--steel-700);font-weight:600;text-decoration:underline}
.dark .note a{color:var(--ice-300)}
.prose .actions{margin-top:8px}
.infoline .v a{color:inherit}
.infoline .v a:hover{color:var(--steel-700);text-decoration:underline}
.cta .wrap > div{flex:1 1 420px}
.brand img,.security-card img{border-radius:4px}
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.who > div{border-top:2px solid var(--navy-950);padding-top:18px}
.who h3{font-size:18px;margin-bottom:8px}
.who p{font-size:14.5px;color:var(--ink-700)}
.who + .actions{margin-top:40px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn.secondary-dark{background:transparent;color:var(--navy-950);border-color:var(--navy-950)}
.btn.secondary-dark:hover{background:var(--paper-100);border-color:var(--navy-950)}
@media(max-width:900px){.who{grid-template-columns:1fr}}

.areas{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.areas li{background:#fff;border:1px solid var(--silver-300);padding:8px 16px;font-size:14px;font-weight:500;color:var(--navy-950)}

/* ===== RESOURCE CONTENT ===== */
.card h3 a{color:inherit;text-decoration:none}.card h3 a:hover{text-decoration:underline}.article{max-width:860px}.article .lede{font-size:19px;line-height:1.7;color:var(--ink-700);margin-bottom:36px}.article h2{font-size:clamp(24px,3vw,32px);margin:34px 0 10px}.article p{color:var(--ink-700);margin-bottom:18px}.article a{color:var(--steel-700);font-weight:600;text-decoration:underline}.article .note{margin-top:32px}