/* ==========================================================
   MADLABS INFOTECH — PREMIUM VANILLA WEBSITE
   No frameworks. HTML + CSS + JavaScript only.
   ========================================================== */

:root{
  --bg:#f7f7f5;
  --paper:#fff;
  --ink:#0b0b0d;
  --muted:#6e6e75;
  --line:#dcdcdf;
  --purple:#632783;
  --blue:#5f7fbe;
  --violet:#7250a4;
  --dark:#0a0a0d;
  --condensed:"Barlow Condensed",sans-serif;
  --body:"Inter",sans-serif;
  --max:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:hidden}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
img{display:block;max-width:100%}
::selection{background:var(--purple);color:#fff}

.section{width:min(var(--max),calc(100% - 80px));margin:auto}

/* Loader */
.loader{
  position:fixed;inset:0;background:#fff;z-index:9999;
  display:grid;place-items:center;
  transition:opacity .8s ease,visibility .8s ease;
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{text-align:center}
.loader-inner img{width:180px;height:auto;object-fit:contain;margin:auto}
.loader-inner p{font-family:var(--condensed);font-weight:700;letter-spacing:2px;font-size:11px;margin-top:22px}
.loader-line{width:220px;height:2px;background:#eee;margin:22px auto 0;overflow:hidden}
.loader-line span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--purple),var(--blue));animation:load 1.7s ease forwards}
@keyframes load{to{width:100%}}

/* Cursor */
.cursor-dot,.cursor-ring{
  position:fixed;pointer-events:none;z-index:9998;border-radius:50%;
  transform:translate(-50%,-50%);
}
.cursor-dot{width:6px;height:6px;background:var(--purple)}
.cursor-ring{width:32px;height:32px;border:1px solid rgba(99,39,131,.45);transition:width .2s,height .2s,border .2s}
.cursor-ring.hover{width:58px;height:58px;border-color:var(--purple)}
@media(max-width:900px){.cursor-dot,.cursor-ring{display:none}}

.form-note.success{color:#3f7a43}
.form-note.error{color:#9b2c2c}
.submit-button:disabled{cursor:wait}

/* Header */
.header{
  position:fixed;left:0;right:0;top:0;height:86px;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 max(30px,calc((100vw - var(--max))/2));
  transition:.35s ease;
}
.header.scrolled{height:72px;background:rgba(247,247,245,.88);backdrop-filter:blur(18px);box-shadow:0 10px 40px rgba(0,0,0,.06)}
.brand{width:82px;height:68px;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;flex:0 0 auto}
.brand img{display:block;width:auto;height:68px;max-width:82px;object-fit:contain;mix-blend-mode:normal;filter:none;}
.desktop-nav{display:flex;align-items:center;gap:31px;font-family:var(--condensed);font-size:16px;font-weight:700}
.desktop-nav>a:not(.nav-cta){position:relative;padding:8px 0}
.desktop-nav>a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:2px;background:var(--purple);transition:.25s}
.desktop-nav>a:not(.nav-cta):hover::after{width:100%}
.nav-cta{border:1px solid #aaa;padding:12px 17px;transition:.25s}
.nav-cta:hover{background:#000;color:#fff;border-color:#000}
.nav-cta span{margin-left:10px}
.menu-button{display:none;border:0;background:none;width:42px;height:42px;padding:8px}
.menu-button span{display:block;height:2px;background:#111;margin:6px 0;transition:.25s}
.mobile-menu{
  position:fixed;top:0;right:0;width:min(360px,88vw);height:100vh;background:#0b0b0d;color:#fff;
  z-index:990;padding:120px 35px 40px;display:flex;flex-direction:column;gap:4px;
  transform:translateX(100%);transition:.5s cubic-bezier(.77,0,.18,1);
}
.mobile-menu.open{transform:none}
.mobile-menu a{font-family:var(--condensed);font-size:42px;font-weight:800;border-bottom:1px solid #29292d;padding:17px 0}

/* Hero */
.hero{min-height:100vh;position:relative;overflow:hidden;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;padding:135px max(40px,calc((100vw - var(--max))/2)) 80px;background:#f7f7f5}
.hero-grid-bg{
  position:absolute;inset:0;opacity:.38;
  background-image:linear-gradient(rgba(10,10,12,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,12,.045) 1px,transparent 1px);
  background-size:70px 70px;mask-image:linear-gradient(90deg,#000,transparent 88%);
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}
.glow-one{width:520px;height:520px;right:-160px;top:80px;background:radial-gradient(circle,rgba(95,127,190,.20),transparent 65%)}
.glow-two{width:450px;height:450px;left:-250px;bottom:-200px;background:radial-gradient(circle,rgba(99,39,131,.13),transparent 65%)}
.hero-content{position:relative;z-index:3}
.micro-label{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:2px;font-weight:800;color:#666;margin-bottom:25px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 0 rgba(99,39,131,.45);animation:pulse 1.7s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}}
.hero h1{
  max-width:820px;margin:0;
  font-family:var(--condensed);font-weight:900;
  font-size:clamp(72px,9vw,150px);line-height:.79;letter-spacing:-3px;
}
.hero h1 .gradient-word{display:block;background:linear-gradient(90deg,var(--purple),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 em{display:block;font-style:normal;font-size:.58em;letter-spacing:-1px;line-height:.95;margin-top:12px}
.hero-meta{display:flex;align-items:center;gap:32px;margin-top:46px;max-width:630px}
.hero-meta p{font-size:14px;line-height:1.7;color:#626269;max-width:450px;margin:0}
.circle-arrow{
  flex:none;width:64px;height:64px;border-radius:50%;border:1px solid #aaa;
  display:grid;place-items:center;font-size:25px;transition:.3s;background:#fff;
}
.circle-arrow:hover{background:#000;color:#fff;transform:rotate(-20deg)}
.hero-scroll-note{display:flex;align-items:center;gap:15px;margin-top:55px;color:#777;font-size:9px;font-weight:800;letter-spacing:2px}
.hero-scroll-note i{width:100px;height:1px;background:#aaa;position:relative;overflow:hidden}
.hero-scroll-note i::after{content:"";position:absolute;width:35%;height:100%;background:#000;animation:scrollline 1.8s infinite}
@keyframes scrollline{0%{left:-35%}100%{left:100%}}

.hero-visual{height:620px;position:relative;display:grid;place-items:center}
.visual-orbit{position:absolute;border:1px solid rgba(99,39,131,.25);border-radius:50%;transform:rotate(-25deg)}
.orbit-a{width:550px;height:330px}
.orbit-b{width:640px;height:410px;border-color:rgba(95,127,190,.2);transform:rotate(25deg)}
.visual-card{
  width:min(440px,80%);height:470px;position:relative;z-index:2;
  background:#101014;color:#fff;box-shadow:0 35px 80px rgba(0,0,0,.25);
  overflow:hidden;padding:24px;display:flex;flex-direction:column;justify-content:space-between;
  transform:rotate(5deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.hero-visual:hover .visual-card{transform:rotate(0deg) translateY(-8px)}
.visual-card::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-120px;top:-90px;background:radial-gradient(circle,var(--blue),transparent 65%);opacity:.8}
.visual-card::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;left:-100px;bottom:-120px;background:radial-gradient(circle,var(--purple),transparent 65%);opacity:.7}
.card-top,.card-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;font-family:var(--condensed);font-size:12px;letter-spacing:1.5px}
.card-bottom{align-items:end}
.card-bottom strong{font-size:120px;line-height:.6;font-weight:500}
.card-bottom span{font-size:12px;line-height:1.1;text-align:right}
.network-map{position:relative;width:100%;height:280px;z-index:2}
.node{position:absolute;width:17px;height:17px;border:2px solid #fff;border-radius:50%;background:var(--purple);box-shadow:0 0 20px rgba(99,39,131,.8)}
.n1{left:17%;top:28%}.n2{left:51%;top:13%;background:var(--blue)}.n3{right:15%;top:48%}.n4{left:40%;bottom:13%;background:#fff}.n5{right:32%;bottom:22%;background:var(--purple)}
.line{position:absolute;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.1),#fff,rgba(255,255,255,.1));transform-origin:left center}
.l1{left:19%;top:31%;width:190px;transform:rotate(-13deg)}.l2{left:53%;top:16%;width:155px;transform:rotate(31deg)}.l3{left:42%;top:77%;width:145px;transform:rotate(-37deg)}.l4{left:53%;top:17%;width:190px;transform:rotate(71deg)}
.floating-tag{
  position:absolute;z-index:5;background:#fff;border:1px solid #ddd;padding:10px 13px;
  font-family:var(--condensed);font-size:11px;font-weight:800;letter-spacing:1px;box-shadow:0 15px 35px rgba(0,0,0,.08)
}
.tag-one{top:70px;left:25px}.tag-two{right:5px;top:180px;background:#000;color:#fff;border-color:#000}.tag-three{bottom:80px;left:25px}

/* Reveal */
.reveal{opacity:0;transform:translateY(45px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:none}
.reveal-delay{transition-delay:.18s}

/* Marquee */
.marquee{overflow:hidden;background:#0b0b0d;color:#fff;border-top:1px solid #222;border-bottom:1px solid #222;padding:17px 0}
.marquee-track{display:flex;width:max-content;align-items:center;gap:27px;animation:marquee 35s linear infinite}
.marquee span{font-family:var(--condensed);font-size:27px;font-weight:800;letter-spacing:.7px;white-space:nowrap}
.marquee b{color:#7d5ba5;font-size:20px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Labels */
.section-label{font-size:10px;font-weight:800;letter-spacing:2px;display:flex;gap:12px;align-items:center;color:#666}
.section-label span{color:var(--purple);font-family:var(--condensed);font-size:16px}
.section-label.light{color:#999}.section-label.light span{color:#b596cf}

/* Intro */
.intro{padding:150px 0 145px}
.intro-head{display:grid;grid-template-columns:1.2fr .6fr;gap:80px;margin-top:38px;align-items:end}
.intro-head h2,.cap-head h2,.approach-top h2,.contact h2{
  font-family:var(--condensed);font-weight:900;font-size:clamp(64px,8vw,116px);line-height:.83;letter-spacing:-2px;margin:0
}
.intro-head h2 span,.cap-head h2 span,.approach-top h2 span,.contact h2 span{color:var(--purple)}
.intro-head p{color:#666;line-height:1.75;font-size:14px;max-width:400px}
.intro-line{height:1px;background:var(--line);margin:70px 0 55px}
.intro-lower{display:grid;grid-template-columns:.5fr 1fr .4fr;gap:80px;align-items:center}
.big-number{font-family:var(--condensed);font-size:180px;line-height:.6;font-weight:800;color:#e3e3e3}
.big-number span{font-size:30px;color:var(--purple);vertical-align:top}
.intro-lower h3{font-family:var(--condensed);font-size:45px;line-height:.9;margin:0 0 18px}
.intro-lower p{color:#68686f;line-height:1.7;font-size:13px;max-width:500px}
.rotating-seal{width:170px;height:170px;position:relative;margin-left:auto}
.rotating-seal svg{width:100%;height:100%;animation:spin 18s linear infinite}
.rotating-seal text{font-family:var(--condensed);font-weight:800;font-size:11px;letter-spacing:3px;fill:#555}
.rotating-seal>span{position:absolute;inset:0;display:grid;place-items:center;font-size:25px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Capabilities */
.capabilities{padding-bottom:155px}
.cap-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin:40px 0 65px}
.cap-head p{font-size:11px;color:#777;max-width:220px}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:transparent;border-top:1px solid #d7d7da;border-left:1px solid #d7d7da}
.cap-card{
  background:#fff;min-height:360px;padding:30px;position:relative;overflow:hidden;border-right:1px solid #d7d7da;border-bottom:1px solid #d7d7da;
  transition:transform .45s ease,background .45s ease,color .45s ease;
}
.cap-card::before{
  content:attr(data-number);position:absolute;right:-25px;top:-45px;
  font-family:var(--condensed);font-size:190px;font-weight:900;color:#f0eff1;
  transition:.45s;
}
.cap-card:hover{background:#0c0c0e;color:#fff;transform:translateY(-8px);z-index:2;box-shadow:0 25px 50px rgba(0,0,0,.18)}
.cap-card:hover::before{color:rgba(255,255,255,.05);transform:scale(1.1)}
.cap-icon{font-size:34px;color:var(--purple);position:relative;z-index:2}
.cap-index{font-size:9px;letter-spacing:1.5px;color:#888;position:absolute;right:30px;top:32px}
.cap-card h3{position:relative;z-index:2;font-family:var(--condensed);font-size:42px;line-height:.85;margin:65px 0 18px}
.cap-card h3 span{color:var(--purple)}
.cap-card p{position:relative;z-index:2;font-size:12px;line-height:1.65;color:#707077;max-width:300px}
.cap-card:hover p{color:#aaa}
.cap-card a{position:absolute;left:30px;bottom:28px;font-size:10px;font-weight:800;letter-spacing:1px;border-bottom:1px solid #bbb;padding-bottom:6px}
.cap-card a span{margin-left:10px}
.cap-card.featured{background:linear-gradient(145deg,#5c2479,#617fb8);color:#fff}
.cap-card.featured::before{color:rgba(255,255,255,.08)}
.cap-card.featured p{color:#ddd}
.cap-card.featured h3 span{color:#fff}

/* Numbers */
.numbers{background:#0b0b0d;color:#fff;padding:80px 0 100px;overflow:hidden}
.number-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:65px}
.number-item{border-left:1px solid #333;padding:0 30px}
.number-item:first-child{border-left:0}
.number-item strong{font-family:var(--condensed);font-size:105px;line-height:.7;font-weight:800}
.number-item i{font-family:var(--condensed);font-size:28px;font-style:normal;color:#a888c3}
.number-item span{display:block;margin-top:25px;color:#aaa;font-family:var(--condensed);font-size:14px;font-weight:700;line-height:1.05}

/* Approach */
.approach{padding:150px 0 160px}
.approach-top{display:grid;grid-template-columns:1fr .4fr;gap:80px;margin:45px 0 90px;align-items:end}
.approach-top p{font-size:14px;line-height:1.7;color:#6b6b72}
.timeline{position:relative}
.timeline-progress{position:absolute;left:27px;top:20px;bottom:20px;width:1px;background:linear-gradient(var(--purple),var(--blue));opacity:.5}
.step{display:grid;grid-template-columns:55px 1fr;gap:35px;padding:35px 0;border-top:1px solid var(--line);position:relative}
.step:last-child{border-bottom:1px solid var(--line)}
.step>span{
  width:55px;height:55px;border-radius:50%;background:#fff;border:1px solid #bbb;
  display:grid;place-items:center;font-family:var(--condensed);font-weight:800;color:var(--purple);z-index:2
}
.step h3{font-family:var(--condensed);font-size:40px;margin:0 0 8px}
.step p{margin:0;max-width:520px;color:#6c6c73;font-size:13px;line-height:1.7}

/* Feature */
.feature-banner{min-height:620px;background:#0b0b0d;color:#fff;position:relative;overflow:hidden;display:grid;place-items:center}
.feature-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:65px 65px;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%)}
.feature-banner::before{content:"";position:absolute;width:750px;height:750px;border:85px solid rgba(99,39,131,.45);border-radius:50%;right:-330px;top:-190px;transform:rotate(30deg)}
.feature-banner::after{content:"";position:absolute;width:560px;height:560px;border:45px solid rgba(95,127,190,.45);border-radius:50%;right:-210px;bottom:-310px}
.feature-copy{position:relative;z-index:2;width:min(var(--max),calc(100% - 80px))}
.feature-copy h2{font-family:var(--condensed);font-size:clamp(72px,10vw,145px);font-weight:900;line-height:.77;letter-spacing:-3px;margin:25px 0 40px}
.feature-copy h2 span{color:#7590c9}
.outline-light{display:inline-flex;gap:25px;color:#fff;border:1px solid #555;padding:16px 22px;font-size:11px;font-weight:800;transition:.3s}
.outline-light:hover{background:#fff;color:#000}
.feature-symbol{position:absolute;right:9%;bottom:-130px;font-family:var(--condensed);font-size:560px;font-weight:900;color:rgba(255,255,255,.025);line-height:.8}

/* Contact */
.contact{padding:150px 0 160px}
.contact-grid{display:grid;grid-template-columns:1fr .7fr;gap:120px;margin-top:55px}
.contact-left>p{font-size:14px;color:#6b6b72;line-height:1.7;max-width:470px;margin:30px 0 50px}
.contact-links{border-top:1px solid var(--line)}
.contact-links a{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);gap:20px}
.contact-links small{font-size:9px;letter-spacing:1.5px;color:#888}
.contact-links strong{font-family:var(--condensed);font-size:20px}
.contact-form{border-top:1px solid #aaa}
.contact-form label{display:block;border-bottom:1px solid #bbb;padding:18px 0}
.contact-form label span{display:block;font-size:9px;letter-spacing:1.6px;font-weight:800;color:#777;margin-bottom:9px}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:0;outline:0;background:transparent;font-size:14px;color:#111;resize:none}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#aaa}
.contact-form select{cursor:pointer}
.submit-button{margin-top:25px;border:0;background:#0b0b0d;color:#fff;padding:18px 22px;font-size:11px;font-weight:800;letter-spacing:.7px;cursor:pointer;transition:.3s}
.submit-button:hover{background:var(--purple)}
.submit-button span{margin-left:20px}
.form-note{font-size:11px;color:var(--purple);min-height:18px}

/* Footer */
.footer{background:#0b0b0d;color:#fff;padding:75px max(30px,calc((100vw - var(--max))/2)) 25px}
.footer-main{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:50px}
.footer-brand img{width:160px;height:auto;object-fit:contain;mix-blend-mode:normal;filter:none}
.footer-brand p{color:#888;font-size:12px;line-height:1.6;max-width:260px}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col h4{font-family:var(--condensed);font-size:13px;letter-spacing:1px;color:#aaa;margin:0 0 9px}
.footer-col a,.footer-col span{font-size:11px;color:#777;transition:.2s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid #29292c;margin-top:70px;padding-top:22px;display:flex;justify-content:space-between;gap:20px;color:#666;font-size:9px;letter-spacing:.5px}
.footer-bottom a{color:#aaa}

/* Tablet */
@media(max-width:1000px){
  .desktop-nav{gap:18px}
  .hero{grid-template-columns:1fr;padding-top:130px}
  .hero-visual{height:550px}
  .intro-head{grid-template-columns:1fr .55fr}
  .intro-lower{grid-template-columns:.35fr 1fr}
  .rotating-seal{display:none}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .number-grid{grid-template-columns:repeat(2,1fr);gap:45px 0}
  .number-item:nth-child(3){border-left:0}
  .approach-top{grid-template-columns:1fr .55fr}
  .contact-grid{gap:60px}
}

/* Mobile */
@media(max-width:760px){
  .section{width:calc(100% - 36px)}
  .header{height:72px;padding:0 18px}
  .header.scrolled{height:65px}
  .brand{width:70px;height:58px}
  .brand img{height:58px;max-width:70px}
  .desktop-nav{display:none}
  .menu-button{display:block}
  .mobile-menu{padding-top:100px}
  .mobile-menu a{font-size:35px}

  .hero{display:block;padding:120px 18px 55px;min-height:auto}
  .hero-grid-bg{background-size:45px 45px}
  .hero h1{font-size:72px;letter-spacing:-1.5px}
  .hero-meta{gap:18px;margin-top:35px}
  .hero-meta p{font-size:12px}
  .circle-arrow{width:52px;height:52px}
  .hero-scroll-note{margin-top:35px}
  .hero-visual{height:440px;margin-top:25px}
  .visual-card{height:350px;width:280px}
  .orbit-a{width:350px;height:220px}
  .orbit-b{width:400px;height:260px}
  .network-map{height:190px}
  .card-bottom strong{font-size:85px}
  .floating-tag{font-size:8px;padding:8px 9px}
  .tag-one{top:55px;left:0}.tag-two{right:0;top:125px}.tag-three{left:0;bottom:40px}

  .marquee span{font-size:22px}
  .intro{padding:90px 0}
  .intro-head{display:block;margin-top:30px}
  .intro-head h2,.cap-head h2,.approach-top h2,.contact h2{font-size:57px;letter-spacing:-1px}
  .intro-head p{margin-top:30px}
  .intro-line{margin:50px 0 35px}
  .intro-lower{grid-template-columns:1fr;gap:20px}
  .big-number{font-size:110px}
  .intro-lower h3{font-size:37px}

  .capabilities{padding-bottom:90px}
  .cap-head{display:block;margin:30px 0 40px}
  .cap-head p{margin-top:25px}
  .cap-grid{grid-template-columns:1fr}
  .cap-card{min-height:330px}

  .numbers{padding:60px 0 70px}
  .number-grid{grid-template-columns:1fr 1fr;gap:45px 0;margin-top:45px}
  .number-item{padding:0 18px}
  .number-item strong{font-size:72px}
  .number-item i{font-size:20px}
  .number-item span{font-size:12px}

  .approach{padding:90px 0}
  .approach-top{display:block;margin:30px 0 55px}
  .approach-top p{margin-top:28px}
  .step{grid-template-columns:45px 1fr;gap:18px;padding:27px 0}
  .step>span{width:45px;height:45px}
  .timeline-progress{left:22px}
  .step h3{font-size:33px}

  .feature-banner{min-height:520px}
  .feature-copy{width:calc(100% - 36px)}
  .feature-copy h2{font-size:66px;letter-spacing:-1px}
  .feature-symbol{font-size:350px;right:-5%;bottom:-70px}

  .contact{padding:90px 0}
  .contact-grid{grid-template-columns:1fr;gap:65px;margin-top:35px}
  .contact-links strong{font-size:16px}
  .footer{padding:60px 18px 20px}
  .footer-main{grid-template-columns:1fr 1fr;gap:40px 25px}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column;gap:10px;margin-top:50px}
}

/* Small phones */
@media(max-width:420px){
  .hero h1{font-size:61px}
  .hero-visual{height:390px}
  .visual-card{width:250px;height:320px}
  .intro-head h2,.cap-head h2,.approach-top h2,.contact h2{font-size:49px}
  .number-item strong{font-size:61px}
  .feature-copy h2{font-size:55px}
}


/* Final capability card: intentionally closes the grid rather than leaving a grey void. */
.cap-card:last-child{
  background:linear-gradient(145deg,#fbfafc,#f2f0f5);
}
.cap-card:last-child:hover{
  background:#0c0c0e;
}
@media(max-width:760px){
  .cap-card{
    border-right:1px solid #d7d7da;
  }
  .cap-grid{
    border-right:1px solid #d7d7da;
  }
}