:root{
  --navy:#0c0e35; --navy2:#12144C; --blue:#2E6BE6; --sky:#5EC8F2;
  --bg:#F6F8FC; --card:#FFFFFF; --ink:#171A33; --slate:#5A6079; --line:#E4E8F2;
  --gold:#E0A639; --green:#2FA86A;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
.wrap-narrow{max-width:800px; margin:0 auto; padding:0 32px;}
ul{list-style:none;}

/* NAV */
.site-nav{position:sticky; top:0; z-index:50; background:rgba(12,14,53,0.97); backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,0.08);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1120px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px;}
.brand img{height:36px; width:36px; border-radius:50%; object-fit:cover;}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--sky);}
.foot-logo{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.foot-logo img{height:34px; width:34px; border-radius:50%; object-fit:cover;}
.foot-logo span{color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px;}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{color:#C7CDEC; font-size:14px; font-weight:500; transition:color .15s;}
.nav-links a:hover, .nav-links a.active{color:#fff;}
.nav-cta{background:var(--sky); color:var(--navy); padding:10px 18px; border-radius:2px; font-weight:600; font-size:13.5px;}
.nav-cta:hover{background:#fff;}
.nav-toggle{display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer;}
@media(max-width:900px){
  .nav-links{position:fixed; inset:64px 0 0 0; background:var(--navy); flex-direction:column; align-items:flex-start; padding:24px 32px; gap:18px; transform:translateY(-110%); transition:transform .25s ease; overflow-y:auto;}
  .nav-links.open{transform:translateY(0);}
  .nav-toggle{display:block;}
}

/* PAGE HERO (interior pages) */
.page-hero{background:radial-gradient(120% 140% at 15% 0%, #1a1d5c 0%, var(--navy2) 45%, var(--navy) 100%); color:#fff; padding:76px 0 64px;}
.page-hero .eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--sky); margin-bottom:18px; display:flex; align-items:center; gap:10px;}
.page-hero .eyebrow::before{content:""; width:22px; height:1px; background:var(--sky);}
.page-hero h1{font-size:clamp(30px,5vw,48px); font-weight:700; line-height:1.1; max-width:820px;}
.page-hero h1 span{color:var(--sky);}
.page-hero p.lead{margin-top:18px; font-size:16.5px; color:#B9C4F2; max-width:600px;}
.breadcrumb{font-family:'IBM Plex Mono',monospace; font-size:12px; color:#8892c0; margin-bottom:16px;}
.breadcrumb a{color:#B9C4F2;}

/* HOME HERO */
.hero{position:relative; background:radial-gradient(120% 140% at 15% 0%, #1a1d5c 0%, var(--navy2) 45%, var(--navy) 100%); color:#fff; overflow:hidden; padding:120px 0 100px;}
#netCanvas{position:absolute; inset:0; width:100%; height:100%; opacity:0.55;}
.hero-inner{position:relative; z-index:2;}
.hero h1{font-size:clamp(38px,6vw,64px); font-weight:700; line-height:1.05; max-width:820px;}
.hero h1 span{color:var(--sky);}
.hero p.lead{margin-top:24px; font-size:18px; color:#B9C4F2; max-width:560px;}
.hero-links{margin-top:40px; display:flex; gap:16px; flex-wrap:wrap;}
.trust-row{display:flex; gap:40px; margin-top:56px; flex-wrap:wrap;}
.trust-row .stat b{display:block; font-size:26px; font-family:'Space Grotesk',sans-serif; color:#fff;}
.trust-row .stat span{font-size:12.5px; color:#8892c0;}

.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:2px; font-weight:600; font-size:14.5px; border:1px solid transparent; transition:all .18s ease; cursor:pointer;}
.btn-primary{background:var(--sky); color:var(--navy);}
.btn-primary:hover{background:#fff;}
.btn-ghost{border-color:rgba(255,255,255,0.28); color:#fff;}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.06);}
.btn-dark{background:var(--navy2); color:#fff;}
.btn-dark:hover{background:var(--blue);}

section{padding:88px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:24px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:22px;}
.section-num{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--blue); letter-spacing:0.08em; margin-bottom:10px; display:block;}
.section-head h2{font-size:clamp(26px,3.4vw,36px); font-weight:600; color:var(--navy2);}
.section-head p{color:var(--slate); max-width:420px; font-size:15px;}

/* SERVICE / CAPABILITY GRID */
.cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); align-items:stretch;}
.cap-item{background:var(--card); padding:26px 26px 22px; transition:background .15s;}
.cap-item:hover{background:#FAFBFF;}
.cap-item .mono{font-size:12px; color:var(--blue); letter-spacing:0.08em;}
.cap-item h3{font-size:17px; margin:14px 0 8px; color:var(--navy2); font-weight:600;}
.cap-item p{font-size:14px; color:var(--slate);}
.cap-item .more{display:inline-block; margin-top:auto; padding-top:14px; font-size:13px; font-weight:600; color:var(--blue);}
@media(max-width:860px){.cap-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cap-grid{grid-template-columns:1fr;}}

/* CASE STUDIES */
.case{display:grid; grid-template-columns:1fr 1.15fr; gap:0; background:var(--card); border:1px solid var(--line); margin-bottom:28px; overflow:hidden;}
.case-visual{background:linear-gradient(150deg, var(--navy2), var(--navy) 70%); padding:44px 38px; color:#fff; position:relative; min-height:260px; display:flex; flex-direction:column; justify-content:space-between;}
.case-visual .tag{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.1em; color:var(--sky); text-transform:uppercase;}
.case-visual h3{font-size:26px; margin-top:14px; line-height:1.15;}
.case-visual .url{margin-top:auto; font-family:'IBM Plex Mono',monospace; font-size:13px; color:#B9C4F2; padding-top:18px;}
.case-body{padding:44px 40px;}
.case-body p{color:var(--slate); font-size:15px; margin-bottom:16px;}
.stat-row{display:flex; gap:28px; margin:20px 0 24px; flex-wrap:wrap;}
.stat{border-left:2px solid var(--blue); padding-left:12px;}
.stat b{display:block; font-size:19px; color:var(--navy2); font-family:'Space Grotesk',sans-serif;}
.stat span{font-size:12.5px; color:var(--slate);}
@media(max-width:860px){.case{grid-template-columns:1fr;}}

/* PORTFOLIO GRID (image-forward preview cards) */
.portfolio-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:8px;}
.portfolio-card{background:var(--card); border:1px solid var(--line); overflow:hidden;}
.portfolio-visual{position:relative; aspect-ratio:16/10; background:linear-gradient(150deg, var(--navy2), var(--navy) 70%); overflow:hidden;}
.portfolio-visual img{width:100%; height:100%; object-fit:cover; display:block;}
.portfolio-visual::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(94,200,242,0.4) 1.2px, transparent 1.4px); background-size:26px 26px; opacity:0.3;}
.portfolio-visual .idx{position:absolute; top:16px; left:18px; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--sky); letter-spacing:0.1em; z-index:1;}
.portfolio-visual .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:0;}
.portfolio-body{padding:26px 26px 24px;}
.portfolio-body .tag{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.1em; color:var(--blue); text-transform:uppercase;}
.portfolio-body h3{font-size:19px; color:var(--navy2); margin:10px 0 8px; font-weight:600;}
.portfolio-body .hook{font-weight:600; color:var(--ink); font-size:14.5px; margin-bottom:8px;}
.portfolio-body p{color:var(--slate); font-size:14px; margin-bottom:16px;}
.portfolio-tech{display:flex; flex-wrap:wrap; gap:8px;}
.portfolio-tech span{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--slate); background:var(--bg); border:1px solid var(--line); padding:4px 10px; border-radius:2px;}
@media(max-width:760px){.portfolio-grid{grid-template-columns:1fr;}}

/* RESULT PROOF (service-page payoff visual, shown after problem/solution, not before) */
.result-proof{display:grid; grid-template-columns:1.15fr 1fr; gap:0; background:var(--card); border:1px solid var(--line); overflow:hidden; align-items:stretch;}
.result-proof-visual{position:relative; min-height:320px; background:var(--navy2);}
.result-proof-visual img{width:100%; height:100%; object-fit:cover; display:block;}
.result-proof-text{padding:44px 42px; display:flex; flex-direction:column; justify-content:center;}
.result-proof-text h2{font-size:clamp(24px,3vw,32px); color:var(--navy2); margin:10px 0 14px; font-weight:600;}
.result-proof-text p{color:var(--slate); font-size:15.5px; line-height:1.6;}
@media(max-width:860px){.result-proof{grid-template-columns:1fr;} .result-proof-visual{min-height:220px;}}

/* PRICING */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.price-card{background:var(--card); border:1px solid var(--line); padding:32px 26px;}
.price-card.featured{border:2px solid var(--blue);}
.price-card .badge{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; color:var(--blue); text-transform:uppercase; margin-bottom:12px;}
.price-card h3{font-size:20px; margin-bottom:6px; color:var(--navy2);}
.price-card .amount{font-size:32px; font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--navy2); margin:12px 0;}
.price-card .amount span{font-size:14px; color:var(--slate); font-weight:400;}
.price-card ul{margin-top:18px;}
.price-card li{font-size:14px; color:var(--slate); padding:7px 0; border-top:1px solid var(--line); display:flex; gap:8px;}
.price-card li::before{content:"\2713"; color:var(--green); font-weight:700;}
@media(max-width:860px){.price-grid{grid-template-columns:1fr;}}

/* LISTS / TWO-COL */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.two-col h3{font-size:16px; color:var(--navy2); margin-bottom:16px; font-family:'Space Grotesk',sans-serif;}
.check-list li{font-size:14.5px; color:var(--slate); padding:8px 0 8px 26px; position:relative;}
.check-list li::before{content:"\2713"; position:absolute; left:0; color:var(--green); font-weight:700;}
.x-list li{font-size:14.5px; color:var(--slate); padding:8px 0 8px 26px; position:relative;}
.x-list li::before{content:"\2717"; position:absolute; left:0; color:#C94A3C; font-weight:700;}
@media(max-width:760px){.two-col{grid-template-columns:1fr;}}

/* TEAM */
.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.team-card{background:#fff; text-align:center; padding:40px 34px;}
.team-photo{width:132px; height:132px; border-radius:50%; overflow:hidden; margin:0 auto 20px; box-shadow:0 14px 30px -16px rgba(12,14,53,0.35);}
.team-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 8%; display:block;}
.team-card h4{font-size:19px; color:var(--navy2); margin-bottom:4px; font-weight:600;}
.team-card .team-role{display:block; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--blue); margin-bottom:12px;}
.team-linkedin{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; color:var(--blue); margin-bottom:18px; transition:all .18s ease;}
.team-linkedin:hover{background:var(--blue); color:#fff; border-color:var(--blue);}
.team-card .team-bio{font-size:14px; color:var(--slate); text-align:left; line-height:1.65;}
@media(max-width:760px){.team-grid{grid-template-columns:1fr;}}

/* BOARD */
.board-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.board-card{background:#fff; text-align:center; padding:30px 20px;}
.board-avatar{width:76px; height:76px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; background:var(--navy2); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:600; letter-spacing:0.02em;}
.board-avatar.has-photo{background:none; overflow:hidden; box-shadow:0 14px 30px -16px rgba(12,14,53,0.35);}
.board-avatar.has-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 8%; display:block;}
.board-card h4{font-size:16px; color:var(--navy2); margin-bottom:4px; font-weight:600;}
.board-card .board-role{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--blue); line-height:1.5;}
@media(max-width:900px){.board-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.board-grid{grid-template-columns:1fr;}}

/* DOT-FIELD TEXTURE (echoes the logo's connected-node motif) */
.partner, .case-visual, .page-hero{position:relative;}
.partner::before, .case-visual::before, .page-hero::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(94,200,242,0.4) 1.2px, transparent 1.4px); background-size:26px 26px; opacity:0.3; z-index:0;}
.partner > .wrap, .case-visual > div, .page-hero > .wrap{position:relative; z-index:1;}
.cta{position:relative;}
.cta::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(46,107,230,0.18) 1.2px, transparent 1.4px); background-size:28px 28px; opacity:0.5; z-index:0;}
.cta > .wrap{position:relative; z-index:1;}

/* NODE DIVIDER between sections */
.node-divider{display:flex; align-items:center; justify-content:center; gap:10px; padding:0;}
.node-divider .line{width:64px; height:1px; background:linear-gradient(90deg, transparent, var(--line));}
.node-divider .line.dark{background:linear-gradient(90deg, transparent, rgba(94,200,242,0.35));}
.node-divider .dot{width:6px; height:6px; border-radius:50%; background:var(--blue);}
.node-divider.on-dark .dot{background:var(--sky);}

/* PARTNER / DARK STRIP */
.partner{background:var(--navy2); color:#fff; padding:70px 0; position:relative; overflow:hidden;}
.partner .wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.partner h2{font-size:28px; margin-bottom:16px;}
.partner p{color:#B9C4F2; font-size:15px;}
.partner ul{margin-top:22px;}
.partner li{padding:12px 0; border-top:1px solid rgba(255,255,255,0.14); font-size:14.5px; color:#DCE3F7; display:flex; gap:10px;}
.partner li:last-child{border-bottom:1px solid rgba(255,255,255,0.14);}
.partner li::before{content:"\2192"; color:var(--sky);}
@media(max-width:860px){.partner .wrap{grid-template-columns:1fr;}}
.partner-photo{width:100%; height:200px; border-radius:16px; overflow:hidden; margin-bottom:22px; box-shadow:0 20px 44px -22px rgba(0,0,0,0.55);}
.partner-photo img{width:100%; height:100%; object-fit:cover; display:block;}

/* CTA */
.cta{text-align:center; padding:110px 0;}
.cta h2{font-size:clamp(28px,4vw,42px); color:var(--navy2); margin-bottom:16px;}
.cta p{color:var(--slate); max-width:480px; margin:0 auto 34px; font-size:16px;}

/* FORM CARD */
.form-card{background:var(--card); border:1px solid var(--line); padding:36px; max-width:560px;}
.form-card h3{font-size:19px; color:var(--navy2); margin-bottom:8px;}
.form-card p{font-size:14px; color:var(--slate); margin-bottom:20px;}
.apollo-form-frame{min-height:280px;}

/* NEWSLETTER */
.newsletter{background:#0a0c2e; padding:38px 0 30px; border-top:1px solid rgba(255,255,255,0.08); text-align:center;}
.newsletter .wrap{max-width:600px;}
.newsletter p{color:#B9C4F2; font-size:14px; margin-bottom:6px;}


/* FOOTER */
footer{background:var(--navy); color:#8892c0; padding:60px 0 30px; font-size:13.5px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.1);}
.foot-grid h5{color:#fff; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px; font-family:'IBM Plex Mono',monospace;}
.foot-grid li{padding:6px 0;}
.foot-grid a:hover{color:#fff;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:24px; flex-wrap:wrap; gap:10px;}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;}}

/* MISC */
.badge{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--blue); background:#EAF1FD; padding:5px 10px; margin-bottom:14px;}
.callout{background:#EAF1FD; border-left:3px solid var(--blue); padding:20px 24px; font-size:14.5px; color:var(--navy2); margin:28px 0;}
.pending-note{background:#FFF6E9; border:1px dashed var(--gold); color:#7A5511; padding:16px 20px; font-size:13.5px; margin:24px 0;}
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.tilt{transition:transform .18s ease, box-shadow .18s ease; transform-style:preserve-3d; will-change:transform;}
.tilt:hover{box-shadow:0 18px 40px -20px rgba(12,14,53,0.35);}
.hero-inner{transition:transform .12s ease-out;}

/* ICON GRAPHICS (hand-drawn, original — reflect each card's subject) */
.icon-badge{display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg,#EAF1FD,#F6F8FC); color:var(--blue); margin-bottom:16px; flex-shrink:0; transition:transform .2s ease;}
.icon-badge svg{width:30px; height:30px;}
.tilt:hover .icon-badge{transform:translateZ(10px) scale(1.05);}
.icon-badge.on-dark{background:rgba(94,200,242,0.14); color:var(--sky);}
.icon-badge.lg{width:84px; height:84px; border-radius:18px;}
.icon-badge.lg svg{width:44px; height:44px;}
.icon-badge.sky{background:rgba(94,200,242,0.15); color:var(--sky);}
.cap-item{display:flex; flex-direction:column;}
.step-icon-row{display:flex; align-items:center; gap:14px; margin-bottom:6px;}

/* SCENE ILLUSTRATIONS (original, hand-composed) */
.scene-illustration{border-radius:16px; overflow:hidden; line-height:0;}
.scene-illustration svg{width:100%; height:auto; display:block;}
.scene-pair{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.scene-pair figcaption{text-align:center; font-size:12.5px; color:var(--slate); margin-top:10px; font-family:'IBM Plex Mono',monospace; letter-spacing:.04em; text-transform:uppercase;}
@media(max-width:700px){.scene-pair{grid-template-columns:1fr;}}

/* REAL PHOTOGRAPHY — service cards + detail-page banners */
.cap-photo{width:calc(100% + 52px); height:160px; object-fit:cover; display:block; margin:-30px -26px 16px -26px;}
.cap-item.has-photo .icon-badge{margin-top:-46px; position:relative; z-index:2; border:3px solid var(--card); box-shadow:0 6px 16px rgba(12,14,53,0.18);}
.photo-banner{border-radius:20px; overflow:hidden; max-width:640px; margin:0 auto; box-shadow:0 24px 50px -28px rgba(12,14,53,0.35);}
.photo-banner img{width:100%; height:360px; object-fit:cover; display:block;}
@media(max-width:560px){.photo-banner img{height:260px;}}

/* TRUCK-IN-MOTION (transportation case study icon) */
.truck-track{position:relative; display:inline-block; padding-bottom:16px; margin-bottom:14px !important;}
.truck-track::after{content:""; position:absolute; left:-4px; right:-4px; bottom:6px; height:2px; background-image:repeating-linear-gradient(90deg, rgba(94,200,242,0.55) 0 8px, transparent 8px 16px);}
.truck-track .icon-badge{margin-bottom:0; animation:truck-drive 2.8s ease-in-out infinite;}
@keyframes truck-drive{0%,100%{transform:translateX(-7px);}50%{transform:translateX(7px);}}
@media(prefers-reduced-motion:reduce){.truck-track .icon-badge{animation:none;}}

/* CASE STUDY — BEFORE/AFTER BILLING TIMELINE */
.timeline-wrap{border-radius:16px; overflow:hidden; line-height:0; background:#F6F8FC;}
.timeline-wrap svg{width:100%; height:auto; display:block;}

/* SOCIAL ICONS */
.social-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.social-btn{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.22); color:#C7CDEC; transition:all .15s ease;}
.social-btn:hover{border-color:var(--sky); color:var(--sky); transform:translateY(-2px);}
.social-btn svg{width:18px; height:18px;}

/* BLOG */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.blog-card{background:#fff; padding:34px 28px; display:flex; flex-direction:column; transition:background .18s ease;}
.blog-card:hover{background:#FAFBFF;}
.blog-meta{display:flex; justify-content:space-between; gap:12px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--slate); margin-bottom:16px;}
.blog-tag{color:var(--blue); text-transform:uppercase; letter-spacing:0.06em;}
.blog-card h3{font-size:19px; line-height:1.3; color:var(--navy2); font-weight:600; margin-bottom:12px;}
.blog-card p{font-size:14px; color:var(--slate); margin-bottom:16px;}
.blog-card .more{margin-top:auto; font-size:13px; font-weight:600; color:var(--blue);}
.post-body{max-width:720px; margin:0 auto; font-size:16.5px; line-height:1.8; color:var(--ink);}
.post-body p{margin-bottom:20px;}
.post-body h2{font-size:24px; color:var(--navy2); margin:38px 0 14px;}
.post-body a{color:var(--blue); font-weight:600; text-decoration:underline;}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr;}}

/* SERVICE DETAIL */
.steps-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.step{background:#fff; padding:30px 24px;}
.step-n{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--navy2); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:14px; margin-bottom:16px;}
.step h4{font-size:17px; color:var(--navy2); margin-bottom:8px; font-weight:600;}
.step p{font-size:14px; color:var(--slate); line-height:1.6;}
.faq-list{max-width:820px; border-top:1px solid var(--line);}
.faq{border-bottom:1px solid var(--line); padding:20px 4px;}
.faq summary{cursor:pointer; font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; color:var(--navy2); list-style:none; display:flex; justify-content:space-between; gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--blue); font-size:22px; line-height:1;}
.faq[open] summary::after{content:"\2212";}
.faq p{margin-top:12px; color:var(--slate); font-size:15px; line-height:1.7;}
@media(max-width:900px){.steps-row{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.steps-row{grid-template-columns:1fr;}}

/* SERVICE HERO VISUAL + FLOW */
.page-hero.has-visual{position:relative; overflow:hidden; padding:84px 0 84px;}
.hero-split{display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; position:relative; z-index:2;}
.hero-visual{position:relative; height:400px;}
.hv-orb{position:absolute; inset:8% 6% 8% 6%; border-radius:50%; background:radial-gradient(circle, rgba(46,107,230,0.45), rgba(94,200,242,0.12) 55%, transparent 72%); filter:blur(30px);}
.hv-main{position:absolute; top:34px; left:6%; right:2%; background:rgba(255,255,255,0.97); border-radius:18px; padding:20px 22px; box-shadow:0 40px 70px -28px rgba(0,0,0,0.55); color:var(--ink); animation:hvFloat 7s ease-in-out infinite;}
.hv-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.hv-label{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--navy2);}
.hv-live{display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#1F9D61;}
.hv-live i{width:7px; height:7px; border-radius:50%; background:#1F9D61; animation:hvPulse 1.8s ease-in-out infinite;}
.hv-row{display:flex; align-items:center; gap:10px; padding:10px 0; font-size:13.5px; border-bottom:1px solid #F0F2F8;}
.hv-row:last-child{border-bottom:0;}
.hv-dot{width:9px; height:9px; border-radius:50%; background:#C9D0E6; flex-shrink:0;}
.hv-dot.ok{background:#1F9D61;} .hv-dot.wip{background:var(--blue);} .hv-dot.esc{background:#E08A1E;}
.hv-t{flex:1; color:var(--ink);}
.hv-chip{font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:3px 9px; border-radius:20px; background:#EEF1F9; color:var(--slate); white-space:nowrap;}
.hv-chip.ok{background:#E3F6EC; color:#1F7A4D;} .hv-chip.wip{background:#E6EEFD; color:#2457C5;} .hv-chip.esc{background:#FDF0DC; color:#A3600E;}
.hv-float{position:absolute; background:linear-gradient(135deg,#12144C,#1d2170); border:1px solid rgba(94,200,242,0.4); border-radius:14px; padding:14px 18px; color:#fff; box-shadow:0 24px 44px -20px rgba(0,0,0,0.6);}
.hv-float b{display:block; font-family:'Space Grotesk',sans-serif; font-size:15px; margin-bottom:2px;}
.hv-float span{font-size:12px; color:#B9C4F2;}
.hv-f1{left:-2%; bottom:44px; animation:hvFloat 6s ease-in-out infinite reverse;}
.hv-f2{right:-1%; bottom:-6px; animation:hvFloat 8s ease-in-out infinite;}
.hv-note{position:absolute; left:6%; bottom:-30px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#8892c0;}
@keyframes hvFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes hvPulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
.flow{display:flex; align-items:stretch; gap:0; background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 24px;}
.flow-node{flex:1; text-align:center; padding:0 10px;}
.flow-i{display:inline-flex; width:42px; height:42px; border-radius:50%; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--blue),var(--sky)); color:#fff; font-family:'IBM Plex Mono',monospace; font-weight:600; margin-bottom:12px; box-shadow:0 10px 20px -8px rgba(46,107,230,0.6);}
.flow-node b{display:block; font-family:'Space Grotesk',sans-serif; font-size:16px; color:var(--navy2); margin-bottom:4px;}
.flow-node span:last-child{font-size:13px; color:var(--slate);}
.flow-arrow{align-self:center; width:44px; height:2px; background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 12px); position:relative; flex-shrink:0; margin-top:-26px;}
.flow-arrow::after{content:""; position:absolute; right:-2px; top:-4px; border:5px solid transparent; border-left:8px solid var(--blue);}
@media(max-width:900px){.hero-split{grid-template-columns:1fr;} .hero-visual{height:360px; max-width:520px;} .flow{flex-direction:column; gap:14px;} .flow-arrow{width:2px; height:24px; margin:0 auto; background:repeating-linear-gradient(180deg,var(--blue) 0 6px,transparent 6px 12px);} .flow-arrow::after{right:-4px; top:auto; bottom:-4px; border:5px solid transparent; border-top:8px solid var(--blue); border-left-color:transparent;}}

/* CINEMATIC HOMEPAGE */
.hero-cine{background:var(--navy); min-height:92vh; display:flex; align-items:center; padding:130px 0 120px;}
.hero-media{position:absolute; inset:-3%; overflow:hidden;}
.hero-media video{width:100%; height:100%; object-fit:cover; animation:kb 22s ease-in-out infinite alternate;}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(100deg, rgba(12,14,53,0.93) 0%, rgba(14,16,62,0.78) 45%, rgba(12,14,53,0.35) 100%);}
.hero-cine #netCanvas{opacity:0.55; mix-blend-mode:screen;}
@keyframes kb{from{transform:scale(1.04);}to{transform:scale(1.14);}}
.hero-cine .eyebrow,.hero-cine .lead,.hero-cine .hero-links,.hero-cine .trust-row{opacity:0; animation:fadeUp .8s ease forwards;}
.hero-cine .eyebrow{animation-delay:.1s;} .hero-cine .lead{animation-delay:.85s;} .hero-cine .hero-links{animation-delay:1.05s;} .hero-cine .trust-row{animation-delay:1.25s;}
.hero-cine h1 .rline{display:block; overflow:hidden; padding-bottom:4px;}
.hero-cine h1 .rline>span{display:block; transform:translateY(115%); animation:lineUp .95s cubic-bezier(.2,.8,.2,1) forwards;}
.hero-cine h1 .rline:nth-child(1)>span{animation-delay:.25s;} .hero-cine h1 .rline:nth-child(2)>span{animation-delay:.4s;} .hero-cine h1 .rline:nth-child(3)>span{animation-delay:.55s;}
.hero-cine h1 .accent{color:var(--sky); text-shadow:0 0 40px rgba(94,200,242,0.45);}
@keyframes lineUp{to{transform:translateY(0);}}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px);}to{opacity:1; transform:none;}}
.scroll-cue{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#8892c0; display:flex; flex-direction:column; align-items:center; gap:8px;}
.scroll-cue i{width:1px; height:30px; background:linear-gradient(#5EC8F2,transparent); animation:scrollDown 1.6s ease-in-out infinite;}
@keyframes scrollDown{0%{transform:scaleY(0); transform-origin:top;}50%{transform:scaleY(1); transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0); transform-origin:bottom;}}
.photo-pair{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.photo-pair figure{margin:0;}
.pframe{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; background:var(--navy2); box-shadow:0 30px 50px -30px rgba(12,14,53,0.45);}
.pframe video{width:100%; height:100%; object-fit:cover; display:block;}
.pframe::before{position:absolute; top:14px; left:14px; z-index:2; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; color:#fff; padding:5px 10px; border-radius:20px;}
.pframe.before::before{content:"BEFORE"; background:rgba(23,26,51,0.78);}
.pframe.after::before{content:"AFTER"; background:var(--blue);}
.photo-pair figcaption{margin-top:14px; font-size:14px; color:var(--slate); font-weight:500;}
.cinema-home{position:relative; min-height:80vh; display:flex; align-items:center; color:#fff; overflow:hidden; background:var(--navy);}
.cinema-media{position:absolute; inset:-3%; overflow:hidden;}
.cinema-media video{width:100%; height:100%; object-fit:cover;}
.cinema-scrim{position:absolute; inset:0; background:linear-gradient(100deg, rgba(12,14,53,0.95) 0%, rgba(12,14,53,0.82) 42%, rgba(12,14,53,0.3) 100%);}
.cinema-inner{position:relative; z-index:2; max-width:600px; margin-left:max(32px, calc((100vw - 1180px)/2 + 32px)); padding:0;}
.cinema-inner h2{font-size:clamp(28px,3.8vw,42px); line-height:1.12; margin:10px 0 18px;}
.cinema-inner p{color:#B9C4F2; font-size:15.5px; margin-bottom:22px;}
.cinema-inner ul{list-style:none; display:grid; gap:10px;}
.cinema-inner li{font-size:14.5px; color:#D6DCF5; padding-left:22px; position:relative;}
.cinema-inner li::before{content:"\2192"; position:absolute; left:0; color:var(--sky);}
@media(max-width:760px){.photo-pair{grid-template-columns:1fr;} .hero-cine{padding:110px 0 100px;} .cinema-inner{margin:0 24px;}}
@media(prefers-reduced-motion:reduce){.hero-media video,.hero-cine h1 .rline>span,.hero-cine .eyebrow,.hero-cine .lead,.hero-cine .hero-links,.hero-cine .trust-row{animation:none; opacity:1; transform:none;}}

.ai-strip{display:flex; align-items:center; justify-content:space-between; gap:28px; padding:34px 38px; border-radius:16px; background:radial-gradient(120% 160% at 10% 0%, #1a1d5c, var(--navy2) 55%, var(--navy)); color:#fff; border:1px solid rgba(94,200,242,0.3); box-shadow:0 30px 50px -30px rgba(12,14,53,0.6);}
.ai-strip h3{font-size:24px; margin:8px 0; font-family:'Space Grotesk',sans-serif;}
.ai-strip p{color:#B9C4F2; font-size:15px; max-width:620px;}
.ai-strip{text-align:left; text-decoration:none;}
.ai-strip>div{flex:1; min-width:0;}
.ai-strip .section-num{margin:0 0 4px; display:block;}
.ai-strip h3{margin:6px 0 10px; line-height:1.2;}
.ai-strip p{margin:0;}
.ai-strip .btn{flex-shrink:0; white-space:nowrap;}
@media(max-width:760px){.ai-strip{flex-direction:column; align-items:flex-start; padding:26px;}}

/* AUTOMATION DEMO (animated, loops) */
.ad{--t:16s; background:radial-gradient(120% 160% at 0% 0%, #1a1d5c, #12144C 55%, #0c0e35); border:1px solid rgba(94,200,242,0.28); border-radius:18px; padding:24px 26px 18px; color:#fff; box-shadow:0 40px 70px -36px rgba(12,14,53,0.7); margin-top:8px;}
.ad-bar{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px;}
.ad-st{display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#6f7ab0; border-top:2px solid rgba(255,255,255,0.12); padding-top:10px; animation:var(--n) var(--t) infinite;}
.ad-st i{width:8px; height:8px; border-radius:50%; background:#3a4380; flex-shrink:0;}
.ad-st1{--n:adS1;} .ad-st2{--n:adS2;} .ad-st3{--n:adS3;} .ad-st4{--n:adS4;}
@keyframes adS1{0%,22%{color:#5EC8F2; border-color:#5EC8F2;}26%,100%{color:#8892c0; border-color:rgba(94,200,242,0.4);}}
@keyframes adS2{0%,18%{color:#6f7ab0; border-color:rgba(255,255,255,0.12);}22%,46%{color:#5EC8F2; border-color:#5EC8F2;}50%,100%{color:#8892c0; border-color:rgba(94,200,242,0.4);}}
@keyframes adS3{0%,42%{color:#6f7ab0; border-color:rgba(255,255,255,0.12);}46%,66%{color:#5EC8F2; border-color:#5EC8F2;}70%,100%{color:#8892c0; border-color:rgba(94,200,242,0.4);}}
@keyframes adS4{0%,62%{color:#6f7ab0; border-color:rgba(255,255,255,0.12);}66%,94%{color:#5EC8F2; border-color:#5EC8F2;}98%,100%{color:#6f7ab0; border-color:rgba(255,255,255,0.12);}}
.ad-body{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px;}
.ad-col{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:16px; min-height:250px;}
.ad-lab{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#8892c0; margin-bottom:12px;}
.ad-in{background:rgba(94,200,242,0.12); border:1px solid rgba(94,200,242,0.3); border-radius:12px; padding:14px; animation:adIn var(--t) infinite;}
.ad-in p{font-size:14px; line-height:1.5; color:#E7ECFF; margin-top:10px;}
.ad-wave{display:flex; align-items:center; gap:4px; height:22px;}
.ad-wave i{width:4px; height:8px; border-radius:2px; background:#5EC8F2; animation:adWave 1s ease-in-out infinite;}
.ad-wave i:nth-child(2){animation-delay:.1s;} .ad-wave i:nth-child(3){animation-delay:.2s;} .ad-wave i:nth-child(4){animation-delay:.3s;} .ad-wave i:nth-child(5){animation-delay:.15s;} .ad-wave i:nth-child(6){animation-delay:.25s;} .ad-wave i:nth-child(7){animation-delay:.05s;}
@keyframes adWave{0%,100%{height:6px;}50%{height:22px;}}
@keyframes adIn{0%{opacity:0; transform:translateY(10px);}4%,94%{opacity:1; transform:none;}98%,100%{opacity:0;}}
.ad-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.ad-tag{font-family:'IBM Plex Mono',monospace; font-size:11px; padding:4px 10px; border-radius:20px; background:rgba(94,200,242,0.16); color:#9fe0fa; opacity:0;}
.ad-tag1{animation:adT1 var(--t) infinite;} .ad-tag2{animation:adT2 var(--t) infinite;} .ad-tag3{animation:adT3 var(--t) infinite;}
@keyframes adT1{0%,20%{opacity:0;}24%,94%{opacity:1;}98%,100%{opacity:0;}}
@keyframes adT2{0%,26%{opacity:0;}30%,94%{opacity:1;}98%,100%{opacity:0;}}
@keyframes adT3{0%,32%{opacity:0;}36%,94%{opacity:1;}98%,100%{opacity:0;}}
.ad-b{background:#fff; color:#171A33; border-radius:12px 12px 12px 3px; padding:11px 13px; font-size:13.5px; line-height:1.5; margin-bottom:12px; opacity:0;}
.ad-b b{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.06em; color:#2E6BE6; text-transform:uppercase; margin-bottom:3px;}
.ad-b.me{background:#2E6BE6; color:#fff; border-radius:12px 12px 3px 12px; margin-left:22px;}
.ad-b.me b{color:#cfe0ff;}
.ad-b1{animation:adB1 var(--t) infinite;} .ad-b2{animation:adB2 var(--t) infinite;}
@keyframes adB1{0%,40%{opacity:0; transform:translateY(8px);}46%,94%{opacity:1; transform:none;}98%,100%{opacity:0;}}
@keyframes adB2{0%,54%{opacity:0; transform:translateY(8px);}60%,94%{opacity:1; transform:none;}98%,100%{opacity:0;}}
.ad-act{display:flex; align-items:center; gap:10px; font-size:13.5px; color:#E7ECFF; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,0.06); margin-bottom:9px; opacity:0;}
.ad-tick{width:18px; height:18px; border-radius:50%; background:#1F9D61; position:relative; flex-shrink:0;}
.ad-tick::after{content:""; position:absolute; left:5px; top:3px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.ad-act1{animation:adA1 var(--t) infinite;} .ad-act2{animation:adA2 var(--t) infinite;} .ad-act3{animation:adA3 var(--t) infinite;}
@keyframes adA1{0%,64%{opacity:0; transform:translateX(10px);}69%,94%{opacity:1; transform:none;}98%,100%{opacity:0;}}
@keyframes adA2{0%,70%{opacity:0; transform:translateX(10px);}75%,94%{opacity:1; transform:none;}98%,100%{opacity:0;}}
@keyframes adA3{0%,76%{opacity:0; transform:translateX(10px);}81%,94%{opacity:1; transform:none;}98%,100%{opacity:0;}}
.ad-res{margin-top:12px; padding:12px 14px; border-radius:10px; background:linear-gradient(135deg,rgba(31,157,97,0.25),rgba(94,200,242,0.18)); border:1px solid rgba(31,157,97,0.5); font-size:13px; color:#d9fbe9; opacity:0; animation:adR var(--t) infinite;}
@keyframes adR{0%,84%{opacity:0;}88%,94%{opacity:1;}98%,100%{opacity:0;}}
.ad-note{margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#8892c0; text-align:right;}
@media(max-width:900px){.ad-body{grid-template-columns:1fr;} .ad-bar{grid-template-columns:1fr 1fr;} .ad-col{min-height:0;}}
@media(prefers-reduced-motion:reduce){.ad *{animation:none !important; opacity:1 !important; transform:none !important;}}

/* LIVE FEED */
.lf{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 22px; box-shadow:0 20px 40px -30px rgba(12,14,53,0.3);}
.lf-head{margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line);}
.lf-list{display:grid; grid-template-columns:1fr 1fr; gap:0 28px;}
.lf-row{display:flex; align-items:center; gap:10px; padding:9px 0; font-size:14px; border-bottom:1px solid #F0F2F8; opacity:0; animation:lfRow 12s infinite; animation-delay:calc(var(--d) * 1.1s);}
.lf-row b{flex:1; font-weight:500; color:var(--ink);}
.lf-dot{width:9px; height:9px; border-radius:50%; background:var(--blue); animation:hvPulse 1.2s ease-in-out 3; flex-shrink:0;}
.lf-st{font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:3px 9px; border-radius:20px; background:#E3F6EC; color:#1F7A4D;}
@keyframes lfRow{0%{opacity:0; transform:translateX(-10px);}6%,88%{opacity:1; transform:none;}96%,100%{opacity:0;}}
@media(max-width:760px){.lf-list{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){.lf-row{animation:none; opacity:1;}}

/* ===== MOBILE HARDENING ===== */
html,body{overflow-x:clip; max-width:100%;}
.wrap > *, .case > *, .two-col > *, .hero-split > *, .ad-body > *, .portfolio-card, .cap-item{min-width:0;}
.post-body, .page-hero h1, .page-hero p, h2, h3{overflow-wrap:break-word;}
table{display:block; overflow-x:auto; max-width:100%;}
@media(max-width:900px){
  /* backdrop-filter on the sticky nav would trap the fixed menu inside the nav bar, so drop it here */
  .site-nav{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--navy);}
  .nav-links{inset:auto; top:68px; left:0; right:0; bottom:0; height:calc(100vh - 68px); height:calc(100dvh - 68px); z-index:60;}
  .nav-links a{font-size:17px; padding:6px 0;}
  .nav-links .nav-cta{display:inline-block; text-align:center; margin-top:8px;}
}
@media(max-width:640px){
  section{padding:56px 0;}
  .wrap, .wrap-narrow{padding:0 20px;}
  .nav-inner{padding:12px 20px;}
  .brand{font-size:16px;}
  .page-hero{padding:56px 0 44px;}
  .hero{padding:84px 0 72px;}
  .page-hero p.lead, .hero p.lead{font-size:15.5px;}
  .trust-row{gap:22px 28px; margin-top:36px;}
  .trust-row .stat{min-width:40%;}
  .hero-links{flex-direction:column; align-items:stretch;}
  .hero-links .btn, .cta .btn{justify-content:center; width:100%;}
  .section-head{align-items:flex-start; margin-bottom:30px;}
  .section-head p{max-width:none;}
  .cta{padding:72px 0;}
  .form-card{padding:22px 18px; max-width:100%;}
  .two-col{gap:30px;}
  .cap-item, .price-card{padding-left:22px; padding-right:22px;}
  .foot-grid{grid-template-columns:1fr; gap:26px;}
  .hero-visual{height:auto; min-height:340px; max-width:100%;}
  .portfolio-visual img{width:100%; height:auto;}
  .team-card{padding:30px 20px;}
  .post-body{font-size:16px;}
  .ad-bar{grid-template-columns:1fr 1fr;}
  .ad{padding:18px 14px;}
}
@media(max-width:380px){
  .trust-row .stat{min-width:100%;}
  .btn{padding:12px 16px; font-size:14px;}
}