/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-white); font-family: "Montserrat", sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Variables */
:root {
  --color-primary: #075B4B;
  --color-secondary: #20C9A0;
  --color-bg: #030706;
  --color-bg-secondary: #07130F;
  --color-white: #FFFFFF;
  --color-muted: #A7B2AE;
  --container: 1400px;
}

/* Base */
.container { width: min(100% - 5rem, var(--container)); margin-inline: auto; }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; padding: 2.1rem 0; transition: padding .3s ease, background .3s ease, backdrop-filter .3s ease, border-color .3s ease, box-shadow .3s ease; }
.site-header.header--scrolled { padding: 1rem 0; background: rgba(3,7,6,.82); border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: 0 8px 30px rgba(0,0,0,.12); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.brand { width: clamp(6.7rem, 9vw, 8.4rem); }
.brand img { width: 100%; height: auto; }
.primary-nav { display: flex; align-items: center; gap: clamp(1.5rem, 2.7vw, 3rem); font-size: .72rem; font-weight: 500; letter-spacing: .02em; }
.primary-nav a { color: rgba(255,255,255,.84); transition: color .25s ease, opacity .25s ease, background-color .25s ease, transform .25s ease; }
.primary-nav a:not(.nav-cta):hover { color: var(--color-secondary); }
.primary-nav a.is-active:not(.nav-cta) { color: var(--color-secondary); }
.nav-cta { padding: .85rem 1.35rem; border: 1px solid rgba(32,201,160,.55); border-radius: 999px; background: var(--color-primary); color: var(--color-white) !important; }
.nav-cta:hover { background: var(--color-secondary); color: var(--color-bg) !important; transform: translateY(-2px); }
.menu-toggle { display: none; border: 0; padding: .35rem; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; width: 1.55rem; height: 1px; margin: .32rem 0; background: var(--color-white); transition: transform .25s ease, opacity .25s ease; }
main > section { scroll-margin-top: 100px; }

/* Hero */
.hero { position: relative; min-height: max(850px, 100svh); overflow: hidden; isolation: isolate; background: var(--color-bg); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, rgba(3,7,6,.98) 0%, rgba(3,7,6,.8) 42%, rgba(3,7,6,.1) 100%); }
.hero-glow { position: absolute; z-index: 1; width: min(78vw, 1120px); aspect-ratio: 1.35; top: 4%; left: 34%; border-radius: 50%; background: radial-gradient(circle, rgba(7,91,75,.5) 0%, rgba(7,91,75,.22) 30%, rgba(3,7,6,0) 68%); filter: blur(58px); opacity: 0; animation: glow-in 1.2s ease .25s forwards; }
.hero-inner { position: relative; min-height: max(850px, 100svh); }
.hero-copy { position: relative; z-index: auto; width: 100%; padding-top: clamp(9.5rem, 13vh, 11.5rem); text-align: center; }
.eyebrow, .hero h1 { margin: 0; text-transform: uppercase; }
.eyebrow { position: relative; z-index: 5; color: rgba(255,255,255,.85); font-size: clamp(2rem, 3vw, 3.125rem); font-weight: 400; letter-spacing: .01em; opacity: 0; transform: translateY(18px); animation: text-in .8s cubic-bezier(.22,1,.36,1) .15s forwards; }
.hero h1 { position: relative; z-index: 2; margin-top: .35rem; font-size: clamp(5rem, 8vw, 8.45rem); line-height: .92; font-weight: 800; letter-spacing: -.07em; white-space: nowrap; opacity: 0; transform: translateY(24px); animation: text-in .9s cubic-bezier(.22,1,.36,1) .34s forwards; }
.hero-art { position: absolute; z-index: 3; left: 47%; bottom: -185px; width: clamp(760px, 58vw, 960px); max-width: none; transform: translateX(-50%) translateY(42px); opacity: 0; animation: art-in 1s cubic-bezier(.22,1,.36,1) .42s forwards; }
.hero-art img { width: 100%; height: auto; }
.wave-graphic { position: absolute; z-index: 2; right: -19%; bottom: -43%; width: min(78vw, 1120px); aspect-ratio: 1; opacity: .42; transform: rotate(-17deg); }
.wave-graphic span { position: absolute; inset: 0; border: 1px solid rgba(110,137,128,.2); border-radius: 50%; }
.wave-graphic span:nth-child(2) { inset: 9%; }.wave-graphic span:nth-child(3) { inset: 18%; }.wave-graphic span:nth-child(4) { inset: 27%; }.wave-graphic span:nth-child(5) { inset: 36%; }

/* Animations */
@keyframes text-in { to { opacity: 1; transform: translateY(0); } }
@keyframes art-in { to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes glow-in { to { opacity: 1; } }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Intro Section */
.intro-section { position: relative; overflow: hidden; background: #F5F7F6; color: #07130F; padding: clamp(5.5rem, 9vw, 7.5rem) 0 clamp(5.5rem, 9vw, 7.5rem); }
.intro-container { position: relative; }
.intro-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.intro-copy { max-width: 570px; }
.section-eyebrow { margin: 0 0 1.35rem; color: var(--color-primary); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.intro-title { margin: 0; color: #07130F; font-size: clamp(2.65rem, 5vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -.065em; }
.intro-description { max-width: 520px; margin: 2rem 0 0; color: #53605B; font-size: clamp(1rem, 1.25vw, 1.18rem); font-weight: 400; line-height: 1.75; }
.concept-visual { position: relative; min-height: 440px; }
.concept-card { position: absolute; z-index: 2; top: 18%; left: 2%; width: min(23rem, 47%); aspect-ratio: 1.6; padding: 1.7rem; overflow: hidden; border: 1px solid rgba(32,201,160,.35); border-radius: 1rem; background: linear-gradient(145deg, #1A211F, #101413 70%); box-shadow: 0 24px 45px rgba(7,19,15,.17); transform: rotate(-8deg); }
.concept-card::after { content: ""; position: absolute; right: -20%; bottom: -65%; width: 80%; aspect-ratio: 1; border: 1px solid rgba(32,201,160,.24); border-radius: 50%; box-shadow: 0 0 0 1rem rgba(32,201,160,.04), 0 0 0 2rem rgba(32,201,160,.035); }
.concept-card-mark { display: block; color: #20C9A0; font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 700; letter-spacing: -.06em; }
.concept-card-detail { position: absolute; bottom: 1.5rem; left: 1.7rem; color: rgba(255,255,255,.7); font-size: .55rem; letter-spacing: .1em; }
.concept-card-signal { position: absolute; right: 1.4rem; bottom: 1.45rem; color: #20C9A0; font-size: .85rem; letter-spacing: -.18em; }
.tap-lines { position: absolute; z-index: 1; top: 38%; left: 37%; display: flex; align-items: center; gap: .45rem; }
.tap-lines span { display: block; width: .45rem; height: .45rem; border: 1px solid rgba(7,91,75,.55); border-radius: 50%; }
.tap-lines span:nth-child(2) { width: 2.5rem; height: 4.7rem; border-color: transparent rgba(7,91,75,.35) transparent transparent; border-radius: 0 100% 100% 0; transform: rotate(-14deg); }
.tap-lines span:nth-child(3) { width: 3.4rem; height: 6rem; border-color: transparent rgba(32,201,160,.4) transparent transparent; border-radius: 0 100% 100% 0; transform: rotate(-14deg); }
.concept-phone { position: absolute; z-index: 2; top: 4%; right: 6%; width: min(15rem, 32%); height: auto; }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 5.5rem); margin-top: clamp(5rem, 8vw, 7.5rem); }
.benefit-item { position: relative; }.benefit-number { display: inline-block; color: #71807A; font-size: .68rem; font-weight: 600; letter-spacing: .12em; }.benefit-line { display: inline-block; width: 2.2rem; height: 1px; margin: 0 0 .2rem .7rem; background: #20C9A0; }.benefit-item h3 { margin: 1rem 0 .7rem; color: #075B4B; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; }.benefit-item p { max-width: 280px; margin: 0; color: #53605B; font-size: .92rem; line-height: 1.65; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }.reveal.is-visible { opacity: 1; transform: translateY(0); }.concept-visual.reveal { transform: translateX(28px); }.concept-visual.reveal.is-visible { transform: translateX(0); }.benefit-item:nth-child(2) { transition-delay: .08s; }.benefit-item:nth-child(3) { transition-delay: .16s; }



@media (prefers-reduced-motion: reduce) {
  .reveal, .concept-visual.reveal { opacity: 1; transform: none; transition: none; }
}

/* Sustainability Section */
.sustainability-section { position: relative; overflow: hidden; background: #030706; color: var(--color-white); padding: clamp(7rem, 10vw, 8.5rem) 0; }
.sustainability-container { position: relative; z-index: 1; }
.sustainability-glow { position: absolute; top: 8%; right: 4%; width: min(58vw, 820px); aspect-ratio: 1.2; border-radius: 50%; background: radial-gradient(ellipse, rgba(7,91,75,.34) 0%, rgba(7,91,75,.13) 42%, transparent 72%); filter: blur(60px); pointer-events: none; }
.sustainability-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.sustainability-copy { max-width: 560px; }
.sustainability-eyebrow { margin: 0 0 1.35rem; color: var(--color-secondary); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.sustainability-title { margin: 0; color: var(--color-white); font-size: clamp(3rem, 5.5vw, 4.875rem); font-weight: 800; line-height: .97; letter-spacing: -.07em; }
.sustainability-description { max-width: 520px; margin: 2rem 0 0; color: var(--color-muted); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.75; }
.sustainability-emphasis { margin: 1.2rem 0 0; color: rgba(255,255,255,.9); font-size: 1rem; font-weight: 600; }
.comparison-visual { position: relative; min-height: 440px; }
.comparison-word { position: absolute; z-index: -1; top: 4%; right: -4%; color: transparent; font-size: clamp(7rem, 15vw, 14rem); font-weight: 800; letter-spacing: -.1em; line-height: .8; -webkit-text-stroke: 1px rgba(255,255,255,.035); }
.paper-stack { position: absolute; z-index: 2; top: 18%; left: 4%; width: min(18rem, 47%); aspect-ratio: 1.62; }
.paper-card { position: absolute; inset: 0; display: block; border: 1px solid rgba(7,19,15,.12); border-radius: .65rem; background: #F5F7F6; box-shadow: 0 18px 38px rgba(0,0,0,.16); }
.paper-card i, .paper-card b, .paper-card em { position: absolute; display: block; height: .22rem; border-radius: 2rem; background: rgba(7,19,15,.16); }
.paper-card i { top: 28%; left: 12%; width: 39%; }.paper-card b { top: 41%; left: 12%; width: 65%; }.paper-card em { top: 54%; left: 12%; width: 48%; }
.paper-card-1 { transform: rotate(-13deg) translate(-9%, 4%); opacity: .38; }.paper-card-2 { transform: rotate(9deg) translate(8%, -4%); opacity: .5; }.paper-card-3 { transform: rotate(-7deg) translate(-4%, 6%); opacity: .65; }.paper-card-4 { transform: rotate(5deg) translate(5%, -5%); opacity: .75; }.paper-card-5 { transform: rotate(-3deg) translate(-2%, 3%); opacity: .88; }.paper-card-6 { transform: rotate(3deg) translate(2%, -2%); opacity: .94; }.paper-card-7 { transform: rotate(-1deg); }
.comparison-arrow { position: absolute; z-index: 3; top: 48%; left: 43%; display: flex; align-items: center; width: 7rem; color: var(--color-secondary); opacity: .72; }
.comparison-arrow span { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-secondary)); }.comparison-arrow i { width: .55rem; height: .55rem; border-top: 1px solid var(--color-secondary); border-right: 1px solid var(--color-secondary); transform: rotate(45deg); }
.sustainability-card { position: absolute; z-index: 4; top: 10%; right: 3%; width: min(22rem, 54%); aspect-ratio: 1.62; overflow: hidden; box-shadow: 0 28px 60px rgba(0,0,0,.32), 0 0 55px rgba(7,91,75,.2); transform: rotate(8deg); }.sustainability-card img { display: block; width: 100%; height: auto; }
.sustainability-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(5rem, 8vw, 8rem); }.sustainability-benefit { padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.1); }.sustainability-benefit > span { display: block; width: 2.3rem; height: 2px; margin-bottom: 1.25rem; background: var(--color-secondary); }.sustainability-benefit h3 { margin: 0 0 .7rem; color: var(--color-white); font-size: 1rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }.sustainability-benefit p { max-width: 290px; margin: 0; color: var(--color-muted); font-size: .9rem; line-height: 1.65; }
.sustainability-benefit:nth-child(2) { transition-delay: .08s; }.sustainability-benefit:nth-child(3) { transition-delay: .16s; }



/* Digital Identity Section */
.identity-section { position: relative; overflow: hidden; background: #F5F7F6; color: #07130F; padding: clamp(7rem, 10vw, 8.5rem) 0; }
.identity-container { position: relative; z-index: 1; }
.identity-orb { position: absolute; top: 18%; left: 5%; width: min(45vw, 620px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(32,201,160,.13), transparent 68%); filter: blur(22px); pointer-events: none; }
.identity-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "visual copy" "visual features"; align-items: center; gap: 0 clamp(3rem, 8vw, 8rem); }
.profile-phone-wrap { grid-area: visual; position: relative; min-height: 560px; }
.identity-phone { position: absolute; z-index: 2; top: 0; left: 50%; width: min(20rem, 72%); height: auto; transform: translateX(-50%) rotate(-4deg); }
.identity-card { position: absolute; z-index: 1; top: 14%; left: -20%; width: min(27rem, 78%); aspect-ratio: 1.62; overflow: hidden; box-shadow: 0 24px 52px rgba(7,19,15,.22); transform: rotate(-10deg); }.identity-card img { display: block; width: 100%; height: auto; }
.identity-wave { position: absolute; z-index: 1; top: 34%; right: 3%; width: 6rem; height: 9rem; overflow: hidden; transform: rotate(-12deg); }.identity-wave span { position: absolute; top: 50%; left: -70%; width: 7rem; height: 7rem; border: 1px solid rgba(7,91,75,.25); border-left-color: transparent; border-radius: 50%; }.identity-wave span + span { left: -105%; width: 10rem; height: 10rem; top: 31%; border-color: rgba(32,201,160,.24); border-left-color: transparent; }
.identity-copy { grid-area: copy; max-width: 700px; }.identity-eyebrow { margin: 0 0 1.35rem; color: var(--color-primary); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }.identity-title { margin: 0; color: #07130F; font-size: clamp(3rem, 5.2vw, 4.75rem); font-weight: 800; line-height: .97; letter-spacing: -.07em; }.identity-description { max-width: 520px; margin: 2rem 0 0; color: #53605B; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.75; }.identity-emphasis { margin: 1.2rem 0 0; color: #07130F; font-size: 1rem; font-weight: 600; }
.identity-features { grid-area: features; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem 2.6rem; margin-top: 2.8rem; }.identity-feature { position: relative; padding-left: 1rem; }.identity-feature > span { position: absolute; top: .4rem; left: 0; width: .34rem; height: .34rem; border-radius: 50%; background: var(--color-secondary); }.identity-feature h3 { margin: 0 0 .45rem; color: #07130F; font-size: .93rem; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }.identity-feature p { margin: 0; color: #71807A; font-size: .78rem; line-height: 1.55; }
.identity-feature:nth-child(2), .identity-feature:nth-child(4), .identity-feature:nth-child(6) { transition-delay: .08s; }.identity-feature:nth-child(3), .identity-feature:nth-child(5) { transition-delay: .16s; }



/* Customization Section */
.customization-section { position: relative; overflow: hidden; background: #030706; color: var(--color-white); padding: clamp(7rem, 10vw, 8.5rem) 0; }
.customization-container { position: relative; z-index: 1; }
.customization-glow { position: absolute; top: 20%; left: 50%; width: min(78vw, 1100px); aspect-ratio: 1.8; border-radius: 50%; background: radial-gradient(ellipse, rgba(7,91,75,.38) 0%, rgba(7,91,75,.15) 43%, transparent 72%); filter: blur(64px); transform: translateX(-50%); pointer-events: none; }
.customization-intro { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; }.customization-eyebrow { margin: 0 0 1.35rem; color: var(--color-secondary); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }.customization-title { margin: 0; color: var(--color-white); font-size: clamp(3.25rem, 6vw, 5.5rem); font-weight: 800; line-height: .95; letter-spacing: -.075em; }.customization-description { max-width: 700px; margin: 2rem auto 0; color: var(--color-muted); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.75; }.customization-emphasis { margin: 1.15rem 0 0; color: rgba(255,255,255,.9); font-size: 1rem; font-weight: 600; }
.custom-card-stage { position: relative; z-index: 2; height: clamp(300px, 30vw, 420px); max-width: 1100px; margin: clamp(4rem, 6vw, 5.5rem) auto 0; }.custom-card { position: absolute; top: 50%; width: min(33rem, 48%); aspect-ratio: 1.62; box-shadow: 0 30px 70px rgba(0,0,0,.35); }.custom-card img { display: block; width: 100%; height: auto; }.custom-card-left { left: 7%; transform: translateY(-50%) rotate(-8deg) translateX(-4%); }.custom-card-center { left: 50%; z-index: 3; box-shadow: 0 32px 80px rgba(0,0,0,.42), 0 0 55px rgba(7,91,75,.26); transform: translate(-50%, -50%); }.custom-card-right { right: 7%; transform: translateY(-50%) rotate(8deg) translateX(4%); }
.customization-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(3.5rem, 6vw, 5.5rem); }.customization-benefit { padding-top: 1.35rem; border-top: 1px solid rgba(255,255,255,.1); }.customization-benefit > span { display: block; color: #A7B2AE; font-size: .68rem; font-weight: 600; letter-spacing: .12em; }.customization-benefit > i { display: block; width: 2.3rem; height: 1px; margin: 1rem 0 1.15rem; background: var(--color-secondary); }.customization-benefit h3 { margin: 0 0 .7rem; color: #fff; font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }.customization-benefit p { max-width: 280px; margin: 0; color: var(--color-muted); font-size: .9rem; line-height: 1.65; }.customization-benefit:nth-child(2) { transition-delay: .08s; }.customization-benefit:nth-child(3) { transition-delay: .16s; }.custom-card-left { transition-delay: .04s; }.custom-card-center { transition-delay: .12s; }.custom-card-right { transition-delay: .2s; }.custom-card-left.reveal { transform: translate(-24px, -50%) rotate(-8deg) translateX(-4%); }.custom-card-left.reveal.is-visible { transform: translateY(-50%) rotate(-8deg) translateX(-4%); }.custom-card-center.reveal { transform: translate(-50%, calc(-50% + 24px)); }.custom-card-center.reveal.is-visible { transform: translate(-50%, -50%); }.custom-card-right.reveal { transform: translate(24px, -50%) rotate(8deg) translateX(4%); }.custom-card-right.reveal.is-visible { transform: translateY(-50%) rotate(8deg) translateX(4%); }



/* Use Cases Section */
.use-cases-section { position: relative; overflow: hidden; background: #F5F7F6; color: #07130F; padding: clamp(7rem, 10vw, 8.5rem) 0; }.use-cases-container { position: relative; }.use-cases-intro { max-width: 780px; margin: 0 auto; text-align: center; }.use-cases-eyebrow { margin: 0 0 1.35rem; color: var(--color-primary); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }.use-cases-title { margin: 0; color: #07130F; font-size: clamp(3.1rem, 5.5vw, 5rem); font-weight: 800; line-height: .96; letter-spacing: -.07em; }.use-cases-description { max-width: 650px; margin: 2rem auto 0; color: #66736F; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.75; }
.use-cases-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2vw, 2rem); margin-top: clamp(4.5rem, 7vw, 6.5rem); }.use-case-panel { position: relative; min-height: 310px; padding: clamp(1.75rem, 3vw, 2.75rem); overflow: hidden; border: 1px solid rgba(7,19,15,.1); border-radius: 1.75rem; background: rgba(255,255,255,.7); box-shadow: 0 14px 34px rgba(7,19,15,0); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }.use-case-panel:hover { transform: translateY(-5px); border-color: rgba(7,91,75,.35); box-shadow: 0 20px 45px rgba(7,19,15,.08); }.use-case-number { color: #66736F; font-size: .7rem; font-weight: 600; letter-spacing: .14em; }.use-case-panel h3 { position: absolute; left: clamp(1.75rem, 3vw, 2.75rem); bottom: 4.8rem; max-width: 75%; margin: 0; color: #07130F; font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; }.use-case-panel p { position: absolute; left: clamp(1.75rem, 3vw, 2.75rem); bottom: 1.85rem; max-width: 76%; margin: 0; color: #66736F; font-size: .9rem; line-height: 1.55; }.use-case-visual { position: absolute; top: 2.3rem; right: 2.6rem; width: 38%; height: 42%; }.use-case-visual::after { content: ""; position: absolute; right: 0; bottom: 0; width: 2.4rem; height: 2px; background: var(--color-secondary); opacity: .45; transition: width .3s ease; }.use-case-panel:hover .use-case-visual::after { width: 4rem; opacity: 1; }
.professional-visual span { position: absolute; right: 8%; top: 12%; width: 68%; height: 72%; border: 1px solid rgba(7,91,75,.28); border-radius: .55rem; background: #07130F; transform: rotate(8deg); }.professional-visual span::before { content: ""; position: absolute; top: 19%; left: 13%; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-secondary); }.professional-visual i { position: absolute; left: 0; bottom: 0; width: 62%; height: 73%; border: 1px solid rgba(7,19,15,.15); border-radius: .55rem; background: #fff; transform: rotate(-7deg); }.professional-visual i::before, .professional-visual i::after { content: ""; position: absolute; left: 15%; height: .25rem; border-radius: 1rem; background: #B7C5BF; }.professional-visual i::before { top: 30%; width: 45%; }.professional-visual i::after { top: 43%; width: 68%; }
.entrepreneur-visual { display: grid; place-items: center; width: 8.5rem; height: 8.5rem; border: 1px solid rgba(7,91,75,.2); border-radius: 50%; background: #E8F5F0; }.entrepreneur-visual strong { color: var(--color-primary); font-size: 2rem; font-weight: 700; letter-spacing: -.08em; }.entrepreneur-visual span { position: absolute; inset: 16%; border: 1px solid rgba(32,201,160,.45); border-radius: 50%; }
.team-visual { display: flex; align-items: center; justify-content: flex-end; gap: -.3rem; padding-right: .5rem; }.team-visual span { display: block; width: 40%; aspect-ratio: 1.62; border: 1px solid rgba(32,201,160,.28); border-radius: .45rem; background: #07130F; box-shadow: -8px 8px 0 rgba(7,91,75,.1); transform: rotate(-9deg); }.team-visual span:nth-child(2) { transform: rotate(0); background: #075B4B; }.team-visual span:nth-child(3) { transform: rotate(9deg); background: #fff; }
.event-visual { display: flex; align-items: center; justify-content: space-between; width: 75%; }.event-visual span, .event-visual b { display: block; width: 3.7rem; aspect-ratio: 1.62; border: 1px solid rgba(7,91,75,.2); border-radius: .45rem; background: #07130F; }.event-visual b { background: #fff; }.event-visual i { width: 2.8rem; height: 3.8rem; border: 1px solid rgba(32,201,160,.45); border-left-color: transparent; border-radius: 0 100% 100% 0; transform: rotate(-8deg); }
.use-cases-statement { margin: clamp(4rem, 7vw, 6rem) 0 0; color: #07130F; font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 600; text-align: center; }.use-cases-statement span { color: var(--color-primary); }
.use-case-panel:nth-child(2) { transition-delay: .08s; }.use-case-panel:nth-child(3) { transition-delay: .16s; }.use-case-panel:nth-child(4) { transition-delay: .24s; }.use-cases-statement { transition-delay: .32s; }


/* Final CTA Section */
.final-cta-section { position: relative; min-height: 700px; overflow: hidden; isolation: isolate; background: #030706; color: var(--color-white); padding: clamp(8rem, 11vw, 9rem) 0; }.final-cta-container { position: relative; z-index: 5; display: grid; min-height: 520px; place-items: center; }.final-cta-glow { position: absolute; z-index: 1; top: 11%; left: 50%; width: min(80vw, 1050px); aspect-ratio: 1.45; border-radius: 50%; background: radial-gradient(ellipse, rgba(7,91,75,.46) 0%, rgba(7,91,75,.17) 40%, rgba(32,201,160,.04) 58%, transparent 74%); filter: blur(62px); transform: translateX(-50%); pointer-events: none; }.final-cta-rings { position: absolute; z-index: 2; right: -16%; bottom: -65%; width: min(70vw, 980px); aspect-ratio: 1; opacity: .05; transform: rotate(-18deg); }.final-cta-rings span { position: absolute; inset: 0; border: 1px solid var(--color-secondary); border-radius: 50%; }.final-cta-rings span:nth-child(2) { inset: 12%; }.final-cta-rings span:nth-child(3) { inset: 24%; }.final-cta-word { position: absolute; z-index: 2; top: 14%; left: 50%; color: transparent; font-size: clamp(9rem, 22vw, 20rem); font-weight: 800; letter-spacing: -.12em; line-height: .8; opacity: .025; -webkit-text-stroke: 1px var(--color-white); transform: translateX(-50%); }.final-cta-content { position: relative; z-index: 5; max-width: 900px; text-align: center; }.final-cta-eyebrow { margin: 0 0 1.5rem; color: var(--color-secondary); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }.final-cta-title { margin: 0; color: var(--color-white); font-size: clamp(3.4rem, 7vw, 6.25rem); font-weight: 800; line-height: .92; letter-spacing: -.075em; }.final-cta-description { max-width: 620px; margin: 2rem auto 0; color: var(--color-muted); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.7; }.final-cta-button { display: inline-flex; min-height: 58px; align-items: center; justify-content: center; margin-top: 2.25rem; padding: 0 2.4rem; border: 1px solid rgba(32,201,160,.75); border-radius: 999px; background: var(--color-secondary); color: #030706; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease; }.final-cta-button:hover { background: #5AE0BF; box-shadow: 0 0 30px rgba(32,201,160,.28); transform: translateY(-2px); }.final-cta-reassurance { margin: 1.2rem 0 0; color: rgba(167,178,174,.75); font-size: .78rem; letter-spacing: .14em; }.final-cta-card { position: absolute; z-index: 3; right: 4%; bottom: -18%; width: min(22rem, 28vw); aspect-ratio: 1.62; overflow: hidden; box-shadow: 0 30px 65px rgba(0,0,0,.4); transform: rotate(13deg) translateY(28px); }.final-cta-card img { display: block; width: 100%; height: auto; }.final-cta-card.reveal.is-visible { transform: rotate(13deg) translateY(0); }
.final-cta-button { transition-delay: .08s; }.final-cta-reassurance { transition-delay: .14s; }.final-cta-card { transition-delay: .2s; }


/* Footer */
.site-footer { border-top: 1px solid rgba(255,255,255,.08); background: #020504; color: var(--color-white); padding: 4.4rem 0 2.2rem; }.footer-container { max-width: var(--container); }.footer-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 3rem; }.footer-brand img { width: clamp(9.4rem, 13vw, 11.5rem); height: auto; }.footer-links { display: flex; justify-content: flex-end; gap: clamp(1.2rem, 2.5vw, 2.6rem); padding-top: .25rem; }.footer-links a, .footer-legal a { color: rgba(255,255,255,.78); font-size: .82rem; font-weight: 500; transition: color .25s ease; }.footer-links a:hover, .footer-legal a:hover { color: var(--color-secondary); }.footer-links span { color: var(--color-secondary); font-size: .8em; }.footer-divider { height: 1px; margin: 3.8rem 0 1.8rem; background: rgba(255,255,255,.08); }.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }.footer-bottom p, .footer-legal a { margin: 0; color: rgba(167,178,174,.72); font-size: .72rem; font-weight: 400; }.footer-legal { display: flex; gap: 1.8rem; }.footer-links a:focus-visible, .footer-brand a:focus-visible, .footer-legal a:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 5px; border-radius: 2px; }

@media (max-width: 767px) { .site-footer { padding: 3.5rem 0 2rem; }.footer-main { align-items: flex-start; flex-direction: column; gap: 2rem; }.footer-links { justify-content: flex-start; gap: 1rem; padding: 0; }.footer-divider { margin: 2.7rem 0 1.5rem; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 1.2rem; }.footer-legal { gap: 1.2rem; flex-wrap: wrap; } }

/* Legal Pages */
.legal-page { background: #F5F7F6; color: #07130F; }.legal-header { padding: 2rem 0; background: #030706; }.legal-header img { width: clamp(8.5rem, 13vw, 11.5rem); height: auto; }.legal-main { padding: clamp(4.5rem, 8vw, 7rem) 1.25rem; }.legal-content { width: min(100%, 860px); margin: 0 auto; font-size: 1rem; line-height: 1.78; }.legal-back { display: inline-block; margin-bottom: 3.5rem; color: #075B4B; font-size: .8rem; font-weight: 600; }.legal-kicker { margin: 0 0 .8rem; color: #075B4B; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }.legal-content h1 { margin: 0; color: #07130F; font-size: clamp(2.5rem, 6vw, 5rem); line-height: .95; letter-spacing: -.07em; }.legal-updated { margin: 1rem 0 4rem; color: #66736F; font-size: .9rem; }.legal-content h2 { margin: 2.8rem 0 .8rem; color: #07130F; font-size: 1.25rem; line-height: 1.25; }.legal-content p { margin: 0 0 1rem; color: #53605B; }.legal-content ul { margin: 0 0 1rem; padding-left: 1.4rem; color: #53605B; }.legal-content li { padding-left: .25rem; }.legal-content a { color: #075B4B; font-weight: 600; }.legal-content strong { color: #07130F; font-weight: 600; }.footer-legal a.is-current { color: var(--color-secondary); }
@media (max-width: 767px) { .legal-header { padding: 1.35rem 0; }.legal-main { padding: 3.5rem 1.25rem 4.5rem; }.legal-back { margin-bottom: 2.8rem; }.legal-content { font-size: .95rem; line-height: 1.75; }.legal-content h1 { font-size: clamp(2.3rem, 12vw, 3.6rem); }.legal-updated { margin-bottom: 3rem; }.legal-content h2 { margin-top: 2.3rem; font-size: 1.12rem; } }

/* ==========================================================================
   Tablet & mobile (≤1024px). Everything above this line is the desktop
   layout; the rules below restack each section into normal document flow so
   visuals are sized by their own boxes and never sit on top of text.
   ========================================================================== */
@media (max-width: 1024px) {
  .container { width: min(calc(100% - 64px), var(--container)); }
  main > section { scroll-margin-top: 76px; }

  /* Header + slide-down menu */
  .site-header, .site-header.header--scrolled { padding: 0; }
  .header-inner { height: 76px; }
  .brand { position: relative; z-index: 12; width: 7.6rem; }
  .menu-toggle { display: block; position: relative; z-index: 12; margin-right: -.35rem; }
  .menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2) { opacity: 0; }
  .menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .primary-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 11;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: 100vh; max-height: 100svh; overflow-y: auto;
    padding: 96px 32px 32px;
    background: #07130F;
    border-bottom: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 24px 40px rgba(0,0,0,.35);
    font-size: .9rem;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .primary-nav a { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .primary-nav .nav-cta { margin-top: 1.5rem; padding: 1rem 1.2rem; border-bottom: 1px solid rgba(32,201,160,.55); text-align: center; }

  /* Hero: headline on top, card image below it in flow */
  .hero, .hero-inner { min-height: 0; }
  .hero-inner { display: flex; flex-direction: column; }
  .hero::after { background: linear-gradient(180deg, rgba(3,7,6,.97) 0%, rgba(3,7,6,.5) 50%, rgba(3,7,6,.15) 100%); }
  .hero-copy { padding-top: 150px; }
  .eyebrow { font-size: clamp(1.2rem, 3.6vw, 2.2rem); }
  .hero h1 { font-size: clamp(3.3rem, 12vw, 7rem); }
  .hero-art {
    --art-w: min(92vw, 780px);
    position: relative; left: 50%; bottom: auto; align-self: flex-start;
    width: var(--art-w); margin-top: 1rem; margin-bottom: calc(var(--art-w) * -.24);
  }
  .hero-glow { width: 130vw; top: 12%; left: -15%; filter: blur(48px); }
  .wave-graphic { right: -45%; bottom: -12%; width: 110vw; opacity: .3; }

  /* Shared section rhythm */
  .intro-section, .sustainability-section, .identity-section, .customization-section, .use-cases-section { padding: 6rem 0; }
  .intro-title, .sustainability-title, .identity-title, .customization-title, .use-cases-title { font-size: clamp(2.6rem, 7vw, 4.1rem); }
  .intro-description, .sustainability-description, .identity-description, .customization-description, .use-cases-description { font-size: 1rem; text-wrap: pretty; }
  .benefits-grid, .sustainability-benefits, .customization-benefits { gap: 2rem; margin-top: 4.5rem; }

  /* Intro */
  .intro-grid, .sustainability-grid { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .intro-copy, .sustainability-copy { max-width: 640px; text-align: center; }
  .intro-description, .sustainability-description { margin-inline: auto; }
  .concept-visual { width: min(100%, 580px); min-height: 0; aspect-ratio: 1.45; margin-top: 3.5rem; }
  .concept-card { top: 34%; left: 1%; width: 56%; padding: clamp(1rem, 3vw, 1.7rem); }
  .concept-card-detail { left: clamp(1rem, 3vw, 1.7rem); bottom: clamp(.9rem, 2.6vw, 1.5rem); }
  .concept-card-signal { right: clamp(.9rem, 2.6vw, 1.4rem); bottom: clamp(.9rem, 2.6vw, 1.45rem); }
  .tap-lines { top: 46%; left: 55%; transform: scale(.75); transform-origin: left center; }
  .concept-phone { top: 0; right: 3%; width: 33%; }

  /* Sustainability */
  .comparison-visual { width: min(100%, 600px); min-height: 0; aspect-ratio: 1.55; margin-top: 3.5rem; }
  .comparison-word { top: 2%; right: 0; font-size: clamp(5rem, 16vw, 9rem); }
  .paper-stack { top: 38%; left: 3%; width: 46%; }
  .sustainability-card { top: 10%; right: 2%; width: 54%; }
  .comparison-arrow { top: 60%; left: 40%; width: 4rem; }

  /* Digital identity: copy → phone → features */
  .identity-grid { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .identity-copy { order: 1; max-width: 640px; text-align: center; }
  .identity-description { margin-inline: auto; }
  .profile-phone-wrap { order: 2; width: min(100%, 520px); min-height: 0; aspect-ratio: .92; margin-top: 3.5rem; }
  .identity-phone { top: 0; left: 58%; width: 47%; transform: translateX(-50%) rotate(-3deg); }
  .identity-card { top: 18%; left: 0; width: 52%; transform: rotate(-10deg); }
  .identity-wave { top: 40%; right: 0; }
  .identity-features { order: 3; width: min(100%, 680px); margin-top: 3rem; gap: 1.75rem 2.5rem; }

  /* Customization: three cards fanned inside a fixed-ratio stage */
  .custom-card-stage { width: min(100%, 700px); height: auto; aspect-ratio: 2; margin-top: 3.5rem; }
  .custom-card { width: 50%; }
  .custom-card-left { left: 0; }
  .custom-card-right { right: 0; }
  .custom-card-center { width: 58%; }
  .custom-card-left.reveal { transform: translate(-20px, -50%) rotate(-7deg); }
  .custom-card-left.reveal.is-visible { transform: translateY(-50%) rotate(-7deg); }
  .custom-card-right.reveal { transform: translate(20px, -50%) rotate(7deg); }
  .custom-card-right.reveal.is-visible { transform: translateY(-50%) rotate(7deg); }
  .custom-card-center.reveal { transform: translate(-50%, calc(-50% + 20px)); }
  .custom-card-center.reveal.is-visible { transform: translate(-50%, -50%); }

  /* Use cases: panel content flows top-to-bottom instead of being pinned */
  .use-cases-grid { gap: 1rem; margin-top: 3.5rem; }
  .use-case-panel { display: flex; flex-direction: column; min-height: 0; padding: 1.75rem; border-radius: 1.4rem; }
  .use-case-panel .use-case-visual { position: relative; top: auto; right: auto; align-self: flex-end; flex: none; width: 46%; height: 7.5rem; margin: -1rem 0 1.75rem; }
  .use-case-panel .entrepreneur-visual { width: 7.5rem; }
  .use-case-panel .event-visual { width: 62%; }
  .use-case-panel h3, .use-case-panel p { position: static; max-width: none; }
  .use-case-panel h3 { margin-top: auto; margin-bottom: .6rem; font-size: clamp(1.1rem, 2.4vw, 1.3rem); }
  .use-case-panel p { font-size: .88rem; }
  .use-cases-statement { margin-top: 3.5rem; text-wrap: balance; }

  /* Final CTA: card sits below the button and bleeds off the section edge */
  .final-cta-section { min-height: 0; padding: 7rem 0 0; }
  .final-cta-container { display: flex; flex-direction: column; align-items: center; min-height: 0; }
  .final-cta-title { font-size: clamp(2.5rem, 8.5vw, 5rem); }
  .final-cta-card { position: relative; right: auto; bottom: auto; width: min(20rem, 58vw); margin: 4rem 0 -4rem; transform: rotate(10deg) translateY(28px); }
  .final-cta-card.reveal.is-visible { transform: rotate(10deg); }
  .final-cta-rings { right: -45%; bottom: -30%; width: 110vw; }
  .final-cta-word { top: 8%; }
}

/* Mobile */
@media (max-width: 767px) {
  .container { width: min(calc(100% - 40px), var(--container)); }
  main > section { scroll-margin-top: 68px; }
  .header-inner { height: 68px; }
  .brand { width: 6.8rem; }
  .primary-nav { padding: 84px 20px 24px; }

  .hero-copy { padding-top: 124px; }
  .hero h1 { margin-top: .5rem; letter-spacing: -.075em; }
  .hero-art { --art-w: 122vw; left: 43%; margin-top: 1.25rem; margin-bottom: calc(var(--art-w) * -.2); }
  .wave-graphic { right: -70%; bottom: -8%; width: 150vw; opacity: .22; }

  .intro-section, .sustainability-section, .identity-section, .customization-section, .use-cases-section { padding: 4.75rem 0; }
  .intro-title, .sustainability-title, .identity-title, .customization-title, .use-cases-title { font-size: clamp(2.1rem, 9.6vw, 3rem); line-height: 1; }
  .section-eyebrow, .sustainability-eyebrow, .identity-eyebrow, .customization-eyebrow, .use-cases-eyebrow { margin-bottom: 1rem; font-size: .66rem; letter-spacing: .15em; }
  .intro-description, .sustainability-description, .identity-description, .customization-description, .use-cases-description { margin-top: 1.4rem; font-size: .95rem; line-height: 1.7; }

  /* Stacked lists with dividers */
  .benefits-grid, .sustainability-benefits, .customization-benefits { display: block; margin-top: 3rem; }
  .benefit-item, .sustainability-benefit, .customization-benefit { padding: 1.35rem 0; border-top: 1px solid rgba(7,19,15,.12); }
  .benefit-item:last-child { border-bottom: 1px solid rgba(7,19,15,.12); }
  .sustainability-benefit, .customization-benefit { border-top-color: rgba(255,255,255,.1); }
  .benefit-item p, .sustainability-benefit p, .customization-benefit p { max-width: none; }

  .concept-visual { margin-top: 2.75rem; }
  .tap-lines { display: none; }
  .concept-card-mark { font-size: 1.1rem; }
  .concept-card-detail { font-size: .45rem; }

  .comparison-visual { margin-top: 2.75rem; aspect-ratio: 1.4; }
  .comparison-word { font-size: 5.5rem; }
  .paper-stack { top: 40%; left: 4%; width: 50%; }
  .sustainability-card { top: 8%; right: 1%; width: 58%; }
  .comparison-arrow { display: none; }

  .profile-phone-wrap { margin-top: 2.75rem; }
  .identity-wave { transform: scale(.7) rotate(-12deg); transform-origin: right center; }
  .identity-features { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
  .identity-feature { padding: 1.2rem 0 1.2rem 1.1rem; border-top: 1px solid rgba(7,19,15,.1); }
  .identity-feature > span { top: 1.6rem; }
  .identity-feature p { font-size: .85rem; line-height: 1.6; }

  .custom-card-stage { aspect-ratio: 1.6; margin-top: 2.75rem; }
  .custom-card { width: 54%; }
  .custom-card-center { width: 66%; }

  .use-cases-grid { grid-template-columns: 1fr; margin-top: 2.75rem; }
  .use-case-panel { padding: 1.5rem; }
  .use-case-panel .use-case-visual { width: 44%; height: 6.5rem; margin-bottom: 1.5rem; }
  .use-case-panel .entrepreneur-visual { width: 6.5rem; }
  .use-case-panel .entrepreneur-visual strong { font-size: 1.6rem; }
  .use-cases-statement { max-width: 20rem; margin-inline: auto; font-size: 1.2rem; }

  .final-cta-section { padding-top: 5rem; }
  .final-cta-eyebrow { margin-bottom: 1.1rem; font-size: .66rem; letter-spacing: .17em; }
  .final-cta-title { font-size: clamp(2.3rem, 10.5vw, 3.4rem); line-height: .95; }
  .final-cta-description { max-width: 22rem; margin-top: 1.5rem; font-size: .95rem; line-height: 1.65; }
  .final-cta-button { width: 100%; max-width: 320px; min-height: 56px; margin-top: 1.8rem; padding: 0 1.25rem; }
  .final-cta-card { width: min(15rem, 66vw); margin-top: 3rem; margin-bottom: -3rem; }
  .final-cta-word { font-size: 7rem; }
  .final-cta-rings { right: -70%; bottom: -25%; width: 150vw; }

  .footer-brand img { width: 9.5rem; }
}

@media (max-width: 380px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
  .hero h1 { font-size: 15vw; }
  .eyebrow { font-size: 1.05rem; }
}