/* UTTec official page styles
   Typography unified to Microsoft JhengHei / 微軟正黑體
*/
html, body, button, input, select, textarea {
  font-family: "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif;
}

:root {
  --ink:#132a45;
  --ink2:#43546a;
  --muted:#8290a2;
  --line:#dfe7f0;
  --panel:rgba(255,255,255,.78);
  --shadow:0 18px 55px rgba(27,54,83,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;}
body{
  margin:0;
  color:var(--ink);
  font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif;
  background:#eef0ef;
    
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}

.page{
  min-height:100vh;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.page::before,.page::after{
  content:"";
  position:absolute;
  inset:auto;
  width:420px;height:900px;
  border:1px solid rgba(93,123,165,.16);
  transform:rotate(-34deg);
  z-index:-1;
}
.page::before{left:-240px;top:-170px}
.page::after{right:-270px;top:-160px}
.glow{
  position:absolute;left:-90px;bottom:-90px;width:270px;height:270px;border-radius:50%;
  background:radial-gradient(circle,rgba(138,161,118,.22),transparent 68%);filter:blur(4px);z-index:-1
}

.shell{
  width:min(1600px,96vw);
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:22px 20px 20px;
}

.nav{
  height:64px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}
.brand{display:flex;align-items:center;justify-content:center;gap:13px}
.mark{
  width:46px;height:46px;position:relative;
  filter:drop-shadow(0 8px 12px rgba(26,62,111,.12))
}
.mark::before,.mark::after{
  content:"";position:absolute;top:4px;width:17px;height:33px;border-radius:3px 3px 11px 11px;
}
.mark::before{left:6px;background:linear-gradient(180deg,#4776b5,#173f77)}
.mark::after{right:6px;background:linear-gradient(180deg,#efc176,#bb7f27)}
.mark i{position:absolute;left:18px;top:0;width:10px;height:35px;background:#f9fbff;transform:skewY(-28deg);display:block}
.brand-text strong{display:block;font-size:25px;letter-spacing:.13em;line-height:1}
.brand-text span{display:block;font-weight:700;letter-spacing:.25em;font-size:13px;margin-top:6px}
.nav-links{display:flex;gap:22px;align-items:center;font-size:13px;letter-spacing:.08em;color:#52647a}
.nav-links a{position:relative;padding:8px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1px;background:var(--ink);transition:.25s}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;justify-content:flex-end}
.cta{
  display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid rgba(44,76,115,.18);
  border-radius:999px;background:rgba(255,255,255,.68);backdrop-filter:blur(8px);font-size:13px;letter-spacing:.06em;
  transition:.25s;box-shadow:0 8px 24px rgba(45,65,91,.06)
}
.cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(45,65,91,.12)}
.cta b{font-size:18px;line-height:0;transform:translateY(-1px)}

.hero{
  padding:22px 0 18px;
  text-align:center;
  position:relative;
}
.kicker{
  font-size:11px;
  letter-spacing:.55em;
  color:#9aa9ba;
  text-transform:uppercase;
  margin-bottom:13px;
}
.hero h1{
  margin:0;
  font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif;
  font-size:clamp(42px,4.2vw,72px);
  line-height:1.12;
  font-weight:700;
  letter-spacing:.12em;
  color:#102b48;
  text-shadow:0 6px 18px rgba(11,43,77,.05);
}
.hero p{
  margin:14px auto 0;
  max-width:980px;
  font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif;
  color:#566b84;
  font-size:clamp(15px,1.15vw,20px);
  letter-spacing:.10em;
  line-height:1.75;
}
.micro{
  display:flex;justify-content:center;align-items:center;gap:18px;margin-top:16px;
  color:#9ba9b9;font-size:10px;letter-spacing:.45em;text-transform:uppercase
}
.micro span:not(:last-child)::after{content:"×";margin-left:18px;color:#c2ccd7}

.products{
  margin-top:2px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  flex:1;
  align-items:stretch;
}
.product-card{
  min-width:0;
  border:1px solid rgba(216,226,237,.9);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.70));
  overflow:hidden;
  box-shadow:0 10px 34px rgba(34,60,88,.07);
  transition:transform .33s ease,box-shadow .33s ease,border-color .33s ease;
  display:flex;
  flex-direction:column;
  outline:none;
}
.product-card:hover,.product-card:focus-visible{
  transform:translateY(-8px);
  box-shadow:var(--shadow);
  border-color:rgba(135,158,184,.45)
}
.product-visual{
  position:relative;
  aspect-ratio:1.03/1;
  overflow:hidden;
}
.product-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 64%,rgba(14,34,57,.08) 100%);
  pointer-events:none
}
.product-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)
}
.product-card:hover img,.product-card:focus-visible img{transform:scale(1.035)}
.index{
  position:absolute;top:13px;right:13px;z-index:2;
  width:32px;height:32px;border-radius:999px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  display:grid;place-items:center;font-size:10px;letter-spacing:.08em;color:#4b6179;
  border:1px solid rgba(255,255,255,.8)
}
.product-copy{padding:15px 14px 13px;display:flex;flex-direction:column;flex:1}
.product-copy h2{
  margin:0;text-align:center;
  font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif;
  font-size:clamp(16px,1.1vw,21px);line-height:1.35;letter-spacing:.04em
}
.product-copy p{
  margin:6px 0 12px;text-align:center;color:#6b7581;
  font-size:12px;letter-spacing:.04em
}
.feature-row{
  border-top:1px solid rgba(210,220,231,.76);
  padding-top:10px;margin-top:auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:5px
}
.feature{
  min-width:0;text-align:center;color:#6d7888;font-size:10px;line-height:1.25;
  display:flex;flex-direction:column;align-items:center;gap:5px
}
.icon{width:25px;height:25px;display:grid;place-items:center}
.icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tone-blue .icon{color:#5d789a}
.tone-warm .icon{color:#9a725b}
.tone-earth .icon{color:#826756}
.tone-rose .icon{color:#9a6a59}

.footer{
  min-height:54px;
  display:flex;align-items:center;justify-content:center;gap:24px;
  color:#72839a;font-size:11px;letter-spacing:.24em;
}
.footer .line{width:84px;height:1px;background:linear-gradient(90deg,transparent,#b9c5d3)}
.footer .line.r{background:linear-gradient(90deg,#b9c5d3,transparent)}
.footer b{font-weight:600;color:#466079}
.side-note{
  position:absolute;top:105px;font-size:10px;line-height:2;letter-spacing:.28em;color:#8190a2;text-transform:uppercase;
}
.side-note.left{left:3.6vw}
.side-note.right{right:3.6vw;text-align:left}
.side-note strong{display:block;color:#51657c;font-size:11px;letter-spacing:.18em;margin-bottom:6px}

@media (max-width:1180px){
  .shell{width:100%;padding-inline:16px}
  .nav-links{display:none}
  .nav{grid-template-columns:1fr auto 1fr}
  .hero{padding-top:16px}
  .products{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    align-items:stretch;
  }
  .product-copy{padding:13px 11px}
  .product-copy h2{font-size:18px}
  .feature{font-size:9px}
  .side-note{display:none}
}

@media (max-width:900px){
  .page{overflow:visible}
  .shell{min-height:auto;padding-bottom:30px}
  .nav{grid-template-columns:1fr auto;height:68px}
  .brand{justify-content:flex-start}
  .nav-right{justify-content:flex-end}
  .hero{padding:18px 0 16px}
  .hero h1{font-size:clamp(36px,8vw,56px);letter-spacing:.06em}
  .hero p{max-width:680px;letter-spacing:.035em}
  .products{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    overflow:visible;
    padding:4px 0 18px;
  }
  .product-card{
    width:100%;
    min-width:0;
  }
  .product-visual{aspect-ratio:1.16/1}
  .product-copy h2{font-size:19px}
  .footer{
    flex-wrap:wrap;
    padding-top:10px;
    letter-spacing:.12em;
    gap:10px 16px;
  }
}

@media (max-width:560px){
  .shell{padding-inline:12px}
  .brand-text strong{font-size:20px}
  .brand-text span{font-size:11px}
  .mark{width:38px;height:38px}
  .cta{padding:9px 12px;font-size:12px}
  .hero{padding:16px 4px 14px}
  .kicker{letter-spacing:.28em;font-size:9px}
  .hero h1{font-size:36px;line-height:1.2;letter-spacing:.035em}
  .hero p{font-size:14px;line-height:1.7}
  .micro{
    gap:7px;
    font-size:8px;
    letter-spacing:.12em;
    flex-wrap:wrap;
  }
  .micro span:not(:last-child)::after{margin-left:7px}
  .products{
    grid-template-columns:1fr;
    gap:16px;
  }
  .product-card{
    max-width:100%;
    border-radius:16px;
  }
  .product-visual{aspect-ratio:1.35/1}
  .product-copy{padding:15px 14px 14px}
  .product-copy h2{font-size:20px}
  .product-copy p{font-size:13px}
  .feature{font-size:11px}
  .icon{width:27px;height:27px}
  .icon svg{width:24px;height:24px}
  .footer .line{display:none}
  .footer{
    font-size:10px;
    text-align:center;
    line-height:1.8;
    gap:6px 12px;
  }
}

/* Desktop presentation mode: naturally fits a 16:9 viewport while remaining a real responsive web page. */
@media (min-width:1181px) and (min-aspect-ratio:16/10){
  .shell{min-height:min(100vh,900px)}
  .hero{padding-top:16px;padding-bottom:14px}
}