:root{
  --text:#0f172a; --muted:#475569; --bg:#ffffff; --line:#e5e7eb;
  --accent:#f97316; --header:#ff9501; --header-h:64px; --radius:16px;
  --shadow-sm:0 6px 20px rgba(0,0,0,.06); --shadow:0 18px 50px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; overflow-x:hidden}
.wrap{width:min(1200px,92vw); margin-inline:auto}
.visually-hidden{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0}
.header{
  position:fixed; top:max(10px, env(safe-area-inset-top, 0px)); left:50%; transform:translateX(-50%);
  width:calc(100vw - 16px); max-width:1200px; height:var(--header-h,56px); z-index:1000; overflow:hidden;
  background:rgba(255,148,4,0.5); color:#fff; border-radius:9999px; overflow:visible; /* Allow menu to show */
  box-shadow:0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter:saturate(180%) blur(10px);
  transition: transform .30s ease, opacity .30s ease;
}
.header .wrap{display:grid; grid-template-columns:repeat(12,1fr); align-items:center; gap:12px; padding:8px 12px}
.brand{grid-column:1 / span 4; display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:900}
.brand-mark{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#fff; color:var(--header); font-weight:900; box-shadow:var(--shadow-sm)}
.brand-name{font-weight:900}
.nav{grid-column:9 / -1; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px}
.nav-actions{justify-self:end; display:flex; align-items:center; gap:8px}
.nav-actions .nav-link{color:#fff; text-decoration:none; font-weight:800; padding:8px 8px; border-radius:10px}
.burger{justify-self:end; display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid rgba(255,255,255,.5); border-radius:12px; background:transparent; position:relative; transition:transform .25s ease}
.burger:hover{transform:scale(1.03)}
.burger span{position:absolute; left:10px; right:10px; height:2px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .25s ease}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:26px}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-panel{
  position:absolute; right:12px; top:calc(100% + 8px); width:min(520px, calc(100vw - 24px));
  background:#fff; color:var(--text); border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.10);
  transform-origin:top right; transform:translateY(-10px) scale(.96); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.2,.6,.2,1);
}
.menu-panel.open{opacity:1; pointer-events:auto; transform:translateY(0) scale(1)}
.menu-inner{display:flex; gap:8px; padding:12px; flex-wrap:wrap}
.menu-inner a{display:inline-block; padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--text); font-weight:800; border:1px solid var(--line)}
.menu-inner a:hover{background:#f8fafc}
.btn{appearance:none; border:1px solid rgba(249,115,22,.65); background:rgba(249,115,22,.65); color:#fff; padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer; text-decoration:none}
.btn.ghost{background:rgba(255,255,255,.65); color:var(--header); border-color:rgba(255,255,255,.65)}
.btn.small{padding:8px 10px; border-radius:10px}
.btn.tiny{padding:6px 10px; border-radius:10px}
.btn.outline{background:rgba(255,255,255,.65); color:var(--text); border-color:rgba(15,23,42,.65)}
.hero{position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:#fff}
.hero-logo{display:block; width:100vw; height:auto;}
.hero-wave{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:auto; display:block; pointer-events:none}
.header-spacer{height:calc(var(--header-h) + 16px)}
.section{padding:48px 0}
.section-muted{background:#fafafa}
.centered{text-align:center}
.title{font-size:clamp(28px,4.2vw,48px); margin:0 0 12px}
.lead{font-size:clamp(16px,2.2vw,20px); color:#475569; margin:0 0 10px}
.lead.max{max-width:900px; margin-left:auto; margin-right:auto}
.section-title{font-size:clamp(22px,3vw,32px); margin:0 0 14px;}
.grid.products{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.product{background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:16px; text-align:left; box-shadow:0 6px 20px rgba(0,0,0,.06)}
.product-title{margin:0 0 6px; font-size:20px}
.product-desc{margin:0 0 12px; color:#475569}
.product-btn{display:inline-block}
.contact-card{
  max-width:960px; margin:16px auto 0; border-radius:20px; overflow:hidden; position:relative;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 20px 60px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.7);
  animation:cardFloat .6s ease both;
}
@keyframes cardFloat{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}}
.contact-form{padding:20px; text-align:left}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
.contact-form label{display:flex; flex-direction:column; gap:6px; font-weight:700}
.contact-form input, .contact-form textarea{
  border:1px solid var(--line); border-radius:12px; padding:12px 12px; font:inherit; outline:none; transition:border-color .15s ease, box-shadow .15s ease;
  background:var(--bg); color: var(--text);
}
.contact-form input:focus, .contact-form textarea:focus{border-color:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.2)}
.contact-form .full{margin-bottom:12px}
.form-actions{display:flex; gap:10px; align-items:center}
.btn.accent{background:rgba(249,115,22,.65); border-color:rgba(249,115,22,.65); color:#fff}
.form-status{margin-top:8px; color:#16a34a; font-weight:700}
.footer{border-top:1px solid #e5e7eb; padding:22px 0; margin-top:10px}
.info-box-wrapper {
  transition: transform 0.3s ease;
}
.info-box-wrapper:hover {
  transform: translateY(-5px);
}
.info-box {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 0 0 18px 18px;
  padding: 1px 24px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.foot-dock.static{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-start;
  background:rgba(255,149,1,.75); color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:9999px; padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.foot-dock.static .copy{opacity:.95}
.foot-dock.static a{color:#fff; text-decoration:none; opacity:.95}
.foot-dock.static a:hover{opacity:1; text-decoration:underline}
.chip{border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:6px 10px; background:rgba(255,255,255,.2); color:#fff; font-weight:800; cursor:pointer}
@media (max-width: 1080px){.brand{grid-column:1 / span 5}.nav{grid-column:8 / -1}}
@media (max-width: 980px){.grid.products{grid-template-columns:repeat(2, minmax(0,1fr))}.contact-form .row{grid-template-columns:1fr}}
@media (max-width: 640px){.grid.products{grid-template-columns:1fr}}

/* D406 Page Specific Styles */
.product-page-content{max-width:900px; margin:32px auto 0; text-align:left;}
.info-box-wrapper h2 {
  font-size:clamp(20px, 2.8vw, 28px);
  background: #1a1a1a;
  color: #fff;
  padding: 12px 24px;
  border-radius: 18px 18px 0 0; margin:0;}
.product-page-content ul{padding-left:20px; margin-bottom:16px;}
.product-page-content li{margin-bottom:8px;}
.table-container{overflow-x:auto; margin:24px 0; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm);}
table{width:100%; border-collapse:collapse; text-align:left;}
th, td{padding:12px 16px; border-bottom:1px solid var(--line);}
thead{background:#fafafa;}
th{font-weight:700;}
tbody tr:last-child td{border-bottom:0;}
.feature-list dt{font-weight:700; font-size:1.1em; margin-top:16px;}
.feature-list dd{margin-left:0; margin-bottom:8px; color:#475569;}
.foot-dock.static{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-start;
  background:rgba(255,149,1,.75); color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:9999px; padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.foot-dock.static .copy{opacity:.95}
.foot-dock.static a{color:#fff; text-decoration:none; opacity:.95}
.foot-dock.static a:hover{opacity:1; text-decoration:underline}
.chip{border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:6px 10px; background:rgba(255,255,255,.2); color:#fff; font-weight:800; cursor:pointer}
@media (max-width: 1080px){.brand{grid-column:1 / span 5}.nav{grid-column:8 / -1}}
@media (max-width: 980px){.grid.products{grid-template-columns:repeat(2, minmax(0,1fr))}.contact-form .row{grid-template-columns:1fr}}
@media (max-width: 640px){.grid.products{grid-template-columns:1fr}.header{
  position:fixed; top:max(10px, env(safe-area-inset-top, 0px)); left:50%; transform:translateX(-50%);
  width:calc(100vw - 16px); max-width:1200px; height:var(--header-h,56px); z-index:1000; overflow:hidden;
  background:rgba(255,148,4,0.5); color:#fff; border-radius:9999px; overflow:visible; /* Allow menu to show */
  box-shadow:0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter:saturate(180%) blur(10px);
  transition: transform .30s ease, opacity .30s ease;
}}


@media (max-width: 640px){
  html, body { margin:0; padding:0; }
  .header-spacer{ height:0 !important; }
  .header{
  position:fixed; top:max(10px, env(safe-area-inset-top, 0px)); left:50%; transform:translateX(-50%);
  width:calc(100vw - 16px); max-width:1200px; height:var(--header-h,56px); z-index:1000; overflow:visible; /* Allow menu to show */
  background:rgba(255,148,4,0.5); color:#fff; border-radius:9999px;
  box-shadow:0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter:saturate(180%) blur(10px);
  transition: transform .30s ease, opacity .30s ease;
}
}

@media (max-width: 640px){
  .header.hidden-mobile{
    transform: translate(-50%, -120%) !important;
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 640px){
  .burger{ display:inline-grid !important; }
}

@media (min-width: 641px){
  .burger{ display:none !important; }
  .menu-panel{ display:none !important; }
  .nav-actions{ display:flex !important; }
}


.brand-mark{ display:block; transform-origin:center center; will-change:transform; }

.menu-panel{ 
  position:absolute; right:12px; top:calc(100% + 8px); width:min(320px, calc(100vw - 24px));
  background:#ffffff; color:var(--text); border-radius:18px;
  border: 1px solid rgba(0,0,0,.15); box-shadow:0 18px 50px rgba(0,0,0,.10);
  transform-origin:top right; transform:translateY(-10px) scale(.96); opacity:0; pointer-events:none;
  transition:opacity .4s ease, transform .4s cubic-bezier(.2,.6,.2,1);
}
.menu-panel.open{
  opacity:1; pointer-events:auto; transform:translateY(0) scale(1);
}
.menu-panel.open .menu-inner a {
  opacity: 1;
  transform: translateX(0);
}
.menu-panel.open .menu-inner a:nth-child(2){ transition-delay: .05s; }
.menu-panel.open .menu-inner a:nth-child(3){ transition-delay: .1s; }
.menu-panel.open .menu-inner a:nth-child(4){ transition-delay: .15s; }
.menu-panel.open .menu-inner a:nth-child(5){ transition-delay: .2s; }
.menu-panel.open .menu-inner a:nth-child(6){ transition-delay: .25s; }
.menu-inner{ display:flex; flex-direction:column; gap:6px; padding:10px; overflow: hidden; }
.menu-inner a{
  display:block; padding:12px 14px; border-radius:12px; text-decoration:none; color:var(--text); background:var(--bg); border: 1px solid var(--line);
  transition: background-color .18s ease, opacity .4s ease, transform .4s ease;
  opacity: 0;
  transform: translateX(15px);
}
.menu-inner a:hover{ background:#f8fafc; }
.menu-inner a:active{ transform: translateY(0); }

.footer{ background:#ff9404; padding:28px 0; margin-top:10px; }
.footer .wrap{ max-width:1000px; }
.foot-dock.static{
  display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap;
  background:#ff9404; color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:18px; padding:12px 18px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  margin-inline:auto; font-size:.92rem;
}
.foot-dock.static a{ color:#fff; opacity:.9; text-decoration:none }
.foot-dock.static a:hover{ opacity:1; text-decoration:underline }
.btn.accent{ background:#ff9404; color:#fff; border-color:rgba(255,255,255,.35); }
.btn.accent:hover{ filter:brightness(.95); }

@media (max-width: 960px){
  .hero{
    min-height: 56vh;
    background: url('assets/web.png') center/cover no-repeat !important;
  }
  .hero .hero-logo{ display:none !important; }
}

html, body { background:#ff9404; }