:root{
  --bg:#ebedf0;
  --page:#ffffff;
  --navText:#eef6ff;
  --ink:#121b29;
  --muted:#5d6979;
  --line:#dce4ee;
  --blue:#1570dc;
  --blue2:#49b2ff;
  --shadow:0 22px 56px rgba(10,22,38,.13);
  --font-ui:"Segoe UI Variable","Inter","Aptos","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}
a{text-decoration:none;color:inherit}
.page-shell{
  width:min(1820px,calc(100% - 36px));
  margin:20px auto 32px;
  background:var(--page);
  box-shadow:var(--shadow);
}
.wrap{
  width:min(1540px,calc(100% - 58px));
  margin:0 auto;
}

.hero{
  position:relative;
  min-height:860px;
  overflow:hidden;
  background:#061730;
}
.hero-plate{
  position:absolute;
  inset:0;
  background-image:url('assets/hero-plate.png');
  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;
  transform:scale(1.01);
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(4,18,38,.88) 0%,
      rgba(4,22,45,.80) 20%,
      rgba(6,29,59,.46) 42%,
      rgba(7,38,75,.14) 62%,
      rgba(7,38,75,0) 100%),
    linear-gradient(180deg,
      rgba(4,18,38,.16) 0%,
      rgba(4,18,38,0) 22%,
      rgba(4,18,38,0) 76%,
      rgba(4,18,38,.10) 100%);
}
.hero-gridlines{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 24%);
  pointer-events:none;
}
.site-header{
  position:relative;
  z-index:20;
  background:linear-gradient(180deg,rgba(14,28,48,.22) 0%, rgba(10,20,36,.10) 100%);
  backdrop-filter: blur(4px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:#fff;
}
.brand img{
  width:64px;
  height:64px;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(44,147,255,.16));
}
.brand-word{
  font-size:3rem;
  font-weight:900;
  letter-spacing:.012em;
  line-height:1;
}
.main-nav{
  display:flex;
  align-items:center;
  gap:54px;
}
.main-nav a{
  position:relative;
  color:var(--navText);
  text-transform:uppercase;
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.04em;
  transition:color .22s ease, text-shadow .22s ease;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,rgba(73,178,255,0), rgba(73,178,255,.9), rgba(73,178,255,0));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s ease;
}
.main-nav a:hover{color:#ffffff;text-shadow:0 0 10px rgba(73,178,255,.25)}
.main-nav a:hover::after{transform:scaleX(1)}

.hero-content{
  position:relative;
  z-index:2;
  min-height:764px;
  display:flex;
  align-items:flex-start;
}
.hero-copy{
  max-width:710px;
  color:#fff;
  padding:42px 0 56px;
}
.eyebrow{
  display:inline-block;
  margin-bottom:18px;
  color:#cfe4ff;
  font-size:1rem;
  font-style:italic;
}
.hero h1{
  margin:0;
  font-size:4.9rem;
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:900;
}
.hero h1 span{display:block}
.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:30px;
}
.btn{
  position:relative;
  min-width:220px;
  min-height:60px;
  padding:0 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.04em;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-120% auto -120% -20%;
  width:40%;
  transform:translateX(-220%) rotate(18deg);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
  pointer-events:none;
}
.btn:hover{transform:translateY(-1px)}
.btn:hover::before{animation:btn-sheen 1.4s ease}
@keyframes btn-sheen{
  from{transform:translateX(-220%) rotate(18deg)}
  to{transform:translateX(620%) rotate(18deg)}
}
.btn-primary{
  color:#fff;
  background:linear-gradient(180deg,#1684f7 0%, #0a5fc5 100%);
  box-shadow:0 14px 28px rgba(10,95,197,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{
  box-shadow:0 16px 30px rgba(10,95,197,.38), 0 0 0 1px rgba(102,191,255,.22) inset;
}
.btn-secondary{
  color:#fff;
  background:linear-gradient(180deg,rgba(10,22,38,.42), rgba(10,22,38,.34));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.btn-secondary:hover{border-color:rgba(73,178,255,.42)}
.twinkle,.twinkle-card,.twinkle-phone{position:relative}
.twinkle::after,.twinkle-card::after,.twinkle-phone::after{
  content:"✦";
  position:absolute;
  color:rgba(180,225,255,.95);
  font-size:12px;
  text-shadow:0 0 10px rgba(120,200,255,.9), 0 0 18px rgba(120,200,255,.55);
  animation:twinkle 3.2s ease-in-out infinite;
  pointer-events:none;
}
.twinkle::after{top:8px; right:12px}
.twinkle-card::after{top:10px; right:14px}
.twinkle-phone::after{top:14px; right:18px; font-size:14px}
.twinkle-card:nth-child(2)::after{animation-delay:.7s}
.twinkle-card:nth-child(3)::after{animation-delay:1.4s}
.twinkle-card:nth-child(4)::after{animation-delay:2.1s}
.twinkle-phone::after{animation-delay:.9s}
@keyframes twinkle{
  0%,100%{opacity:.15; transform:scale(.8)}
  35%{opacity:.95; transform:scale(1)}
  55%{opacity:.35; transform:scale(.9)}
}

.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.hero-tags span{
  padding:9px 14px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.12), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:.94rem;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.content-section{
  padding:82px 0;
  background:linear-gradient(135deg,#ffffff 0%, #f8fbff 36%, #eef7ff 72%, #e7f2ff 100%);
}
.dark-photo-section{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:transparent;
}
.services-section{padding-top:56px}
.services-intro{margin-bottom:26px}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.feature-card{
  position:relative;
  background:linear-gradient(180deg,rgba(11,25,42,.92) 0%, rgba(7,19,33,.96) 100%);
  border:1px solid rgba(95,188,255,.22);
  border-radius:22px;
  padding:24px;
  box-shadow:0 12px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.04);
}
.feature-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,rgba(73,178,255,0), rgba(73,178,255,.72), rgba(73,178,255,0));
  opacity:.7;
}
.feature-card h3{
  margin:0 0 10px;
  color:#fff;
  font-size:1.16rem;
}
.feature-card p{
  margin:0;
  color:rgba(255,255,255,.84);
}

.section-grid{
  display:grid;
  grid-template-columns:1.07fr .93fr;
  gap:42px;
  align-items:start;
}
.section-label{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:#e8f2fc;
  color:#0f4998;
}
.section-label.on-dark{
  background:rgba(255,255,255,.12);
  color:#fff;
}
.section-copy h2,.section-title,.contact-grid h2{
  margin:18px 0 16px;
  font-size:3rem;
  line-height:1.06;
  letter-spacing:-.035em;
}
.section-copy p{
  color:var(--muted);
  font-size:1.12rem;
}

.dark-photo-section .section-plate{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:left center;
  background-repeat:no-repeat;
  transform:scale(1.03);
}
.materials-section .section-plate{background-image:url('assets/materials-plate-flipped.png')}
.contact-section .section-plate{background-image:url('assets/contact-plate-flipped.png')}
.dark-photo-section .section-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
      rgba(4,18,38,.86) 0%,
      rgba(5,23,45,.74) 24%,
      rgba(7,30,57,.45) 46%,
      rgba(7,38,75,.16) 68%,
      rgba(7,38,75,.10) 100%);
}
.dark-photo-section .wrap{
  position:relative;
  z-index:3;
}
.on-dark-copy p,.contact-intro{color:rgba(255,255,255,.88)}
.dark-stack-list{
  display:grid;
  gap:14px;
}
.stack-item{
  border-radius:16px;
  padding:18px;
}
.dark-stack-item{
  background:linear-gradient(180deg,rgba(11,25,42,.68), rgba(7,19,33,.76));
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(6px);
}
.stack-item strong{display:block;margin-bottom:6px}
.dark-stack-item strong{color:#fff}
.dark-stack-item span{color:rgba(255,255,255,.82)}

/* Materials animation - overlap timing refinement */
.materials-section{
  padding-bottom:82px;
}
.materials-wrap{
  position:relative;
  z-index:3;
}
.materials-grid{
  position:relative;
  z-index:3;
  padding-bottom:0;
}
.materials-travel-track{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:min(1540px,calc(100% - 58px));
  top:280px;
  height:206px;
  overflow:visible;
  pointer-events:none;
  z-index:2;
}
.travel-item{
  position:absolute;
  left:-420px;
  top:0;
  width:360px;
  height:202px;
  opacity:0;
  animation:travel-path 28s linear infinite;
  will-change:left, opacity;
}
.travel-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:22px;
  display:block;
  box-shadow:0 16px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.travel-2{animation-delay:7s}
.travel-3{animation-delay:14s}
.travel-4{animation-delay:21s}
@keyframes travel-path{
  0%        {left:-420px; opacity:1}
  3.5714%   {left:0px; opacity:1}
  25%       {left:calc(56% - 360px); opacity:1}
  35.7143%  {left:calc(72% - 360px); opacity:0}
  100%      {left:calc(72% - 360px); opacity:0}
}
.material-cycle{
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
  animation:highlight-cycle 28s infinite ease-in-out;
}
.material-cycle strong,.material-cycle span{
  transition:color .35s ease;
}
.material-1{animation-delay:0s}
.material-2{animation-delay:7s}
.material-3{animation-delay:14s}
.material-4{animation-delay:21s}
@keyframes highlight-cycle{
  0%,100%{
    border-color:rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    transform:translateY(0);
    background:linear-gradient(180deg,rgba(11,25,42,.68), rgba(7,19,33,.76));
  }
  0.5%,24.5%{
    border-color:rgba(120,210,255,.64);
    box-shadow:0 0 0 1px rgba(120,210,255,.18), 0 0 28px rgba(55,147,240,.18), inset 0 1px 0 rgba(255,255,255,.10);
    transform:translateY(-2px);
    background:linear-gradient(180deg,rgba(20,54,92,.82), rgba(12,31,57,.92));
  }
  25.5%,99.5%{
    border-color:rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    transform:translateY(0);
    background:linear-gradient(180deg,rgba(11,25,42,.68), rgba(7,19,33,.76));
  }
}

.process-section{background:linear-gradient(135deg,#ffffff 0%, #f8fbff 36%, #eef7ff 72%, #e7f2ff 100%)}
.section-title{max-width:14ch}
.process-title{
  max-width:none;
  white-space:nowrap;
}
.process-grid{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.process-card{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(201,222,242,.9);
  border-radius:20px;
  padding:24px;
  box-shadow:0 9px 18px rgba(16,39,67,.05);
  backdrop-filter:blur(3px);
}
.step-badge{
  width:42px;
  height:42px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(180deg,#1a7ae0 0%, #0f60c0 100%);
  font-weight:800;
  margin-bottom:14px;
}
.process-card h3{margin:0 0 8px;color:#123761}
.process-card p{margin:0;color:var(--muted)}

.contact-band{padding:86px 0}
.contact-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:36px;
}
.contact-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  padding:28px;
  backdrop-filter:blur(8px);
}
.contact-row{
  position:relative;
  display:grid;
  grid-template-columns:170px 1fr;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.contact-row:last-child{border-bottom:none}
.phone-row span{
  color:#ffffff;
  font-weight:800;
  text-shadow:0 0 12px rgba(120,200,255,.18);
}

@media (max-width:1260px){
  .feature-grid,.process-grid{grid-template-columns:repeat(2,1fr)}
  .section-grid,.contact-grid{grid-template-columns:1fr}
  .hero{min-height:760px}
  .hero-content{min-height:664px}
  .hero h1{font-size:4.15rem}
  .process-title{white-space:normal}
  .materials-travel-track{
    width:100%;
    left:0;
    transform:none;
    top:356px;
    height:184px;
  }
  .travel-item{
    width:320px;
    height:180px;
  }
  @keyframes travel-path{
    0%        {left:-360px; opacity:1}
    3.5714%   {left:0px; opacity:1}
    25%       {left:calc(56% - 320px); opacity:1}
    35.7143%  {left:calc(72% - 320px); opacity:0}
    100%      {left:calc(72% - 320px); opacity:0}
  }
}
@media (max-width:960px){
  .page-shell{width:min(100%,calc(100% - 8px)); margin:4px auto 10px}
  .wrap{width:min(1540px,calc(100% - 28px))}
  .nav{display:grid; grid-template-columns:1fr}
  .main-nav{gap:22px; flex-wrap:wrap}
  .hero-overlay,
  .dark-photo-section .section-overlay{
    background:linear-gradient(180deg,
      rgba(4,18,38,.86) 0%,
      rgba(4,22,45,.70) 32%,
      rgba(6,29,59,.30) 58%,
      rgba(7,38,75,.08) 100%);
  }
  .materials-travel-track{
    width:100%;
    left:0;
    transform:none;
    top:416px;
    height:160px;
  }
  .travel-item{
    width:288px;
    height:162px;
  }
  @keyframes travel-path{
    0%        {left:-320px; opacity:1}
    3.5714%   {left:0px; opacity:1}
    25%       {left:calc(56% - 288px); opacity:1}
    35.7143%  {left:calc(72% - 288px); opacity:0}
    100%      {left:calc(72% - 288px); opacity:0}
  }
}
@media (max-width:680px){
  .brand-word{font-size:1.86rem}
  .brand img{width:56px;height:56px}
  .hero{min-height:680px}
  .hero-content{min-height:584px}
  .hero h1{font-size:3rem}
  .btn{width:100%; min-width:0}
  .feature-grid,.process-grid{grid-template-columns:1fr}
  .contact-row{grid-template-columns:1fr}
  .materials-travel-track{
    width:100%;
    left:0;
    transform:none;
    top:460px;
    height:146px;
  }
  .travel-item{
    width:250px;
    height:140px;
  }
  @keyframes travel-path{
    0%        {left:-280px; opacity:1}
    3.5714%   {left:0px; opacity:1}
    25%       {left:calc(56% - 250px); opacity:1}
    35.7143%  {left:calc(72% - 250px); opacity:0}
    100%      {left:calc(72% - 250px); opacity:0}
  }
}