/* ── HERO ── */
.hero {
  position: relative;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: visible;
  display: flex;
  align-items: stretch;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-bg-grid { display: none; }

.hero-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(to right, #ffffff 0%, #ffffff 25%, rgba(255,255,255,0.85) 38%, rgba(255,255,255,0) 58%),
    radial-gradient(ellipse 80% 90% at 75% 50%, oklch(78% 0.13 55 / 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 60% 60% at 58% 25%, oklch(70% 0.15 320 / 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 55% 55% at 92% 25%, oklch(72% 0.13 280 / 0.30) 0%, transparent 55%),
    radial-gradient(ellipse 55% 55% at 58% 80%, oklch(75% 0.12 25 / 0.30) 0%, transparent 55%),
    radial-gradient(ellipse 55% 55% at 92% 78%, oklch(76% 0.14 45 / 0.30) 0%, transparent 55%);
}

/* Full height flex container */
.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  width: 42%;
  min-width: 320px;
  flex-shrink: 0;
  padding-top: 300px;
  padding-bottom: 120px;
  padding-left: clamp(1.5rem, 5vw, 5rem);
}

/* MacBook — absolute right, anchored to centered hero-inner's right edge */
.hero-device {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Sit at the right edge of the 1400px centered hero-inner, not viewport */
  right: max(clamp(1.5rem, 5vw, 5rem), calc((100vw - 1400px) / 2 + clamp(1.5rem, 5vw, 5rem)));
  width: clamp(420px, 50%, 720px);
  z-index: 5;
  display: flex;
  align-items: flex-start;
  padding-top: 80px;
  pointer-events: none;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  animation: fadeUp 0.6s 0.35s ease-out both;
  position: absolute;
  bottom: 18px;
  left: clamp(1.5rem, 5vw, 5rem);
  z-index: 4;
}

@media (max-width: 900px) {
  section.hero {
    overflow-x: hidden;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 clamp(1.2rem, 4vw, 2rem) !important;
  }
  .hero-bg { position: absolute; inset: 0; }
  .hero-bg-glow { background: none; }
  .hero-inner {
    display: block !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .hero-copy {
    max-width: 100% !important;
    width: 100% !important;
    padding-top: 72px !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
  }
  .hero-headline {
    white-space: normal !important;
    font-size: clamp(26px, 7vw, 42px) !important;
  }
  .hero-proof {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
    margin-top: 20px !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    animation: none !important;
    opacity: 1 !important;
    font-size: 11px !important;
  }

  /* MacBook: full width card */
  .hero-device {
    position: relative !important;
    top: auto !important; bottom: auto !important; right: auto !important;
    width: 100% !important;
    height: 400px !important;
    padding: 0 0 2rem !important;
    display: block !important;
    pointer-events: auto !important;
    z-index: 3 !important;
  }
  .macbook-wrap { width: 100% !important; height: 100% !important; }
  .mbp-mockup-wrapper, .mbp-container, .mbp-display, .display-edge, .bezel, .display-frame, .display-content {
    all: unset !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .mbp-mockup-wrapper {
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
    border: 1px solid #e5e7eb !important;
    background: white !important;
    height: calc(100% - 2rem) !important;
  }
  .mbp-keyboard, .mbp-shadow, .display-camera, .below-display, .macbookpro { display: none !important; }
  .mc { height: 100% !important; width: 100% !important; }
  .mm { overflow: hidden !important; }
}

@media (max-width: 640px) {
  .hero-device { height: 340px !important; }
  .hero-headline { font-size: clamp(22px, 6vw, 30px) !important; }
}

/* ── MACBOOK ── */
.hero-visual { display: none; }

/* ── MBP MOCKUP — desktop only ── */
@media (min-width: 901px) {
.hero-device {
  display: flex;
  align-items: center;
  justify-content: center;
}
}

.macbook-wrap {
  width: 100%;
}

.mbp-mockup-wrapper {
  width: 100%;
  margin: 0;
  height: auto;
  align-self: flex-start;
  position: relative;
  display: flex;
}
.mbp-container {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 58.6%;
  margin: 0 auto;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.mbp-display {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: block;
  width: 81.3%;
  height: 95.2%;
  margin: 0 auto;
  background-image: radial-gradient(#cfd0d1, #cfd0d1, #adadae);
  border: 1px solid #e5e7e9;
  border-radius: 3.1% / 4%;
  z-index: 1;
}
.mbp-display .display-edge {
  display: block;
  position: relative;
  width: 99.37%;
  height: 99.25%;
  margin: 0.3% auto;
  z-index: 2;
  background-color: #262626;
  border-radius: 2.75% / 3.8%;
}
.mbp-display .display-edge .bezel {
  display: block;
  position: relative;
  width: 99.5%;
  height: 99.2%;
  margin: auto;
  top: 0.4%;
  border-radius: 2.8% / 3.2%;
  z-index: 3;
  background-color: #010101;
}
.mbp-display .bezel:after {
  content: "";
  display: none;
  position: absolute;
  right: 0.15%; top: 0.3%;
  width: 62.5%; height: 100%;
  pointer-events: none;
  background: linear-gradient(55deg, rgba(0,0,0,0) 61%, rgba(242,245,248,0.15) 61%);
  background-blend-mode: screen;
  border-top-right-radius: 3.5% 3%;
}
.mbp-display.with-glare .bezel:after { display: block; }
.mbp-display .display-edge .bezel .display-camera {
  width: .62%; height: .95%;
  margin: 1% auto;
  left: 0; right: 0;
  position: absolute;
  border-radius: 50%;
  z-index: 5;
  background-color: #303132;
}
.mbp-display .display-edge .bezel .display-frame {
  display: block;
  position: absolute;
  width: 97.65%;
  height: 89.5%;
  margin: 0 auto;
  top: 3.5%;
  left: 0; right: 0;
  background-color: #151515;
  overflow: hidden;
}
.mbp-display .display-frame .display-content {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mbp-display .display-edge .bezel .below-display {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 4.9%;
  bottom: .15%;
  z-index: 3;
  background-color: #212121;
  border-bottom-right-radius: 2.5% 70%;
  border-bottom-left-radius: 2.5% 70%;
}
.mbp-display .display-edge .bezel .below-display .macbookpro {
  display: block;
  position: relative;
  width: 7.4%; height: 32%;
  margin-top: .5%;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 145 20' %3E%3Cpath fill='%23D8D8DA' d='M0.5 0.6h2.67L9.6 16.23h0.08L16.11 0.6h2.67v18.55h-2.16V4.81h-1.05l2.51-3.7l-7.46 18.04H8.66L1.21 1.11 l2.51 3.7H2.66v14.33H0.5V0.6z M23.23 18.9c-0.67-0.33-1.19-0.81-1.56-1.41s-0.56-1.32-0.56-2.12v-0.03c0-1.14 0.42-2.05 1.27-2.73 c0.85-0.68 2.04-1.07 3.57-1.15l4.95-0.28v1.74l-4.69 0.28c-0.89 0.05-1.58 0.27-2.08 0.64c-0.49 0.38-0.74 0.88-0.74 1.5v0.03 c0 0.64 0.24 1.15 0.73 1.53s1.13 0.57 1.93 0.57c0.7 0 1.34-0.15 1.9-0.44c0.56-0.29 1.01-0.7 1.34-1.21 c0.33-0.51 0.49-1.09 0.49-1.74v-3.95c0-0.81-0.26-1.45-0.76-1.92c-0.51-0.47-1.23-0.7-2.17-0.7c-0.86 0-1.55 0.19-2.08 0.56 c-0.53 0.37-0.85 0.86-0.98 1.46l-0.03 0.12h-2.16l0.01-0.14c0.07-0.74 0.32-1.41 0.75-2.01s1.03-1.08 1.79-1.43 c0.76-0.36 1.67-0.53 2.71-0.53c1.05 0 1.96 0.18 2.73 0.54c0.77 0.36 1.36 0.87 1.78 1.52c0.42 0.66 0.63 1.43 0.63 2.32v9.24 h-2.24v-2.17h-0.05c-0.26 0.49-0.6 0.91-1.03 1.28c-0.43 0.36-0.91 0.65-1.45 0.85c-0.54 0.2-1.1 0.3-1.7 0.3 C24.67 19.4 23.9 19.24 23.23 18.9z M37.12 18.55c-0.93-0.57-1.65-1.38-2.15-2.42c-0.51-1.04-0.76-2.27-0.76-3.68v-0.01 c0-1.41 0.26-2.63 0.77-3.66s1.23-1.84 2.16-2.4c0.93-0.57 2.01-0.85 3.24-0.85c1.11 0 2.07 0.22 2.87 0.65 c0.8 0.43 1.43 0.99 1.88 1.68c0.46 0.69 0.73 1.41 0.83 2.17l0.01 0.1h-2.19l-0.03-0.1c-0.16-0.67-0.52-1.26-1.07-1.76 S41.36 7.5 40.38 7.5c-0.77 0-1.45 0.2-2.03 0.61c-0.58 0.41-1.04 0.98-1.36 1.72c-0.33 0.74-0.49 1.62-0.49 2.63v0.01 c0 1.04 0.17 1.92 0.49 2.66c0.33 0.74 0.79 1.3 1.38 1.7c0.59 0.39 1.27 0.59 2.04 0.59c0.92 0 1.66-0.23 2.23-0.7 c0.57-0.47 0.95-1.07 1.14-1.82l0.03-0.1H46l-0.01 0.09c-0.12 0.85-0.43 1.61-0.93 2.3c-0.5 0.68-1.15 1.22-1.94 1.62 c-0.79 0.4-1.7 0.6-2.71 0.6C39.15 19.4 38.05 19.12 37.12 18.55z M48.4 0.6h2.31v18.55H48.4V0.6z'/%3E%3C/svg%3E");
}
.mbp-keyboard {
  width: 99.75%; height: 7.6%;
  margin: 0 auto;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.mbp-keyboard .front {
  width: 100%; height: 37.25%;
  position: absolute;
  margin: 0 auto;
  left: 0; right: 0; top: 0;
  background: linear-gradient(90deg,#68696b 0%,#757678 .15%,#a0a1a3 .3%,#cccdcf .5%,#e7e8ea .8%,#e8e9eb 1%,#dfe0e2 1.25%,#d1d2d4 1.5%,#adaeb0 2%,#a4a5a7 3%,#bbbdbf 4%,#e1e1e3 8%,#eaebed 15%,#e9eaec 25%,#e9eaec 75%,#eaebed 85%,#e1e1e3 92%,#bbbdbf 96%,#a4a5a7 97%,#adaeb0 98%,#d1d2d4 98.5%,#dfe0e2 98.75%,#e8e9eb 99%,#e7e8ea 99.2%,#cccdcf 99.5%,#a0a1a3 99.7%,#757678 99.85%,#68696b 100%);
  z-index: 100;
  border-radius: 1px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.mbp-keyboard .opener-left {
  position: relative;
  width: 6.917%; height: 65.5%;
  z-index: 101;
  border-radius: 0 0 0 20px;
  background: linear-gradient(180deg,rgba(195,198,200,.5) 0%,rgba(199,200,204,.5) 60%,rgba(115,125,130,.4) 100%),radial-gradient(circle at right,rgba(189,190,193,.5) 0%,rgba(189,190,193,.5) 50%,rgba(166,169,172,.5) 80%,rgba(30,34,40,.75) 100%);
  background-blend-mode: darken;
}
.mbp-keyboard .opener-right {
  position: relative;
  width: 6.917%; height: 65.5%;
  z-index: 101;
  border-radius: 0 0 20px 0;
  background: linear-gradient(180deg,rgba(195,198,200,.5) 0%,rgba(199,200,204,.5) 60%,rgba(115,125,130,.4) 100%),radial-gradient(circle at left,rgba(189,190,193,.5) 0%,rgba(189,190,193,.5) 50%,rgba(166,169,172,.5) 80%,rgba(30,34,40,.75) 100%);
  background-blend-mode: darken;
}
.mbp-keyboard .bottom-left {
  display: block;
  position: relative;
  width: 50%; height: 58%;
  top: 10%; z-index: 99;
  background: linear-gradient(180deg,#e5e6e9 0%,#909193 65%,#4e4f51 90%,#323234 96%,#29292b 100%);
  border-bottom-left-radius: 25% 60%;
}
.mbp-keyboard .bottom-right {
  display: block;
  position: relative;
  width: 50%; height: 58%;
  top: 10%; z-index: 99;
  background: linear-gradient(180deg,#e5e6e9 0%,#909193 65%,#4e4f51 90%,#323234 96%,#29292b 100%);
  border-bottom-right-radius: 25% 60%;
}
.mbp-shadow {
  width: 95%; height: 60%;
  display: flex;
  justify-content: center;
}
.mbp-shadow .shadow-left {
  display: block;
  position: relative;
  width: 50%; height: 100%;
  top: 10%; z-index: 90;
  background: linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(8,11,17,.85) 2.5%,rgba(29,32,36,.4) 15%,rgba(255,255,255,0) 50%);
  filter: blur(2px);
  background-blend-mode: multiply;
  border-top-left-radius: 20% 90%;
}
.mbp-shadow .shadow-right {
  display: block;
  position: relative;
  width: 50%; height: 100%;
  top: 10%; z-index: 90;
  background: linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(8,11,17,.85) 2.5%,rgba(29,32,36,.4) 15%,rgba(255,255,255,0) 50%);
  filter: blur(2px);
  background-blend-mode: multiply;
  border-top-right-radius: 20% 90%;
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding-top: 100px;
    padding-bottom: 40px;
    min-height: auto;
  }
  .hero-device { margin-top: 2rem; }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--amber-pale);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid oklch(82% 0.08 58);
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--amber-dim);
  text-transform: uppercase;
  margin-bottom: 2rem;
  animation: fadeUp 0.6s ease-out both;
  
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--amber);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: white;
  margin-bottom: 1.5rem;
  background: var(--amber);
  /* Bleed all the way to the left viewport edge */
  margin-left: calc(-1 * (50vw - min(700px, 50vw) + clamp(1.5rem, 5vw, 5rem)));
  padding-left: calc(50vw - min(700px, 50vw) + clamp(1.5rem, 5vw, 5rem));
  padding-right: clamp(1.5rem, 5vw, 5rem);
  padding-top: 16px;
  padding-bottom: 16px;
  display: table;
  white-space: nowrap;
}

.hero-headline em {
  font-style: normal;
  color: var(--ink);
}