/* styles.css (only changes: tile layout -> icon left, text right, centered; add tile__meta; adjust tile__name margin) */
:root{
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --r: 18px;
  --r2: 14px;
  --shadow: 0 18px 40px rgba(15, 25, 40, .10);
  --shadow2: 0 10px 22px rgba(15, 25, 40, .08);

  --canvas: #f3f5fb;
  --canvas2:#ffffff;
  --ink: #0b1220;
  --muted: rgba(11,18,32,.72);
  --line: rgba(11,18,32,.10);
  --line2: rgba(11,18,32,.14);

  --blue: #0a84ff;
  --pink: #ff2d55;
  --mint: #00c7be;
  --orange:#ff9f0a;

  --glass: rgba(255,255,255,.62);
  --glass2: rgba(255,255,255,.78);
}

/* LIGHT */
html[data-theme="light"]{
  --canvas: #e7ebf3;
  --canvas2:#f1f4fa;
  --ink: #151b26;
  --muted: rgba(21,27,38,.72);

  --line: rgba(21,27,38,.12);
  --line2: rgba(21,27,38,.16);

  --glass: rgba(241,244,250,.66);
  --glass2: rgba(241,244,250,.78);

  --bgA: rgba(10,132,255,.14);
  --bgB: rgba(255,45,85,.10);
  --bgC: rgba(0,199,190,.10);
  --bgD: rgba(255,159,10,.08);

  --tapeA: rgba(10,132,255,.16);
  --tapeB: rgba(255,45,85,.11);
  --tapeC: rgba(0,199,190,.11);
  --tapeD: rgba(255,159,10,.11);

  --shadow: 0 18px 40px rgba(15, 25, 40, .12);
  --shadow2: 0 10px 22px rgba(15, 25, 40, .10);
}

/* DARK */
html[data-theme="dark"]{
  --canvas: #141923;
  --canvas2:#0f141d;
  --ink: #eef2ff;
  --muted: rgba(238,242,255,.74);
  --line: rgba(238,242,255,.12);
  --line2: rgba(238,242,255,.16);

  --glass: rgba(255,255,255,.08);
  --glass2: rgba(255,255,255,.12);

  --bgA: rgba(10,132,255,.22);
  --bgB: rgba(255,45,85,.16);
  --bgC: rgba(0,199,190,.14);
  --bgD: rgba(255,159,10,.12);

  --tapeA: rgba(10,132,255,.22);
  --tapeB: rgba(255,45,85,.16);
  --tapeC: rgba(0,199,190,.16);
  --tapeD: rgba(255,159,10,.16);

  --shadow: 0 18px 40px rgba(0, 0, 0, .30);
  --shadow2: 0 10px 22px rgba(0, 0, 0, .22);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 18% 0%, var(--bgA), transparent 60%),
    radial-gradient(900px 520px at 86% 10%, var(--bgB), transparent 58%),
    radial-gradient(1100px 680px at 52% 12%, var(--bgC), transparent 62%),
    radial-gradient(900px 520px at 30% 95%, var(--bgD), transparent 60%),
    linear-gradient(180deg, var(--canvas), color-mix(in srgb, var(--canvas) 88%, #000 12%) 55%, var(--canvas));
}

a{ color:inherit; text-decoration:none; }
.mono{
  font-family: var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
}

:where(a, button, input, textarea):focus-visible{
  outline: 2px solid color-mix(in srgb, var(--blue) 70%, transparent);
  outline-offset: 3px;
}

/* top bar */
.bar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--canvas) 74%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.bar__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand__mark{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border: 1px solid var(--line2);
  border-radius: 12px;
  background: color-mix(in srgb, var(--glass2) 72%, transparent);
  box-shadow: var(--shadow2);
  font-weight: 800;
}
.brand__stack{ display:flex; flex-direction:column; line-height: 1.1; }
.brand__name{ font-weight: 780; letter-spacing: .01em; }
.brand__sub{ opacity:.68; margin-top: 2px; }

.bar__nav{
  display:flex; align-items:center; gap: 14px;
}
.bar__nav a{ opacity: .86; }
.bar__nav a:hover{ opacity: 1; }

.bar__cta{
  border: 1px solid var(--line2);
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--glass2) 68%, transparent);
  box-shadow: var(--shadow2);
}
.bar__cta:hover{ border-color: color-mix(in srgb, var(--blue) 35%, var(--line2)); }

/* mode toggle */
.mode{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: color-mix(in srgb, var(--glass2) 68%, transparent);
  box-shadow: var(--shadow2);
  cursor:pointer;
  font: inherit;
  color: inherit;
}
.mode__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--blue), var(--pink));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--canvas) 60%, transparent);
}
.mode__label{
  font-family: var(--mono);
  letter-spacing:.14em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .85;
}

/* moving tape */
.tape{
  transform: rotate(-2deg);
  margin-top: 6px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--tapeA), var(--tapeC), var(--tapeB), var(--tapeD));
  overflow:hidden;
}

.tape__row{
  display:flex;
  align-items:center;
  gap: 18px;
  padding: 10px 16px;
  white-space: nowrap;
  font-family: var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: color-mix(in srgb, var(--ink) 78%, transparent);

  /* key changes */
  width: max-content;
  will-change: transform;
  animation: scroll 18s linear infinite;
}

@keyframes scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}


/* hero */
.hero{
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 16px 10px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 18px;
  align-items:start;
}
.kicker{ margin: 0 0 10px; color: var(--muted); display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }
.kicker__dot{ opacity:.65; }

h1{
  margin: 0 0 12px;
  font-size: clamp(2.5rem, 5.4vw, 4.35rem);
  line-height: 1.0;
  letter-spacing: -.02em;
}
.stroke{
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 55%, transparent);
}
.lead{
  margin: 0 0 16px;
  color: color-mix(in srgb, var(--ink) 76%, transparent);
  line-height: 1.58;
  max-width: 62ch;
}
.hero__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* buttons */
.btn{
  border: 1px solid transparent;
  padding: 10px 12px;
  font-weight: 780;
  letter-spacing: .01em;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--r2);
}
.btn--ink{
  background: linear-gradient(180deg, color-mix(in srgb, var(--canvas2) 92%, transparent), color-mix(in srgb, var(--glass2) 60%, transparent));
  color: var(--ink);
  border-color: var(--line2);
  box-shadow: var(--shadow2);
}
.btn--line{
  background: color-mix(in srgb, var(--glass2) 52%, transparent);
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  border-color: var(--line2);
  box-shadow: var(--shadow2);
}
.btn--wide{ width:100%; }

.mini{
  display:grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.mini div{
  display:flex;
  gap: 10px;
  align-items:baseline;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.mini strong{ color: var(--ink); }

.tools{
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.tools__label{ opacity:.72; }
.tools__row{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.tool{
  border: 1px solid var(--line2);
  padding: 8px 10px;
  background: color-mix(in srgb, var(--glass2) 58%, transparent);
  box-shadow: var(--shadow2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

/* Quote slip */
.slip{
  background: var(--glass);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
}
.slip::before{
  content:"";
  position:absolute;
  inset:-90px;
  background:
    radial-gradient(420px 240px at 18% 20%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 62%),
    radial-gradient(420px 260px at 88% 10%, color-mix(in srgb, var(--pink) 18%, transparent), transparent 62%),
    radial-gradient(420px 260px at 60% 92%, color-mix(in srgb, var(--mint) 18%, transparent), transparent 64%),
    radial-gradient(420px 260px at 15% 95%, color-mix(in srgb, var(--orange) 16%, transparent), transparent 64%);
  transform: rotate(6deg);
  pointer-events:none;
  opacity: .9;
}
.slip > *{ position:relative; }

.slip__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--glass2) 50%, transparent);
}
.slip__stamp{
  border: 1px solid var(--line2);
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--canvas2) 70%, transparent);
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.slip__body{
  padding: 14px;
  display:grid;
  gap: 12px;
}
.slip__row{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items:start;
}
.slip__k{ opacity:.62; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.slip__v{ font-weight: 720; line-height: 1.35; color: color-mix(in srgb, var(--ink) 92%, transparent); }
.slip__hint{ font-weight: 820; }
.slip__rule{ height: 1px; background: var(--line); }
.slip__row--2{ grid-template-columns: 1fr 1fr; gap: 12px; }
.slip__fine p{
  margin: 6px 0 0;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  line-height: 1.42;
}
.slip__bottom{
  border-top: 1px solid var(--line);
  padding: 14px;
  background: color-mix(in srgb, var(--glass2) 45%, transparent);
}
.tiny{
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-size: 12px;
  line-height: 1.45;
}

/* Services */
.services{
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 16px;
}
.services__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.services__head h2{
  margin:0;
  font-size: clamp(1.4rem, 2.7vw, 2.1rem);
  letter-spacing: -.01em;
}
.services__sub{ margin: 6px 0 0; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.services__hint{ opacity:.65; }

.wall{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* UPDATED: icon left, text right, centered */
.tile{
  text-align:left;
  background: var(--glass2);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 14px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow2);

  display:flex;
  align-items:center;
  gap: 12px;

  min-height: 92px;
  transition: transform .16s ease, border-color .16s ease;
}
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(260px 120px at 18% 10%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 60%),
    radial-gradient(260px 120px at 90% 90%, color-mix(in srgb, var(--pink) 14%, transparent), transparent 60%),
    radial-gradient(260px 120px at 70% 30%, color-mix(in srgb, var(--mint) 12%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity .18s ease;
}
.tile:hover{ transform: translateY(-2px); }
.tile:hover::after{ opacity: 1; }

.tile.is-active::after{
  opacity: 1;
}

.tile.is-active{
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent) inset, var(--shadow2);
}

.tile__meta{
  display:grid;
  gap: 4px;
  align-content:center;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.tile__name{
  display:block;
  font-weight: 860;
  font-size: 16px;
  margin: 0;
  color: color-mix(in srgb, var(--ink) 94%, transparent);
  letter-spacing: -.01em;
}
.tile__tag{
  opacity: .70;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}

.tile.is-active{
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent) inset, var(--shadow2);
}

/* Icon badge */
.tile__icon{
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: color-mix(in srgb, var(--canvas2) 72%, transparent);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow2);
  color: color-mix(in srgb, var(--ink) 86%, transparent);
  transition: transform .18s ease, background .18s ease, color .18s ease;
  position: relative;
  z-index: 1;
}
.tile__icon svg{ width: 22px; height: 22px; }

.tile:hover .tile__icon{
  transform: scale(1.06);
  background: color-mix(in srgb, var(--blue) 18%, var(--canvas2));
  color: color-mix(in srgb, var(--ink) 96%, transparent);
}

.tile.is-active .tile__icon{
  background: color-mix(in srgb, var(--blue) 22%, var(--canvas2));
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line2));
}

/* Contact */
.contact{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px 44px;
}
.contact__grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.contact__copy h2{
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.7vw, 2.1rem);
  letter-spacing: -.01em;
}
.contact__copy p{
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  line-height: 1.55;
}
.contact__lines{
  display:grid;
  gap: 10px;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.contact__lines .mono{ opacity: .68; }

.contact__badge{
  margin-top: 14px;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 12px;
  background: color-mix(in srgb, var(--glass2) 54%, transparent);
  box-shadow: var(--shadow2);
}
.contact__badge p{
  margin: 6px 0 0;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  line-height: 1.45;
  font-size: 14px;
}

.form{
  border: 1px solid var(--line2);
  background: var(--glass2);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  padding: 14px;
  display:grid;
  gap: 10px;
}
label{ display:grid; gap: 6px; }
input, textarea{
  background: color-mix(in srgb, var(--canvas2) 74%, transparent);
  border: 1px solid var(--line2);
  color: color-mix(in srgb, var(--ink) 90%, transparent);
  padding: 10px 10px;
  font: inherit;
  border-radius: 12px;
}
.form__actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 4px;
}

.foot{
  padding: 18px 16px 34px;
  border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  max-width: 1100px;
  margin: 0 auto;
}

/* responsive */
@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; }
  .contact__grid{ grid-template-columns: 1fr; }
  .wall{ grid-template-columns: repeat(2, 1fr); }
  .services__hint{ display:none; }
}
@media (max-width: 520px){
  .wall{ grid-template-columns: 1fr; }
  .bar__nav{ gap: 10px; }
  .slip__row{ grid-template-columns: 1fr; }
  .slip__row--2{ grid-template-columns: 1fr; }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .tape__row{ animation:none; }
  .tile, .tile__icon{ transition:none; }
}