:root{
  --background:oklch(0.985 0.005 240);
  --foreground:oklch(0.23 0.045 260);
  --card:oklch(1 0 0);
  --primary:oklch(0.47 0.17 256);
  --primary-foreground:oklch(0.985 0.005 240);
  --secondary:oklch(0.95 0.018 240);
  --muted-foreground:oklch(0.5 0.035 256);
  --accent:oklch(0.93 0.045 215);
  --accent-foreground:oklch(0.35 0.09 235);
  --ice:oklch(0.77 0.14 221.08); /* #3cd3ea; oklch(0.8 0.125 210); */
  --ice-foreground:oklch(0.18 0.05 258);
  --navy:oklch(0.2 0.05 260);
  --navy-foreground:oklch(0.965 0.01 230);
  --navy-muted:oklch(0.7 0.035 245);
  --border:oklch(0.91 0.014 245);
  --ring:oklch(0.62 0.12 230);
  --gradient-hero:linear-gradient(165deg,oklch(0.15 0.045 262) 0%,oklch(0.21 0.07 258) 50%,oklch(0.28 0.1 250) 100%);
  --gradient-ice-text:linear-gradient(95deg,oklch(0.82 0.13 210),oklch(0.93 0.06 215));
  --shadow-glow:0 0 50px -12px oklch(0.75 0.14 215 / 0.55);
  --shadow-card:0 8px 30px -12px oklch(0.4 0.08 250 / 0.18);
  --font-display:"Sora",ui-sans-serif,system-ui,sans-serif;
  --font-sans:"Manrope",ui-sans-serif,system-ui,sans-serif;
}

* { 
  margin:0;
  padding:0;
  box-sizing:border-box;
}

[hidden] {
  display:none !important;
}

html { 
  scroll-behavior:smooth;
}

body {
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

h1,h2,h3,h4 {
  font-family:var(--font-display);
  letter-spacing:-0.02em;color;
}

img {
  max-width:100%;
  height:auto;
  display:block;
  border-radius:1rem;
}

a { 
  text-decoration:
  none;color:inherit;font-size;
}

button {
  font:inherit; 
  cursor:pointer; 
  background:none; 
  border:0;
}

svg { 
  display:block;
}

.icon-xs {width:.875rem;height:.875rem}
.icon-sm {width:1rem;height:1rem}
.icon-md {width:1.25rem;height:1.25rem}
.icon-lg {width:1.5rem;height:1.5rem}
.icon-xl {width:3rem;height:3rem}

.container {
  max-width:80rem;
  margin:0 auto;
  padding-left:1rem;
  padding-right:1rem;
}

/* tablet, desktop */
@media(min-width:640px) {
  .container {
    padding-left:1.5rem; padding-right:1.5rem;
  }
}

/* ============================ Header ============================ */
.site-header {
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  border-bottom:1px solid oklch(0.965 0.01 230 / 0.1);
  background:oklch(0.2 0.05 260 / 0.8);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

.header-inner {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  padding-top:.75rem;
  padding-bottom:.75rem;
}

.brand {
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width:0;
}

.site-header .brand-logo {
  height:4em;
  filter:brightness(2) invert(.2); /* filter:brightness(0) invert(1); */
  padding: .2em 0;
}

.brand-mark {
  display:grid;
  place-items:center;
  width:2.25rem;
  height:2.25rem;
  flex-shrink:0;
  border-radius:.5rem;
  background:var(--ice);
  color:var(--ice-foreground);
  font-family:var(--font-display);
  font-size:.875rem;
  font-weight:800;
  box-shadow:var(--shadow-glow);
}

.brand-name {
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:0.025em;
  color:var(--navy-foreground);
  font-size:.975rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brand-name strong {
  color: #8bcaf8; /* var(--ice); */
}

.header-inner .brand-name {
  font-size: 1.2rem;
}

/* tablet, desktop */
@media(min-width:640px) {
  .brand-name {
    font-size:1rem;
  }
}

.desktop-nav {
  display:none;
  align-items:center;
  gap:.25rem;
}

/* desktop */
@media(min-width:1024px) {
  .desktop-nav {
    display:flex;
  }
}

.desktop-nav a{border-radius:.375rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;color:var(--navy-muted);transition:color .2s}
.desktop-nav a:hover{color:var(--navy-foreground)}
.desktop-nav a.active-link{color:var(--ice)}

.menu-btn{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.375rem;color:var(--navy-foreground)}

/* desktop */
@media(min-width:1024px) {
  .menu-btn {
    display:none;
  }
}

.menu-btn .icon-close{display:none}
.menu-open .menu-btn .icon-close{display:block}
.menu-open .menu-btn .icon-menu{display:none}
.mobile-nav{display:none;border-top:1px solid oklch(0.965 0.01 230 / 0.1);background:var(--navy);padding:.5rem 1rem 1rem}
.menu-open .mobile-nav{display:block}

/* desktop */
@media(min-width:1024px) {
  .mobile-nav {
    display:none !important;
  }
}

.mobile-nav a{display:block;border-radius:.375rem;padding:.75rem;font-size:.875rem;font-weight:500;color:var(--navy-muted);transition:color .2s}
.mobile-nav a:hover{color:var(--navy-foreground)}
.mobile-nav a.active-link{color:var(--ice)}

/* ============================ Pages ============================ */
/*
.page{display:none}
.page.active{display:block}
*/

/* ============================ Hero / dark bands ============================ */
.bg-hero{background:var(--gradient-hero);color:var(--navy-foreground);position:relative;overflow:hidden}
.text-gradient-ice{background:var(--gradient-ice-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.orb{position:absolute;border-radius:9999px;filter:blur(64px);pointer-events:none}
.drift-layer{position:absolute;inset:0;opacity:.4;pointer-events:none;animation:drift 16s ease-in-out infinite alternate}
.hero-grid{position:relative;display:grid;align-items:center;gap:2rem;padding-top:9rem;padding-bottom:5rem}
@media(min-width:1024px){.hero-grid{grid-template-columns:1fr 650px;padding-top:11rem;padding-bottom:7rem;}}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;border:1px solid oklch(0.8 0.125 210 / 0.3);background:oklch(0.8 0.125 210 / 0.1);padding:.375rem 1rem;font-size:.75rem;font-weight:600;letter-spacing:.025em;color:var(--ice)}
.hero-title{margin-top:1.5rem;font-size:2.25rem;font-weight:800;line-height:1.15}
@media(min-width:640px){.hero-title{font-size:3rem}}
@media(min-width:1024px){.hero-title{font-size:3.75rem}}
.hero-text{margin-top:1.5rem;max-width:36rem;font-size:1rem;line-height:1.65;color:var(--navy-muted)}
@media(min-width:640px){.hero-text{font-size:1.125rem}}
.hero-ctas{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero-visual{position:relative}
.hero-visual img{position:relative;width:100%;border-radius:1.5rem;}
/* .hero-visual img{position:relative;width:100%;border-radius:1.5rem;box-shadow:var(--shadow-glow);animation:float-slow 7s ease-in-out infinite} */
.pulse-ring{position:absolute;inset:1rem;border-radius:9999px;border:2px solid oklch(0.8 0.125 210 / 0.3);animation:pulse-ring 3.2s cubic-bezier(0.4,0,0.6,1) infinite;pointer-events:none}
.pulse-ring.r2{border-width:1px;border-color:oklch(0.8 0.125 210 / 0.2);animation-delay:1.1s}
.stats-band{position:relative;border-top:1px solid oklch(0.965 0.01 230 / 0.1)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;padding-top:2.5rem;padding-bottom:2.5rem}
@media(min-width:1024px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat{padding:.75rem 1rem;text-align:center}
.stat-value{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--ice); line-height: 2rem;}
@media(min-width:640px){.stat-value{font-size:1.875rem}}
.stat-label{margin-top:.25rem;font-size:.75rem;color:var(--navy-muted)}
@media(min-width:640px){.stat-label{font-size:.875rem}}

/* ============================ Buttons ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.625rem;font-weight:600;font-size:1rem;padding:.875rem 2rem;transition:transform .2s,background-color .2s,color .2s,box-shadow .2s}
.btn:active{transform:scale(.98)}
.btn-hero{background:var(--ice);color:var(--ice-foreground);box-shadow:var(--shadow-glow)}
.btn-hero:hover{transform:translateY(-2px)}
.btn-hero-outline{border:1px solid oklch(0.8 0.125 210 / 0.4);color:var(--navy-foreground);background:transparent}
.btn-hero-outline:hover{background:oklch(0.8 0.125 210 / 0.1)}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover{background:oklch(0.47 0.17 256 / 0.9)}

/* ============================ Sections / cards ============================ */
.section{padding-top:5rem;padding-bottom:5rem}
@media(min-width:1024px){.section-lg{padding-top:7rem;padding-bottom:7rem}}
.bg-secondary{background:var(--secondary)}
.eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.25em;color:var(--primary)}
.section-title{margin-top:.75rem;max-width:42rem;font-size:1.875rem;font-weight:800}
@media(min-width:640px){.section-title{font-size:2.25rem}}
.h2{font-size:1.875rem;font-weight:800}
.cards-3{margin-top:3rem;display:grid;gap:1.5rem}
.cards-2{margin-top:3rem;display:grid;gap:1.5rem}
.card-1{margin-top:3rem;display:grid;}
@media(min-width:768px){
  .cards-3{grid-template-columns:repeat(3,1fr)}
  .cards-2{grid-template-columns:repeat(2,1fr)}
  .card-1{grid-row: span 2;}
}
.card{border-radius:1rem;border:1px solid var(--border);background:var(--card);padding:1.75rem;box-shadow:var(--shadow-card);transition:transform .3s}
.card.hoverable:hover{transform:translateY(-4px)}
.icon-tile{display:grid;place-items:center;width:3rem;height:3rem;border-radius:.75rem;background:var(--accent);color:var(--accent-foreground);transition:background-color .3s,color .3s}
.card.hoverable:hover .icon-tile.swap{background:var(--primary);color:var(--primary-foreground)}
.icon-tile-sm{display:grid;place-items:center;width:2.75rem;height:2.75rem;flex-shrink:0;border-radius:.75rem;background:var(--accent);color:var(--accent-foreground)}
.card h3{margin-top:1.25rem;font-size:1.125rem;font-weight:700}
.card .muted{margin-top:.5rem;font-size:.875rem;line-height:1.65;color:var(--muted-foreground)}
.muted{color:var(--muted-foreground)}

.column-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px;
}

/* Desktop Styles: Activates the two-column layout */
@media (min-width:768px) {
  .column-2 {
    grid-template-columns: 1fr 450px; 
    gap: 40px; /* Space between the two main columns */
  }
}

/* ============================ Page login ============================*/
.login {
  position: relative;
  height: 100vh;
  display:flex;
  align-items: flex-start;
  background:linear-gradient(135deg, var(--navy), var(--primary), var(--ice)); 
  /* background:linear-gradient(135deg,rgba(3, 74, 99, 0.8), rgba(0, 85, 116, 0.8), rgba(68, 196, 231, 0.8)), url('../img/hero_bw.jpg') center/cover no-repeat; */
}

.login-container {
  width: 320px;
  margin: 150px auto;
  padding: 30px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  text-align: center;
}

.login-container .logo {
  margin: 0 auto;
  padding-bottom: 25px;
  width: 90%;
}

.login-container h2 {
  margin-bottom: 10px;
  color: #333;
  font-weight: none;
}

#error {
  color: red;
  font-weight: bold;
  margin: 10px 0;
}

/* ============================ Page hero ============================*/
.page-hero {
  padding-top:9rem;
  padding-bottom:5rem;
}

.page-hero h1 { 
  margin-top:1rem;
  max-width:48rem;
  font-size:2.25rem;
  font-weight:800;
  line-height: 3.5rem;
}

@media(min-width:640px) {
  .page-hero h1 {
    font-size:3rem;
  }
}

.page-hero p.lead {
  margin-top:1.25rem;
  max-width:42rem;
  font-size:1rem;
  line-height:1.65;
  color:var(--navy-muted);
}

@media(min-width:640px) {
  .page-hero p.lead {
    font-size:1.125rem;
  }
}

.page-hero .eyebrow {
  color:var(--ice);
}

/* ============================ Home ============================ */
.solution {margin-top: 1.25rem;}

/* ============================ CTA band ============================ */
.cta-band{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;padding-top:4rem;padding-bottom:4rem}
@media(min-width:768px){.cta-band{flex-direction:row;align-items:center;justify-content:space-between}}
@media(min-width:1024px){.cta-band{padding-top:5rem;padding-bottom:5rem}}
.cta-band h2{font-size:1.5rem;font-weight:800}
@media(min-width:640px){.cta-band h2{font-size:1.875rem}}
.cta-band p{margin-top:.5rem;max-width:36rem;font-size:.875rem;color:var(--navy-muted)}
@media(min-width:640px){.cta-band p{font-size:1rem}}

/* ============================ Home ============================*/
.matters p, .however p {padding: 6px 0;}

/* ============================ About ============================*/
.two-col{display:grid;gap:3rem}
@media(min-width:1024px){.two-col{grid-template-columns:1fr 1fr}}
.prose h2{margin-bottom:1.25rem;}
.prose p{padding: 6px 0;color:var(--muted-foreground)}
.problem-title{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--primary)}
.problem-list{margin-top:1.25rem;list-style:none;display:grid;gap:1rem;font-size:.875rem;line-height:1.65;color:var(--muted-foreground)}
.problem-list li{border-left:2px solid var(--ice);padding-left:1rem}
.problem-list strong{color:var(--foreground)}

/* ============================ Technology ============================ */
.tech-grid{display:grid;align-items:center;gap:3rem}
@media(min-width:1024px){.tech-grid{grid-template-columns:1fr 1fr}}
.tech-grid img{width:100%;border-radius:1.5rem;box-shadow:var(--shadow-card)}
.steps{margin-top:2rem;list-style:none;display:grid;gap:1.75rem}
.steps li{display:flex;gap:1.25rem}
.step-num{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--ice)}
.steps h3{font-weight:700;font-size:1rem}
.steps p{margin-top:.25rem;font-size:.875rem;line-height:1.65;color:var(--muted-foreground)}
.specs-grid{margin-top:2.5rem;display:grid;gap:1.25rem}
@media(min-width:640px){.specs-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.specs-grid{grid-template-columns:repeat(3,1fr)}}
.spec{display:flex;align-items:center;gap:1rem;border-radius:1rem;border:1px solid var(--border);background:var(--card);padding:1.25rem;box-shadow:var(--shadow-card)}
.spec-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground)}
.spec-value{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spec > div{min-width:0}
.disclaimer{margin-top:2rem;font-size:.75rem;color:var(--muted-foreground)}

/* ============================ Team ============================ */
.team-grid{display:grid;gap:1.5rem; margin-bottom: 4rem;}
.team-grid .card{text-align:center;}
@media(min-width:640px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.team-grid{grid-template-columns:repeat(3,1fr)}}
.avatar{display:grid;place-items:center;border-radius:1rem;font-family:var(--font-display);font-size:1.125rem;font-weight:800;color:var(--ice)}
.avatar img{border-radius:1rem;}
.team-role{font-size:.875rem;font-weight:600;color:var(--primary)}
.team-bio{margin-top:.75rem;font-size:.875rem;line-height:1.65;color:var(--muted-foreground)}
#page-team h2 {margin-bottom: 2rem;}

/* ============================ News ============================ */
.news-wrap{max-width:56rem;margin:0 auto}
.news-list{display:grid;gap:1.5rem}
.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.75rem}
.tag{border-radius:9999px;background:var(--accent);padding:.25rem .75rem;font-weight:600;color:var(--accent-foreground)}
.news-date{display:inline-flex;align-items:center;gap:.375rem;color:var(--muted-foreground)}
.news-list h2{margin-top:1rem;font-size:1.25rem;font-weight:700}
.news-list .excerpt{margin-top:.5rem;font-size:.875rem;line-height:1.65;color:var(--muted-foreground)}

/* ============================ Contact ============================ */
.contact-grid{display:grid;gap:3rem}
@media(min-width:1024px){.contact-grid{grid-template-columns:1.8fr;}}
.contact-cards{display:grid;gap:1.5rem;align-content:start}
.contact-card{display:flex;align-items:flex-start;gap:1rem;border-radius:1rem;border:1px solid var(--border);background:var(--card);padding:1.5rem;box-shadow:var(--shadow-card)}
.contact-card h2{font-size:1rem;font-weight:700}
.contact-card p{margin-top:.25rem;font-size:.875rem;color:var(--muted-foreground);word-break:break-word}
.form-card{border-radius:1rem;border:1px solid var(--border);background:var(--card);padding:2rem;box-shadow:var(--shadow-card)}
form{display:grid;gap:1.25rem}
.form-row{display:grid;gap:1.25rem}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.5rem}
label{font-size:.875rem;font-weight:500}
input,textarea{width:100%;border-radius:.5rem;border:1px solid var(--border);background:var(--card);padding:.625rem .75rem;font:inherit;font-size:.875rem;color:var(--foreground)}
input::placeholder,textarea::placeholder{color:var(--muted-foreground)}
input:focus,textarea:focus{outline:2px solid var(--ring);outline-offset:2px;border-color:var(--ring)}
textarea{resize:vertical;min-height:9rem}
.success{display:flex;flex-direction:column;align-items:center;padding:4rem 0;text-align:center}
.success svg{color:var(--primary)}
.success h2{margin-top:1rem;font-size:1.25rem;font-weight:700}
.success p{margin-top:.5rem;max-width:24rem;font-size:.875rem;color:var(--muted-foreground)}

/* ============================ Footer ============================*/
.site-footer{background:var(--navy);color:var(--navy-foreground)}
.footer-grid{display:grid;gap:2.5rem;padding-top:3.5rem;padding-bottom:3.5rem}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer-desc{margin-top:1rem;max-width:24rem;font-size:.875rem;line-height:1.65;color:var(--navy-muted)}
.footer-col{display:grid;gap:.5rem;font-size:.875rem;align-content:start}
.footer-col span{margin-bottom:.25rem;font-family:var(--font-display);font-weight:600;color:var(--ice)}
.footer-col a{color:var(--navy-muted);transition:color .2s}
.footer-col a:hover{color:var(--navy-foreground)}
.footer-bottom{border-top:1px solid oklch(0.965 0.01 230 / 0.1)}
.footer-bottom p{padding-top:1.25rem;padding-bottom:1.25rem;font-size:.75rem;color:var(--navy-muted)}
.footer-col a.active-link{color:var(--ice)}
.site-footer .brand-logo{height:3em;filter:brightness(0) invert(1);}
.site-footer .brand-mark{display:none;}

/* ============================ Animations ============================ */
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes float-slow{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pulse-ring{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1.45);opacity:0}}
@keyframes drift{from{transform:translate3d(-4%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.08)}}
.fade-up{animation:fade-up .8s cubic-bezier(0.22,1,0.36,1) both}
.d1{animation-delay:.12s}.d2{animation-delay:.24s}.d3{animation-delay:.3s}.d4{animation-delay:.36s}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(0.22,1,0.36,1),transform .8s cubic-bezier(0.22,1,0.36,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.rd1{transition-delay:.1s}.reveal.rd2{transition-delay:.2s}.reveal.rd3{transition-delay:.3s}.reveal.rd4{transition-delay:.4s}.reveal.rd5{transition-delay:.5s}
@media(prefers-reduced-motion:reduce){
  .fade-up,.hero-visual img,.pulse-ring,.drift-layer{animation:none !important}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ============================ Other ============================ */
.space-break {
  margin: 30px 0;
}

.three-col { margin-top:3rem; display:grid; gap:1.5rem; }
@media(min-width:768px) {
  .three-col { grid-template-columns:repeat(3,1fr); }
}

@media(min-width:768px) {
  .test { grid-template-columns:100px repeat(2,1fr); }
}



/* ============================ TEST ============================ */
/* ============================ TEST ============================ */


/* Container styling */
.tech-steps-container {
  display: flex;
  flex-direction: column;
  gap: 5rem; /* Large spacing between steps for a clean look */
  margin-top: 3rem;
}

#tech .section-title {
  text-align: center;
  margin-bottom: 2rem;
}

/* Individual Row Layout */
.step-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

/* Typography & Content Layout */
.step-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.step-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ice); /* color: #0076ff; */
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

.step-content h3 {
  font-size: 1.5rem;
  margin: 0;
  color: #111; /* Dark slate/black */
}

.step-content p {
  color: #555; /* Soft gray for readability */
  line-height: 1.6;
  margin: 0;
}

/* Image Wrapper and Styles */
.step-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px; /* Smooth modern corners */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Soft, premium shadow */
}

/* Desktop Responsiveness & Alternating Layout */
@media (min-width: 768px) {
  .step-row {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  /* Automatically flips every second row for visual balance */
  .step-row:nth-child(even) .step-content {
    grid-column: 2;
  }
  
  .step-row:nth-child(even) .step-image {
    grid-column: 1;
    grid-row: 1;
  }
}