:root{ --ink:#122017;--forest:#18351f;--leaf:#7d9f34;--gold:#caa865;--ivory:#f3efe5;--warm:#e8e2d5;--paper:#fbf9f3;--dark:#07100b;--muted:#697069;--white:#f8f6ef;--line:rgba(18,32,23,.14); --serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',Arial,sans-serif } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden} body:not(.engine-body){min-height:100vh} a{text-decoration:none;color:inherit} button,input{font:inherit} .noise{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");animation:noise 2.2s steps(2) infinite} @keyframes noise{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(3%,-2%,0)}50%{transform:translate3d(-2%,3%,0)}75%{transform:translate3d(2%,2%,0)}100%{transform:translate3d(-3%,-1%,0)}} .cursor-ring{position:fixed;top:0;left:0;width:16px;height:16px;border:1px solid rgba(255,255,255,.62);border-radius:50%;transform:translate3d(-50px,-50px,0);pointer-events:none;z-index:70;opacity:.7} .site-nav{position:absolute;top:0;left:0;right:0;height:96px;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;color:#fff} .brand{display:flex;align-items:center;gap:11px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.65);border-radius:50%;font:700 17px/1 var(--serif)}.brand strong{display:block;font-size:15px;letter-spacing:.06em;text-transform:uppercase}.brand small{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;opacity:.62;margin-top:3px} .site-nav nav{display:flex;gap:28px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.86}.site-nav nav a{transition:opacity .3s}.site-nav nav a:hover{opacity:.55} .nav-cta{border:1px solid rgba(255,255,255,.55);padding:12px 18px;border-radius:999px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.nav-cta span{padding-left:9px}.nav-cta.ghost{color:#fff;background:transparent} /* ---------------------------- LANDING STORY ---------------------------- */ .hero-story{position:relative;height:520vh;min-height:0;background:#182017;overflow:visible;isolation:isolate} .hero-stage{position:sticky;top:0;height:100vh;z-index:10;overflow:hidden;pointer-events:auto;--camera-scale:1.42;--camera-x:0%;--camera-y:0%;--hero-opacity:1;--hero-frost:0;--sun-strength:1} .hero-steps{position:absolute;inset:0;z-index:0;pointer-events:none} .hero-steps i{display:block;height:var(--step-h,84vh)} .hero-steps i:last-child{height:var(--step-tail,100vh)} .hero-media,.hero-scrim{position:absolute;inset:0;pointer-events:none} .hero-media{z-index:1;background:#182017;overflow:hidden} .hero-camera{position:absolute;inset:-8%;transform:translate3d(var(--camera-x),var(--camera-y),0) scale(var(--camera-scale));transform-origin:39% 52%;will-change:transform;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden} .corn-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:52% 50%;filter:saturate(.98) contrast(1.06) brightness(.95);opacity:var(--hero-opacity);will-change:opacity} video.corn-photo{background:#182017;pointer-events:none;border:0;outline:none} /* A still frame laid over the video for the final step. It sits inside .hero-camera so it inherits the same --camera-scale as the video, and being static the GPU blurs it once instead of every frame. The dark tint replaces the opacity dimming the video used to do, keeping the closing statement legible over a bright sunset frame. */ .hero-frost{position:absolute;inset:-6%;pointer-events:none;background:linear-gradient(rgba(6,12,8,.42),rgba(6,12,8,.42)),url("assets/hero-poster.jpg") center/cover no-repeat;filter:blur(18px) saturate(.9);opacity:var(--hero-frost,0);will-change:opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}video.corn-photo::-webkit-media-controls{display:none!important} .light-cloud{position:absolute;inset:-16%;--scroll-x:0px;--scroll-y:0px;--scroll-scale:1;--scroll-opacity:.56;transform:translate3d(var(--scroll-x),var(--scroll-y),0) scale(var(--scroll-scale));opacity:var(--scroll-opacity);will-change:transform,opacity;pointer-events:none} .cloud-drift{position:absolute;inset:0;background:radial-gradient(ellipse at 55% 20%,rgba(255,250,220,.46),transparent 33%),radial-gradient(ellipse at 74% 28%,rgba(255,225,175,.19),transparent 24%),radial-gradient(ellipse at 37% 15%,rgba(255,255,255,.14),transparent 22%);animation:cloudDrift 24s ease-in-out infinite} @keyframes cloudDrift{0%,100%{transform:translate3d(-2.5%,0,0) scale(1)}50%{transform:translate3d(3.5%,1.5%,0) scale(1.06)}} .sun-glow{position:absolute;inset:-12%;--scroll-sun:1;mix-blend-mode:screen;opacity:calc(.46 * var(--scroll-sun));background:radial-gradient(circle at 66% 33%,rgba(255,214,136,.56),rgba(255,182,74,.12) 13%,transparent 35%);animation:sunPulse 10s ease-in-out infinite;will-change:opacity,filter} @keyframes sunPulse{0%,100%{filter:brightness(.92)}50%{filter:brightness(1.18)}} .breeze{position:absolute;left:-10%;width:120%;height:34%;border-top:1px solid rgba(255,255,255,.045);border-radius:50%;filter:blur(8px);transform:rotate(-2deg);animation:breezeMove 12s ease-in-out infinite;will-change:transform;opacity:.24}.breeze-a{top:54%}.breeze-b{top:68%;animation-delay:-4s;opacity:.16} @keyframes breezeMove{0%,100%{transform:translateX(-4%) rotate(-2deg)}50%{transform:translateX(5%) rotate(-1deg)}} .vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,9,6,.46),transparent 24%,rgba(4,9,6,.04) 63%,rgba(7,13,9,.62))} .hero-scrim{z-index:4;background:linear-gradient(180deg,rgba(4,8,5,.16),transparent 20%,transparent 63%,rgba(7,13,9,.34));pointer-events:none} .hero-progress{position:absolute;z-index:11;left:5vw;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:18px;color:#fff;pointer-events:none}.progress-number{font-size:11px;letter-spacing:.12em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.progress-line{width:2px;height:170px;background:rgba(255,255,255,.2);position:relative}.progress-line i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--gold);transition:none} .hero-copy{position:absolute;z-index:11;left:10vw;right:10vw;top:50%;transform:translateY(-42%);max-width:940px;color:#fff;pointer-events:none}.eyebrow,.kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase}.eyebrow{opacity:.72;margin-bottom:16px} .story-stack{display:grid;max-width:1080px}.story-slide{grid-area:1/1;align-self:center}.story-line{display:block;margin:0;font:500 clamp(55px,8vw,122px)/.89 var(--serif);letter-spacing:-.03em;opacity:0;transform:translate3d(0,46px,0) scale(.988);will-change:transform,opacity}.story-sub-line{display:block;margin:28px 0 0;max-width:560px;opacity:0;transform:translate3d(0,24px,0) scale(.99);will-change:transform,opacity;font-size:16px;line-height:1.62;color:rgba(255,255,255,.86);white-space:normal;overflow-wrap:break-word;word-break:normal}.hero-bottom{position:absolute;z-index:11;left:5vw;right:5vw;bottom:48px;color:#fff;display:flex;justify-content:flex-end;align-items:center;opacity:.75;pointer-events:none}.scroll-mark{width:24px;height:34px;border:1px solid rgba(255,255,255,.5);border-radius:14px;display:grid;place-items:center}.scroll-mark i{display:block;width:3px;height:7px;border-radius:9px;background:#fff;animation:scrollDot 1.6s ease-in-out infinite}@keyframes scrollDot{0%{transform:translateY(-6px);opacity:0}40%{opacity:1}100%{transform:translateY(7px);opacity:0}} /* ---------------------------- SECONDARY LANDING ---------------------------- */ .about-section{position:relative;padding:150px 0;overflow:hidden}.warm{background:#eae3d6}.ivory{background:var(--paper)}.section-inner{width:min(1200px,90vw);margin:0 auto;position:relative;z-index:2}.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:12vw}.section-intro h2,.gateway-copy h2{font:500 clamp(48px,6vw,88px)/.94 var(--serif);letter-spacing:-.025em;margin:18px 0 0}.section-copy{padding-top:62px;font-size:19px;line-height:1.75;color:#334039;max-width:530px}.section-copy p{margin:0 0 22px}.ambient-contours{position:absolute;inset:0;opacity:.26}.ambient-contours svg{width:100%;height:100%}.ambient-contours path{fill:none;stroke:#7c8a74;stroke-width:1;stroke-dasharray:5 10;animation:drift 18s linear infinite}.ambient-contours path:nth-child(2){animation-duration:22s;animation-delay:-8s}.ambient-contours path:nth-child(3){animation-duration:26s;animation-delay:-4s}.ambient-contours path:nth-child(4){animation-duration:20s;animation-delay:-12s}@keyframes driftDots{from{stroke-dashoffset:0}to{stroke-dashoffset:-280}} @keyframes drift{from{stroke-dashoffset:0;transform:translateX(0)}to{stroke-dashoffset:-280;transform:translateX(30px)}} .principles{margin-top:100px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}.principles article{padding:30px 26px 0 0;border-right:1px solid var(--line);margin-right:26px}.principles article:last-child{border-right:0;margin-right:0}.principles span{font-size:10px;color:#7b855b;letter-spacing:.16em}.principles h3{font:500 34px/1 var(--serif);margin:16px 0 10px}.principles p{font-size:14px;line-height:1.6;color:#4e5851;max-width:290px} .bridge-section{position:relative;min-height:100vh;display:grid;align-items:center;background:#07100b;color:#fff;overflow:hidden}.bridge-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 58% 50%,rgba(74,117,80,.22),transparent 30%),linear-gradient(#07100b,#08140d)}.field-grid{position:absolute;inset:10% 4%;background-image:linear-gradient(rgba(121,158,104,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(121,158,104,.10) 1px,transparent 1px);background-size:80px 80px;transform:perspective(800px) rotateX(66deg) translateY(12%);transform-origin:center top;opacity:.6}.field-orb{position:absolute;border:1px solid rgba(141,199,135,.35);border-radius:50%;animation:orb 10s linear infinite}.orb-1{width:420px;height:420px;left:58%;top:28%}.orb-2{width:610px;height:610px;left:52%;top:20%;animation-duration:15s}.orb-3{width:790px;height:790px;left:44%;top:12%;animation-duration:21s}@keyframes orb{from{transform:rotate(0)}to{transform:rotate(360deg)}}.bridge-inner{padding:160px 0}.bridge-inner h2{font:500 clamp(62px,8vw,130px)/.88 var(--serif);letter-spacing:-.035em;margin:18px 0 30px;max-width:900px}.bridge-inner h2 em{color:#9dbd5f;font-style:normal}.bridge-copy{max-width:490px;color:rgba(255,255,255,.68);font-size:17px;line-height:1.65}.light{color:rgba(255,255,255,.62)}.data-threads{position:absolute;right:5vw;bottom:48px;display:flex;gap:22px;font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.55)} .engine-gateway{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:10vw;min-height:72vh}.gateway-copy{max-width:760px}.gateway-copy p:not(.kicker){font-size:18px;line-height:1.7;max-width:640px;color:#58635a;margin-top:32px}.gateway-link{position:relative;padding:34px;border:1px solid rgba(18,32,23,.14);background:rgba(255,255,255,.52);min-height:220px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .4s,box-shadow .4s}.gateway-link:hover{transform:translateY(-8px);box-shadow:0 24px 70px rgba(18,32,23,.10)}.gateway-link span{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:#777f77}.gateway-link strong{font:500 38px/1.02 var(--serif);max-width:330px}.gateway-link strong b{font-family:var(--sans);font-weight:400;font-size:20px;margin-left:6px} .site-footer{display:flex;justify-content:space-between;gap:22px;padding:24px 5vw;background:#0d180f;color:rgba(255,255,255,.7);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.site-footer a{color:#fff}.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s ease}.reveal.show{opacity:1;transform:none}.reveal-delay{transition-delay:.16s} /* ---------------------------- ENGINE ---------------------------- */ .engine-body{background:var(--dark);color:#fff}.engine-nav{position:fixed}.engine-main{background:radial-gradient(circle at 50% 0%,rgba(42,80,45,.18),transparent 33%),var(--dark);min-height:100vh}.engine-intro{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden}.engine-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(125,165,116,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(125,165,116,.08) 1px,transparent 1px);background-size:72px 72px;transform:perspective(900px) rotateX(66deg) scale(1.3) translateY(23%);transform-origin:center top;opacity:.65}.engine-orbit{position:absolute;border:1px solid rgba(144,197,126,.20);border-radius:50%;animation:spin 17s linear infinite}.orbit-a{width:700px;height:700px}.orbit-b{width:520px;height:520px;animation-duration:12s;animation-direction:reverse}.orbit-c{width:350px;height:350px;animation-duration:8s}.engine-center{position:relative;z-index:2;text-align:center;width:min(760px,90vw);padding-top:80px}.engine-center h1{font:500 clamp(72px,10vw,150px)/.84 var(--serif);margin:18px 0}.engine-center>p:not(.kicker){font-size:17px;color:rgba(255,255,255,.65);margin:0 auto 42px}.pin-panel{width:min(720px,90vw);margin:0 auto;text-align:left;border:1px solid rgba(255,255,255,.11);background:rgba(10,20,13,.78);padding:24px}.pin-panel label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.58}.pin-row{display:flex;gap:10px;margin-top:10px}.pin-row input{min-width:0;flex:1;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.25);font:500 32px var(--serif);color:#fff;padding:8px 0;outline:none}.pin-row button,.subscribe{border:1px solid #94ba5c;background:#9fca63;color:#102014;padding:14px 18px;font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.demo-pin{margin-top:16px;background:transparent;border:0;color:rgba(255,255,255,.55);font-size:11px;cursor:pointer}.demo-pin strong{color:#b3d77f}.demo-note{margin:10px 0 0;color:rgba(255,255,255,.34);font-size:10px;line-height:1.5}.engine-read{min-height:100vh;padding:150px 5vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;border-top:1px solid rgba(255,255,255,.06)}.reading-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.52)}.reading-head strong{color:#b6cf93;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.signal-list{margin-top:42px}.signal-list>div{display:grid;grid-template-columns:38px 1fr auto;gap:18px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08);align-items:center}.signal-list span,.signal-list em{font-size:10px;color:rgba(255,255,255,.35);font-style:normal}.signal-list b{font:500 28px/1 var(--serif)}.signal-list .done em{color:#a6c875}.signal-list .done b{color:#dce9cf}.analysis-core{width:min(42vw,500px);aspect-ratio:1;position:relative;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at center,rgba(84,136,85,.19),rgba(8,15,10,.1) 35%,transparent 65%);justify-self:center}.analysis-rings,.analysis-rings:before,.analysis-rings:after{position:absolute;inset:12%;border:1px solid rgba(138,190,121,.20);border-radius:50%;animation:spin 18s linear infinite}.analysis-rings:before{content:"";inset:12%;animation-direction:reverse;animation-duration:12s}.analysis-rings:after{content:"";inset:24%;animation-duration:9s}.analysis-dot{width:22px;height:22px;border-radius:50%;background:#c4ea8e;box-shadow:0 0 35px #a7db74}.analysis-core span{font:500 20px var(--serif);max-width:170px;text-align:center}.results{padding:150px 5vw 180px;border-top:1px solid rgba(255,255,255,.07)}.results[hidden],.modal[hidden]{display:none}.results-head{max-width:900px;margin:0 auto 60px;text-align:center}.results-head h2{font:500 clamp(58px,7vw,100px)/.88 var(--serif);margin:14px 0 15px}.results-head>span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.48)}.result-grid{width:min(1200px,90vw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.result-card{min-height:510px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));padding:28px;position:relative;overflow:hidden}.card-no{font-size:10px;color:#9fca63}.card-kicker{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:22px}.result-card h3{font:500 clamp(42px,4vw,64px)/.88 var(--serif);margin:14px 0}.result-card h3 em{color:#a7cb76;font-style:normal}.card-copy{font-size:14px;line-height:1.65;color:rgba(255,255,255,.62);max-width:330px}.timeline{position:absolute;left:28px;right:28px;bottom:28px;display:flex;justify-content:space-between;align-items:flex-end;height:150px}.timeline:before{content:"";position:absolute;left:0;right:0;bottom:22px;height:1px;background:rgba(255,255,255,.18)}.timeline>div{display:flex;flex-direction:column;gap:8px;align-items:center;position:relative}.timeline span{font-size:12px;color:#a7cb76}.timeline b{font-size:10px;color:rgba(255,255,255,.4);font-weight:500}.crop-shape{position:absolute;inset:auto -20px -60px auto;width:250px;height:320px}.stem{position:absolute;left:50%;bottom:15px;width:8px;height:250px;background:linear-gradient(#8aad68,#2d4c23);transform:translateX(-50%) rotate(-4deg);border-radius:8px}.leaf{position:absolute;width:130px;height:52px;background:linear-gradient(135deg,#90b96a,#17331a);border-radius:100% 0 100% 0}.l1{left:18%;bottom:155px;transform:rotate(18deg)}.l2{left:36%;bottom:100px;transform:rotate(-22deg) scaleX(-1)}.fruit{position:absolute;width:42px;height:76px;border-radius:42% 50% 48% 55%;background:linear-gradient(135deg,#bb86be,#4a254e);box-shadow:0 10px 30px rgba(0,0,0,.2)}.f1{left:24%;bottom:76px}.f2{left:53%;bottom:120px;transform:scale(.82)}.prescription-card{background:radial-gradient(circle at 56% 35%,rgba(153,201,103,.10),transparent 28%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))}.prescription-code{position:absolute;bottom:92px;left:28px;font:500 30px var(--serif);color:#b7d77d}.prescription-code span{font:500 10px var(--sans);color:rgba(255,255,255,.42)}.prescription-card .subscribe{position:absolute;left:28px;bottom:28px}.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.72);z-index:100}.modal-card{width:min(520px,90vw);background:#f5f1e7;color:var(--ink);padding:44px;position:relative}.modal-card h2{font:500 58px/.9 var(--serif);margin:12px 0}.modal-card p:not(.kicker){color:#58635a;line-height:1.7}.modal-close{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:26px;cursor:pointer}.modal-card .subscribe{margin-top:18px;width:100%} @keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @media(max-width:900px){ .site-nav nav{display:none}.site-nav{padding:0 5vw;height:78px}.hero-story{height:520vh}.hero-copy{left:13vw;right:8vw;top:49%;transform:translateY(-46%)}.story-line{font-size:clamp(54px,12vw,86px)}.story-sub-line{max-width:100%}.story-sub-line{font-size:15px;line-height:1.55}.two-col,.engine-gateway,.engine-read{grid-template-columns:1fr;gap:40px}.principles,.result-grid{grid-template-columns:1fr}.principles article{border-right:0;border-bottom:1px solid var(--line);padding-bottom:26px;margin-right:0}.bridge-inner{padding:130px 0}.data-threads{right:5vw;left:5vw;flex-wrap:wrap}.analysis-core{width:min(78vw,500px)}.result-grid{width:100%}.result-card{min-height:440px}.site-footer{flex-direction:column}.nav-cta{padding:10px 13px}.pin-row{flex-direction:column}.pin-row button{width:100%} } @media(max-width:560px){.hero-progress{left:4vw}.progress-line{height:120px}.hero-bottom{left:4vw;right:4vw;bottom:28px}.hero-copy{left:15vw;right:7vw}.engine-center{padding-top:50px}.engine-center h1{font-size:22vw}.pin-panel{padding:20px}.result-card{min-height:470px}.modal-card{padding:32px}} @media(prefers-reduced-motion:reduce){.noise,.cloud-drift,.sun-glow,.breeze,.scroll-mark i,.field-orb,.ambient-contours path,.analysis-rings,.analysis-rings:before,.analysis-rings:after{animation:none!important}.reveal{transition:none}.hero-stage{--camera-scale:1!important;--camera-x:0!important;--camera-y:0!important}.corn-photo,.light-cloud,.sun-glow{transition:none!important}} /* Rendering stability */ .hero-camera,.light-cloud,.sun-glow{backface-visibility:hidden;-webkit-backface-visibility:hidden;} @media (max-width:900px){.hero-camera{inset:-14%;}.corn-photo{object-position:48% 50%;}} @media (pointer:coarse){.cursor-ring{display:none}.noise{animation:none;opacity:.018}.story-line,.story-sub-line{will-change:opacity,transform}.light-cloud,.sun-glow,.breeze{will-change:transform,opacity}} .hero-stage:not(.is-active) .cloud-drift,.hero-stage:not(.is-active) .sun-glow,.hero-stage:not(.is-active) .breeze,.hero-stage:not(.is-active) .scroll-mark i,.hero-stage:not(.is-active) .field-orb{animation-play-state:paused!important} .modal-open{overflow:hidden} /* ---------------------------- V12 IMMERSIVE LAYER ---------------------------- */ .bridge-inner{position:relative;z-index:4}.bridge-section{position:relative;isolation:isolate}.field-grid{position:relative;width:min(620px,72vw);height:min(420px,46vw);margin:40px 0 0 auto;border:1px solid rgba(255,255,255,.14);overflow:hidden;background:linear-gradient(rgba(132,171,123,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(132,171,123,.08) 1px,transparent 1px);background-size:48px 48px;box-shadow:0 30px 90px rgba(0,0,0,.22);touch-action:none}.field-grid::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(170,214,116,.22),transparent 22%);transition:background .25s ease}.field-grid::after{content:"";position:absolute;inset:-20%;background:linear-gradient(130deg,transparent 43%,rgba(170,214,116,.20) 50%,transparent 57%);transform:translateX(-28%) rotate(-8deg);animation:fieldSweep 8s linear infinite}.field-scan{position:absolute;left:var(--pointer-x,50%);top:var(--pointer-y,50%);width:120px;height:120px;border:1px solid rgba(184,217,120,.52);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(184,217,120,.08),0 0 40px rgba(184,217,120,.10);pointer-events:none;transition:left .16s ease-out,top .16s ease-out}.field-scan::before,.field-scan::after{content:"";position:absolute;inset:14px;border:1px dashed rgba(184,217,120,.20);border-radius:50%}.field-scan::after{inset:50% auto auto 50%;width:1px;height:80px;background:rgba(184,217,120,.32);transform:translate(-50%,-50%) rotate(90deg)}.field-point{position:absolute;width:7px;height:7px;border-radius:50%;background:#b7d77d;box-shadow:0 0 16px rgba(183,215,125,.6);animation:fieldPulse 3.2s ease-in-out infinite}.point-a{left:22%;top:36%}.point-b{left:58%;top:62%;animation-delay:.8s}.point-c{left:74%;top:28%;animation-delay:1.5s}.field-readout{position:absolute;left:18px;bottom:16px;z-index:3;font:500 9px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.52)}.data-threads{position:relative;z-index:4;display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;justify-content:flex-end}.data-threads span{font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.34);padding:7px 9px;border:1px solid rgba(255,255,255,.10);transition:color .3s ease,border-color .3s ease,background .3s ease,transform .3s ease}.data-threads span.active{color:#dce9cf;border-color:rgba(167,203,118,.5);background:rgba(167,203,118,.08);transform:translateY(-2px)} @keyframes fieldSweep{0%{transform:translateX(-45%) rotate(-8deg)}100%{transform:translateX(45%) rotate(-8deg)}}@keyframes fieldPulse{0%,100%{transform:scale(.78);opacity:.5}50%{transform:scale(1.15);opacity:1}} .hero-story + .about-section{position:relative;margin-top:-1px}.bridge-section:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,20,13,.06),rgba(10,20,13,.40) 18%,transparent 55%)} @media(max-width:900px){.field-grid{width:100%;height:360px;margin:36px 0 0}.data-threads{justify-content:flex-start}.field-scan{width:100px;height:100px}} @media(max-width:560px){.field-grid{height:300px;background-size:40px 40px}.field-readout{left:13px;bottom:12px}.data-threads{gap:8px}.data-threads span{font-size:8px}} @media(prefers-reduced-motion:reduce){.field-grid::after,.field-point{animation:none}} /* ---------------------------- V13 IMMERSIVE SYSTEM ---------------------------- */ .immersive-system{display:block;min-height:190vh;background:#06100a;overflow:visible} .system-stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;background:#06100a;--system-progress:0;--system-opacity:0;--system-shift:0px;--system-scale:1} .system-field{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 62% 46%,rgba(90,130,74,.18),transparent 28%),#06100a} .system-field-photo{position:absolute;inset:-10%;background:url("assets/hero-poster.jpg") center/cover no-repeat;filter:blur(22px) saturate(.65) brightness(.42);opacity:calc(.42 - (var(--system-progress) * .34));transform:scale(calc(1.08 + var(--system-progress) * .06)) translate3d(calc(var(--system-shift) * -1),0,0);transition:opacity .12s linear} .system-haze{position:absolute;inset:0;background:radial-gradient(circle at 60% 45%,rgba(168,210,118,.22),transparent 25%),linear-gradient(180deg,rgba(4,9,6,.10),rgba(4,9,6,.78));opacity:.9} .contour-morph{position:absolute;inset:-7%;width:114%;height:114%;fill:none;stroke:rgba(170,211,124,.46);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:calc(.08 + var(--system-progress) * .88);transform:translate3d(0,calc(32px - var(--system-progress) * 32px),0) scale(calc(1.06 - var(--system-progress) * .06));transition:opacity .08s linear} .contour-morph path{stroke-dasharray:7 16;stroke-dashoffset:calc(var(--system-progress) * -260px);animation:contourFlow 16s linear infinite} @keyframes contourFlow{to{stroke-dashoffset:-280px}} .field-boundary{position:absolute;border:1px solid rgba(178,219,132,.32);border-radius:42% 58% 54% 46%;opacity:calc(var(--system-progress) * .9);transform:scale(calc(.82 + var(--system-progress) * .18));transition:opacity .08s linear} .boundary-a{width:28vw;height:20vw;left:54%;top:24%;transform:rotate(12deg) scale(calc(.82 + var(--system-progress) * .18))} .boundary-b{width:34vw;height:25vw;left:45%;top:39%;transform:rotate(-8deg) scale(calc(.82 + var(--system-progress) * .18))} .boundary-c{width:23vw;height:17vw;left:67%;top:51%;transform:rotate(20deg) scale(calc(.82 + var(--system-progress) * .18))} .signal-network{position:absolute;inset:0;opacity:calc(var(--system-progress) * 1);transform:scale(calc(.92 + var(--system-progress) * .08));transition:opacity .08s linear} .network-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(182,220,137,.62),transparent);transform-origin:left center;opacity:.7}.n1{width:28vw;left:50%;top:42%;transform:rotate(-18deg)}.n2{width:24vw;left:53%;top:45%;transform:rotate(26deg)}.n3{width:20vw;left:57%;top:56%;transform:rotate(-38deg)}.n4{width:18vw;left:64%;top:52%;transform:rotate(8deg)} .network-node{position:absolute;width:7px;height:7px;border-radius:50%;background:#c6e894;box-shadow:0 0 22px rgba(198,232,148,.8);opacity:.75;animation:networkPulse 3s ease-in-out infinite}.node-1{left:50%;top:42%}.node-2{left:67%;top:37%;animation-delay:.6s}.node-3{left:58%;top:56%;animation-delay:1.2s}.node-4{left:76%;top:50%;animation-delay:1.8s}.node-5{left:65%;top:62%;animation-delay:2.4s}@keyframes networkPulse{0%,100%{transform:scale(.75);opacity:.45}50%{transform:scale(1.4);opacity:1}} .system-copy{height:100%;display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,560px);grid-template-rows:1fr auto;gap:40px;align-items:center;position:relative;z-index:5;padding-top:8vh;padding-bottom:8vh}.system-copy-block{align-self:center;max-width:700px}.system-copy .kicker{opacity:.55}.system-heading-frame{display:grid;width:100%;max-width:760px;margin-top:18px}.system-line{grid-area:1/1;align-self:start;width:100%;font:500 clamp(56px,7.2vw,110px)/.88 var(--serif);letter-spacing:-.03em;margin:0;max-width:760px;will-change:transform,opacity}.system-line em{font-style:normal;color:#b9d77f}.system-line-a{opacity:1;transform:translate3d(0,0,0)}.system-line-b{opacity:0;transform:translate3d(0,38px,0);pointer-events:none}.system-body{max-width:520px;color:rgba(255,255,255,.64);font-size:16px;line-height:1.7;margin-top:28px}.field-interaction{position:relative;align-self:center;justify-self:end;width:min(540px,42vw);height:min(380px,34vw);border:1px solid rgba(255,255,255,.12);background:linear-gradient(rgba(150,190,135,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(150,190,135,.06) 1px,transparent 1px);background-size:44px 44px;box-shadow:0 30px 100px rgba(0,0,0,.24);touch-action:none;overflow:hidden}.field-interaction::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(170,214,116,.25),transparent 23%)}.field-interaction::after{content:"";position:absolute;inset:-30%;background:linear-gradient(125deg,transparent 44%,rgba(180,220,138,.20) 50%,transparent 56%);animation:fieldSweep 7s linear infinite}.field-interaction .field-scan{z-index:2}.field-interaction .field-point{z-index:2}.system-readout{position:absolute;right:5vw;bottom:42px;z-index:8;display:flex;align-items:center;gap:16px;color:rgba(255,255,255,.42);font-size:9px;letter-spacing:.18em;text-transform:uppercase}.system-readout b{color:#b9d77f;font-weight:500;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.immersive-system .data-threads{grid-column:1 / -1;grid-row:2;justify-content:flex-start;margin:0;align-self:end;padding-bottom:2vh}.immersive-system .data-threads span{opacity:calc(.22 + var(--system-progress) * .78)} @media(max-width:900px){.immersive-system{min-height:180vh}.system-copy{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center;padding-top:12vh;padding-bottom:12vh;gap:24px}.system-heading-frame{margin-top:16px}.system-line{font-size:clamp(52px,11vw,88px);max-width:90vw}.system-line-b{max-width:90vw}.field-interaction{width:100%;height:330px;justify-self:stretch}.immersive-system .data-threads{grid-column:1;grid-row:3}.system-readout{right:5vw;bottom:24px}.boundary-a{width:44vw;height:28vw}.boundary-b{width:50vw;height:34vw}.boundary-c{width:36vw;height:26vw}} @media(max-width:560px){.immersive-system{min-height:185vh}.system-copy{padding-top:15vh;padding-bottom:10vh}.system-line{font-size:clamp(48px,13vw,72px);max-width:92vw;line-height:.92}.system-body{font-size:14px}.field-interaction{height:280px;background-size:34px 34px}.system-readout{right:4vw;bottom:18px}.immersive-system .data-threads{gap:7px}.immersive-system .data-threads span{font-size:8px;padding:6px 7px}} @media(prefers-reduced-motion:reduce){.contour-morph path,.network-node,.field-interaction::after{animation:none}.system-field-photo,.contour-morph,.field-boundary,.signal-network{transition:none}} /* ---------------------------- CONTACT ---------------------------- */ .contact-section{position:relative;background:#07100b;color:#fff;border-top:1px solid rgba(255,255,255,.07)} .contact-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 16%,rgba(126,175,92,.16),transparent 32%),radial-gradient(circle at 10% 84%,rgba(202,168,101,.07),transparent 30%)} .contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:8vw;align-items:center} .contact-copy h2{font:500 clamp(44px,5.4vw,80px)/.94 var(--serif);letter-spacing:-.025em;margin:18px 0 0} .contact-lede{margin:26px 0 0;max-width:430px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.62)} .contact-channels{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.10)} .contact-row{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:18px;padding:24px 4px;border-bottom:1px solid rgba(255,255,255,.10);transition:background .35s ease,padding-left .35s ease} .contact-row:hover{background:rgba(167,203,118,.06);padding-left:14px} .contact-label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)} .contact-value{display:flex;align-items:center;gap:12px;font:500 clamp(18px,2.3vw,30px)/1.2 var(--serif);color:#f1f5ea;overflow-wrap:anywhere} .whatsapp-icon{width:26px;height:26px;flex:0 0 auto;display:block} @media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:46px}.contact-row{grid-template-columns:74px 1fr;padding:20px 2px}.contact-lede{max-width:100%}} @media(max-width:560px){.contact-row{grid-template-columns:1fr;gap:7px 12px;padding:18px 2px}.contact-label{grid-column:1 / -1}.whatsapp-icon{width:22px;height:22px}} @media(prefers-reduced-motion:reduce){.contact-row{transition:none}} /* ---------------------------- ANDROID / TOUCH COMPOSITING ---------------------------- */ /* Chrome on Android tablets showed the hero flickering with dark rectangles behind the story text. Cause: the hero builds ~65 compositing layers, and a mix-blend-mode inside isolation:isolate plus a mask on a