/* BrewControl — Production module V5
   Persuade surface: real product first, brewery atmosphere second. */
:root{
  --night:#071116;
  --night-2:#0b1d22;
  --deep:#10272a;
  --teal:#4aa4a1;
  --teal-soft:#8cc5bd;
  --copper:#b9652e;
  --amber:#f0a844;
  --amber-light:#ffc66b;
  --cream:#f1e6d5;
  --cream-2:#e6d8c4;
  --steel:#c6cfca;
  --ink:#171817;
  --muted:#aaa49b;
  --muted-dark:#665f57;
  --green:#64d897;
  --line:rgba(255,255,255,.11);
  --line-dark:rgba(31,28,24,.12);
  --display:'Cabinet Grotesk',system-ui,sans-serif;
  --body:'Satoshi',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --max:1280px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px;background:var(--night)}
body{margin:0;background:var(--night);color:#f8f1e7;font-family:var(--body);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img,video{display:block;max-width:100%}button{font:inherit}::selection{background:var(--amber);color:#24150a}
.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}.mono,.eyebrow,.kicker{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em}.eyebrow,.kicker{font-size:.69rem;color:var(--amber-light)}

/* Header */
.prod-header{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(6,14,18,.96);box-shadow:0 14px 38px rgba(0,0,0,.13)}
.header-in{height:78px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:11px;margin-right:auto}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,198,107,.62);border-radius:11px;background:linear-gradient(145deg,rgba(240,168,68,.25),rgba(74,164,161,.09));font:850 17px var(--display)}.brand-name{font:820 .96rem var(--display);letter-spacing:.07em}.brand-sub{display:block;color:#82908c;font:500 .55rem var(--mono);letter-spacing:.13em}.nav{display:flex;align-items:center;gap:24px;color:#d5d0c8;font-size:.86rem}.nav a{position:relative;padding:8px 0}.nav a:after{content:'';position:absolute;left:0;right:100%;bottom:2px;height:1px;background:linear-gradient(90deg,var(--amber),var(--teal));transition:right .22s var(--ease)}.nav a:hover:after,.nav a:focus-visible:after{right:0}.header-cta{padding:10px 16px;border:1px solid rgba(255,198,107,.4);border-radius:12px;background:linear-gradient(135deg,rgba(240,168,68,.16),rgba(74,164,161,.07));font-weight:800}.menu{display:none;border:0;background:none;color:#fff;padding:8px;cursor:pointer}

/* Shared */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:49px;padding:0 19px;border:1px solid rgba(255,255,255,.13);border-radius:13px;font-weight:820;font-size:.9rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}.btn.primary{color:#211408;background:linear-gradient(135deg,#ffd17a,#ee9738);border-color:#ffc66b;box-shadow:0 14px 38px rgba(240,168,68,.18)}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(240,168,68,.27)}.btn.ghost{background:rgba(255,255,255,.045)}.btn.ghost:hover{border-color:rgba(140,197,189,.42);background:rgba(74,164,161,.09)}
.section-title{margin:13px 0 18px;font:820 clamp(2.65rem,4.8vw,5rem)/.96 var(--display);letter-spacing:-.045em}.section-lead{max-width:700px;margin:0;color:inherit;font-size:1.04rem;line-height:1.72}.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}.reveal.on{opacity:1;transform:none}

/* Hero */
.prod-hero{position:relative;min-height:100svh;padding:132px 0 66px;display:flex;align-items:center;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 76% 34%,rgba(74,164,161,.19),transparent 27%),radial-gradient(circle at 18% 30%,rgba(240,168,68,.16),transparent 24%),linear-gradient(128deg,#061116 0%,#0a1d22 48%,#1d1710 100%)}
.prod-hero:before{content:'';position:absolute;inset:0;z-index:-4;background-image:linear-gradient(rgba(255,255,255,.023) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:76px 76px;mask-image:linear-gradient(to bottom,black 0 78%,transparent)}
.prod-hero:after{content:'';position:absolute;left:-8%;right:-8%;bottom:-80px;height:150px;z-index:-1;background:radial-gradient(ellipse at center,rgba(255,198,107,.22),transparent 62%);filter:blur(16px)}
.hero-atmosphere{position:absolute;inset:0;z-index:-3;pointer-events:none}.hero-tank{position:absolute;bottom:5%;width:105px;height:470px;border:1px solid rgba(255,255,255,.065);border-radius:54px 54px 20px 20px;background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.13) 30%,rgba(74,164,161,.06) 58%,rgba(0,0,0,.2)),linear-gradient(180deg,#445351,#17272a 22%,#0c1c20);box-shadow:inset -18px 0 32px rgba(0,0,0,.28)}.hero-tank:before{content:'';position:absolute;left:15px;right:15px;top:-12px;height:24px;border-radius:50%;background:linear-gradient(180deg,#778481,#2b3a3b);border:1px solid rgba(255,255,255,.1)}.hero-tank.t1{left:-46px;opacity:.62}.hero-tank.t2{right:1%;height:525px;width:116px;opacity:.5}.steam{position:absolute;width:150px;height:310px;background:radial-gradient(ellipse at center,rgba(255,255,255,.52),rgba(140,197,189,.12) 46%,transparent 72%);filter:blur(14px);opacity:.1;animation:steam 8s ease-in-out infinite}.steam.s1{left:2%;bottom:22%}.steam.s2{right:10%;bottom:35%;animation-delay:-3s}@keyframes steam{0%,100%{transform:translate3d(0,24px,0) scale(.9);opacity:.06}50%{transform:translate3d(14px,-38px,0) scale(1.08);opacity:.15}}
.hero-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:62px;align-items:center;position:relative;z-index:3}.hero-copy h1{margin:20px 0 24px;font:850 clamp(3.5rem,6vw,6.8rem)/.91 var(--display);letter-spacing:-.057em;text-wrap:balance}.hero-copy h1 em{font-style:normal;background:linear-gradient(90deg,var(--amber-light),#ec8735 58%,var(--teal-soft));-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy>p{max-width:620px;margin:0;color:#cbc4ba;font-size:clamp(1rem,1.35vw,1.17rem);line-height:1.72}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-proof{display:flex;gap:10px;align-items:flex-start;margin-top:25px;color:#8e9995;font-size:.78rem}.pulse{width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(100,216,151,.45);animation:pulse 2s infinite}@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(100,216,151,0)}}
.product-window{position:relative;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:26px;background:linear-gradient(145deg,rgba(25,43,46,.97),rgba(7,17,22,.99));box-shadow:0 42px 105px rgba(0,0,0,.48),0 0 55px rgba(74,164,161,.07);overflow:hidden;transform:rotateY(-2.2deg) rotateX(.7deg);transform-origin:center;transition:transform .16s var(--ease)}.product-window:before{content:'';position:absolute;inset:-40%;pointer-events:none;background:linear-gradient(110deg,transparent 39%,rgba(255,255,255,.07) 49%,transparent 59%);transform:translateX(-70%);animation:sheen 9s ease-in-out infinite}@keyframes sheen{60%,100%{transform:translateX(70%)}}.window-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 10px}.window-dot{width:7px;height:7px;border-radius:50%;background:#405053}.window-dot.hot{background:var(--amber)}.window-label{margin-left:auto;color:#81928e;font:500 .57rem var(--mono);letter-spacing:.1em}.demo-media{position:relative;aspect-ratio:16/10;border-radius:17px;overflow:hidden;border:1px solid rgba(255,255,255,.075);background:#061014}.demo-media img,.demo-media video{width:100%;height:100%;object-fit:cover;object-position:top}.demo-media video{display:none}.demo-media.video-ready video{display:block}.demo-media.video-ready img{display:none}.video-badge{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(7,17,22,.9);color:#c9d2ce;font:500 .59rem var(--mono);letter-spacing:.08em;z-index:3}.video-badge i{width:6px;height:6px;border-radius:50%;background:var(--amber)}
.flow-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.flow-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(8,22,25,.75);color:#a9b5b0;font:600 .62rem var(--mono);letter-spacing:.05em}.flow-chip:before{content:'';width:5px;height:5px;border-radius:50%;background:linear-gradient(var(--amber),var(--teal))}

/* Overview */
.overview{position:relative;padding:118px 0 128px;color:var(--ink);overflow:hidden;background:radial-gradient(circle at 88% 12%,rgba(74,164,161,.18),transparent 28%),radial-gradient(circle at 7% 88%,rgba(240,168,68,.16),transparent 27%),linear-gradient(135deg,#f2e6d4 0%,#e8dece 47%,#dbe2de 100%)}.overview:before{content:'';position:absolute;inset:0;opacity:.17;background-image:repeating-radial-gradient(ellipse at 0 100%,transparent 0 29px,rgba(91,72,51,.18) 30px 31px,transparent 32px 58px);mask-image:linear-gradient(90deg,black,transparent 50%)}.overview-head{display:grid;grid-template-columns:.62fr 1.38fr;gap:40px;position:relative;z-index:2}.overview .kicker{color:#9d4f22}.overview .section-lead{color:#575149}.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:62px;position:relative;z-index:2}.cap-card{min-height:255px;padding:24px;border:1px solid rgba(31,28,24,.11);border-radius:21px;background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,255,255,.25));box-shadow:0 18px 44px rgba(61,48,36,.07);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}.cap-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(61,48,36,.11)}.cap-num{font:600 .62rem var(--mono);letter-spacing:.1em;color:#98613f}.cap-card h3{margin:64px 0 9px;font:790 1.28rem var(--display);letter-spacing:-.02em}.cap-card p{margin:0;color:#665f57;font-size:.84rem}.cap-card strong{color:#352d27}

/* Operational flow */
.production-flow{position:relative;padding:126px 0;background:radial-gradient(circle at 79% 28%,rgba(74,164,161,.15),transparent 26%),radial-gradient(circle at 18% 68%,rgba(240,168,68,.14),transparent 28%),linear-gradient(135deg,#091b1f,#153031 49%,#2a1a11);overflow:hidden}.flow-head{display:grid;grid-template-columns:.62fr 1.38fr;gap:34px}.flow-head .section-lead{color:#a7b2ad}.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:67px}.timeline:before{content:'';position:absolute;left:4%;right:4%;top:25px;height:1px;background:linear-gradient(90deg,rgba(240,168,68,.45),rgba(74,164,161,.42));opacity:.7}.timeline-card{position:relative;min-height:235px;padding:57px 19px 20px;border:1px solid rgba(255,255,255,.09);border-radius:19px;background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.018));overflow:hidden}.timeline-index{position:absolute;top:13px;left:17px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,198,107,.26);background:#11282a;color:var(--amber-light);font:600 .57rem var(--mono);z-index:2}.timeline-card h3{margin:31px 0 8px;font:780 1.12rem var(--display)}.timeline-card p{margin:0;color:#899793;font-size:.77rem}.event-note{margin-top:23px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:18px 20px;border:1px solid rgba(255,198,107,.18);border-radius:16px;background:linear-gradient(90deg,rgba(240,168,68,.08),rgba(74,164,161,.075));color:#c7cfcb}.event-dot{width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 7px rgba(240,168,68,.07)}.event-note b{font:760 .88rem var(--display)}.event-note span{color:#8fa09b;font-size:.76rem}.event-note code{color:#9eb3ae;font:500 .61rem var(--mono)}

/* Real interface */
.interface{padding:126px 0 132px;color:var(--ink);background:linear-gradient(140deg,#ddd8cc 0%,#cbd5d1 51%,#ead1b0 100%);overflow:hidden}.interface-head{display:grid;grid-template-columns:.64fr 1.36fr;gap:35px;margin-bottom:56px}.interface .kicker{color:#994a1f}.interface .section-lead{color:#615c56}.interface-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:22px;align-items:stretch}.screen-frame{padding:9px;border:1px solid rgba(30,28,25,.13);border-radius:23px;background:linear-gradient(145deg,#243436,#172326);box-shadow:0 28px 68px rgba(50,43,34,.17)}.screen-frame .demo-media{border-radius:15px;aspect-ratio:16/9.7}.interface-notes{display:grid;gap:12px}.note-card{padding:23px;border:1px solid rgba(31,28,24,.12);border-radius:19px;background:rgba(255,255,255,.38)}.note-card span{font:600 .61rem var(--mono);letter-spacing:.09em;color:#95512a}.note-card h3{margin:24px 0 8px;font:780 1.12rem var(--display)}.note-card p{margin:0;color:#655e57;font-size:.84rem}

/* Integrations */
.integrations{padding:124px 0;background:radial-gradient(circle at 16% 30%,rgba(240,168,68,.13),transparent 27%),linear-gradient(135deg,#102526,#1d2b28 58%,#2b1b13);overflow:hidden}.integration-head{display:grid;grid-template-columns:.64fr 1.36fr;gap:36px;margin-bottom:57px}.integration-head .section-lead{color:#aab4af}.integration-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.integration-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:center;padding:18px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))}.integration-copy{padding:8px}.integration-copy span{color:#899995;font:600 .6rem var(--mono);letter-spacing:.09em;text-transform:uppercase}.integration-copy h3{margin:22px 0 9px;font:780 1.35rem var(--display)}.integration-copy p{margin:0;color:#99a59f;font-size:.82rem}.mini-screen{overflow:hidden;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#071114;aspect-ratio:16/10}.mini-screen img{width:100%;height:100%;object-fit:cover;object-position:top}

/* FAQ */
.faq{padding:120px 0 126px;color:var(--ink);background:radial-gradient(circle at 80% 12%,rgba(74,164,161,.16),transparent 28%),linear-gradient(130deg,#efe3d2,#dfe5df 64%,#e2c49c)}.faq-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:68px}.faq .kicker{color:#9b4c20}.faq-list{border-top:1px solid rgba(31,28,24,.14)}.faq-list details{border-bottom:1px solid rgba(31,28,24,.14)}.faq-list summary{list-style:none;cursor:pointer;padding:24px 42px 24px 0;position:relative;font:780 1.05rem var(--display)}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';position:absolute;right:4px;top:21px;font:500 1.35rem var(--body);color:#8e562f;transition:transform .2s var(--ease)}.faq-list details[open] summary:after{transform:rotate(45deg)}.faq-list p{margin:0;padding:0 44px 24px 0;color:#625c55}.faq-list code{font:500 .75rem var(--mono);color:#6d4933}

/* Founder confidence */
.maker{padding:82px 0;color:var(--ink);background:linear-gradient(135deg,#e6d3b8,#d5ded9 66%,#d6b587)}.maker-in{display:grid;grid-template-columns:105px 1fr auto;gap:25px;align-items:center}.maker img{width:105px;height:105px;border-radius:22px;object-fit:cover;border:1px solid rgba(31,28,24,.12)}.maker-copy .kicker{color:#9a4b1f}.maker-copy h2{margin:9px 0 5px;font:790 clamp(1.65rem,2.8vw,2.65rem)/1 var(--display);letter-spacing:-.03em}.maker-copy p{margin:0;color:#635b53;max-width:700px}.maker .btn.ghost{color:#fff;background:#161a19;border-color:#161a19}

/* CTA & footer */
.final-cta{position:relative;padding:108px 0;text-align:center;background:radial-gradient(circle at 50% 17%,rgba(240,168,68,.17),transparent 30%),linear-gradient(135deg,#102425,#26180f)}.final-cta h2{margin:14px auto 17px;max-width:850px;font:820 clamp(2.7rem,5vw,5rem)/.96 var(--display);letter-spacing:-.045em}.final-cta p{max-width:680px;margin:0 auto;color:#9eaaa4}.cta-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:29px}.footer{padding:31px 0;background:#071014;border-top:1px solid rgba(255,255,255,.07);color:#75827e;font-size:.76rem}.footer-in{display:flex;justify-content:space-between;gap:30px}.footer-links{display:flex;gap:18px;flex-wrap:wrap}.footer a:hover{color:#fff}

/* Rendering/perf */
.overview,.production-flow,.interface,.integrations,.faq,.maker,.final-cta{content-visibility:auto;contain-intrinsic-size:850px}.cap-card,.timeline-card,.screen-frame,.integration-card,.note-card{contain:paint}
:focus-visible{outline:2px solid var(--amber-light);outline-offset:3px}

@media(max-width:1120px){.nav{display:none}.menu{display:block}.hero-grid,.overview-head,.flow-head,.interface-head,.integration-head,.faq-grid{grid-template-columns:1fr}.hero-copy{max-width:790px}.product-window{width:min(900px,100%);margin:auto}.cap-grid{grid-template-columns:1fr 1fr}.timeline{grid-template-columns:repeat(3,1fr)}.timeline:before{display:none}.interface-grid{grid-template-columns:1fr}.interface-notes{grid-template-columns:repeat(3,1fr)}.integration-card{grid-template-columns:1fr}.maker-in{grid-template-columns:90px 1fr}.maker img{width:90px;height:90px}.maker .btn{grid-column:1/-1;justify-self:start}}
@media(max-width:720px){.wrap{width:min(calc(100% - 28px),var(--max))}.header-in{height:68px}.brand-sub{display:none}.header-cta{display:none}.prod-hero{min-height:auto;padding:104px 0 45px}.hero-grid{gap:46px}.hero-copy h1{font-size:clamp(3rem,16.2vw,4.7rem)}.product-window{transform:none!important}.hero-tank.t2{display:none}.steam.s2{display:none}.cap-grid,.timeline,.interface-notes,.integration-grid{grid-template-columns:1fr}.overview,.production-flow,.interface,.integrations,.faq{padding:86px 0}.event-note{grid-template-columns:auto 1fr}.event-note code{grid-column:2}.maker{padding:70px 0}.maker-in{grid-template-columns:72px 1fr;gap:17px}.maker img{width:72px;height:72px;border-radius:17px}.maker-copy p{font-size:.86rem}.final-cta{padding:88px 0}.footer-in{display:block}.footer-links{margin-top:15px}.flow-chips{gap:6px}.flow-chip{font-size:.55rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.product-window{transform:none!important}}