:root{--bg:#071322;--navy:#0c2037;--cyan:#12bdf5;--white:#f7fbff;--muted:#a8bbce;--line:#24415c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.wrap{width:min(1140px,92%);margin:auto}.top{border-bottom:1px solid var(--line);background:#081729eF;position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0}.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:21px;line-height:1.05;letter-spacing:.04em}.brand img{width:62px;height:57px;object-fit:contain;border-radius:6px}.brand em{font-style:normal;color:var(--cyan);letter-spacing:.19em;font-size:16px}.links{display:flex;align-items:center;gap:28px}.links a:hover{color:var(--cyan)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;background:var(--cyan);color:#041321;border-radius:8px;font-weight:800;transition:.2s}.btn:hover{background:#62d9ff;transform:translateY(-1px)}.btn.outline{background:transparent;color:white;border:1px solid #5c7c96}.btn.outline:hover{border-color:var(--cyan)}.hero{background:radial-gradient(ellipse at 78% 30%,#11466b 0%,transparent 46%),linear-gradient(140deg,#09182b,#071322);padding:105px 0 95px}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:45px}.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--cyan);font-size:13px;font-weight:800}.hero h1{font-size:clamp(42px,5vw,69px);line-height:1.09;letter-spacing:-.045em;margin:16px 0 24px}.accent{color:var(--cyan)}.lead{font-size:19px;color:var(--muted);max-width:620px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.visual{background:linear-gradient(145deg,#173d5a,#0b1c32);border:1px solid #2a5977;border-radius:22px;padding:20px;box-shadow:0 25px 70px #0007}.window{background:#081526;border-radius:12px;overflow:hidden;border:1px solid #335573}.dots{background:#122941;padding:13px;display:flex;gap:6px}.dots i{height:9px;width:9px;background:#2e83a9;border-radius:50%}.window-body{padding:22px}.window-body strong{font-size:18px}.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.stat{border:1px solid #244763;background:#0e2740;border-radius:9px;padding:12px;font-size:12px;color:#a9c1d2}.stat b{display:block;font-size:25px;color:#fff}.bars{display:flex;align-items:end;gap:9px;height:100px;border-bottom:1px solid #42617b;padding:0 8px}.bars span{flex:1;background:linear-gradient(#1ed1ff,#12659e);border-radius:5px 5px 0 0}.pill{display:inline-block;color:#7ff0c7;background:#0e453e;border-radius:30px;padding:5px 12px;font-size:12px;margin-top:17px}.section{padding:85px 0}.section.alt{background:#0a1b2f}.section h2{font-size:clamp(30px,4vw,44px);line-height:1.2;margin:12px 0}.sub{color:var(--muted);max-width:720px;margin:0 0 36px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{border:1px solid var(--line);background:linear-gradient(145deg,#10263d,#0b1b2e);padding:28px;border-radius:15px}.card.feature{border-color:#1aabdc;box-shadow:0 0 0 1px #1aabdc44}.symbol{font-size:29px;margin-bottom:14px;color:var(--cyan)}.card h3{margin:0 0 10px;font-size:21px}.card p{margin:0;color:var(--muted)}.strip{background:linear-gradient(95deg,#123d5a,#0a253e);border-block:1px solid #226487;padding:45px 0}.strip-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}.strip h2{margin:0 0 6px;font-size:30px}.strip p{margin:0;color:var(--muted)}.footer{padding:30px 0;color:var(--muted);font-size:14px}.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.pagehead{padding:75px 0 45px;background:linear-gradient(125deg,#102d48,#081627)}.pagehead h1{font-size:clamp(36px,5vw,56px);margin:10px 0}.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:25px}.contactbox,.formbox{background:#0e243b;border:1px solid var(--line);border-radius:15px;padding:30px}.contactbox h2,.formbox h2{margin-top:0}.contactbox p{color:var(--muted)}.contactbox a{color:#70d9ff;font-weight:700}.contact-row{padding:16px 0;border-bottom:1px solid var(--line)}label{display:block;font-size:14px;font-weight:700;margin:0 0 7px}.field{width:100%;border:1px solid #3a5c75;border-radius:8px;background:#09192b;color:white;padding:13px;font:inherit;margin-bottom:17px}textarea.field{min-height:135px;resize:vertical}.note{font-size:13px;color:var(--muted)}@media(max-width:800px){.hero-grid,.contact-layout{grid-template-columns:1fr}.hero{padding:65px 0}.cards{grid-template-columns:repeat(2,1fr)}.visual{max-width:550px}.links{gap:14px}.links .btn{display:none}.strip-inner{align-items:flex-start;flex-direction:column}}@media(max-width:540px){.cards{grid-template-columns:1fr}.brand{font-size:15px}.brand em{font-size:12px}.brand img{width:46px;height:46px}.links{font-size:14px}.hero h1{font-size:43px}.section{padding:60px 0}.stat b{font-size:19px}}

/* Certified visual candidate additions */
.showcase-img{display:block;width:100%;height:100%;max-height:440px;object-fit:cover;object-position:top left;border:1px solid #277bb0;border-radius:18px;box-shadow:0 25px 75px #0008}
.original-dashboard[hidden]{display:none!important}
.service-link{display:inline-flex;margin-top:16px;color:#42d9ff;font-weight:750;text-decoration:none;border-bottom:1px solid #42d9ff70;padding-bottom:4px}
.service-link:hover,.service-link:focus-visible{color:#fff;border-color:#fff}
@media(max-width:800px){.showcase-img{max-height:330px;object-fit:cover}}

/* One Punch Studios Candidate002: logo edge blending */
.brand img {
    -webkit-mask-image: radial-gradient(ellipse 68% 68% at center, #000 52%, transparent 100%);
    mask-image: radial-gradient(ellipse 68% 68% at center, #000 52%, transparent 100%);
}

/* Langebaan office location */
.office-section {
    padding-top: 35px;
}

.office-map {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #0e243b;
    box-shadow: 0 18px 50px #0005;
}

.office-map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

.office-directions {
    margin-top: 20px;
}

@media (max-width: 540px) {
    .office-map iframe {
        height: 300px;
    }
}
/* Candidate002 misty logo refinement */
.brand img {
    border-radius: 0;
    -webkit-mask-image: radial-gradient(
        ellipse 75% 72% at center,
        rgba(0,0,0,1) 12%,
        rgba(0,0,0,.90) 28%,
        rgba(0,0,0,.55) 48%,
        rgba(0,0,0,.18) 67%,
        transparent 85%
    );
    mask-image: radial-gradient(
        ellipse 75% 72% at center,
        rgba(0,0,0,1) 12%,
        rgba(0,0,0,.90) 28%,
        rgba(0,0,0,.55) 48%,
        rgba(0,0,0,.18) 67%,
        transparent 85%
    );
}
/* STEP 055 PREMIUM CAROUSEL */
.ops-carousel.premium-carousel {
  padding: 12px;
  background: linear-gradient(145deg,#112d48,#081829);
  border: 1px solid #2d5774;
  border-radius: 22px;
  box-shadow: 0 25px 65px #0006;
}
.premium-carousel .carousel-viewport { overflow:hidden; border-radius:14px; }
.premium-carousel .carousel-track {
  display:flex;
  transition:transform .65s cubic-bezier(.22,.61,.36,1);
}
.premium-carousel .carousel-slide {
  flex:0 0 100%;
  min-width:0;
  min-height:440px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(145deg,#0d253d,#071525);
  border:1px solid #254b68;
}
.premium-slide-top {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; color:#8fb1c8; font-size:10px;
  font-weight:800; letter-spacing:.13em;
}
.premium-number { color:#18c8ff; }
.premium-tag { text-align:right; }
.premium-art {
  margin:19px 0 16px; height:164px;
  border:1px solid #315d7b; border-radius:13px;
  background:radial-gradient(circle at 75% 25%,#17587a,transparent 55%),#0a1d30;
  overflow:hidden; box-shadow:0 12px 28px #0004;
}
.premium-art-bar {
  height:29px; background:#102d45; border-bottom:1px solid #28506a;
  display:flex; align-items:center; gap:5px; padding:0 12px;
}
.premium-art-bar span { width:6px; height:6px; border-radius:50%; background:#3c7695; }
.premium-art-bar b { margin-left:auto; font-size:9px; letter-spacing:.13em; color:#7faac3; }
.premium-art-content {
  height:135px; padding:18px; display:grid;
  grid-template-columns:65px 1fr; gap:16px; align-items:center;
}
.premium-art-icon {
  width:60px; height:60px; border-radius:14px;
  background:linear-gradient(135deg,#15c8ff,#0a6c9c);
  color:#041726; display:grid; place-items:center;
  font-size:28px; font-weight:900; box-shadow:0 0 35px #12bdf533;
}
.premium-art-lines { display:grid; gap:9px; }
.premium-art-lines i {
  height:7px; border-radius:10px;
  background:linear-gradient(90deg,#1b87b3,#16405d);
}
.premium-art-lines i:nth-child(2) { width:76%; }
.premium-art-lines i:nth-child(3) { width:52%; }
.premium-art-blocks { grid-column:1/-1; display:none; }
.premium-art-web { background:radial-gradient(circle at 80% 20%,#184a7a,transparent 55%),#0b2039; }
.premium-art-automation { background:radial-gradient(circle at 70% 30%,#126d78,transparent 55%),#0a2634; }
.premium-art-integration { background:radial-gradient(circle at 75% 25%,#384d85,transparent 55%),#101c38; }
.premium-art-design { background:radial-gradient(circle at 75% 25%,#125c83,transparent 55%),#101d3a; }
.premium-art-support { background:radial-gradient(circle at 75% 25%,#136b74,transparent 55%),#09252d; }
.premium-slide-content h2 {
  margin:0 0 8px; font-size:clamp(23px,2.5vw,31px);
  line-height:1.15; letter-spacing:-.025em;
}
.premium-slide-content p {
  margin:0 0 17px; color:#b5cad9; font-size:13px; line-height:1.6;
}
.premium-slide-cta {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; width:100%; padding:12px 16px;
  border-radius:9px; background:#12bdf5;
  color:#041321; font-weight:850; font-size:13px;
  transition:background .2s,transform .2s;
}
.premium-slide-cta:hover,.premium-slide-cta:focus-visible {
  background:#78e0ff; transform:translateY(-2px);
}
.premium-carousel .carousel-controls {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:14px 5px 4px;
}
.premium-carousel .carousel-arrow {
  width:39px; height:39px; border-radius:50%;
  border:1px solid #39708e; background:#0c2941;
  color:white; font-size:20px; cursor:pointer;
}
.premium-carousel .carousel-dots { display:flex; gap:7px; align-items:center; }
.premium-carousel .carousel-dots button {
  width:8px; height:8px; padding:0; border:0;
  border-radius:20px; background:#5e8098; cursor:pointer;
  transition:width .2s,background .2s;
}
.premium-carousel .carousel-dots button[aria-current="true"] {
  width:23px; background:#12bdf5;
}
.premium-carousel .carousel-status {
  text-align:center; font-size:11px; color:#8faec4; margin:3px 0 0;
}
.card .service-link {
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:auto; padding:11px 15px;
  border-radius:8px; border:1px solid #2788ad;
  background:#0c3049; color:#a5eaff; font-weight:800;
}
.card .service-link:hover { background:#12bdf5; color:#041321; }
@media(max-width:800px) {
  .premium-carousel { max-width:550px; width:100%; }
}
@media(max-width:540px) {
  .premium-carousel .carousel-slide { min-height:420px; padding:19px; }
  .premium-art { height:150px; }
  .premium-slide-content h2 { font-size:25px; }
  .premium-slide-content p { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .premium-carousel .carousel-track,
  .premium-slide-cta { transition:none !important; }
}
/* STEP 063 HERO GRID CONTAINMENT */
@media (min-width: 801px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  }
}

.hero-grid > * {
  min-width: 0;
}

.ops-carousel.premium-carousel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.premium-carousel .carousel-viewport,
.premium-carousel .carousel-track {
  min-width: 0;
}

/* Step081 - isolated featured showcase */
.ops-showcase { padding-top: 18px; }
.ops-showcase-shell { overflow: hidden; width: 100%; margin-top: 25px; }
.ops-showcase-track { display: flex; gap: 18px; transition: transform .45s ease; }
.ops-showcase-card {
    flex: 0 0 calc((100% - 36px) / 3);
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(56,189,248,.2);
    border-radius: 18px;
    background: #101d35;
}
.ops-showcase-card img {
    display: block;
    width: 100%;
    height: 175px;
    object-fit: cover;
}
.ops-showcase-body { padding: 19px; }
.ops-showcase-body h3 { margin: 0 0 9px; }
.ops-showcase-body p { margin: 0 0 17px; line-height: 1.6; }
.ops-showcase-body a { color: #38bdf8; font-weight: 700; text-decoration: none; }
.ops-showcase-body a:hover { text-decoration: underline; }
.ops-showcase-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}
.ops-showcase-controls button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(56,189,248,.45);
    background: #142641;
    color: #7dd3fc;
    cursor: pointer;
    font-size: 21px;
}
.ops-showcase-controls button:disabled { opacity: .35; cursor: default; }
.ops-showcase-controls button:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 3px;
}
.ops-showcase-controls span { min-width: 45px; text-align: center; }
@media (max-width: 850px) {
    .ops-showcase-card { flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 600px) {
    .ops-showcase-card { flex-basis: 100%; }
    .ops-showcase-card img { height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
    .ops-showcase-track { transition: none; }
}

/* OPS STEP031 SLOW LOGO PULSE */

/* Narrow, clear website typography */
body, button, input, textarea, select {
    font-family: "Arial Narrow", "Liberation Sans Narrow",
                 "Segoe UI", Arial, sans-serif;
}

/* Slow expanding electric-blue logo glow */
.brand img {
    animation: opsLogoPulse 5s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes opsLogoPulse {
    0%, 12%, 100% {
        filter: drop-shadow(0 0 0 transparent);
    }

    35% {
        filter:
            drop-shadow(0 0 5px rgba(18,189,245,.5))
            drop-shadow(0 0 12px rgba(18,189,245,.3));
    }

    50% {
        filter:
            drop-shadow(0 0 12px rgba(18,189,245,.95))
            drop-shadow(0 0 26px rgba(18,189,245,.65));
    }

    58% {
        filter:
            drop-shadow(0 0 18px rgba(100,220,255,1))
            drop-shadow(0 0 38px rgba(18,189,245,.8));
    }

    78% {
        filter:
            drop-shadow(0 0 5px rgba(18,189,245,.25));
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand img {
        animation: none;
    }
}

/* OPS STEP034 EXPANDING LOGO HALO */

.brand {
    position: relative;
    isolation: isolate;
}

.brand img {
    position: relative;
    z-index: 1;
    animation: opsLogoPulse 5s ease-in-out infinite;
}

.brand::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    top: 50%;
    width: 62px;
    height: 62px;
    border: 2px solid rgba(18,189,245,.85);
    border-radius: 50%;
    pointer-events: none;
    transform: translateY(-50%) scale(.65);
    opacity: 0;
    box-shadow: 0 0 12px #12bdf5;
    animation: opsExpandingHalo 5s ease-out infinite;
}

@keyframes opsExpandingHalo {
    0%, 15%, 100% {
        transform: translateY(-50%) scale(.65);
        opacity: 0;
    }

    30% {
        opacity: .9;
    }

    55% {
        transform: translateY(-50%) scale(1.5);
        opacity: .7;
        box-shadow:
            0 0 20px #12bdf5,
            0 0 40px rgba(18,189,245,.6);
    }

    78% {
        transform: translateY(-50%) scale(2);
        opacity: 0;
    }
}

@media (max-width:540px) {
    .brand::before {
        width: 46px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand::before {
        animation: none;
    }
}

/* OPS STEP036 CAROUSEL PULSE */

@keyframes opsCarouselBorderPulse {
    0% {
        border-color: #2a5977;
        box-shadow: 0 25px 70px #0007;
    }

    30% {
        border-color: #8ceaff;
        box-shadow:
            0 0 0 2px rgba(18,189,245,.65),
            0 0 22px rgba(18,189,245,.8),
            0 0 48px rgba(18,189,245,.35);
    }

    65% {
        border-color: #12bdf5;
        box-shadow:
            0 0 0 5px rgba(18,189,245,.12),
            0 0 28px rgba(18,189,245,.35);
    }

    100% {
        border-color: #2a5977;
        box-shadow: 0 25px 70px #0007;
    }
}

.ops-carousel.ops-border-pulse {
    animation: opsCarouselBorderPulse 1.2s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
    .ops-carousel.ops-border-pulse {
        animation: none;
    }
}

/* OPS STEP037 INTERACTION PULSE */

/* Clickable buttons, cards and links */
.btn,
.carousel-arrow,
.carousel-dots button,
.premium-slide-cta,
.service-link,
.card,
.ops-showcase-card,
.ops-showcase a {
    transition:
        box-shadow .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        transform .25s ease;
}

/* Visible pulse on activation */
@keyframes opsInteractionPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(18,189,245,.7);
    }

    35% {
        box-shadow:
            0 0 0 3px rgba(18,189,245,.65),
            0 0 18px rgba(18,189,245,.75),
            0 0 36px rgba(18,189,245,.35);
    }

    70% {
        box-shadow:
            0 0 0 8px rgba(18,189,245,.12),
            0 0 24px rgba(18,189,245,.25);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(18,189,245,0);
    }
}

.ops-interaction-pulse {
    animation: opsInteractionPulse 1.2s ease-out 1;
}

/* Keyboard focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #12bdf5;
    outline-offset: 4px;
}

/* Respect reduced motion settings */
@media (prefers-reduced-motion: reduce) {
    .ops-interaction-pulse {
        animation: none;
    }
}

/* OPS STEP039 STRONGER INTERACTION PULSE */
@keyframes opsInteractionPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(18,189,245,.2);
    }
    30% {
        box-shadow:
            0 0 0 3px rgba(120,235,255,.95),
            0 0 24px rgba(18,189,245,.95),
            0 0 50px rgba(18,189,245,.55);
    }
    65% {
        box-shadow:
            0 0 0 9px rgba(18,189,245,.22),
            0 0 35px rgba(18,189,245,.4);
    }
    100% {
        box-shadow:
            0 0 0 14px rgba(18,189,245,0);
    }
}

.ops-interaction-pulse {
    animation: opsInteractionPulse 1.2s ease-out 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .ops-interaction-pulse {
        animation: none !important;
    }
}

/* OPS STEP040 ARIAL TYPOGRAPHY */

/* Consistent, clear font across both pages */
html,
body,
button,
input,
select,
textarea {
    font-family: Arial, Helvetica, sans-serif;
}

/* Clear headings without excessive spacing */
h1, h2, h3, h4,
.brand,
.eyebrow,
.premium-tag,
.premium-number {
    font-family: Arial, Helvetica, sans-serif;
}

/* Compact headings, keeping the existing design */
.hero h1 {
    letter-spacing: -0.035em;
}

.section h2,
.card h3,
.premium-slide-content h2 {
    letter-spacing: -0.02em;
}

/* Keep smaller text readable */
.card p,
.premium-slide-content p,
.lead,
.sub,
.contactbox p,
.formbox,
.links {
    letter-spacing: normal;
}