/* AGV IT Consulting — premium redesign (voorstel F "Midnight")
   Fonts: Inter (titels + tekst), IBM Plex Mono (labels). Merk: navy #0E2240, blauw #2563EB. */
:root{
  --ink:#050D1A; --ink-2:#08142A; --navy:#0E2240; --navy-2:#13294B;
  --blue:#2563EB; --blue-2:#3B82F6; --sky:#60A5FA; --sky-2:#93C5FD; --focus:#0284C7;
  --paper:#F4F7FC; --paper-2:#EAF0FA; --white:#FFFFFF;
  --txt-d:#EAF1FF; --mut-d:#A3B4D2; --faint-d:#8196BB;
  --txt-l:#0E2240; --mut-l:#4D5B77; --faint-l:#66748F;
  --hair-d:rgba(148,181,255,.15); --hair-l:#DAE5F5;
  --radius:2px; --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--ink);}
body{
  margin:0; background:var(--ink); color:var(--txt-d);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:'Inter',system-ui,sans-serif; margin:0; font-weight:600; letter-spacing:-.035em; line-height:1.08;}
p{margin:0;}
a{color:inherit;}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.02em;}
.tnum{font-variant-numeric:tabular-nums;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--sky); outline-offset:3px;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- reveal ---------- */
.js .reveal{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease) calc(var(--d,0)*1ms), transform .9s var(--ease) calc(var(--d,0)*1ms);}
.js .reveal.in{opacity:1; transform:none;}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(5,13,26,.74); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px); border-bottom:1px solid var(--hair-d);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:12px 32px; display:flex; align-items:center; gap:36px;}
.logo{display:flex; align-items:center; text-decoration:none; flex-shrink:0;}
.logo img{height:44px; width:auto; display:block;}
nav.links{margin-left:auto; display:flex; gap:30px; font-size:14px; color:var(--mut-d);}
nav.links a{text-decoration:none; position:relative; padding:6px 0; transition:color .2s;}
nav.links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--sky); transform:scaleX(0); transform-origin:0 50%; transition:transform .35s var(--ease);}
nav.links a:hover,nav.links a:focus-visible{color:var(--txt-d);}
nav.links a:hover::after,nav.links a:focus-visible::after{transform:scaleX(1);}
.nav-cta{display:inline-flex; align-items:center; gap:8px; font:500 13px 'IBM Plex Mono',monospace; color:#fff; background:var(--blue); padding:10px 16px; border-radius:var(--radius); text-decoration:none; white-space:nowrap; transition:background .2s, box-shadow .3s;}
.nav-cta:hover{background:var(--blue-2); box-shadow:0 0 0 4px rgba(37,99,235,.22);}
.nav-toggle{display:none; margin-left:auto; width:44px; height:44px; background:transparent; border:1px solid var(--hair-d); border-radius:var(--radius); cursor:pointer; position:relative; color:#fff;}
.nav-toggle span{position:absolute; left:12px; right:12px; height:1.5px; background:currentColor; transition:transform .3s var(--ease), opacity .2s;}
.nav-toggle span:nth-child(1){top:16px;} .nav-toggle span:nth-child(2){top:22px;} .nav-toggle span:nth-child(3){top:28px;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.progress{position:absolute; left:0; bottom:-1px; height:2px; width:100%; transform:scaleX(var(--sp,0)); transform-origin:0 50%; background:linear-gradient(90deg,var(--blue),var(--sky));}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font:500 14px 'Inter',sans-serif; letter-spacing:-.005em; padding:14px 24px; border-radius:var(--radius); text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .25s, border-color .25s, box-shadow .35s, color .25s;}
.btn .arr{display:inline-block; transition:transform .3s var(--ease);}
.btn:hover .arr{transform:translateX(3px);}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 10px 30px -10px rgba(37,99,235,.7), inset 0 1px 0 rgba(255,255,255,.18);}
.btn-primary:hover{background:var(--blue-2); box-shadow:0 14px 36px -10px rgba(59,130,246,.85), inset 0 1px 0 rgba(255,255,255,.22);}
.btn-ghost{border-color:var(--hair-d); color:var(--txt-d); background:rgba(255,255,255,.03);}
.btn-ghost:hover{border-color:var(--sky); color:#fff; background:rgba(96,165,250,.08);}
.light .btn-ghost{border-color:#C9D8EE; color:var(--txt-l); background:#fff;}
.light .btn-ghost:hover{border-color:var(--blue); color:var(--blue); background:#fff;}

/* ---------- shared section bits ---------- */
.sec{position:relative; padding:128px 0; border-top:1px solid var(--hair-d);}
.sec.dark{background:var(--ink); color:var(--txt-d);}
.sec.light{background:var(--paper); color:var(--txt-l); border-top-color:var(--hair-l);}
.sec.light::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(14,34,64,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(14,34,64,.045) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 100%); mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 100%);}
.tag{display:inline-flex; align-items:center; gap:12px; font:500 12px 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.16em; color:var(--sky);}

.light .tag{color:var(--blue);}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:72px; flex-wrap:wrap;}
.sec-head h2{font-size:clamp(30px,3.7vw,50px); margin-top:18px; max-width:20ch; letter-spacing:-.035em; line-height:1.07;}
.sec-note{font-size:15px; color:var(--mut-d); max-width:34ch; line-height:1.65;}
.light .sec-note{color:var(--mut-l);}
.sec-note a{color:var(--sky); font-weight:600; text-decoration:none; white-space:nowrap;}
.light .sec-note a{color:var(--blue);}

/* ---------- hero ---------- */
.hero{position:relative; padding:112px 0 128px; overflow:hidden; border-top:0; background:radial-gradient(1100px 620px at 82% -8%,rgba(37,99,235,.30),transparent 62%), radial-gradient(800px 500px at 0% 100%,rgba(2,132,199,.12),transparent 60%), var(--ink);}
.hero .grid-bg{position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--hair-d) 1px,transparent 1px),linear-gradient(90deg,var(--hair-d) 1px,transparent 1px); background-size:64px 64px; opacity:.55; -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000 25%,transparent 100%); mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000 25%,transparent 100%);}
.hero .spot{position:absolute; inset:0; pointer-events:none; background:radial-gradient(520px circle at var(--mx,72%) var(--my,18%),rgba(96,165,250,.16),transparent 62%);}
.orb{position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; opacity:.5;}
.orb.o1{width:420px; height:420px; right:-80px; top:80px; background:rgba(37,99,235,.55);}
.orb.o2{width:340px; height:340px; left:-120px; bottom:-60px; background:rgba(2,132,199,.35);}
.hero-grid > *{min-width:0;}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:72px; align-items:center;}
.eyebrow{display:inline-flex; align-items:flex-start; gap:10px; font:500 12px/1.7 'IBM Plex Mono',monospace; color:var(--sky); text-transform:uppercase; letter-spacing:.14em; margin-bottom:30px; max-width:64ch;}
.eyebrow .prompt{color:var(--sky-2);}
@keyframes blink{50%{opacity:0;}}
.hero h1{font-size:clamp(34px,4vw,56px); font-weight:650; line-height:1.04; letter-spacing:-.04em; color:#fff;}
.hero h1 em{font-style:normal; background:linear-gradient(100deg,#BFDBFE 0%,#60A5FA 30%,#3B82F6 55%,#93C5FD 85%,#60A5FA 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:sheen 9s ease-in-out infinite alternate;}
@keyframes sheen{to{background-position:100% 0;}}
.hero .lead{margin-top:30px; font-size:18px; line-height:1.7; color:var(--mut-d); max-width:50ch;}
.hero .lead + .lead{margin-top:16px; font-size:16px;}
.hero-actions{margin-top:40px; display:flex; gap:14px; flex-wrap:wrap;}
.hero-meta{margin-top:56px; padding-top:28px; border-top:1px solid var(--hair-d); display:flex; gap:40px; flex-wrap:wrap; font:400 12px 'IBM Plex Mono',monospace; color:var(--faint-d);}
.hero-meta span{color:var(--txt-d); font-weight:500;}

.hero-visual{position:relative; padding:34px 0;}
.showcase{position:relative; background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); border:1px solid var(--hair-d); border-radius:var(--radius); box-shadow:0 50px 90px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(37,99,235,.06), inset 0 1px 0 rgba(255,255,255,.06); overflow:hidden;}
.sc-bar{display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--hair-d); background:rgba(5,13,26,.55);}
.sc-bar i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16);}
.sc-url{display:flex; align-items:center; justify-content:space-between; gap:10px; text-decoration:none; cursor:pointer; transition:color .2s, border-color .2s, background .2s; flex:1; min-width:0; margin:0 10px; padding:5px 12px; font-size:12px; color:var(--faint-d); background:rgba(255,255,255,.05); border:1px solid var(--hair-d); border-radius:var(--radius); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sc-url:hover,.sc-url:focus-visible{color:#fff; border-color:rgba(96,165,250,.55); background:rgba(37,99,235,.14);}
.sc-url:focus-visible{outline:2px solid var(--sky); outline-offset:2px;}
.sc-url > span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sc-url .ext{color:var(--sky-2); flex:none;}
.hero-visual.reveal{transform:none;}
.sc-tag{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--sky-2); border:1px solid rgba(96,165,250,.35); border-radius:999px; padding:3px 10px;}
.sc-stage{position:relative; aspect-ratio:16/10; background:var(--ink-2);}
.sc-stage > img,.sc-stage > .sc-all{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; opacity:0; transition:opacity 1s ease;}
.sc-stage > img.on,.sc-stage > .sc-all.on{opacity:1;}
.sc-stage > .sc-all{display:block; text-decoration:none; color:#fff; visibility:hidden; transition:opacity 1s ease, visibility 0s linear 1s;}
.sc-stage > .sc-all.on{visibility:visible; transition-delay:0s;}
.sc-all img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.sc-all::after{content:""; position:absolute; inset:0; background:radial-gradient(70% 70% at 50% 50%, rgba(5,13,26,.82), rgba(5,13,26,.35) 100%);}
.sc-all-text{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:0 24px;}
.sc-all-text strong{font-family:Inter,sans-serif; font-weight:600; font-size:clamp(22px,2.6vw,34px); letter-spacing:-.02em;}
.sc-all-text .mono{font-size:12px; letter-spacing:.06em; color:var(--sky-2);}
.sc-all-btn{margin-top:8px; display:inline-flex; gap:8px; align-items:center; padding:10px 18px; font-size:14px; font-weight:500; background:var(--blue); border-radius:var(--radius); transition:background .2s;}
.sc-all:hover .sc-all-btn,.sc-all:focus-visible .sc-all-btn{background:#1D4ED8;}
.sc-all:focus-visible{outline:2px solid var(--sky); outline-offset:-4px;}


/* ---------- affordable / build demo ---------- */
#affordable{background:radial-gradient(900px 500px at 100% 0%,rgba(37,99,235,.14),transparent 60%), var(--ink);}
.aff-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start;}
.aff-copy h2{font-size:clamp(30px,3.7vw,50px); margin-top:18px; letter-spacing:-.035em; line-height:1.07;}
.aff-copy .sec-note{margin-top:22px; max-width:44ch;}
.steps{list-style:none; margin:44px 0 0; padding:0; border-top:1px solid var(--hair-d);}
.steps li{display:grid; grid-template-columns:44px 1fr; gap:6px 14px; padding:24px 0; border-bottom:1px solid var(--hair-d);}
.steps .k{font:500 12px 'IBM Plex Mono',monospace; color:var(--sky); padding-top:4px;}
.steps h3{font-size:19px; letter-spacing:-.02em; line-height:1.25;}
.steps .kick{display:block; font:500 11px 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.12em; color:var(--faint-d); margin-bottom:6px;}
.steps p{grid-column:2; font-size:14.5px; color:var(--mut-d); line-height:1.7;}
.aff-actions{margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.aff-nl{font-size:14px; color:var(--mut-d); flex-basis:100%; margin-top:6px;}
.aff-nl a{color:var(--sky); font-weight:600; text-decoration:none;}
.aff-nl a:hover{text-decoration:underline;}

.demo{position:sticky; top:104px; background:#07142A; border:1px solid var(--hair-d); border-radius:var(--radius); box-shadow:0 60px 100px -50px rgba(0,0,0,.85), 0 0 0 1px rgba(37,99,235,.08); overflow:hidden;}
.demo-top{display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--hair-d); background:rgba(255,255,255,.03);}
.demo-dots{display:flex; gap:6px;} .demo-dots i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16);}
.demo-url{flex:1; min-width:0; font:400 11.5px 'IBM Plex Mono',monospace; color:var(--faint-d); background:rgba(255,255,255,.05); border:1px solid var(--hair-d); border-radius:999px; padding:5px 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.seg{display:inline-flex; border:1px solid var(--hair-d); border-radius:999px; overflow:hidden; flex-shrink:0;}
.seg button{font:500 11px 'IBM Plex Mono',monospace; color:var(--mut-d); background:transparent; border:0; padding:6px 12px; cursor:pointer; transition:background .25s,color .25s;}
.seg button[aria-pressed="true"]{background:var(--blue); color:#fff;}
.demo-body{display:grid; grid-template-columns:.82fr 1.18fr; min-height:430px;}
.code{padding:20px 0 20px 18px; border-right:1px solid var(--hair-d); font:400 12px/1.85 'IBM Plex Mono',monospace; color:#C7D5EE; overflow:hidden; background:rgba(0,0,0,.18);}
.cl{display:block; white-space:pre; overflow:hidden; width:calc(var(--n)*1ch); max-width:100%; transition:width calc(var(--n)*22ms) steps(var(--n),end);}
.js .cl{width:0;}
.js .cl.typed{width:calc(var(--n)*1ch);}
.js .nt .cl{transition:none;}
.cl .g{color:#587099;} .cl .t{color:var(--sky);} .cl .a{color:#A5B4FC;} .cl .s{color:#86EFAC;}
.code .cur{display:inline-block; width:7px; height:14px; background:var(--sky); vertical-align:-2px; animation:blink 1.1s steps(1) infinite;}
.viewport{padding:18px; display:flex; justify-content:center; align-items:flex-start; background:radial-gradient(400px 260px at 50% 0%,rgba(37,99,235,.18),transparent 70%), #0A1930;}
.site{width:100%; background:#fff; color:var(--navy); border-radius:2px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.7); transition:width .7s var(--ease); font-size:11px; line-height:1.4;}
.site.m{width:196px;}
.blk{transition:opacity .6s var(--ease), transform .6s var(--ease);}
.js .blk{opacity:0; transform:translateY(10px);}
.js .blk.on{opacity:1; transform:none;}
.ms-nav{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid #E5ECF7;}
.ms-brand{display:flex; align-items:center; gap:6px; font-weight:700; font-size:11px; letter-spacing:-.02em;}
.ms-brand i{width:12px; height:12px; background:var(--blue); border-radius:2px;}
.ms-links{display:flex; align-items:center; gap:10px; color:#6B7A97; font-size:9.5px;}
.ms-links b{background:var(--blue); color:#fff; font-weight:500; padding:4px 8px; border-radius:2px;}
.site.m .ms-links span{display:none;}
.ms-hero{padding:26px 16px 22px; background:linear-gradient(180deg,#F4F8FF,#fff);}
.ms-hero h4{font-size:19px; letter-spacing:-.04em; line-height:1.05; max-width:11ch;}
.site.m .ms-hero h4{font-size:15px;}
.ms-hero h4 em{font-style:normal; color:var(--blue);}
.ms-hero p{margin-top:8px; color:#5A6985; font-size:10px; max-width:30ch;}
.ms-btn{display:inline-block; margin-top:12px; background:var(--navy); color:#fff; font-weight:500; padding:6px 12px; border-radius:2px; font-size:9.5px;}
.ms-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:6px 14px 16px;}
.site.m .ms-cards{grid-template-columns:1fr;}
.ms-card{border:1px solid #E1E9F6; padding:9px; border-radius:2px;}
.ms-card i{display:block; height:30px; border-radius:2px; background:linear-gradient(135deg,#DBEAFE,#BFD6FB); margin-bottom:7px;}
.ms-card b{display:block; font-size:9.5px;}
.ms-card span{display:block; margin-top:2px; color:#7C8AA5; font-size:8.5px;}
.ms-foot{padding:9px 12px; background:var(--navy); color:#9FB1CF; font-size:8.5px; display:flex; justify-content:space-between;}
.checks{list-style:none; margin:0; padding:14px 18px; display:flex; flex-wrap:wrap; gap:8px 22px; border-top:1px solid var(--hair-d); background:rgba(255,255,255,.02);}
.checks li{display:flex; align-items:center; gap:8px; font:400 11.5px 'IBM Plex Mono',monospace; color:var(--faint-d); transition:color .4s;}
.checks li::before{content:""; width:15px; height:15px; border-radius:50%; border:1.5px solid rgba(148,181,255,.3); background:transparent center/9px no-repeat; transition:background-color .4s,border-color .4s;}
.checks li.on{color:var(--txt-d);}
.checks li.on::before{background-color:var(--blue); border-color:var(--blue); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4 5 8.8l4.6-5.2' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.no-js .checks li,.checks li.static{color:var(--txt-d);}

/* ---------- services (bento) ---------- */
.bento{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; position:relative; z-index:1;}
.bcard{background:#fff; border:1px solid var(--hair-l); border-radius:var(--radius); padding:36px 36px 32px; display:flex; flex-direction:column; gap:14px; box-shadow:0 1px 2px rgba(14,34,64,.04), 0 30px 60px -40px rgba(14,34,64,.3); transition:border-color .3s, box-shadow .4s;}
.bcard:hover{border-color:#9DB8E6; box-shadow:0 1px 2px rgba(14,34,64,.05), 0 36px 70px -36px rgba(37,99,235,.35);}
.bnum{font:500 12px 'IBM Plex Mono',monospace; color:var(--blue);}
.bcard h3{font-size:25px; letter-spacing:-.035em; line-height:1.15; color:var(--txt-l);}
.bcard p.d{font-size:15px; color:var(--mut-l); line-height:1.7; max-width:46ch;}
.widget{margin-top:auto; padding-top:10px;}
.wbox{border:1px solid var(--hair-l); background:var(--paper); border-radius:var(--radius); padding:16px 18px; min-height:196px; font-size:13px; color:var(--txt-l);}
.wcap{display:flex; justify-content:space-between; align-items:center; font:500 11px 'IBM Plex Mono',monospace; color:var(--faint-l); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px;}
/* assessment */
.ck{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px dashed #D3DFF2; color:var(--mut-l); transition:color .4s;}
.ck:last-child{border-bottom:0;}
.ck .dot{width:18px; height:18px; border-radius:50%; border:1.5px solid #B4C6E4; flex-shrink:0; transition:background .4s,border-color .4s; background:#fff center/10px no-repeat;}
.ck .st{margin-left:auto; font:500 11px 'IBM Plex Mono',monospace; color:var(--faint-l); transition:color .4s;}
.ck.ok{color:var(--txt-l);}
.ck.ok .dot{background-color:var(--blue); border-color:var(--blue); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4 5 8.8l4.6-5.2' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.ck.ok .st{color:var(--blue);}
/* terminal */
.term{background:#0A1930; color:#C7D5EE; border-radius:var(--radius); padding:16px 18px; font:400 12.5px/1.9 'IBM Plex Mono',monospace; min-height:196px;}
.term .ln{display:block; white-space:pre; opacity:0; transform:translateY(4px); transition:opacity .4s, transform .4s;}
.no-js .term .ln,.term .ln.on,.term.static .ln{opacity:1; transform:none;}
.term .p{color:var(--sky);} .term .ok{color:#86EFAC;} .term .m{color:#6F86AD;}
.term .cur{display:inline-block; width:7px; height:13px; background:var(--sky); vertical-align:-2px; animation:blink 1.1s steps(1) infinite;}
/* shop */
.shop-row{display:flex; align-items:center; gap:14px; padding:6px 0 14px; border-bottom:1px dashed #D3DFF2;}
.shop-thumb{width:56px; height:56px; border-radius:2px; object-fit:cover; flex-shrink:0; border:1px solid var(--hair-l); display:block;}
.shop-like{margin-left:auto; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid #C9D8EE; border-radius:var(--radius); cursor:pointer; color:var(--faint-l); transition:color .2s,border-color .2s,transform .15s;}
.shop-like svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round;}
.shop-like:hover{border-color:var(--blue); color:var(--blue);}
.shop-like[aria-pressed="true"]{color:#E11D48; border-color:#FBCFE8;}
.shop-like[aria-pressed="true"] svg{fill:currentColor;}
.shop-like.pop{transform:scale(1.2);}
.shop-cart{display:flex; align-items:center; gap:12px; padding:12px 0 0;}
.shop-cart button{display:inline-flex; align-items:center; gap:7px; background:#fff; color:var(--txt-l); border:1px solid #C9D8EE; border-radius:var(--radius); padding:8px 12px; font:500 12.5px 'Inter',sans-serif; cursor:pointer; transition:border-color .2s,background .2s;}
.shop-cart button svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.shop-cart button:hover{border-color:var(--blue);}
.shop-cart button.press{background:var(--paper-2);}
.shop-cartn{font-size:11.5px; color:var(--faint-l);}
.shop-cartn.bump{color:var(--blue);}
.shop-name{font-weight:600; font-size:14px; letter-spacing:-.01em;}
.shop-price{font:400 12px 'IBM Plex Mono',monospace; color:var(--faint-l);}
.qty{display:inline-flex; align-items:center; border:1px solid #C9D8EE; background:#fff; border-radius:var(--radius);}
.qty button{width:30px; height:30px; background:transparent; border:0; font-size:16px; color:var(--txt-l); cursor:pointer;}
.qty button:hover{background:var(--paper-2);}
.qty output{min-width:26px; text-align:center; font:500 13px 'IBM Plex Mono',monospace;}
.shop-total{display:flex; justify-content:space-between; align-items:center; padding:12px 0 10px; font-size:13px; color:var(--mut-l);}
.shop-total b{font-size:20px; letter-spacing:-.03em; color:var(--txt-l); font-weight:600; font-variant-numeric:tabular-nums;}
.shop-go{display:flex; gap:12px; align-items:center;}
.shop-go button{background:var(--navy); color:#fff; border:0; border-radius:var(--radius); padding:10px 16px; font:500 13px 'Inter',sans-serif; cursor:pointer; transition:background .2s, transform .15s;}
.shop-go button:hover{background:var(--blue);}
.shop-go button.press{transform:scale(.97); background:var(--blue);}
.shop-msg{font:500 12px 'IBM Plex Mono',monospace; color:#15803D; opacity:0; transition:opacity .4s;}
.shop-msg.on{opacity:1;}
.wquote{display:inline-flex; align-items:center; gap:8px; margin-top:12px; font:500 12.5px 'Inter',sans-serif; color:#fff; background:var(--blue); text-decoration:none; padding:9px 14px; border-radius:var(--radius); transition:background .2s;}
.wquote:hover{background:var(--navy);}
.wquote[hidden]{display:none;}
.qf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.book-go{display:flex; gap:12px; align-items:center; margin-top:10px;}
.book-go button{background:var(--navy); color:#fff; border:0; border-radius:var(--radius); padding:9px 14px; font:500 12.5px 'Inter',sans-serif; cursor:pointer; transition:background .2s,transform .15s;}
.book-go button:hover{background:var(--blue);}
.book-go button.press{transform:scale(.97); background:var(--blue);}
/* booking */
.cal{display:grid; grid-template-columns:repeat(5,1fr); gap:6px;}
.cal .dh{font:500 10.5px 'IBM Plex Mono',monospace; color:var(--faint-l); text-align:center; text-transform:uppercase; letter-spacing:.08em; padding-bottom:2px;}
.slot{font:500 11.5px 'IBM Plex Mono',monospace; padding:8px 0; text-align:center; background:#fff; border:1px solid #C9D8EE; border-radius:var(--radius); color:var(--txt-l); cursor:pointer; transition:background .3s,color .3s,border-color .3s;}
.slot:hover{border-color:var(--blue);}
.slot.taken{background:transparent; border-style:dashed; color:#A9B6CE; cursor:not-allowed; text-decoration:line-through;}
.slot.sel{background:var(--blue); border-color:var(--blue); color:#fff;}
.book-msg{margin-top:12px; font:500 12px 'IBM Plex Mono',monospace; color:var(--mut-l); min-height:18px;}
.book-msg b{color:var(--blue); font-weight:500;}

/* ---------- portfolio ---------- */
#portfolio{background:radial-gradient(1000px 500px at 0% 0%,rgba(37,99,235,.13),transparent 60%), var(--ink);}
.pf-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.pf-card{position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid var(--hair-d); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--txt-d); transition:border-color .3s, box-shadow .4s;}
.pf-card::before{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .35s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(96,165,250,.16),transparent 60%);}
.pf-card:hover,.pf-card:focus-visible{border-color:rgba(96,165,250,.55); box-shadow:0 40px 70px -40px rgba(37,99,235,.55); outline:none;}
.pf-card:hover::before,.pf-card:focus-visible::before{opacity:1;}
.pf-chrome{display:flex; align-items:center; gap:10px; padding:10px 14px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--hair-d);}
.pf-dots{display:flex; gap:5px;} .pf-dots span{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18);}
.pf-url{flex:1; min-width:0; font:400 11px 'IBM Plex Mono',monospace; color:var(--faint-d); background:rgba(255,255,255,.05); border:1px solid var(--hair-d); border-radius:999px; padding:3px 11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pf-badge{display:inline-flex; align-items:center; gap:6px; font:500 10px 'IBM Plex Mono',monospace; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1px solid rgba(96,165,250,.5); color:var(--sky-2); flex-shrink:0;}
.pf-badge.live{background:var(--blue); border-color:var(--blue); color:#fff;}
.pf-badge.live::before{content:""; width:5px; height:5px; border-radius:50%; background:#fff; animation:pulse-dot 2s ease-in-out infinite;}
@keyframes pulse-dot{50%{opacity:.3;}}
.pf-shot{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--navy);}
.pf-shot img{width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform 1.2s var(--ease);}
.pf-card:hover .pf-shot img,.pf-card:focus-visible .pf-shot img{transform:scale(1.035);}
.pf-overlay{position:absolute; inset:0; display:flex; align-items:flex-end; padding:18px; background:linear-gradient(180deg,rgba(5,13,26,0) 35%,rgba(5,13,26,.92)); opacity:0; transition:opacity .3s;}
.pf-card:hover .pf-overlay,.pf-card:focus-visible .pf-overlay{opacity:1;}
.pf-overlay span{font:500 12.5px 'IBM Plex Mono',monospace; color:#fff; display:inline-flex; gap:8px; align-items:center; background:var(--blue); padding:9px 14px; border-radius:var(--radius);}
.pf-body{padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1;}
.pf-label{font:500 11px 'IBM Plex Mono',monospace; color:var(--sky); text-transform:uppercase; letter-spacing:.12em;}
.pf-card h3{font-size:22px; letter-spacing:-.035em; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#fff;}
.pf-card h3 .arrow{font-size:18px; color:var(--faint-d); transition:color .25s;}
.pf-card:hover h3 .arrow{color:var(--sky);}
.pf-card p{font-size:14.5px; color:var(--mut-d); line-height:1.65;}
.pf-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px;}
.pf-tags span{font:400 10.5px 'IBM Plex Mono',monospace; color:var(--mut-d); border:1px solid var(--hair-d); border-radius:999px; padding:3px 10px;}
.pf-split .pf-main{display:block; color:inherit; text-decoration:none;}
.pf-split .pf-main::after{content:""; position:absolute; inset:0; z-index:1;}
.pf-doc{position:relative; z-index:2; align-self:flex-start; font:500 11.5px 'IBM Plex Mono',monospace; letter-spacing:.04em; color:var(--sky-2); text-decoration:none; border:1px solid rgba(96,165,250,.4); border-radius:var(--radius); padding:7px 12px; margin-top:6px; transition:background .2s,color .2s;}
.pf-doc:hover,.pf-doc:focus-visible{background:var(--blue); color:#fff; border-color:var(--blue); outline:none;}
.pf-more{margin-top:48px; display:flex; justify-content:center;}
@media (hover:none){.pf-overlay{display:none;}}

/* ---------- track record (timeline) ---------- */
.tl{position:relative; padding-left:0;}
.tl::before{content:""; position:absolute; left:187px; top:8px; bottom:8px; width:1px; background:#C9D8EE;}
.tl-fill{position:absolute; left:187px; top:8px; bottom:8px; width:1px; background:linear-gradient(180deg,var(--blue),var(--sky)); transform:scaleY(var(--tp,0)); transform-origin:50% 0; box-shadow:0 0 12px rgba(37,99,235,.55);}
.tl-row{position:relative; display:grid; grid-template-columns:150px 1fr 2.1fr; gap:0 56px; padding:34px 0; align-items:baseline;}
.tl-row::before{content:""; position:absolute; left:182px; top:44px; width:11px; height:11px; border-radius:50%; background:var(--paper); border:2px solid #AFC3E4; transition:background .5s, border-color .5s, box-shadow .5s;}
.tl-row.now.in::before{background:var(--blue); border-color:var(--blue); box-shadow:0 0 0 6px rgba(37,99,235,.14);}
.tl-row.past::before{width:7px; height:7px; left:184px; top:46px; background:#C9D8EE; border-color:#C9D8EE;}
.tl-row.past .years{color:var(--faint-l);}
.tl-row .years{font:500 13px 'IBM Plex Mono',monospace; color:var(--blue);}
.tl-row .org{font-size:20px; font-weight:600; letter-spacing:-.03em; color:var(--txt-l); padding-left:6px;}
.tl-row .org span{display:block; margin-top:4px; font-size:13.5px; font-weight:400; letter-spacing:0; color:var(--faint-l);}
.tl-row .desc{font-size:15px; color:var(--mut-l); line-height:1.75;}

/* ---------- certifications ---------- */
.certs{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; position:relative; z-index:1;}
.cert-card{display:flex; align-items:center; gap:28px; padding:36px; background:#fff; border:1px solid var(--hair-l); border-radius:var(--radius); box-shadow:0 30px 60px -44px rgba(14,34,64,.35);}
.seal{position:relative; width:84px; height:84px; flex-shrink:0; display:grid; place-items:center; font:500 15px 'IBM Plex Mono',monospace; color:var(--blue);}
.seal svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);}
.seal circle{fill:none; stroke-width:2;}
.seal .bg{stroke:#DAE5F5;}
.seal .fg{stroke:var(--blue); stroke-linecap:round; stroke-dasharray:239; stroke-dashoffset:239; transition:stroke-dashoffset 1.8s var(--ease) .2s;}
.in .seal .fg,.no-js .seal .fg{stroke-dashoffset:0;}
.cert-info h3{font-size:20px; letter-spacing:-.03em; color:var(--txt-l);}
.cert-info p{margin-top:8px; font:400 12px 'IBM Plex Mono',monospace; color:var(--faint-l); letter-spacing:.06em;}

/* ---------- quote ---------- */
#quote{background:radial-gradient(900px 520px at 90% 100%,rgba(37,99,235,.2),transparent 62%), var(--ink-2);}
.quote-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; align-items:start;}
.quote-copy h2{font-size:clamp(30px,3.7vw,50px); margin-top:18px; letter-spacing:-.035em; line-height:1.07; max-width:14ch;}
.quote-copy .sec-note{margin-top:22px; max-width:36ch;}
.flow{list-style:none; margin:40px 0 0; padding:0; counter-reset:f;}
.flow li{counter-increment:f; position:relative; padding:0 0 26px 44px; font-size:15px; color:var(--mut-d); line-height:1.55;}
.flow li::before{content:counter(f); position:absolute; left:0; top:-1px; width:26px; height:26px; border-radius:50%; border:1px solid rgba(96,165,250,.5); color:var(--sky-2); font:500 12px/24px 'IBM Plex Mono',monospace; text-align:center;}
.flow li::after{content:""; position:absolute; left:13px; top:30px; bottom:4px; width:1px; background:var(--hair-d);}
.flow li:last-child::after{display:none;}
.flow b{color:var(--txt-d); font-weight:600; letter-spacing:-.01em;}
.quote-form{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); border:1px solid var(--hair-d); border-radius:var(--radius); padding:44px; box-shadow:0 50px 90px -50px rgba(0,0,0,.8);}
.qf-row{display:flex; gap:24px;}
.qf-field{flex:1; display:flex; flex-direction:column; margin-bottom:24px; min-width:0;}
.qf-field label{font:500 12px 'IBM Plex Mono',monospace; color:var(--mut-d); margin-bottom:9px; letter-spacing:.04em;}
.qf-field label span[aria-hidden]{color:var(--sky); margin-left:2px;}
.qf-field label .opt{color:var(--faint-d); font-weight:400;}
.qf-field input,.qf-field select,.qf-field textarea{font:400 15px 'Inter',sans-serif; color:#fff; background:rgba(5,13,26,.6); border:1px solid rgba(148,181,255,.22); border-radius:var(--radius); padding:13px 15px; outline:none; transition:border-color .25s, box-shadow .3s, background .25s; resize:vertical; width:100%;}
.qf-field select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2393C5FD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:38px;}
.qf-field select option{background:#0E2240; color:#fff;}
.qf-field input::placeholder,.qf-field textarea::placeholder{color:#6F83A8;}
.qf-field input:focus,.qf-field select:focus,.qf-field textarea:focus{border-color:var(--sky); background:rgba(5,13,26,.85); box-shadow:0 0 0 4px rgba(96,165,250,.14);}
.qf-footer{display:flex; align-items:center; justify-content:flex-end; gap:20px; margin-top:6px;}
.qf-status{margin:0; font-size:13px; color:var(--mut-d); flex:1;}
.qf-status.ok{color:#86EFAC;} .qf-status.err{color:#FCA5A5;}

/* ---------- contact + footer ---------- */
#contact{background:var(--ink); padding-top:112px; padding-bottom:128px;}
.contact-panel{position:relative; text-align:center; padding:96px 56px; border-radius:var(--radius); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); overflow:hidden; isolation:isolate;}
.contact-panel::before{content:""; position:absolute; inset:-60%; z-index:-2; background:conic-gradient(from 0deg,transparent 0 62%,rgba(96,165,250,.55) 78%,transparent 92%); animation:spin 14s linear infinite;}
.contact-panel::after{content:""; position:absolute; inset:1px; z-index:-1; background:radial-gradient(700px 320px at 50% 0%,rgba(37,99,235,.22),transparent 70%), var(--ink); border-radius:1px;}
@keyframes spin{to{transform:rotate(360deg);}}
.contact-panel .tag{justify-content:center;}
.contact-panel h2{font-size:clamp(30px,4vw,54px); max-width:20ch; margin:20px auto 0; letter-spacing:-.04em; color:#fff;}
.contact-panel p{color:var(--mut-d); margin:22px auto 0; font-size:16px; max-width:52ch;}
.contact-actions{margin-top:40px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}
footer.site-footer{background:var(--ink); border-top:1px solid var(--hair-d); padding:36px 0 48px; font:400 12px 'IBM Plex Mono',monospace; color:var(--faint-d);}
footer.site-footer .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
footer.site-footer a{text-decoration:none; color:var(--faint-d); transition:color .2s;}
footer.site-footer a:hover{color:var(--txt-d);}
footer.site-footer .fl{display:flex; gap:24px; flex-wrap:wrap;}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:56px;}
  .hero-visual{max-width:540px;}
  .aff-grid{grid-template-columns:1fr; gap:56px;}
  .demo{position:relative; top:0;}
  .quote-grid{grid-template-columns:1fr; gap:56px;}
  .pf-grid{grid-template-columns:repeat(2,1fr);}
  .tl::before,.tl-fill{left:5px;}
  .tl-row{grid-template-columns:1fr; gap:6px; padding:28px 0 28px 34px;}
  .tl-row::before{left:0; top:36px;}
  .tl-row.past::before{left:2px; top:38px;}
  .tl-row .org{padding-left:0;}
}
@media (max-width:900px){
  nav.links,.nav-cta{display:none;}
  .nav-toggle{display:block;}
  .nav-open nav.links{display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; margin:0; padding:10px 32px 22px; background:#050D1A; border-bottom:1px solid var(--hair-d); font-size:16px; height:calc(100vh - 65px); height:calc(100dvh - 65px); overflow-y:auto;}
  .nav-open nav.links a{padding:15px 0; border-bottom:1px solid var(--hair-d); color:var(--txt-d);}
  .nav-open nav.links a::after{display:none;}
  .nav-open nav.links .m-cta{display:block; margin-top:18px; text-align:center; background:var(--blue); color:#fff; border-radius:var(--radius); border:0; font:500 14px 'IBM Plex Mono',monospace;}
  .bento,.certs{grid-template-columns:1fr;}
}
@media (min-width:901px){ nav.links .m-cta{display:none;} }
@media (max-width:700px){
  .pf-grid{grid-template-columns:1fr;}
  .demo-body{grid-template-columns:1fr;}
  .code{border-right:0; border-bottom:1px solid var(--hair-d); padding:16px 0 16px 16px; font-size:11.5px;}
  .qf-row{flex-direction:column; gap:0;}
  .quote-form{padding:28px 22px;}
  .qf-footer{flex-direction:column-reverse; align-items:stretch; text-align:center;}
  .contact-panel{padding:64px 24px;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  .nav-inner{padding:10px 20px; gap:16px;}
  .logo img{height:38px;}
  .nav-open nav.links{padding:10px 20px 22px;}
  .sec{padding:80px 0;}
  .hero{padding:64px 0 80px;}
  .sec-head{margin-bottom:48px;}
  .bcard{padding:26px 22px 24px;}
  .cert-card{padding:26px 22px; gap:20px;}
  .hero-meta{gap:22px;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important;}
  .js .reveal{opacity:1; transform:none;}
  .orb,.contact-panel::before{display:none;}
}

#certifications::before{display:none;}