
:root{
  /* Enterprise-tech: clean + high-contrast + wave hero */
  --page:#ffffff;
  --ink:#06101F;
  --muted:#22384f;

  --nav-bg: rgba(255,255,255,.96);
  --nav-border: rgba(6,16,31,.10);
  --shadow: 0 10px 28px rgba(2,10,18,.10);

  --card:#ffffff;
  --card-border: rgba(6,16,31,.10);

  --hero:#06142B;
  --hero-ink:#ffffff;
  --hero-muted: rgba(255,255,255,.88);

  /* Accents (keep harmonized) */
  --accent:#00C2FF;    /* neon blue */
  --accent2:#FF2D55;   /* neon red */
  --ok:#15C38A;
  --danger:#E5254F;

  --radius: 18px;
  --radius-sm: 14px;
  --ring: 0 0 0 3px rgba(0,194,255,.26);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* subtle dot grid overlay */
/* (Removed noisy dot grid for a cleaner enterprise look) */

.container{max-width:1100px; margin:0 auto; padding:22px 16px 56px}

/* ---------------- Header (Cisco-like) ---------------- */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius: 16px;
  border:1px solid var(--nav-border);
  background: var(--nav-bg);
  box-shadow: var(--shadow);
  position: sticky;
  top: 12px;
  z-index: 50;
}

/* Centered header (Home) */
.nav-center{justify-content:center}
.nav-center .brand{margin:0 auto}

.brand{display:flex; align-items:center; gap:10px; min-width: 0}
.logo{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: url("/assets/logo-tiemanai-mark.png") center/contain no-repeat;
  box-shadow: none;
  flex:none;
}
.brand-name{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1;
  color: #06101F;
  white-space: nowrap;
}

.links{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.nav-link,
.links a{
  font-size:13px;
  color: rgba(6,16,31,.78);
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid transparent;
}
.nav-link:hover,
.links a:hover{
  color: var(--ink);
  border-color: rgba(8,24,39,.10);
  background: rgba(255,255,255,.60);
}

/* injected mobile menu button (created by app.js) */
.menu-btn{
  display:none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border:1px solid rgba(8,24,39,.12);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 24px rgba(3,12,22,.08);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.menu-btn:focus{outline:none; box-shadow: var(--shadow), var(--ring)}
.menu-icon{
  width:18px;
  height:12px;
  position:relative;
}
.menu-icon::before,
.menu-icon::after,
.menu-icon span{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(8,24,39,.88), rgba(0,194,255,.85), rgba(255,45,85,.80));
}
.menu-icon::before{top:0}
.menu-icon span{top:5px}
.menu-icon::after{bottom:0}

.mobile-menu{
  margin-top: 10px;
  padding: 10px;
  border-radius: 18px;
  border:1px solid rgba(8,24,39,.12);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
.mobile-menu a{
  display:block;
  padding: 11px 12px;
  border-radius: 14px;
  color: rgba(8,24,39,.86);
}
.mobile-menu a:hover{background: rgba(0,194,255,.08)}

@media (max-width: 780px){
  .links{display:none}
  .menu-btn{display:inline-flex}
}

/* ---------------- Hero band (dark + enterprise AI) ---------------- */
.hero{
  margin-top: 18px;
  padding: 56px 22px 34px;
  border-radius: 22px;
  color: var(--hero-ink);
  background: linear-gradient(180deg, #071A33 0%, #061225 60%, #050F1D 100%);
  position:relative;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(3,12,22,.18);
}

/* Background image (HD composite) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: image-set(
    url("/assets/hero-bg-zs-1280.webp") 1x,
    url("/assets/hero-bg-zs-1920.webp") 2x
  );
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity: 1;
  /* Crisp: no extra scaling */
  filter: none;
  pointer-events:none;
  z-index: 0;
}

/* Contrast layer to keep text readable (but keep the artwork visible) */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    /* subtle tech glow */
    radial-gradient(circle at 45% 32%, rgba(0,194,255,.10), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 72% 64%, rgba(130,0,255,.08), rgba(0,0,0,0) 60%),
    /* legibility layer: darker edges, clearer center (lighter than before) */
    radial-gradient(ellipse at 50% 40%,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.40) 55%,
      rgba(0,0,0,.72) 100%),
    /* slight top/bottom balance */
    linear-gradient(180deg,
      rgba(0,0,0,.14) 0%,
      rgba(0,0,0,.22) 45%,
      rgba(0,0,0,.34) 100%);
  pointer-events:none;
  z-index: 0;
}

/* Ensure content sits above overlays */
.hero > *{position:relative; z-index: 1;}

/* Centered hero variant (used on Home) */
.hero.center{ text-align:center; }
.hero.center .hero-lockup{ align-items:center; }
.hero.center .row{ justify-content:center; }

/* High-contrast text inside hero */
.hero .muted{color: var(--hero-muted)}

.hero-lockup{
  display:inline-flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  margin-bottom: 12px;
}
.hero-mark{
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: url("/assets/logo-tiemanai-mark.png") center/contain no-repeat;
  box-shadow: none;
  outline: none;
}
.hero-word{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

.tag,
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding: 9px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.tag::before,
.kicker::before{
  content:"";
  width:8px; height:8px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, var(--accent2), var(--accent));
  box-shadow: 0 0 22px rgba(0,194,255,.20);
}

.hero h1,
.hero h2{
  margin: 16px 0 12px;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 900;
  text-shadow: 0 2px 22px rgba(0,0,0,.65);
}

.hero h1,
.hero h2{ text-shadow: 0 12px 48px rgba(0,0,0,.72); }
.hero p{
  margin:0;
  max-width: 80ch;
  color: var(--hero-muted);
  font-size: 16px;
  line-height: 1.7;
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}
.hero p, .lead{ text-shadow: 0 4px 18px rgba(0,0,0,.55); }
.lead{margin:0; max-width: 80ch; color: var(--hero-muted); font-size: 16px; line-height: 1.7}

@media (max-width: 720px){
  .hero{padding: 40px 16px 20px}
  .hero h1,.hero h2{font-size: 36px}
}

/* Optional centered hero (landing page) */
.hero.center{text-align:center}
.hero.center .hero-lockup{align-items:center}
.hero.center p,.hero.center .lead{margin-left:auto; margin-right:auto}
.hero.center .row{justify-content:center}

/* ---------------- Layout cards ---------------- */
.grid{display:grid; grid-template-columns: repeat(12,1fr); gap:16px; margin-top: 18px}

.card{
  grid-column: span 6;
  border-radius: var(--radius);
  background: var(--card);
  border:1px solid var(--card-border);
  box-shadow: 0 18px 55px rgba(3,12,22,.10);
  padding: 18px;
  position:relative;
}
.card.small{grid-column: span 4}
.card.full{grid-column: span 12}
.card h3{margin:0 0 8px; font-size: 16px}
.card p{margin:0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.55}
/* Dark "SaaS" card (wizard only) */
.wizard-card{
  background:
    radial-gradient(900px 240px at 16% 0%, rgba(0,194,255,.18), transparent 55%),
    radial-gradient(840px 220px at 84% 0%, rgba(255,45,85,.14), transparent 60%),
    linear-gradient(180deg, rgba(6,20,43,.92), rgba(5,15,29,.92));
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  box-shadow: 0 22px 70px rgba(3,12,22,.26);
}
.wizard-card h3{color: rgba(255,255,255,.96)}
.wizard-card p{color: rgba(255,255,255,.78)}
.wizard-card .muted{color: rgba(255,255,255,.72)}
.wizard-card .badge{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.78)}
.wizard-card .input{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}
.wizard-card .input::placeholder{color: rgba(255,255,255,.55)}
.wizard-card .btn{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.92)}
.wizard-card .btn.btn-primary{
  background: linear-gradient(135deg, rgba(0,194,255,.92), rgba(124,58,237,.84));
  border-color: transparent;
  color: #06101F;
}
.wizard-card .notice{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.92)}
.wizard-card .notice .notice-text{color: rgba(255,255,255,.78)}

@media (max-width: 900px){
  .card.small{grid-column: span 6}
}
@media (max-width: 720px){
  .card{grid-column: span 12}
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: rgba(8,24,39,.70);
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(8,24,39,.12);
  background: rgba(244,247,251,.92);
}

.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(8,24,39,.14);
  background: rgba(255,255,255,.92);
  color: rgba(8,24,39,.88);
  font-size: 14px;
  box-shadow: 0 10px 24px rgba(3,12,22,.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease, filter .2s ease;
  position:relative;
  overflow:hidden;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,194,255,.35);
  box-shadow: 0 16px 34px rgba(3,12,22,.12);
}

.btn.btn-primary,
.btn.primary{
  color: #06101F;
  border-color: rgba(0,194,255,.28);
  background: linear-gradient(135deg, rgba(0,194,255,.90), rgba(124,58,237,.80));
}
.btn.btn-primary::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width:70%;
  height:220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(18deg);
  opacity:0;
  transition: opacity .2s ease, transform .55s ease;
}
.btn.btn-primary:hover::after{opacity:.9; transform: translateX(140%) rotate(18deg)}

/* Hero CTA style (enterprise, like large tech landing pages) */
.hero .btn.btn-primary{
  background: #ffffff;
  color: #06101F;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}
.hero .btn.btn-primary::after{display:none}
.hero .btn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}
.hero .btn:hover{
  border-color: rgba(255,255,255,.32);
}

.btn.disabled,
.btn[disabled],
a.btn[aria-disabled="true"]{
  opacity: .55;
  pointer-events:none;
  filter: saturate(.9);
}

.input{
  width:100%;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(8,24,39,.16);
  background: rgba(255,255,255,.92);
  color: var(--ink);
  outline:none;
  box-shadow: inset 0 1px 0 rgba(8,24,39,.04);
}
.input:focus{border-color: rgba(0,194,255,.55); box-shadow: var(--ring)}

.muted{color: var(--muted)}

.footer{
  margin-top: 28px;
  color: rgba(8,24,39,.62);
  font-size: 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

/* ---------------- Stepper (SaaS) ---------------- */
.stepper{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0;
  padding: 10px 8px 0;
  margin-bottom: 14px;
  border-radius: 18px;
  border:none;
  background: transparent;
}
.stepper::before{
  content:"";
  position:absolute;
  left: 12%;
  right: 12%;
  top: 32px;
  height: 2px;
  border-radius: 999px;
  background: rgba(8,24,39,.12);
}
.stepper-item{
  flex: 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding: 0 8px;
  color: rgba(8,24,39,.62);
  user-select:none;
}
.stepper-dot{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(8,24,39,.10);
  box-shadow: inset 0 0 0 1px rgba(8,24,39,.14);
  position:relative;
}
.stepper-num{font-size: 14px; font-weight: 900; color: rgba(8,24,39,.72)}
.stepper-dot::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:999px;
  background: radial-gradient(circle at 50% 50%, rgba(0,194,255,.22), transparent 55%);
  opacity:0;
  transition: opacity .25s ease;
}
.stepper-label{font-size: 12px; letter-spacing: .02em; white-space: nowrap; text-align:center}

.stepper-item.done{color: rgba(8,24,39,.86)}
.stepper-item.done .stepper-dot{
  background: rgba(21,195,138,.18);
  box-shadow: inset 0 0 0 1px rgba(21,195,138,.30), 0 0 18px rgba(21,195,138,.18);
}

.stepper-item.active{color: rgba(8,24,39,.92)}
.stepper-item.active .stepper-dot{
  background: linear-gradient(135deg, rgba(0,194,255,1), rgba(255,45,85,.92));
  box-shadow: 0 0 0 1px rgba(8,24,39,.08), 0 0 18px rgba(0,194,255,.26);
}
.stepper-item.active .stepper-num{color: #06101F}
.stepper-item.active .stepper-dot::after{opacity:1}

/* Dark wizard stepper variant */
.wizard-card .stepper::before{background: rgba(255,255,255,.14)}
.wizard-card .stepper-item{color: rgba(255,255,255,.60)}
.wizard-card .stepper-dot{background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18)}
.wizard-card .stepper-num{color: rgba(255,255,255,.82)}
.wizard-card .stepper-item.done .stepper-dot{background: rgba(21,195,138,.14)}
.wizard-card .stepper-item.active{color: rgba(255,255,255,.92)}

@media (max-width: 720px){
  .stepper{padding-bottom: 10px}
  .stepper::before{display:none}
  .stepper-item{flex:1}
  .stepper-label{white-space: normal; max-width: 10ch}
}/* ---------------- Notices (success/error/info) ---------------- */
.notice{
  --n: rgba(8,24,39,.55);
  --nbg: rgba(244,247,251,.96);

  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(8,24,39,.12);
  background: var(--nbg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  position:relative;
  overflow:hidden;
}
.notice::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 220px at 10% 0%, rgba(0,194,255,.10), transparent 55%),
    radial-gradient(520px 200px at 85% 10%, rgba(255,45,85,.08), transparent 60%);
  opacity:.8;
  pointer-events:none;
}
.notice > *{position:relative}
.notice .notice-inner{display:flex; gap:12px; align-items:flex-start}
.notice .notice-icon{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  flex:none;
  display:grid;
  place-items:center;
  color: var(--n);
  background: rgba(8,24,39,.06);
  box-shadow: inset 0 0 0 1px rgba(8,24,39,.10);
}
.notice .notice-icon::before{
  content:"";
  width: 14px;
  height: 14px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size: contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size: contain;
}
.notice .notice-body{flex:1; min-width:0}
.notice .notice-title{font-weight:900; letter-spacing:.01em; margin:0 0 2px}
.notice .notice-text{color: rgba(8,24,39,.78)}

.notice.ok{
  --n: var(--ok);
  --nbg: rgba(21,195,138,.08);
  border-color: rgba(21,195,138,.25);
}
.notice.ok .notice-icon{background: rgba(21,195,138,.12); box-shadow: inset 0 0 0 1px rgba(21,195,138,.22), 0 0 22px rgba(21,195,138,.10)}
.notice.ok .notice-icon::before{
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.0 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.0 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

.notice.error{
  --n: var(--danger);
  --nbg: rgba(229,37,79,.07);
  border-color: rgba(229,37,79,.22);
}
.notice.error .notice-icon{background: rgba(229,37,79,.12); box-shadow: inset 0 0 0 1px rgba(229,37,79,.20), 0 0 22px rgba(229,37,79,.10)}
.notice.error .notice-icon::before{
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 7h2v6h-2zm0 8h2v2h-2z'/%3E%3Cpath fill='black' d='M1 21h22L12 2 1 21z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 7h2v6h-2zm0 8h2v2h-2z'/%3E%3Cpath fill='black' d='M1 21h22L12 2 1 21z'/%3E%3C/svg%3E");
}

/* Step wrapper */
.step{animation: stepFade .18s ease}
@keyframes stepFade{from{opacity:0; transform: translateY(4px)} to{opacity:1; transform: translateY(0)}}

/* Optional: fade completed cards if used */
.card{transition: opacity .35s ease, transform .35s ease, filter .35s ease, border-color .35s ease}
.card.is-done{opacity:.60; filter:saturate(.90)}
.card.is-done:hover{opacity:.70}

/* v13: ensure hero mark image always renders */
.hero-mark{display:block;object-fit:contain;}
