/* Adapted from React Bits: Spotlight Card, Blur Text and Star Border.
 * Copyright (c) 2026 David Haz — see react-bits-LICENSE.txt.
 * Native, scoped adaptations for house.tech. */
.hero{overflow:visible}
.silk-container{position:absolute;z-index:-1;pointer-events:none;top:0;left:50%;width:100vw;transform:translateX(-50%);height:590px;opacity:.72;mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 60%,transparent 100%)}
.silk-container canvas{display:block;width:100%;height:100%}
.hero-glow{inset:0;background:radial-gradient(ellipse at 50% 10%,#1748a648,transparent 64%)}
.hero:before{opacity:.45}
.hero h1{position:relative;text-shadow:0 2px 32px #03091755}
.blur-line{display:block}
.hero h1 .gradient{text-shadow:none}
.motion-toggle{position:absolute;right:0;top:18px;display:flex;align-items:center;gap:7px;background:#091224b3;color:#a9bddc;border:1px solid #99b7f52b;border-radius:7px;min-height:34px;padding:5px 10px;font-size:12px;z-index:3}
.motion-toggle:hover{color:white;background:#12203a}
.motion-icon{font-family:Arial,sans-serif;font-size:13px;min-width:12px}
.card-spotlight{position:relative;isolation:isolate;overflow:hidden;--mouse-x:50%;--mouse-y:50%;--spotlight-color:rgba(89,157,255,.24)}
.card-spotlight::before{content:'';position:absolute;inset:0;background:radial-gradient(420px circle at var(--mouse-x) var(--mouse-y),var(--spotlight-color),transparent 80%);opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:-1}
.card-spotlight:hover::before,.card-spotlight:focus-within::before{opacity:.8}
.community-grid article{transition:border-color .3s,box-shadow .3s}
.community-grid article:hover{border-color:#7ba6ff63;box-shadow:0 12px 35px #0003}
.founder-card,.offer-card{position:relative}
.rb-star-frame{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:3;padding:1.5px;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor}
.rb-star-top,.rb-star-bottom{position:absolute;width:300%;height:180%;opacity:.8;border-radius:50%;background:radial-gradient(ellipse,#b3eaff 0%,#527dff 10%,transparent 38%);will-change:transform;animation-duration:9s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:paused}
.rb-star-bottom{bottom:-90%;right:-250%;animation-name:rb-star-bottom}
.rb-star-top{top:-90%;left:-250%;animation-name:rb-star-top;animation-delay:-4.5s}
.effects-running .in-view .rb-star-top,.effects-running .in-view .rb-star-bottom{animation-play-state:running}
html:not(.effects-running) .shimmer::after{animation-play-state:paused}
.rb-star-frame~*{position:relative}
@keyframes rb-star-bottom{0%{transform:translate(0,0);opacity:1}100%{transform:translate(-100%,0);opacity:.15}}
@keyframes rb-star-top{0%{transform:translate(0,0);opacity:1}100%{transform:translate(100%,0);opacity:.15}}
@media(max-width:760px){.silk-container{height:420px;opacity:.48}.motion-toggle{top:10px;min-width:34px;padding:5px 9px}.motion-label{display:none}.hero h1{padding-top:5px}.rb-star-top,.rb-star-bottom{animation-duration:13s;opacity:.65}}
@media(prefers-reduced-motion:reduce){.card-spotlight::before{transition:none}.community-grid article{transition:none}.rb-star-top,.rb-star-bottom{animation:none!important}.motion-toggle{display:none}}
@media(hover:none){.card-spotlight::before{display:none}.community-grid article:hover{box-shadow:none}}

/* TextLoop wave: React Bits native adaptation. */
.founder-ribbon{position:relative;height:190px;margin-top:-28px;margin-bottom:12px;overflow:hidden;isolation:isolate}
.text-loop-svg{display:block;width:100%;height:100%;overflow:hidden;filter:drop-shadow(0 9px 22px #2455da25)}
.loop-copy,.loop-measure{font-family:Manrope,sans-serif;font-size:26px;font-weight:800;letter-spacing:2px}
.ribbon-toggle{position:absolute;right:5px;top:0;display:flex;align-items:center;gap:7px;border:1px solid #ffffff20;border-radius:6px;background:#0b1424;color:#a9bddc;min-height:32px;padding:4px 10px;font-size:12px;z-index:1}
.ribbon-toggle:hover{color:white;border-color:#759cff80}
@media(max-width:760px){.founder-ribbon{height:130px;margin-top:-12px;margin-bottom:15px}.loop-copy,.loop-measure{font-size:19px;letter-spacing:1px}.ribbon-toggle{top:0;right:0;min-height:30px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.ribbon-toggle{display:none}}

/* CardSwap: a restrained stack for the founder's product story. */
.project-showcase{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center;margin-top:50px;padding-top:35px;border-top:1px solid var(--line)}
.project-narrative>.eyebrow{font-size:10px;letter-spacing:1.6px}
.project-narrative h3{font-size:32px;letter-spacing:-1.2px;line-height:1.25;margin:15px 0 20px}
.project-narrative p{font-size:15px;color:#9daec8;line-height:1.75}
.project-tabs{display:flex;flex-direction:column;gap:6px;margin-top:25px}
.project-tabs button{display:flex;align-items:center;gap:15px;text-align:left;padding:10px 13px;border:1px solid transparent;border-radius:8px;background:transparent;color:#7d91b2;font:12px ui-monospace,monospace;min-height:44px;transition:background .2s,border-color .2s}
.project-tabs button span{font:500 15px 'DM Sans',sans-serif;color:#b3c1d9}
.project-tabs button[aria-selected="true"]{background:#254c922b;border-color:#588bea54;color:#8abfff}
.project-tabs button[aria-selected="true"] span{color:white}
.project-deck{min-width:0}
.project-stage{height:430px;position:relative;perspective:1000px;isolation:isolate}
.project-card{--accent:#89c5ff;position:absolute;top:70px;left:0;width:calc(100% - 48px);height:340px;padding:26px 28px;border:1px solid #7297d65c;border-radius:17px;background:radial-gradient(ellipse at top right,#357fd02b,transparent 70%),#0c1628;box-shadow:0 20px 45px #0005;transform-origin:center;backface-visibility:hidden;transition:transform .7s cubic-bezier(.22,.68,.25,1),filter .6s;display:flex;flex-direction:column;will-change:transform}
.project-card[data-slot="0"]{transform:translate3d(0,0,0);z-index:3}
.project-card[data-slot="1"]{transform:translate3d(24px,-27px,-45px) rotate(1deg);z-index:2;filter:brightness(.8)}
.project-card[data-slot="2"]{transform:translate3d(48px,-54px,-90px) rotate(2deg);z-index:1;filter:brightness(.65)}
.agro-card{--accent:#76dfcd;background:radial-gradient(ellipse at top right,#208a7938,transparent 70%),#0c1b25;border-color:#6bbaa866}
.equity-card{--accent:#b5acff;background:radial-gradient(ellipse at top right,#7660bc3a,transparent 70%),#14182c;border-color:#9885ce66}
.project-card-top{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px solid #ffffff13;padding-bottom:16px}
.project-category{font-size:10px;letter-spacing:1.2px;color:var(--accent)}
.project-card-index{font:11px ui-monospace,monospace;color:#8fa2be;white-space:nowrap}
.project-product{margin-top:24px}
.project-domain{font-size:10px;color:#93a8c0;letter-spacing:1.5px}
.project-product h4{font-family:Manrope,sans-serif;font-size:39px;line-height:1.12;letter-spacing:-1.8px;margin:7px 0 8px;font-weight:750}
.project-product h4 span{color:var(--accent)}
.project-product>p{font-size:15px;color:#d0dbea;margin:0}
.project-description{font-size:14px;line-height:1.65;color:#9aacc5;margin:17px 0}
.project-card-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;border-top:1px solid #ffffff13;padding-top:13px;font-size:12px;color:#99aecb}
.project-card-footer>span:last-child:not(.nda-tag){font-size:20px;color:var(--accent)}
.nda-tag{font-size:9px;letter-spacing:.7px;color:var(--accent)}
.project-stat{display:flex;align-items:center;gap:20px;margin-top:10px}.project-stat strong{font:700 48px Manrope,sans-serif;letter-spacing:-2px;color:var(--accent)}.project-stat strong span{font-size:28px}.project-stat>span{font-size:13px;color:#adbed5;line-height:1.5}
.equity-card .project-product{margin-top:18px}.equity-card h4{font-size:30px}.equity-card .project-description{margin:12px 0;font-size:13px}
.project-deck-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:#90a5c5;margin-top:8px}
.project-pause{background:#0c1424;border:1px solid #ffffff20;border-radius:6px;color:#a5b9d8;padding:5px 10px;font-size:12px;min-height:34px;display:flex;gap:7px;align-items:center}
.story-bridge{max-width:820px;margin:55px auto 0;padding:30px 0 0;border-top:1px solid var(--line);text-align:center}
.story-bridge p{color:#a7b5cc;margin:14px 0;font-size:17px;line-height:1.75}
@media(max-width:1000px){.project-showcase{gap:35px}.project-card{padding:23px}.project-product h4{font-size:34px}.project-description{font-size:13px}}
@media(max-width:760px){.project-showcase{grid-template-columns:1fr;gap:14px;margin-top:25px}.project-narrative h3{font-size:29px}.project-tabs{flex-direction:row;gap:5px;margin-top:20px}.project-tabs button{flex:1;flex-direction:column;align-items:flex-start;gap:5px;padding:9px;min-width:0}.project-tabs button span{font-size:12px;white-space:nowrap}.project-stage{height:410px}.project-card{top:58px;height:338px;width:calc(100% - 24px);padding:22px}.project-card[data-slot="1"]{transform:translate3d(12px,-18px,-35px) rotate(1deg)}.project-card[data-slot="2"]{transform:translate3d(24px,-36px,-70px) rotate(2deg)}.project-product h4{font-size:34px}.project-product{margin-top:20px}.project-product>p{font-size:14px}.project-category{font-size:9px;letter-spacing:.7px}.project-description{font-size:13px;line-height:1.65}.project-card-footer{font-size:11px}.nda-tag{font-size:8px}.equity-card h4{font-size:27px}.equity-card .project-description{font-size:13px}.project-deck-controls{margin-top:2px}.story-bridge{margin-top:35px;text-align:left}.story-bridge p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.project-card,.project-tabs button{transition:none!important}.project-pause{display:none}}
html:not(.effects-running) .project-card{transition:none}
@media(max-width:760px){.project-card{height:362px}.project-stage{height:434px}}
@media(max-width:380px){.project-card{height:398px}.project-stage{height:470px}.project-category{font-size:8px}.project-card-footer{font-size:10px}}

/* DotGrid and Strands — restrained background layers. */
body{isolation:isolate}
.page-dot-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#416fc035 1px,transparent 1.2px);background-size:32px 32px;mask-image:linear-gradient(to right,#0009,#0005 35%,#0005 65%,#0009)}
.page-dot-grid.canvas-ready{background-image:none}
.page-dot-grid canvas{display:block;width:100%;height:100%}
.site-ending{position:relative;isolation:isolate;margin-top:65px;overflow:hidden;background:linear-gradient(180deg,transparent,#050910 80%)}
.strands-visual{position:absolute;inset:0 0 auto;height:260px;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at center,#1b53a816,transparent 60%);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 72%,transparent)}
.strands-visual canvas{display:block;width:100%;height:100%}
.site-ending .footer{position:relative;margin-top:0;padding-top:235px;padding-bottom:36px;border-top:none}
@media(max-width:760px){.page-dot-grid{opacity:.65}.site-ending{margin-top:40px}.strands-visual{height:200px;opacity:.8}.site-ending .footer{padding-top:180px;padding-bottom:30px}}

/* Larger Strands treatment for the founders live class. */
.founder-card{position:relative;isolation:isolate}
.founder-strands{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 75% 50%,#326bd51a,transparent 65%);mask-image:linear-gradient(90deg,#0003,#0008 50%,#000)}
.founder-strands canvas{display:block;width:100%;height:100%}
.founder-main,.founder-aside{position:relative}
.founder-main{background:linear-gradient(90deg,#0c193c90,transparent)}
@media(max-width:760px){.founder-strands{inset:38% -25% 0;opacity:.65;mask-image:linear-gradient(180deg,transparent,#000 40%,#000)}.founder-main{background:transparent}}

/* Silk stays behind the hero copy, with a dark readability veil. */
.silk-container{height:680px;opacity:.85}
.silk-container:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 38%,#03071285,transparent 85%);pointer-events:none}
@media(max-width:760px){.silk-container{height:650px;opacity:.65}}