:root{
  --ink:#0a1930;
  --panel:#0c2340;
  --panel-deep:#08192f;
  --line:#1d3a5c;
  --sky:#5ec8f0;
  --mint:#7fe0c9;
  --paper:#eef4f8;
  --white:#fbfdff;
  --muted:#93b1c7;
  --muted-light:#58718c;
  --border-light:#c8dbe8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}
h1,h2,h3,p{margin-top:0}
img{max-width:100%;display:block}

/* ---------- Header ---------- */
.header{
  height:86px;background:#07192f;color:#fff;display:flex;align-items:center;gap:40px;
  padding:0 max(25px,calc((100vw - 1240px)/2));position:sticky;top:0;z-index:20;
  border-bottom:1px solid #ffffff18
}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font:700 13px/1.1 "DM Mono",monospace;letter-spacing:1.7px;white-space:nowrap}
.brand img{width:43px;height:56px;object-fit:contain}

.brand small{display:block;font-size:8px;letter-spacing:3px;margin-top:4px;opacity:.65}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a,footer a{color:#d8e4ee;text-decoration:none;font-size:13px}
.nav a:hover,footer a:hover{color:var(--sky)}
.header-cta,.primary-btn{
  background:var(--sky);color:#06203c;text-decoration:none;font:500 12px "DM Mono",monospace;letter-spacing:.2px;
  padding:16px 18px;border:0;cursor:pointer;display:inline-flex;justify-content:space-between;align-items:center;gap:25px;transition:.2s
}
.header-cta:hover,.primary-btn:hover{background:var(--mint);transform:translateY(-2px)}
.header-cta b,.primary-btn b{font-size:19px}
.menu-toggle{display:none}

/* ---------- Hero ---------- */
.hero{
  background:var(--ink);color:#fff;min-height:630px;
  padding:115px max(25px,calc((100vw - 1240px)/2)) 75px;
  position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;overflow:hidden
}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,#70b7dc44,transparent)}
.kicker{font:500 11px "DM Mono",monospace;letter-spacing:1.5px;text-transform:uppercase;color:#2e83b9;margin:0 0 22px}
.kicker span{display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px}
.kicker.light{color:var(--sky)}
h1,h2{letter-spacing:-2.6px;line-height:1.08}
h1{font-size:clamp(44px,4.6vw,66px);margin-bottom:24px;max-width:560px}
h1 em,h2 em{font-style:normal;color:var(--sky)}
.lede{color:#b7c9d9;font-size:16px;line-height:1.75;max-width:480px;margin-bottom:31px}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.play-link{color:#e3eef5;text-decoration:none;font-size:13px}
.play-link span{display:inline-grid;place-items:center;border:1px solid #89a9c24d;border-radius:50%;width:29px;height:29px;margin-right:8px;color:var(--sky)}
.hero-proof{display:flex;gap:30px;margin-top:44px;color:#9ab8cd;font:10px "DM Mono",monospace;letter-spacing:.7px;text-transform:uppercase;flex-wrap:wrap}
.hero-proof span{display:flex;gap:9px;align-items:center}
.hero-proof b{color:var(--sky);font-size:12px}

/* ---------- Hero console (signature element) ---------- */
.hero-console{
  align-self:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 30px 80px #00000059,0 0 0 1px #67c8f114;overflow:hidden;max-width:440px;width:100%;justify-self:end
}
.console-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;background:var(--panel-deep);border-bottom:1px solid var(--line)}
.console-dot{width:9px;height:9px;border-radius:50%;background:#3a5876}
.console-dot:nth-child(1){background:#e8888c}
.console-dot:nth-child(2){background:#eac07e}
.console-dot:nth-child(3){background:var(--mint)}
.console-title{margin-left:8px;font:11px "DM Mono",monospace;color:#7fa0bd;letter-spacing:.5px}
.console-body{padding:26px 22px 6px}
.console-line{
  display:flex;align-items:baseline;gap:10px;font:13px "DM Mono",monospace;color:#cfe4f2;margin:0 0 17px;
  opacity:0;transform:translateY(6px);animation:consoleIn .5s ease forwards
}
.console-line .prompt{color:var(--sky);flex:none}
.console-line .dots{flex:1;border-bottom:1px dotted #2c4d6d;margin-bottom:4px}
.console-line .ok{color:var(--mint);flex:none;font-size:12px}
.console-status{
  display:flex;align-items:center;gap:10px;margin:6px 22px 0;padding:16px 0;border-top:1px solid var(--line);
  font:11px "DM Mono",monospace;color:var(--muted);letter-spacing:.6px;text-transform:uppercase
}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 #7fe0c990;animation:pulse 2.2s infinite}
.console-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.console-stats div{padding:16px 12px;text-align:center;border-left:1px solid var(--line)}
.console-stats div:first-child{border-left:0}
.console-stats b{display:block;font:700 18px Manrope;color:#fff;letter-spacing:-.4px}
.console-stats span{display:block;font:10px "DM Mono",monospace;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-top:4px}

.scroll-note{
  position:absolute;bottom:25px;left:max(25px,calc((100vw - 1240px)/2));font:10px "DM Mono",monospace;
  letter-spacing:1.6px;color:#7797b1
}
.scroll-note span{display:inline-block;width:45px;height:1px;background:#68bceb;margin-left:10px;vertical-align:middle}

/* ---------- Marquee ---------- */
.marquee{background:var(--sky);color:var(--ink);overflow:hidden;white-space:nowrap}
.marquee div{font:600 12px "DM Mono",monospace;letter-spacing:1.4px;padding:18px 0;display:inline-flex;align-items:center;gap:35px;animation:marquee 30s linear infinite}
.marquee b{font-size:17px}

/* ---------- Sections shared ---------- */
.section{padding:118px max(25px,calc((100vw - 1240px)/2))}

/* ---------- About ---------- */
.about{background:var(--white);display:grid;grid-template-columns:1fr 1fr;gap:36px 9%;position:relative}
.about:before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;right:-150px;top:90px;background:radial-gradient(circle,#7bcff014,transparent 68%);pointer-events:none}
.about-intro h2{font-size:clamp(36px,4vw,57px);margin:0;letter-spacing:-2.6px;line-height:1.08}
.about-copy{font-size:15px;line-height:1.85;color:var(--muted-light);padding-top:34px}
.about-copy p{margin-bottom:17px}
.direction-grid,.values-grid,.values-heading{grid-column:1/-1}
.direction-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.direction-card{min-height:270px;background:var(--panel);color:#fff;padding:31px;position:relative;overflow:hidden}
.direction-card:nth-child(2){background:#12669b}
.direction-card:after{content:"";position:absolute;width:230px;height:230px;right:-80px;bottom:-100px;border:1px solid #8cdcf753;border-radius:50%}
.direction-card>span,.value-card>span{font:11px "DM Mono",monospace;color:#70c7ed}
.eyebrow{font:11px "DM Mono",monospace;letter-spacing:1.4px;text-transform:uppercase;color:#83d5f2;margin:28px 0 13px}
.direction-card h3{font-size:25px;line-height:1.2;max-width:385px;letter-spacing:-.8px;margin:0 0 16px}
.direction-card>p:last-child{font-size:13px;line-height:1.7;color:#c2d8e6;max-width:470px;margin:0}
.values-heading{display:flex;justify-content:space-between;align-items:end;margin-top:42px;border-bottom:1px solid var(--border-light);padding-bottom:20px}
.values-heading .kicker{margin:0}
.values-heading>p:last-child{margin:0;color:var(--muted-light);font-size:14px}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:0}
.value-card{padding:25px 25px 10px 0;border-right:1px solid var(--border-light);min-height:205px}
.value-card+article{padding-left:25px}
.value-card:last-child{border-right:0}
.value-card h3{font-size:17px;line-height:1.3;margin:22px 0 11px;letter-spacing:-.4px}
.value-card p{font-size:13px;line-height:1.7;color:var(--muted-light);margin:0}

/* ---------- Services ---------- */
.services{background:var(--paper)}
.section-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:end;margin-bottom:54px}
.section-intro .kicker{grid-column:1/-1;margin-bottom:-22px}
.section-intro h2,.how h2,.difference h2,.contact h2{font-size:clamp(36px,4vw,57px);margin:0}
.section-intro>p:last-child{font-size:15px;line-height:1.75;color:var(--muted-light);max-width:390px;margin:0}
.service-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{
  min-height:275px;padding:28px;background:#f9fcfe;border:1px solid var(--border-light);position:relative;
  overflow:hidden;transition:transform .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease
}
.service-card:before{
  content:"";position:absolute;inset:auto -40px -75px auto;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,#5bb9e81e,transparent 67%);transition:transform .35s ease,opacity .35s ease
}
.service-card:hover{transform:translateY(-8px);background:var(--panel-deep);border-color:#63c2e9;box-shadow:0 18px 38px #1436542b}
.service-card:hover:before{transform:scale(1.65);opacity:1}
.service-card .index{position:absolute;top:23px;right:24px;color:#75a9c7;font:11px "DM Mono",monospace}
.service-card .service-icon{
  display:grid;place-items:center;width:54px;height:54px;border:1px solid #71bfe244;color:#197caf;font-size:25px;
  line-height:1;border-radius:12px;margin-bottom:43px;transition:background .3s,color .3s,box-shadow .3s,transform .3s
}
.service-card h3{font-size:20px;line-height:1.25;letter-spacing:-.6px;margin:0 0 12px;position:relative}
.service-card p{color:var(--muted-light);font-size:13px;line-height:1.72;margin:0;max-width:300px;position:relative}
.service-arrow{position:absolute;right:24px;bottom:22px;color:#197caf;font-size:22px;transition:transform .3s,color .3s}
.service-card:hover .service-icon{background:var(--sky);color:#07213d;box-shadow:0 0 0 7px #5bb9e821,0 8px 25px #5bb9e855;transform:scale(1.05)}
.service-card:hover h3{color:#fff}
.service-card:hover p{color:#b5cbdc}
.service-card:hover .service-arrow{color:var(--sky);transform:translateX(6px)}



/* ---------- Difference ---------- */
.difference{background:var(--panel);color:#fff;padding:115px max(25px,calc((100vw - 1240px)/2));display:grid;grid-template-columns:1.05fr .95fr;gap:110px}
.difference-copy>p:not(.kicker){color:#b1c9da;font-size:15px;line-height:1.8;max-width:560px;margin:28px 0}
.line-link{color:var(--sky);font:600 13px "DM Mono",monospace;text-decoration:none;border-bottom:1px solid #57bde766;padding-bottom:9px}
.line-link b{font-size:17px;margin-left:11px}
.principles{border-top:1px solid #ffffff35}
.principles>div{border-bottom:1px solid #ffffff27;padding:25px 0}
.principles span{color:var(--sky);font:11px "DM Mono",monospace}
.principles h3{font-size:18px;margin:11px 0 6px}
.principles p{font-size:13px;color:#b0c6d7;line-height:1.6;margin:0}

/* ---------- How it works ---------- */
.how-heading{margin-bottom:65px}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.timeline article{padding:0 35px 0 0;border-top:2px solid var(--sky);position:relative}
.timeline article+article{padding-left:30px}
.timeline b{display:block;color:#3189bd;font:12px "DM Mono",monospace;margin:18px 0 32px}
.timeline h3{font-size:20px;line-height:1.25;margin-bottom:12px}
.timeline p{font-size:14px;color:#5a728b;line-height:1.7;max-width:285px}

/* ---------- Contact ---------- */
.contact{background:#071b33;color:#fff;padding:115px max(25px,calc((100vw - 1240px)/2));display:grid;grid-template-columns:.9fr 1.1fr;gap:130px}
.contact-copy>p:not(.kicker){color:#aec6d7;line-height:1.7;max-width:420px;margin:25px 0}
.contact-copy>a{display:block;color:var(--sky);font:500 14px "DM Mono",monospace;text-decoration:none;margin:36px 0 13px}
.contact-copy>span{color:#92afc5;font-size:13px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:19px}
.contact-form label{font:11px "DM Mono",monospace;letter-spacing:1px;color:#8fc2df}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;margin-top:10px;background:#ffffff0b;border:1px solid #82a6bd55;color:#fff;font:14px Manrope;
  padding:14px;outline:0;transition:.2s
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--sky);background:#ffffff10}
.contact-form select{color:#dce8f1}
.contact-form option{color:#102743}
.contact-form textarea{min-height:130px;resize:vertical}
.wide{grid-column:1/-1}
.form-note{grid-column:1/-1;margin:0;color:var(--mint);font-size:12px}



.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Red/Dark circular badge for the icon */
.contact-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05); /* Adjust background color if needed */
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #00bcd4; /* Accent color for icon */
  flex-shrink: 0;
}

.contact-text {
  display: flex;
  flex-direction: column;
}

.contact-label {
  font-size: 0.8rem;
  color: #a0aec0;
  margin-bottom: 0.2rem;
}

.contact-text a,
.contact-text p {
  color: #ffffff;
  font-size: 0.95rem;
  text-decoration: none;
  margin: 0;
  line-height: 1.4;
}

/* ---------- Footer ---------- */
footer{background:#06162a;color:#9eb5c7;padding-top:72px;padding-bottom:34px;display:block}
/* Update grid to 4 distinct columns */
.footer-main {
  display: grid;
  grid-template-columns: 1.2fr 0.85fr 1.15fr 1fr;
  gap: 36px;
  align-items: start;
  padding: 0 max(25px, calc((100vw - 1240px)/2)) 50px;
}

/* Working Hours list styling */
.footer-hours {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.9rem;
  color: #9eb5c7;
}

.footer-hours li.highlight {
  color: #38bdf8;
  font-weight: 600;
}
.footer-brand .brand{color:#d6e8f4}
.footer-brand .brand img{width:57px;height:65px}
.footer-brand p{max-width:290px;color:#9eb5c7;line-height:1.65;margin:25px 0 0}
.footer-label{font:500 11px "DM Mono",monospace;letter-spacing:2px;text-transform:uppercase;color:var(--sky);margin:7px 0 26px}
.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer-links a:hover{color:var(--sky);
  transform:translateX(3px)}
  
.footer-legal{border-left:1px solid #ffffff1c;padding-left:30px}
.footer-contact{
  display:flex;flex-wrap:wrap;gap:36px;padding:22px max(25px,calc((100vw - 1240px)/2));border-top:1px solid #ffffff18;
  border-bottom:1px solid #ffffff18;color:#9eb5c7;font-size:13px
}
.footer-contact a{color:#9eb5c7;text-decoration:none}
.footer-contact a:hover{color:var(--sky)}
.footer-bottom{padding:28px max(25px,calc((100vw - 1240px)/2)) 0;display:flex;justify-content:space-between;align-items:center;gap:28px}
.footer-bottom small{padding:0;border:0}
.footer-bottom strong{color:#a9dff4;font:500 11px "DM Mono",monospace;letter-spacing:.4px}


/* ---------- Ambient cursor glow ---------- */
.cursor-glow{
  position:fixed;width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#5ec7e514,transparent 65%);transform:translate(-50%,-50%);z-index:1;mix-blend-mode:screen
}

/* ---------- Reveal / keyframes ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@keyframes marquee{to{transform:translateX(-30%)}}
@keyframes consoleIn{to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #7fe0c990}70%{box-shadow:0 0 0 10px #7fe0c900}100%{box-shadow:0 0 0 0 #7fe0c900}}

/* ---------- Mobile ---------- */
@media(max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero-console{justify-self:stretch;max-width:none;margin-top:50px}
}
@media(max-width:800px){
  .header{height:72px}
  .header-cta{display:none}
  .menu-toggle{display:block;margin-left:auto;background:transparent;border:0}
  .menu-toggle i{display:block;width:24px;height:1px;background:#fff;margin:6px}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:72px;left:0;right:0;background:#07192f;padding:25px;flex-direction:column;gap:20px;border-bottom:1px solid #ffffff22}
  .hero{padding:75px 25px 85px}
  .scroll-note{left:25px}
  .section{padding:78px 25px}
  .section-intro{display:block}
  .section-intro .kicker{margin-bottom:20px}
  .section-intro>p:last-child{margin-top:20px}
  .service-list{grid-template-columns:1fr;gap:14px}
  .service-card{min-height:240px}
  .service-card .service-icon{margin-bottom:31px}
  .about{display:block}
  .about-copy{padding-top:24px}
  .direction-grid{grid-template-columns:1fr;margin-top:35px}
  .direction-card{min-height:0}
  .values-heading{display:block;margin-top:42px}
  .values-heading>p:last-child{margin-top:13px}
  .values-grid{grid-template-columns:1fr}
  .value-card,.value-card+article{padding:24px 0;border-right:0;border-bottom:1px solid var(--border-light);min-height:0}
  .difference,.contact{padding:78px 25px;display:block}
  .principles{margin-top:48px}
  .timeline{display:block}
  .timeline article,.timeline article+article{padding:0 0 30px;margin-bottom:25px}
  .contact-form{margin-top:45px}
  footer{display:block;padding:40px 25px}
  .footer-main{grid-template-columns:1fr;gap:35px;padding:0 0 38px}
  .footer-links{gap:11px}
  .footer-label{margin-bottom:18px}
  .footer-contact{display:grid;gap:11px;padding:22px 0}
  .footer-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:28px 0 0}
  .cursor-glow{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .console-line{opacity:1;transform:none}
}