/* ============================================================
   DO TO REFINE — Presentation Website
   White base · Black type · Editorial / Minimal
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&family=Space+Mono:wght@400;700&display=swap');

   /* ─── LANG TOGGLE ─── */
   .lang-toggle-wrap {
     position: fixed;
     top: 28px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1000;
     display: flex;
     align-items: center;
     gap: 6px;
     background: rgba(255,255,255,0.85);
     backdrop-filter: blur(8px);
     border: 1px solid rgba(0,0,0,0.12);
     padding: 4px 12px;
   }
   
   .lang-btn {
     font-family: var(--mono);
     font-size: 10px;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     background: none;
     border: none;
     cursor: pointer;
     color: var(--gray-500);
     padding: 2px 4px;
     transition: color 0.2s;
   }
   
   .lang-btn.active {
     color: var(--black);
     font-weight: 700;
   }
   
   .lang-divider {
     font-family: var(--mono);
     font-size: 10px;
     color: var(--gray-300);
   }

   /* ─── RESET & BASE ─── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   :root {
     --black: #0a0a0a;
     --white: #ffffff;
     --gray-100: #f5f5f5;
     --gray-300: #d4d4d4;
     --gray-500: #0a0a0a;
     --gray-700: #0a0a0a;
     --accent: #0a0a0a;
     /* Helvetica Now Display — commercial font, falls back to system Helvetica */
     --serif: 'Helvetica Now Display', 'HelveticaNeue-CondensedBlack', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     --sans: 'Inter', system-ui, sans-serif;
     --mono: 'Space Mono', monospace;
   }
   
   html {
     scroll-behavior: smooth;
     font-size: 16px;
   }
   
   body {
     background: var(--white);
     color: var(--black);
     font-family: var(--sans);
     -webkit-font-smoothing: antialiased;
   }
   
   /* ─── GRID BG ─── */
   body::before {
     content: '';
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
     background-image:
       linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
       linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
     background-size: 60px 60px;
   }
   
   /* ─── SLIDES ─── */
   .slide {
     position: relative;
     min-height: 100vh;
     width: 100%;
     display: flex;
     align-items: stretch;
     border-bottom: 1px solid var(--gray-300);
     overflow: hidden;
   }
   
   .slide-inner {
     position: relative;
     z-index: 1;
     width: 100%;
     padding: 48px 72px 80px;
     display: flex;
     flex-direction: column;
   }
   
   /* ─── CORNER LABELS ─── */
   .corner-label {
     position: absolute;
     top: 36px;
     font-family: var(--mono);
     font-size: 10px;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--gray-500);
   }
   
   .corner-label.top-left { left: 72px; }
   .corner-label.top-right { right: 72px; }
   
   .slide-num {
     font-weight: 700;
     color: var(--black);
   }
   
   /* ─── HERO SLIDE ─── */
   .slide-hero {
     background: var(--white);
   }
   
   .hero-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     padding-top: 80px;
   }
   
   .hero-text-wrap {
     margin-bottom: 60px;
   }
   
   /* ─── GOOEY MORPH CONTAINER ─── */
   /* The blur+contrast trick on the parent creates the liquid ink merge */
   .hero-word {
     font-family: var(--serif);
     font-size: clamp(140px, 22vw, 280px);
     font-weight: 900;
     line-height: 0.88;
     letter-spacing: -0.04em;
     color: var(--black);
     position: relative;
     height: clamp(130px, 20vw, 260px);
     display: block;
     /* SVG gooey filter applied to parent */
     filter: url(#gooey);
   }
   
   .hero-state {
     position: absolute;
     top: 0;
     left: 0;
     display: block;
     white-space: nowrap;
   }
   
   /* DO: visible → blurs out → gone */
   .hero-do {
     animation: gooeyShrink 5s ease-in-out infinite;
   }
   
   /* REFINE: starts blurred/gone → blurs in */
   .hero-refine {
     animation: gooeyGrow 5s ease-in-out infinite;
   }
   
   @keyframes gooeyShrink {
     0%   { opacity: 1; filter: blur(0px); transform: translateY(0) scaleX(1); }
     28%  { opacity: 1; filter: blur(0px); transform: translateY(0) scaleX(1); }
     42%  { opacity: 0; filter: blur(18px); transform: translateY(-8px) scaleX(0.94); }
     72%  { opacity: 0; filter: blur(18px); transform: translateY(-8px) scaleX(0.94); }
     88%  { opacity: 1; filter: blur(0px); transform: translateY(0) scaleX(1); }
     100% { opacity: 1; filter: blur(0px); transform: translateY(0) scaleX(1); }
   }
   
   @keyframes gooeyGrow {
     0%   { opacity: 0; filter: blur(18px); transform: translateY(12px) scaleX(0.94); }
     28%  { opacity: 0; filter: blur(18px); transform: translateY(12px) scaleX(0.94); }
     42%  { opacity: 1; filter: blur(0px); transform: translateY(0) scaleX(1); }
     72%  { opacity: 1; filter: blur(0px); transform: translateY(0) scaleX(1); }
     88%  { opacity: 0; filter: blur(18px); transform: translateY(-8px) scaleX(0.94); }
     100% { opacity: 0; filter: blur(18px); transform: translateY(12px) scaleX(0.94); }
   }
   
   .hero-subtitle {
     margin-top: 32px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     padding-left: 4px;
   }
   
   /* DO body text in hero */
   .hero-body-text {
     margin-top: 40px;
     max-width: 560px;
     padding-left: 4px;
   }
   
   .hero-body-text p {
     font-family: var(--sans);
     font-size: 15px;
     font-weight: 300;
     line-height: 1.85;
     color: var(--gray-700);
   }
   
   .hero-body-text p strong {
     color: var(--black);
     font-weight: 600;
   }
   
   .subtitle-line {
     font-family: var(--sans);
     font-size: 15px;
     font-weight: 300;
     color: var(--gray-700);
     letter-spacing: 0.02em;
   }
   
   .subtitle-tag {
     font-family: var(--mono);
     font-size: 11px;
     color: var(--gray-500);
     letter-spacing: 0.1em;
   }
   
   .hero-byline {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-top: auto;
     padding-bottom: 20px;
   }
   
   .byline-label {
     font-family: var(--mono);
     font-size: 11px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--gray-700);
   }
   
   .byline-dot {
     color: var(--gray-300);
     font-size: 18px;
   }
   
   /* Scroll indicator */
   .scroll-indicator {
     position: absolute;
     bottom: 40px;
     right: 72px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
   }
   
   .scroll-text {
     font-family: var(--mono);
     font-size: 9px;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--gray-500);
     writing-mode: vertical-rl;
   }
   
   .scroll-line {
     width: 1px;
     height: 60px;
     background: var(--gray-300);
     position: relative;
     overflow: hidden;
   }
   
   .scroll-line::after {
     content: '';
     position: absolute;
     top: -100%;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--black);
     animation: scrollDown 1.8s ease-in-out infinite;
   }
   
   @keyframes scrollDown {
     0% { top: -100%; }
     100% { top: 100%; }
   }
   
   /* ─── NARRATIVE LAYOUT ─── */
   .slide-narrative .slide-inner {
     justify-content: center;
   }
   
   .narrative-layout {
     display: grid;
     grid-template-columns: 1fr 1.4fr;
     gap: 80px;
     align-items: start;
     margin-top: 120px;
     padding-bottom: 40px;
   }
   
   .narrative-overline {
     font-family: var(--mono);
     font-size: 10px;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--gray-500);
     margin-bottom: 20px;
   }
   
   .narrative-title {
     font-family: var(--serif);
     font-size: clamp(36px, 5vw, 72px);
     font-weight: 700;
     line-height: 1.05;
     color: var(--black);
   }
   
   .narrative-quote-line {
     width: 40px;
     height: 2px;
     background: var(--black);
     margin-bottom: 32px;
   }
   
   .narrative-body {
     font-family: var(--sans);
     font-size: 15px;
     font-weight: 300;
     line-height: 1.9;
     color: var(--gray-700);
     margin-bottom: 24px;
   }
   
   .narrative-body strong {
     color: var(--black);
     font-weight: 600;
   }
   
   .narrative-keyword-row {
     display: flex;
     gap: 10px;
     margin-top: 24px;
     flex-wrap: wrap;
   }
   
   .keyword-chip {
     font-family: var(--mono);
     font-size: 10px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     border: 1px solid var(--black);
     padding: 6px 14px;
     color: var(--black);
   }
   
   /* Tool tags */
   .tool-tags {
     display: flex;
     gap: 10px;
     margin-top: 24px;
     flex-wrap: wrap;
   }
   
   .tool-tag {
     font-family: var(--mono);
     font-size: 10px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     background: var(--black);
     color: var(--white);
     padding: 6px 14px;
   }
   
   /* ─── STANDARD LAYOUT ─── */
   .standard-header {
     margin-top: 100px;
     margin-bottom: 60px;
   }
   
   .standard-overline {
     font-family: var(--mono);
     font-size: 10px;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--gray-500);
     margin-bottom: 20px;
   }
   
   .standard-title {
     font-family: var(--serif);
     font-size: clamp(36px, 5vw, 68px);
     font-weight: 700;
     line-height: 1.05;
     color: var(--black);
   }
   
   .standard-title em {
     font-style: italic;
     font-weight: 400;
   }
   
   /* ─── PILLARS GRID ─── */
   .pillars-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0;
     border-top: 1px solid var(--gray-300);
   }
   
   .pillar-item {
     padding: 40px 32px;
     border-right: 1px solid var(--gray-300);
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.5s ease, transform 0.5s ease;
   }
   
   .pillar-item:last-child { border-right: none; }
   
   .pillar-item.visible {
     opacity: 1;
     transform: translateY(0);
   }
   
   .pillar-num {
     font-family: var(--mono);
     font-size: 11px;
     color: var(--gray-500);
     letter-spacing: 0.1em;
     margin-bottom: 20px;
   }
   
   .pillar-name {
     font-family: var(--serif);
     font-size: 20px;
     font-weight: 700;
     color: var(--black);
     margin-bottom: 14px;
   }
   
   .pillar-desc {
     font-family: var(--sans);
     font-size: 13px;
     font-weight: 300;
     line-height: 1.75;
     color: var(--gray-700);
   }
   
   /* ─── SLIDE 3: VIDEO BG + GLASSMORPHISM ─── */
   .slide-video-bg {
     position: absolute;
     inset: 0;
     z-index: 0;
     overflow: hidden;
   }
   
   .slide-video-bg video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0.75;
   }
   
   /* Dark overlay so the whole slide doesn't glare */
   .slide-video-bg::after {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(255,255,255,0.18);
   }
   
   /* Glass card wrapping the content on slide 3 */
   .glass-card {
     position: relative;
     z-index: 2;
     background: rgba(255, 255, 255, 0.10);
     backdrop-filter: blur(6px) saturate(1.1);
     -webkit-backdrop-filter: blur(6px) saturate(1.1);
     border: 1px solid rgba(255,255,255,0.25);
     border-radius: 2px;
     padding: 48px 52px;
     margin-top: 60px;
   }
   
   /* On slide-3, make the pillar grid inside the glass card */
   #slide-3 .standard-header {
     position: relative;
     z-index: 2;
   }
   
   #slide-3 .pillars-grid {
     position: relative;
     z-index: 2;
   }
   
   /* Pillar text readable on glass */
   #slide-3 .pillar-item {
     border-right-color: rgba(0,0,0,0.15);
   }
   
   /* Bloom visual */
   .bloom-visual {
     position: absolute;
     right: -30px;
     bottom: -30px;
     width: 160px;
     height: 160px;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0.4;
     pointer-events: none;
   }
   
   .bloom-ring {
     position: absolute;
     border: 1px solid rgba(0,0,0,0.15);
     border-radius: 50%;
     animation: bloomPulse 3s ease-in-out infinite;
   }
   
   .bloom-ring.r1 { width: 40px; height: 40px; animation-delay: 0s; }
   .bloom-ring.r2 { width: 70px; height: 70px; animation-delay: 0.4s; }
   .bloom-ring.r3 { width: 100px; height: 100px; animation-delay: 0.8s; }
   .bloom-ring.r4 { width: 140px; height: 140px; animation-delay: 1.2s; }
   
   @keyframes bloomPulse {
     0%, 100% { opacity: 0.3; transform: scale(1); }
     50% { opacity: 1; transform: scale(1.03); }
   }
   
   .bloom-core {
     font-family: var(--serif);
     font-size: 20px;
     font-weight: 900;
     letter-spacing: 0.05em;
     color: var(--black);
     position: relative;
     z-index: 2;
   }
   
   /* ─── THREE PILLARS ─── */
   .three-pillars {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 0;
     border-top: 1px solid var(--gray-300);
   }
   
   .tpillar {
     padding: 50px 40px;
     border-right: 1px solid var(--gray-300);
     display: flex;
     gap: 20px;
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.5s ease, transform 0.5s ease;
   }
   
   .tpillar:last-child { border-right: none; }
   
   .tpillar.visible { opacity: 1; transform: translateY(0); }
   
   .tpillar-bracket {
     font-family: var(--serif);
     font-size: 40px;
     font-weight: 400;
     color: var(--gray-300);
     line-height: 1;
     flex-shrink: 0;
   }
   
   .tpillar-title {
     font-family: var(--serif);
     font-size: 22px;
     font-weight: 700;
     color: var(--black);
     margin-bottom: 16px;
   }
   
   .tpillar-desc {
     font-family: var(--sans);
     font-size: 13px;
     font-weight: 300;
     line-height: 1.8;
     color: var(--gray-700);
   }
   
   .tpillar-desc strong {
     color: var(--black);
     font-weight: 600;
   }
   
   /* ─── ZERO LATENCY SLIDE ─── */
   .zerolat-layout {
     display: grid;
     grid-template-columns: 1fr 1.5fr;
     gap: 100px;
     align-items: start;
     margin-top: 100px;
   }
   
   .zerolat-title {
     font-family: var(--serif);
     font-size: clamp(52px, 7vw, 100px);
     font-weight: 900;
     line-height: 0.9;
     letter-spacing: -0.02em;
     color: var(--black);
     margin: 20px 0 28px;
   }
   
   .zerolat-tagline {
     font-family: var(--sans);
     font-size: 13px;
     font-weight: 300;
     color: var(--gray-500);
     line-height: 1.6;
     letter-spacing: 0.02em;
   }
   
   .zlat-item {
     display: flex;
     align-items: flex-start;
     gap: 24px;
     padding: 28px 0;
     border-bottom: 1px solid var(--gray-300);
     opacity: 0;
     transform: translateX(20px);
     transition: opacity 0.5s ease, transform 0.5s ease;
   }
   
   .zlat-item:first-child { border-top: 1px solid var(--gray-300); }
   .zlat-item.visible { opacity: 1; transform: translateX(0); }
   
   .zlat-arrow {
     font-family: var(--mono);
     font-size: 16px;
     color: var(--gray-500);
     margin-top: 2px;
     flex-shrink: 0;
   }
   
   .zlat-name {
     font-family: var(--sans);
     font-size: 14px;
     font-weight: 600;
     color: var(--black);
     margin-bottom: 6px;
   }
   
   .zlat-desc {
     font-family: var(--sans);
     font-size: 13px;
     font-weight: 300;
     color: var(--gray-700);
     line-height: 1.7;
   }
   
   .zlat-desc strong {
     color: var(--black);
     font-weight: 600;
   }
   
   /* ─── FLOW SLIDE 7 ─── */
   .output-flow {
     display: flex;
     flex-direction: column;
     max-width: 700px;
   }
   
   .flow-step {
     display: flex;
     gap: 28px;
     align-items: flex-start;
     padding: 24px 0;
     opacity: 0;
     transform: translateY(16px);
     transition: opacity 0.4s ease, transform 0.4s ease;
   }
   
   .flow-step.visible { opacity: 1; transform: translateY(0); }
   
   .flow-bracket {
     font-family: var(--mono);
     font-size: 11px;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--black);
     font-weight: 700;
     min-width: 70px;
     padding-top: 2px;
   }
   
   .flow-desc {
     font-family: var(--sans);
     font-size: 14px;
     font-weight: 300;
     color: var(--gray-700);
     line-height: 1.75;
   }
   
   .flow-desc strong {
     color: var(--black);
     font-weight: 600;
   }
   
   .flow-step-highlight {
     background: var(--black);
     padding: 24px 28px !important;
     margin-top: 8px;
   }
   
   .flow-step-highlight .flow-bracket { color: var(--gray-300); }
   .flow-step-highlight .flow-desc { color: rgba(255,255,255,0.8); }
   .flow-step-highlight .flow-desc strong { color: var(--white); }
   
   .flow-arrow {
     font-family: var(--mono);
     font-size: 14px;
     color: var(--gray-300);
     padding-left: 8px;
   }
   
   /* ─── CONCLUSION ─── */
   .slide-conclusion {
     background: var(--white);
   }
   
   .conclusion-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     max-width: 800px;
     margin-top: 100px;
   }
   
   .conclusion-overline {
     font-family: var(--mono);
     font-size: 10px;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--gray-500);
     margin-bottom: 32px;
   }
   
   .conclusion-body {
     font-family: var(--sans);
     font-size: 17px;
     font-weight: 300;
     line-height: 1.9;
     color: var(--gray-700);
     margin-bottom: 48px;
   }
   
   .conclusion-body strong {
     color: var(--black);
     font-weight: 600;
   }
   
   .conclusion-divider {
     width: 40px;
     height: 2px;
     background: var(--black);
     margin-bottom: 48px;
   }
   
   .conclusion-quote {
     font-family: var(--serif);
     font-size: clamp(18px, 2.5vw, 28px);
     font-style: italic;
     font-weight: 400;
     line-height: 1.5;
     color: var(--black);
     border-left: 2px solid var(--black);
     padding-left: 28px;
     margin-bottom: 80px;
   }
   
   .conclusion-do-word {
     position: absolute;
     bottom: 40px;
     right: 60px;
     font-family: var(--serif);
     font-size: clamp(80px, 14vw, 180px);
     font-weight: 900;
     letter-spacing: -0.04em;
     color: var(--gray-100);
     line-height: 1;
     pointer-events: none;
     user-select: none;
   }
   
   /* Conclusion: live DO→REFINE morph bottom-right */
   .conclusion-morph-word {
     position: absolute;
     bottom: 48px;
     right: 60px;
     font-family: var(--serif);
     font-weight: 900;
     letter-spacing: -0.04em;
     color: rgba(10,10,10,0.12);
     line-height: 0.9;
     pointer-events: none;
     user-select: none;
     filter: url(#gooey);
   }
   
   .conclusion-morph-word .hero-do {
     animation: gooeyShrink 5s ease-in-out infinite;
     animation-delay: 2.5s;
   }
   
   .conclusion-morph-word .hero-refine {
     animation: gooeyGrow 5s ease-in-out infinite;
     animation-delay: 2.5s;
   }
   
   /* ─── REVEAL ANIMATIONS ─── */
   .reveal-item {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.5s ease, transform 0.5s ease;
   }
   
   .reveal-item.visible {
     opacity: 1;
     transform: translateY(0);
   }
   
   /* Stagger delays */
   .reveal-item:nth-child(1) { transition-delay: 0s; }
   .reveal-item:nth-child(2) { transition-delay: 0.12s; }
   .reveal-item:nth-child(3) { transition-delay: 0.24s; }
   .reveal-item:nth-child(4) { transition-delay: 0.36s; }
   .reveal-item:nth-child(5) { transition-delay: 0.48s; }
   
   /* ─── RESPONSIVE ─── */
   @media (max-width: 1024px) {
     .slide-inner { padding: 48px 40px 80px; }
     .corner-label.top-left { left: 40px; }
     .corner-label.top-right { right: 40px; }
     .scroll-indicator { right: 40px; }
     .narrative-layout { grid-template-columns: 1fr; gap: 40px; }
     .pillars-grid { grid-template-columns: repeat(2, 1fr); }
     .three-pillars { grid-template-columns: 1fr; }
     .zerolat-layout { grid-template-columns: 1fr; gap: 40px; }
   }
   
   @media (max-width: 640px) {
     .slide-inner { padding: 64px 24px 60px; }
     .corner-label.top-left { left: 24px; font-size: 9px; letter-spacing: 0.05em; }
     .corner-label.top-right { right: 24px; }
     .pillars-grid { grid-template-columns: 1fr; }
     .scroll-indicator { right: 24px; }
   }