.contact-links a,
.contact-links b {
  min-width: 0;
}

.contact-links b {
  overflow-wrap: anywhere;
}
/* Full-stack contact form additions */
.contact-form select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: none;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  font: inherit;
}

.contact-form label small {
  color: var(--muted);
  font-weight: 450;
}

/* Interactive mobile product prototypes */
.project-card {
  min-height: 720px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.project-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .24);
  transform: translateY(-3px);
}

.work-section .section-heading.split {
  position: relative;
}

.prototype-note {
  position: absolute;
  right: 0;
  bottom: -34px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text) !important;
  letter-spacing: .03em;
  font-size: 11px !important;
  font-weight: 700;
}

.prototype-note span {
  color: var(--mint);
  animation: prototype-pulse 1.8s ease-in-out infinite;
}

@keyframes prototype-pulse {
  50% { opacity: .35; transform: scale(.75); }
}

.project-visual {
  isolation: isolate;
  overflow: hidden;
}

.project-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sim-accent, var(--blue)) 30%, transparent), transparent 68%);
  filter: blur(18px);
}

.project-amber .project-visual { --sim-accent: var(--amber); }
.project-blue .project-visual { --sim-accent: var(--blue); }
.project-mint .project-visual { --sim-accent: var(--mint); }
.project-violet .project-visual { --sim-accent: var(--violet); }

.simulator-stage-heading {
  position: absolute;
  z-index: 4;
  top: 24px;
  left: 26px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .92);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
}

.simulator-stage-heading small {
  color: rgba(255, 255, 255, .52);
  font-size: 8px;
  font-weight: 600;
}

.simulator-stage-heading .availability-dot {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 15%, transparent);
}

.sim-phone.phone {
  --sim-accent: var(--blue);
  width: 294px;
  height: 596px;
  border-color: rgba(255, 255, 255, .3);
  box-shadow: 0 48px 90px rgba(0, 0, 0, .48), inset 0 0 0 2px #27323a;
  transform: translateZ(0);
  transition: transform .35s ease, box-shadow .35s ease;
}

.sim-phone.phone-amber { --sim-accent: #f4c274; }
.sim-phone.phone-blue { --sim-accent: #76a8ff; }
.sim-phone.phone-mint { --sim-accent: #8ddfc7; }
.sim-phone.phone-violet { --sim-accent: #b9a2ff; }

.layout-1 .sim-phone.phone { transform: rotate(-2deg); }
.project-card:hover .sim-phone.phone { transform: translateY(-6px); }
.project-card:hover .layout-1 .sim-phone.phone { transform: rotate(-1deg) translateY(-6px); }

.sim-phone .phone-screen {
  background:
    radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--sim-accent) 12%, transparent), transparent 36%),
    #0e1821;
}

.sim-phone button,
.sim-phone input {
  font: inherit;
}

.sim-phone button {
  min-width: 0;
  color: inherit;
  cursor: pointer;
}

.sim-phone button:focus-visible,
.sim-phone input:focus-visible {
  outline: 2px solid var(--sim-accent);
  outline-offset: 1px;
}

.sim-status {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  padding: 12px 18px 0;
  color: rgba(255, 255, 255, .72);
  font-size: 7px;
}

.sim-appbar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  margin-top: 12px;
  padding: 0 14px;
}

.sim-appbar b {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.sim-appbar button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
}

.sim-appbar button:disabled {
  opacity: .25;
  cursor: default;
}

.sim-viewport {
  position: absolute;
  inset: 86px 0 61px;
  overflow: auto;
  padding: 12px 17px 20px;
  scrollbar-width: none;
}

.sim-viewport::-webkit-scrollbar { display: none; }
.sim-viewport h2,
.sim-viewport h3 {
  margin: 0;
  color: #f7f8f8;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.08;
}
.sim-viewport h2 { font-size: 29px; }
.sim-viewport h3 { font-size: 24px; }
.sim-viewport p { margin: 0; }

.sim-kicker,
.sim-section-label {
  color: color-mix(in srgb, var(--sim-accent) 76%, white);
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 800;
}

.sim-section-label {
  margin: 19px 0 7px !important;
  color: rgba(255, 255, 255, .48);
}

.sim-muted {
  margin-top: 10px !important;
  color: rgba(255, 255, 255, .6);
  font-size: 9px;
  line-height: 1.55;
}

.sim-primary {
  width: 100%;
  min-height: 41px;
  margin-top: 16px;
  padding: 9px 12px;
  border: 0;
  border-radius: 11px;
  background: var(--sim-accent);
  color: #071019 !important;
  font-size: 9px !important;
  font-weight: 850;
  transition: filter .2s ease, transform .15s ease;
}

.sim-primary:hover { filter: brightness(1.08); }
.sim-primary:active { transform: scale(.98); }
.sim-primary.done { background: #8ddfc7; }

.sim-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
}

.sim-search span { color: rgba(255, 255, 255, .5); }
.sim-search input {
  width: 100%;
  color: white;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 8px;
}
.sim-search input::placeholder { color: rgba(255, 255, 255, .38); }

.sim-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 14px;
}

.sim-product-grid > button {
  padding: 7px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
}
.sim-product-grid b,
.sim-product-grid span { display: block; font-size: 8px; }
.sim-product-grid span { color: rgba(255, 255, 255, .52); }

.sim-product-art {
  display: grid;
  height: 104px;
  margin-bottom: 7px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  color: rgba(20, 17, 12, .72);
  font-size: 54px;
}
.sim-product-art.amber { background: linear-gradient(145deg, #f3d29f, #a8753e); }
.sim-product-art.lilac { background: linear-gradient(145deg, #c4c8df, #777d9f); }
.sim-product-art.big { height: 155px; margin-bottom: 14px; }

.sim-price-row,
.sim-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}
.sim-price-row b,
.sim-total b { font-family: Georgia, "Times New Roman", serif; font-size: 20px; }
.sim-price-row span,
.sim-total span { color: rgba(255, 255, 255, .55); font-size: 8px; }

.sim-line-item {
  display: grid;
  grid-template-columns: 49px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sim-thumb {
  display: grid;
  width: 49px;
  height: 49px;
  place-items: center;
  border-radius: 10px;
  background: #d4ad75;
  color: #392612;
  font-size: 22px;
}
.sim-line-item b,
.sim-line-item span { display: block; font-size: 9px; }
.sim-line-item span { color: rgba(255, 255, 255, .48); font-size: 7px; }
.sim-line-item strong { font-size: 10px; }

.sim-choice {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 9px;
  padding: 13px 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  font-size: 8px !important;
}
.sim-choice.active { border-color: color-mix(in srgb, var(--sim-accent) 55%, transparent); }

.sim-empty,
.sim-success {
  display: grid;
  min-height: 315px;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.sim-empty > span,
.sim-success > span {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 15px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sim-accent) 18%, transparent);
  color: var(--sim-accent);
  font-size: 24px;
}
.sim-success p:not(.sim-kicker),
.sim-empty p {
  max-width: 190px;
  margin-top: 10px;
  color: rgba(255, 255, 255, .58);
  font-size: 8px;
}
.sim-success .sim-primary,
.sim-empty .sim-primary { width: 180px; }

.sim-welcome {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sim-welcome > span {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 50%;
  background: var(--sim-accent);
  color: #071019;
  font-size: 8px;
  font-weight: 900;
}

.sim-progress {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  text-align: left;
  border-radius: 13px;
  background: #d7e6ff;
  color: #071019 !important;
}
.sim-progress span,
.sim-progress b { display: block; }
.sim-progress span { font-size: 8px; }
.sim-progress b { margin: 4px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 26px; }
.sim-progress i,
.sim-course-progress i,
.sim-lesson-card i {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(7, 16, 25, .14);
}
.sim-progress em,
.sim-course-progress em,
.sim-lesson-card em { display: block; width: 74%; height: 100%; background: #3176f6; }

.sim-task,
.sim-client {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 2px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.sim-task > i { width: 7px; height: 32px; border-radius: 6px; background: var(--sim-accent); }
.sim-task > i.mint { background: #8ddfc7; }
.sim-task b,
.sim-task small,
.sim-client b,
.sim-client small { display: block; font-style: normal; }
.sim-task b,
.sim-client b { font-size: 8px; }
.sim-task small,
.sim-client small { color: rgba(255, 255, 255, .46); font-size: 7px; }
.sim-task em,
.sim-client em { color: rgba(255, 255, 255, .42); font-size: 11px; font-style: normal; }

.sim-assignees {
  display: flex;
  align-items: center;
  margin-top: 16px;
}
.sim-assignees span {
  display: grid;
  width: 29px;
  height: 29px;
  margin-right: -5px;
  place-items: center;
  border: 2px solid #0e1821;
  border-radius: 50%;
  background: var(--sim-accent);
  color: #071019;
  font-size: 7px;
  font-weight: 900;
}
.sim-assignees b { margin-left: auto; color: rgba(255, 255, 255, .5); font-size: 7px; }

.sim-client { grid-template-columns: 38px 1fr auto; }
.sim-client > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sim-accent) 20%, transparent);
  color: var(--sim-accent);
  font-size: 8px;
  font-weight: 900;
}

.sim-chat { display: grid; gap: 10px; margin-top: 12px; }
.sim-chat p {
  max-width: 83%;
  padding: 10px;
  border-radius: 4px 12px 12px;
  background: rgba(255, 255, 255, .07);
}
.sim-chat p.mine { justify-self: end; border-radius: 12px 4px 12px 12px; background: color-mix(in srgb, var(--sim-accent) 18%, transparent); }
.sim-chat b,
.sim-chat span { display: block; font-size: 8px; }
.sim-chat span { margin-top: 3px; color: rgba(255, 255, 255, .61); line-height: 1.45; }

.sim-service-art,
.sim-featured-service {
  display: grid;
  width: 100%;
  height: 155px;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(145deg, #afe8d6, #4b917e);
  color: #103c31 !important;
  font-size: 54px;
}
.sim-featured-service {
  height: 158px;
  margin-top: 16px;
  padding: 15px;
  place-items: end start;
  text-align: left;
}
.sim-featured-service span,
.sim-featured-service b,
.sim-featured-service em { display: block; font-style: normal; }
.sim-featured-service span { text-transform: uppercase; font-size: 7px; font-weight: 800; }
.sim-featured-service b { font-family: Georgia, "Times New Roman", serif; font-size: 20px; }
.sim-featured-service em { font-size: 8px; }

.sim-service-grid,
.sim-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.sim-service-grid button,
.sim-mini-stats div {
  padding: 11px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--sim-accent);
  font-size: 13px;
}
.sim-service-grid b,
.sim-mini-stats b,
.sim-mini-stats span { display: block; }
.sim-service-grid b { margin-top: 4px; color: white; font-size: 8px; }
.sim-mini-stats div { color: white; }
.sim-mini-stats span { color: rgba(255, 255, 255, .45); font-size: 7px; }

.sim-days,
.sim-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 17px; }
.sim-days button,
.sim-times button {
  padding: 10px 5px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  font-size: 9px;
}
.sim-days small { display: block; color: rgba(255, 255, 255, .42); font-size: 6px; }
.sim-days button.active,
.sim-times button.active { border-color: var(--sim-accent); background: color-mix(in srgb, var(--sim-accent) 18%, transparent); }

.sim-course-art {
  display: grid;
  height: 124px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, #c7b7ff, #6755a7);
  color: #19132e;
  letter-spacing: -.06em;
  font-size: 34px;
  font-weight: 950;
  line-height: .78;
}
.sim-course-progress { margin-top: 14px; }
.sim-course-progress span { color: rgba(255, 255, 255, .48); font-size: 7px; }
.sim-course-progress i { margin-top: 6px; background: rgba(255, 255, 255, .1); }
.sim-course-progress em { width: 34%; background: var(--sim-accent); }

.sim-learning-ring {
  display: grid;
  width: 152px;
  height: 152px;
  margin: 21px auto 15px;
  place-content: center;
  border: 16px solid rgba(255, 255, 255, .07);
  border-top-color: var(--sim-accent);
  border-right-color: var(--sim-accent);
  border-radius: 50%;
  transform: rotate(18deg);
}
.sim-learning-ring b,
.sim-learning-ring span { display: block; transform: rotate(-18deg); }
.sim-learning-ring b { font-family: Georgia, "Times New Roman", serif; font-size: 28px; }
.sim-learning-ring span { color: rgba(255, 255, 255, .5); text-transform: uppercase; font-size: 6px; }

.sim-lesson-card {
  width: 100%;
  padding: 13px;
  text-align: left;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sim-accent) 17%, transparent);
}
.sim-lesson-card span,
.sim-lesson-card b { display: block; }
.sim-lesson-card span { color: rgba(255, 255, 255, .5); text-transform: uppercase; font-size: 7px; }
.sim-lesson-card b { margin: 3px 0 9px; font-size: 9px; }
.sim-lesson-card i { background: rgba(255, 255, 255, .1); }
.sim-lesson-card em { width: 58%; background: var(--sim-accent); }
.sim-mini-stats { margin-top: 8px; }

.sim-lesson-copy {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px;
}
.sim-lesson-copy b { color: var(--sim-accent); font-size: 8px; }
.sim-lesson-copy p { color: rgba(255, 255, 255, .62); font-size: 8px; line-height: 1.55; }
.sim-code-lines { display: grid; gap: 7px; margin-top: 13px; }
.sim-code-lines i { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); }
.sim-code-lines i:nth-child(2) { width: 77%; }
.sim-code-lines i:nth-child(3) { width: 53%; background: color-mix(in srgb, var(--sim-accent) 38%, transparent); }

.sim-answers { display: grid; gap: 8px; margin-top: 16px; }
.sim-answers button {
  padding: 11px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .72);
  font-size: 8px;
}
.sim-answers button.active { border-color: var(--sim-accent); background: color-mix(in srgb, var(--sim-accent) 16%, transparent); color: white; }

.sim-toast {
  position: absolute;
  z-index: 8;
  right: 17px;
  bottom: 66px;
  left: 17px;
  padding: 9px 11px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--sim-accent) 28%, transparent);
  border-radius: 9px;
  background: rgba(4, 10, 14, .92);
  color: rgba(255, 255, 255, .83);
  font-size: 8px;
  box-shadow: 0 16px 28px rgba(0, 0, 0, .38);
}

.sim-bottom-nav {
  position: absolute;
  z-index: 6;
  right: 13px;
  bottom: 12px;
  left: 13px;
  display: flex;
  justify-content: space-around;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  background: rgba(4, 10, 14, .86);
  backdrop-filter: blur(12px);
}
.sim-bottom-nav button {
  display: grid;
  min-width: 43px;
  padding: 2px 5px;
  place-items: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, .38);
}
.sim-bottom-nav button span { font-size: 11px; line-height: 1; }
.sim-bottom-nav button small { margin-top: 3px; font-size: 6px; }
.sim-bottom-nav button.active { background: color-mix(in srgb, var(--sim-accent) 12%, transparent); color: var(--sim-accent); }

@media (max-width: 920px) {
  .project-card { min-height: 0; }
  .simulator-stage-heading { top: 18px; left: 18px; }
  .prototype-note { position: static; margin-top: 12px !important; }
}

@media (max-width: 620px) {
  .simulator-stage-heading { left: 14px; }
  .sim-phone.phone,
  .layout-1 .sim-phone.phone {
    width: 272px;
    height: 552px;
    transform: none;
  }
  .project-card:hover .sim-phone.phone,
  .project-card:hover .layout-1 .sim-phone.phone { transform: translateY(-3px); }
}

/* Premium portrait, accent control, and full-screen project stories */
:root { --brand-accent: var(--blue); }
html[data-accent="mint"] { --brand-accent: var(--mint); }
html[data-accent="violet"] { --brand-accent: var(--violet); }

.accent-toggle{display:flex;width:35px;height:28px;padding:5px;align-items:center;justify-content:center;gap:2px;border:1px solid var(--line-strong);border-radius:20px;background:var(--panel);cursor:pointer}
.accent-toggle i{width:5px;height:5px;border-radius:50%;background:#ffffff3b}
.accent-toggle i:nth-child(2){width:9px;height:9px;background:var(--brand-accent);box-shadow:0 0 12px var(--brand-accent)}
.button-whatsapp{color:var(--text);background:color-mix(in srgb,#45d483 12%,var(--panel));border-color:color-mix(in srgb,#45d483 32%,transparent)}

.hero-portrait-wrap{min-height:690px}
.hero-portrait-wrap:before{content:"";position:absolute;width:410px;height:560px;border:1px solid color-mix(in srgb,var(--brand-accent) 32%,transparent);border-radius:220px 220px 26px 26px;transform:rotate(4deg)}
.hero-portrait-card{position:relative;z-index:3;width:min(420px,80%);aspect-ratio:.76;overflow:hidden;border:1px solid #ffffff26;border-radius:210px 210px 22px 22px;background:#0a1118;box-shadow:0 55px 110px #00000080}
.hero-portrait-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#050a0f14 58%,#050a0feb 100%);pointer-events:none}
.hero-portrait-card img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(.78) contrast(1.06)}
.portrait-overlay{position:absolute;z-index:2;right:28px;bottom:30px;left:28px}
.portrait-overlay span,.portrait-overlay b{display:block}
.portrait-overlay span{color:var(--brand-accent);letter-spacing:.12em;text-transform:uppercase;font-size:9px;font-weight:800}
.portrait-overlay b{max-width:300px;margin-top:8px;color:#fff;font-family:Georgia,serif;font-size:clamp(20px,2vw,30px);font-weight:400;line-height:1.12}
.portrait-status{position:absolute;z-index:5;top:78px;right:-12px;display:flex;min-width:158px;padding:11px 13px;align-items:center;gap:10px;border:1px solid #ffffff21;border-radius:12px;background:#081017d1;box-shadow:0 18px 48px #0000004d;backdrop-filter:blur(16px)}
.portrait-status span,.portrait-status b,.portrait-status small{display:block}.portrait-status b{color:#fff;font-size:10px}.portrait-status small{color:#ffffff80;font-size:8px}
.hero-portrait-wrap .orbit-one{width:570px;height:570px;border-color:color-mix(in srgb,var(--brand-accent) 25%,transparent)}
.hero-portrait-wrap .orbit-two{width:470px;height:470px}
.hero-portrait-wrap .chip-flutter{top:20%;left:-5%}.hero-portrait-wrap .chip-firebase{right:-5%;bottom:30%}.hero-portrait-wrap .chip-release{left:2%;bottom:10%}

.launch-demo-button{display:flex;width:100%;margin-top:12px;padding:13px 0;justify-content:space-between;align-items:center;color:var(--brand-accent);border-top:1px solid var(--line);background:transparent;text-align:left;font-size:11px;font-weight:800;cursor:pointer}
.launch-demo-button span{transition:transform .2s}.launch-demo-button:hover span{transform:translate(2px,-2px)}

.showcase-backdrop{position:fixed;z-index:1000;inset:0;display:grid;padding:26px;place-items:center;background:#02070bd1;backdrop-filter:blur(18px);animation:showcase-in .25s ease both}
@keyframes showcase-in{from{opacity:0}}
.showcase-modal{--showcase-accent:var(--blue);width:min(1240px,100%);max-height:calc(100vh - 52px);overflow:hidden;border:1px solid #ffffff21;border-radius:18px;background:radial-gradient(circle at 80% 0,color-mix(in srgb,var(--showcase-accent) 14%,transparent),transparent 36%),#09131c;color:#f4f7f6;box-shadow:0 50px 130px #000000a6}
.showcase-commerce{--showcase-accent:var(--amber)}.showcase-productivity{--showcase-accent:var(--blue)}.showcase-services{--showcase-accent:var(--mint)}.showcase-learning{--showcase-accent:var(--violet)}
.showcase-header{display:flex;min-height:90px;padding:19px 24px;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff14}
.showcase-header span{color:var(--showcase-accent);letter-spacing:.12em;text-transform:uppercase;font-size:8px;font-weight:800}
.showcase-header h2{margin:4px 0 0;font-family:Georgia,serif;font-size:clamp(25px,3vw,38px);font-weight:400}
.showcase-header>button{display:grid;width:42px;height:42px;padding:0;place-items:center;color:#fff;border:1px solid #ffffff1f;border-radius:50%;background:#ffffff0d;font-size:23px;cursor:pointer}
.showcase-tabs{display:flex;gap:6px;padding:12px 24px;border-bottom:1px solid #ffffff14}
.showcase-tabs button{padding:9px 14px;color:#ffffff80;border:1px solid transparent;border-radius:30px;background:transparent;font-size:10px;font-weight:750;cursor:pointer}
.showcase-tabs button.active{color:#071019;border-color:var(--showcase-accent);background:var(--showcase-accent)}
.showcase-body{height:min(700px,calc(100vh - 198px));overflow:auto;scrollbar-width:thin}
.showcase-demo{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(430px,1.2fr);min-height:100%}
.showcase-demo-copy{display:flex;padding:clamp(30px,5vw,70px);flex-direction:column;justify-content:center}
.showcase-live{display:flex;align-items:center;gap:9px;color:var(--showcase-accent);letter-spacing:.1em;text-transform:uppercase;font-size:8px;font-weight:800}
.showcase-live i{width:7px;height:7px;border-radius:50%;background:var(--showcase-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--showcase-accent) 12%,transparent)}
.showcase-demo-copy h3,.architecture-intro h3,.gallery-heading h3{margin:20px 0 0;font-family:Georgia,serif;font-size:clamp(35px,4.7vw,66px);font-weight:400;line-height:.98;letter-spacing:-.04em}
.showcase-demo-copy>p,.architecture-intro>p{max-width:560px;margin:22px 0 0;color:#ffffff94;font-size:14px;line-height:1.75}
.showcase-demo-copy ul{display:grid;gap:8px;margin:24px 0}.showcase-demo-copy li{color:#ffffffbf;font-size:11px}.showcase-demo-copy li:before{content:"✓";margin-right:10px;color:var(--showcase-accent)}
.showcase-phone-stage{display:grid;min-height:620px;place-items:center;background:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px),color-mix(in srgb,var(--showcase-accent) 8%,#0b1620);background-size:48px 48px}
.showcase-phone-stage .sim-phone{transform:scale(1.04)}
.showcase-panel[hidden]{display:none!important}

.showcase-architecture,.showcase-gallery{padding:clamp(28px,5vw,64px)}
.showcase-architecture{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px)}
.architecture-intro>span,.gallery-heading>span{color:var(--showcase-accent);letter-spacing:.12em;text-transform:uppercase;font-size:8px;font-weight:800}
.architecture-flow{display:grid;gap:9px}
.architecture-flow article{position:relative;display:grid;grid-template-columns:42px 1fr;gap:13px;padding:16px;border:1px solid #ffffff17;border-radius:12px;background:#ffffff09}
.architecture-flow article>span{display:grid;width:36px;height:36px;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--showcase-accent) 16%,transparent);color:var(--showcase-accent);font-size:9px;font-weight:900}
.architecture-flow b,.architecture-flow h4,.architecture-flow p{display:block;margin:0}.architecture-flow b{color:var(--showcase-accent);letter-spacing:.1em;font-size:7px}.architecture-flow h4{margin-top:2px;font-size:13px}.architecture-flow p{margin-top:3px;color:#ffffff73;font-size:9px}.architecture-flow article>i{position:absolute;left:32px;bottom:-13px;z-index:2;color:var(--showcase-accent);font-style:normal}
.architecture-principles{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.architecture-principles>div{padding:18px;border-top:1px solid #ffffff1a}.architecture-principles span{color:var(--showcase-accent);font-size:8px}.architecture-principles b{display:block;margin-top:7px;font-family:Georgia,serif;font-size:19px;font-weight:400}.architecture-principles p{margin:7px 0 0;color:#ffffff75;font-size:9px}

.showcase-gallery .gallery-heading{display:grid;grid-template-columns:.35fr 1fr;align-items:end;gap:30px}.showcase-gallery .gallery-heading h3{margin:0;font-size:clamp(30px,4vw,54px)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}.gallery-grid>article{min-width:0}
.gallery-screen{position:relative;display:flex;aspect-ratio:.62;padding:15px;flex-direction:column;justify-content:flex-end;overflow:hidden;border:1px solid #ffffff1a;border-radius:22px;background:radial-gradient(circle at 70% 20%,color-mix(in srgb,var(--showcase-accent) 28%,transparent),transparent 35%),#101d27}
.gallery-screen:before{content:"";position:absolute;top:9px;left:50%;width:36px;height:10px;border-radius:10px;background:#050a0e;transform:translateX(-50%)}
.gallery-screen>span{position:absolute;top:30px;left:15px;color:#ffffff59;font-size:7px}.gallery-screen>i{position:absolute;top:22%;right:14%;width:70%;height:28%;border-radius:16px;background:color-mix(in srgb,var(--showcase-accent) 24%,transparent)}
.gallery-screen b{position:relative;z-index:2;margin-bottom:12px;font-family:Georgia,serif;font-size:20px;font-weight:400}.gallery-screen em{position:relative;z-index:2;width:100%;height:7px;margin-top:6px;border-radius:7px;background:#ffffff14}.gallery-screen em:nth-of-type(2){width:76%}.gallery-screen em:nth-of-type(3){width:52%;background:color-mix(in srgb,var(--showcase-accent) 45%,transparent)}
.gallery-grid>article>span{display:block;margin-top:14px;color:var(--showcase-accent);font-size:7px}.gallery-grid h4{margin:3px 0 0;font-size:12px}.gallery-grid p{margin:4px 0 0;color:#ffffff73;font-size:8px;line-height:1.5}

@media(max-width:820px){.hero-portrait-wrap{min-height:650px;margin-top:35px}.hero-portrait-card{width:min(410px,86%)}.showcase-backdrop{padding:10px}.showcase-modal{max-height:calc(100vh - 20px)}.showcase-body{height:calc(100vh - 166px)}.showcase-demo,.showcase-architecture{grid-template-columns:1fr}.showcase-demo-copy{padding:30px}.showcase-phone-stage{min-height:650px}.architecture-principles{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.accent-toggle{display:none}.hero-portrait-wrap{min-height:570px}.hero-portrait-card{width:88%}.hero-portrait-wrap:before{width:84%;height:500px}.portrait-status{top:66px;right:-6px;min-width:132px}.portrait-overlay{right:20px;bottom:22px;left:20px}.showcase-header{min-height:76px;padding:14px 16px}.showcase-tabs{overflow-x:auto;padding:9px 12px}.showcase-tabs button{white-space:nowrap}.showcase-phone-stage .sim-phone{transform:scale(.94)}.showcase-gallery{padding:24px 18px}.showcase-gallery .gallery-heading{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr 1fr;gap:9px}.gallery-screen{border-radius:17px}}

.sim-appbar{grid-template-columns:34px 1fr auto}
.sim-appbar-actions{display:flex;gap:3px}.sim-appbar-actions button{width:23px;height:23px;font-size:6px}.sim-appbar-actions button:first-child{color:var(--sim-accent)}
.sim-notifications>button,.sim-profile-screen>button{display:grid;grid-template-columns:34px 1fr auto;width:100%;padding:11px 0;align-items:center;gap:9px;text-align:left;border-bottom:1px solid #ffffff14}
.sim-notifications>button i,.sim-profile-screen>button>span{display:grid;width:32px;height:32px;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--sim-accent) 15%,transparent);color:var(--sim-accent);font-size:9px;font-style:normal}
.sim-notifications b,.sim-notifications small,.sim-profile-screen>button b{display:block}.sim-notifications b,.sim-profile-screen>button b{font-size:8px}.sim-notifications small{color:#ffffff73;font-size:7px;line-height:1.35}.sim-notifications em,.sim-profile-screen>button em{color:#ffffff61;font-size:7px;font-style:normal}
.sim-login-screen{padding-top:14px}.sim-login-mark,.sim-profile-avatar{display:grid;width:58px;height:58px;margin-bottom:18px;place-items:center;border-radius:18px;background:var(--sim-accent);color:#071019;font-size:13px;font-weight:950;box-shadow:0 18px 40px color-mix(in srgb,var(--sim-accent) 18%,transparent)}
.sim-login-screen>p:not(.sim-kicker),.sim-profile-screen>p{margin:8px 0 17px;color:#ffffff7a;font-size:8px}.sim-login-screen label{display:block;margin-top:10px}.sim-login-screen label span{display:block;margin-bottom:4px;color:#ffffff73;font-size:7px}.sim-login-screen input{width:100%;padding:10px;color:#fff;border:1px solid #ffffff1a;border-radius:9px;background:#ffffff0d;font-size:8px}
.sim-profile-screen{text-align:center}.sim-profile-avatar{margin:4px auto 12px;border-radius:50%}.sim-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0;border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff14}.sim-profile-stats span{padding:10px 4px}.sim-profile-stats span+span{border-left:1px solid #ffffff14}.sim-profile-stats b,.sim-profile-stats small{display:block}.sim-profile-stats b{font-family:Georgia,serif;font-size:17px}.sim-profile-stats small{color:#ffffff6e;font-size:6px}

/* Responsive hero composition and editorial motion */
html{scroll-padding-top:96px}
.hero{grid-template-columns:minmax(0,1fr) minmax(440px,.9fr);align-items:start;gap:clamp(38px,5vw,86px);min-height:max(100svh,900px);padding-top:clamp(132px,16vh,168px)}
.hero-copy{position:relative;z-index:7;min-width:0;padding-top:12px}
.hero h1{max-width:700px;font-size:clamp(58px,6.1vw,96px);text-wrap:balance}
.hero-copy>p{max-width:620px}
.hero-portrait-wrap{min-width:0;min-height:640px}
.hero-portrait-card{width:min(400px,82%)}
.portrait-overlay{padding-right:26px}.portrait-overlay b{max-width:270px;text-wrap:balance}
.hero-portrait-wrap .chip-flutter{top:18%;left:0}.hero-portrait-wrap .chip-firebase{right:0;bottom:27%}.hero-portrait-wrap .chip-release{bottom:7%;left:5%}

.hero-intro{animation:hero-copy-in .82s cubic-bezier(.2,.72,.2,1) both}
.hero-intro-1{animation-delay:.08s}.hero-intro-2{animation-delay:.16s}.hero-intro-3{animation-delay:.27s}.hero-intro-4{animation-delay:.38s}.hero-intro-5{animation-delay:.49s}
.hero-intro-visual{animation-name:hero-visual-in;animation-delay:.24s;animation-duration:1s}
@keyframes hero-copy-in{from{opacity:0;filter:blur(7px);transform:translate3d(-52px,0,0)}to{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}}
@keyframes hero-visual-in{from{opacity:0;filter:blur(8px);transform:translate3d(48px,0,0) scale(.97)}to{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}}

html.reveal-ready [data-reveal]{opacity:0;filter:blur(7px);transform:translate3d(0,38px,0);transition:opacity .78s cubic-bezier(.2,.72,.2,1),filter .78s cubic-bezier(.2,.72,.2,1),transform .78s cubic-bezier(.2,.72,.2,1);will-change:opacity,filter,transform}
html.reveal-ready [data-reveal=left]{transform:translate3d(-54px,0,0)}
html.reveal-ready [data-reveal=right]{transform:translate3d(54px,0,0)}
html.reveal-ready [data-reveal].is-visible{opacity:1;filter:blur(0);transform:translate3d(0,0,0);will-change:auto}
html.reveal-ready .expertise-grid.is-visible>article,html.reveal-ready .projects-grid.is-visible>article,html.reveal-ready .process-line.is-visible>article,html.reveal-ready .experience-layout.is-visible .timeline-item{animation:reveal-child .62s cubic-bezier(.2,.72,.2,1) both}
html.reveal-ready .expertise-grid.is-visible>article:nth-child(2),html.reveal-ready .projects-grid.is-visible>article:nth-child(2),html.reveal-ready .process-line.is-visible>article:nth-child(2),html.reveal-ready .experience-layout.is-visible .timeline-item:nth-child(2){animation-delay:.09s}
html.reveal-ready .expertise-grid.is-visible>article:nth-child(3),html.reveal-ready .projects-grid.is-visible>article:nth-child(3),html.reveal-ready .process-line.is-visible>article:nth-child(3){animation-delay:.18s}
html.reveal-ready .expertise-grid.is-visible>article:nth-child(4),html.reveal-ready .projects-grid.is-visible>article:nth-child(4),html.reveal-ready .process-line.is-visible>article:nth-child(4){animation-delay:.27s}
html.reveal-ready .process-line.is-visible>article:nth-child(5){animation-delay:.36s}
@keyframes reveal-child{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}

@media(max-width:1440px){.hero-portrait-card{width:min(380px,84%)}}
@media(max-width:1180px){.hero{grid-template-columns:minmax(0,1fr) minmax(390px,.88fr);gap:28px}.hero h1{font-size:clamp(56px,6.8vw,82px)}.hero-portrait-wrap{min-height:610px}.hero-portrait-wrap .floating-chip{transform:scale(.9)}}
@media(max-width:920px){.hero{grid-template-columns:1fr;gap:30px;min-height:auto;padding-top:128px}.hero h1{max-width:780px}.hero-portrait-wrap{min-height:630px;margin-top:16px}}
@media(max-width:620px){html{scroll-padding-top:78px}.hero{gap:18px;padding-top:104px}.hero-copy{padding-top:0}.hero h1{font-size:clamp(48px,14.5vw,68px);line-height:1}.hero-portrait-wrap{min-height:550px}.hero-portrait-card{width:min(360px,86%)}.portrait-overlay{right:18px;bottom:20px;left:18px;padding-right:0}.portrait-overlay b{max-width:230px;font-size:22px}.hero-portrait-wrap .chip-flutter{left:1%}.hero-portrait-wrap .chip-firebase{right:1%}}
@media(prefers-reduced-motion:reduce){.hero-intro{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}html.reveal-ready [data-reveal],html.reveal-ready [data-reveal].is-visible{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}html.reveal-ready .expertise-grid.is-visible>article,html.reveal-ready .projects-grid.is-visible>article,html.reveal-ready .process-line.is-visible>article,html.reveal-ready .experience-layout.is-visible .timeline-item{animation:none!important}}