:root{
  --bg:#071a30;--bg-2:#0b2645;--surface:#0d2f56;--surface-2:#103861;--surface-3:#15446f;
  --text:#f3e9df;--muted:#aeb8c8;--muted-2:#7f8ba0;--line:rgba(221,151,101,.22);--line-strong:rgba(221,151,101,.44);
  --accent:#cf754a;--accent-2:#e0ad79;--sand:#f0d2b0;--coral:#c96755;--mint:#79c9a9;
  --shadow:0 24px 70px rgba(0,0,0,.32);--radius:22px;--radius-sm:15px;--shell:min(1180px,calc(100% - 38px));
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:
  radial-gradient(circle at 88% 4%,rgba(207,117,74,.13),transparent 28%),
  radial-gradient(circle at 8% 34%,rgba(52,101,157,.18),transparent 24%),
  linear-gradient(180deg,#07182d 0%,#0a2340 42%,#061526 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.shell{width:var(--shell);margin-inline:auto}.skip-link{position:fixed;left:10px;top:-70px;z-index:999;padding:10px 14px;border-radius:10px;background:#fff;color:#111}.skip-link:focus{top:10px}.eyebrow{margin:0;color:var(--accent-2);font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.page-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--accent-2);font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.page-kicker::before{content:"";width:22px;height:1px;background:var(--accent)}
.site-header{position:sticky;top:0;z-index:80;background:rgba(5,17,32,.90);backdrop-filter:blur(16px);border-bottom:1px solid rgba(233,158,105,.14)}.header-inner{height:72px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px}.brand{display:flex;align-items:center;gap:11px;min-width:max-content}.brand-mark{width:38px;height:38px;object-fit:contain}.brand-copy{display:grid;gap:1px}.brand-copy strong{font-size:14px;line-height:1.1}.brand-copy small{color:var(--accent-2);font-size:7px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.main-nav{justify-self:center;display:flex;gap:27px}.main-nav a{position:relative;padding:27px 0 23px;color:var(--muted);font-size:11px;font-weight:700}.main-nav a:hover,.main-nav a.active{color:var(--text)}.main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.beta-link,.ghost-link,.small-link,.inline-link{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800}.beta-link{padding:9px 14px;border:1px solid var(--line-strong);border-radius:999px;color:#e6b98f;background:rgba(207,117,74,.06)}.beta-link:hover{background:rgba(207,117,74,.13)}.menu-toggle{display:none;border:1px solid var(--line);border-radius:10px;background:rgba(11,39,71,.82);color:var(--text);padding:8px 11px;font-size:11px}
.wave-bg{position:absolute;inset:0;pointer-events:none;background-image:url('/assets/sidebar-waves-example-3.png');background-repeat:no-repeat;background-position:85% 22%;background-size:min(1080px,82vw) auto;opacity:.58;mix-blend-mode:screen}.wave-strip{height:78px;background-image:url('/assets/sidebar-waves-example-3.png');background-position:center 52%;background-size:1200px auto;opacity:.38;filter:saturate(.88)}
.hero{position:relative;overflow:hidden;padding:56px 0 46px}.hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:.94fr 1.06fr;gap:50px;align-items:center}.hero-copy{padding:18px 0}.hero h1{max-width:650px;margin:13px 0 18px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(36px,3.25vw,52px);line-height:1.02;letter-spacing:-.032em;font-weight:860}.hero h1 span{color:var(--accent)}.hero-lead{max-width:590px;margin:0;color:#d7dce4;font-size:16px;line-height:1.7}.hero-actions{display:flex;flex-wrap:wrap;gap:21px;margin-top:25px}.text-action{padding-bottom:5px;border-bottom:1px solid var(--accent);color:#e2b487;font-size:12px;font-weight:850}.text-action.muted{color:var(--muted);border-bottom-color:rgba(199,173,160,.35)}.beta-status{display:flex;align-items:center;gap:8px;margin:24px 0 0;color:var(--muted);font-size:10px}.beta-status>span{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(217,119,79,.09)}.hero-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:22px 0 0;padding:0;list-style:none}.hero-badges li{display:flex;align-items:center;gap:9px;color:#d4dae4;font-size:10px}.hero-badges i{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);border-radius:9px;color:var(--accent-2);font-style:normal}.hero-badges b,.hero-badges small{display:block}.hero-badges b{font-size:10px}.hero-badges small{margin-top:2px;color:var(--muted-2);font-size:8px}.product-frame{position:relative;border:1px solid var(--line-strong);border-radius:20px;background:rgba(7,28,52,.90);box-shadow:0 35px 90px rgba(0,0,0,.45),0 0 70px rgba(205,89,65,.12);overflow:hidden}.product-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px rgba(255,255,255,.04);pointer-events:none}.window-bar{height:30px;display:flex;align-items:center;gap:5px;padding:0 12px;border-bottom:1px solid rgba(235,164,112,.12);background:rgba(4,16,30,.70)}.window-bar>span{width:7px;height:7px;border-radius:50%;background:#835041}.window-bar>span:nth-child(2){background:#a9694d}.window-bar>span:nth-child(3){background:#d28d64}.window-bar em{margin-left:auto;color:var(--muted-2);font-size:8px;font-style:normal;text-transform:uppercase;letter-spacing:.1em}.product-frame img{display:block;width:100%;height:auto}.hero-media{position:relative}.hero-media .product-frame{transform:perspective(1200px) rotateY(-3deg) rotateX(1.4deg)}.hero-chip{position:absolute;right:-10px;bottom:-15px;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(7,27,49,.96);box-shadow:var(--shadow);font-size:9px;color:#e4c5aa}.hero-chip b{color:var(--accent-2)}
.section{padding:52px 0}.section.compact{padding:38px 0}.section-head h2,.page-hero h1{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:850;letter-spacing:-.025em}.section-head h2{margin:8px 0 0;font-size:clamp(24px,2.25vw,32px);line-height:1.08}.section-head p:not(.eyebrow){max-width:660px;color:var(--muted);line-height:1.65;font-size:12px}.panel{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(155deg,rgba(14,48,83,.84),rgba(7,27,49,.88));box-shadow:inset 0 1px rgba(255,255,255,.025)}
.workflow{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:27px}.workflow-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:rgba(8,31,57,.84)}.workflow-shot{position:relative;height:168px;overflow:hidden;border-bottom:1px solid var(--line)}.workflow-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .35s ease}.workflow-card:hover .workflow-shot img{transform:scale(1.035)}.workflow-copy{display:grid;grid-template-columns:36px 1fr;gap:10px;padding:15px}.workflow-num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#e28a5a,#b7513e);color:white;font-weight:900;font-size:13px}.workflow-copy h3{margin:1px 0 5px;font-size:13px}.workflow-copy p{margin:0;color:var(--muted);font-size:10px;line-height:1.5}.workflow-foot{display:flex;justify-content:flex-end;margin-top:15px}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.promise-card{position:relative;padding:24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(12,43,76,.80),rgba(6,25,46,.88));overflow:hidden}.promise-card::after{content:"";position:absolute;right:-35px;bottom:-40px;width:120px;height:120px;border-radius:50%;background:rgba(207,117,74,.09)}.promise-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(235,164,112,.22);border-radius:11px;background:rgba(207,117,74,.08);color:var(--accent-2)}.promise-card h3{margin:16px 0 8px;font-size:16px}.promise-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}
.showcase{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:center}.showcase-stage{position:relative;padding:17px}.showcase-stage .product-frame{box-shadow:0 24px 70px rgba(0,0,0,.34)}.showcase-note{position:absolute;max-width:230px;padding:11px 12px;border:1px solid var(--line-strong);border-radius:14px;background:rgba(8,31,57,.96);box-shadow:0 15px 30px rgba(0,0,0,.35);font-size:9px;line-height:1.45;color:#d2d9e4}.showcase-note strong{display:block;margin-bottom:3px;color:#e0b184}.showcase-note.note-a{left:-10px;bottom:54px}.showcase-note.note-b{right:-5px;top:52px}.showcase-copy{padding:22px}.showcase-copy h2{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:850;letter-spacing:-.025em;font-size:30px;margin:8px 0 13px}.showcase-copy p{color:var(--muted);font-size:12px;line-height:1.68}.feature-list{display:grid;gap:12px;margin:20px 0 0;padding:0;list-style:none}.feature-list li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding-top:12px;border-top:1px solid rgba(235,164,112,.10)}.feature-list li:first-child{border-top:0}.feature-list span{color:var(--accent-2)}.feature-list b{font-size:11px}.feature-list small{display:block;color:var(--muted);font-size:9px;margin-top:3px;line-height:1.4}
.onboarding{display:grid;grid-template-columns:.88fr 1.12fr;gap:30px;align-items:center}.onboarding-media{max-width:560px;margin-inline:auto}.onboarding-media img{display:block;width:100%;border-radius:18px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.38)}.onboarding-copy h2{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:850;letter-spacing:-.025em;font-size:30px;margin:8px 0 12px}.onboarding-copy p{color:var(--muted);font-size:12px;line-height:1.65}.mini-steps{display:grid;gap:10px;margin-top:20px}.mini-step{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(235,164,112,.1);font-size:11px}.mini-step:first-child{border-top:0}.mini-step b{display:grid;place-items:center;width:25px;height:25px;border-radius:9px;background:rgba(217,119,79,.1);color:var(--accent-2)}
.news-home{display:grid;grid-template-columns:1fr .66fr;gap:22px}.timeline{display:grid;margin-top:13px}.timeline-item{display:grid;grid-template-columns:86px 12px 1fr;gap:11px;padding:15px 0;border-top:1px solid rgba(235,164,112,.10)}.timeline-item:first-child{border-top:0}.timeline-date{color:#e7b68d;font-size:9px}.timeline-dot{width:8px;height:8px;margin-top:2px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(217,119,79,.08)}.timeline-copy strong{display:block;font-size:12px}.timeline-copy p{margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.45}.timeline-copy small{display:inline-block;margin-top:5px;color:var(--accent-2);font-size:8px;text-transform:uppercase;letter-spacing:.08em}.beta-cta{position:relative;overflow:hidden;padding:28px;border:1px solid var(--line-strong);border-radius:var(--radius);background:linear-gradient(145deg,rgba(16,52,88,.88),rgba(7,27,49,.94))}.beta-cta::after{content:"";position:absolute;inset:0;background-image:url('/assets/sidebar-waves-example-3.png');background-size:800px auto;background-repeat:no-repeat;background-position:70% 30%;opacity:.22}.beta-cta>*{position:relative;z-index:1}.beta-cta h3{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:850;letter-spacing:-.02em;font-size:24px;margin:8px 0 9px}.beta-cta p{color:var(--muted);font-size:11px;line-height:1.6}.beta-cta .beta-link{margin-top:14px}
.page-hero{position:relative;overflow:hidden;padding:46px 0 32px;border-bottom:1px solid rgba(235,164,112,.11)}.page-hero .wave-bg{opacity:.38}.page-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}.page-hero h1{margin:8px 0 8px;font-size:clamp(32px,3.5vw,46px);line-height:1.05}.page-hero p{max-width:660px;margin:0;color:var(--muted);font-size:13px;line-height:1.65}.page-hero-side{color:var(--muted-2);font-size:10px;text-align:right}.page-section{padding:44px 0}.feature-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center;padding:34px 0;border-top:1px solid rgba(235,164,112,.10)}.feature-section:first-child{border-top:0}.feature-section.reverse{grid-template-columns:1.1fr .9fr}.feature-section.reverse .feature-text{order:2}.feature-section.reverse .feature-media{order:1}.feature-text h2{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:850;letter-spacing:-.025em;font-size:28px;margin:7px 0 11px}.feature-text p{color:var(--muted);font-size:12px;line-height:1.65}.feature-text ul{padding-left:18px;color:#d5dbe4;font-size:11px;line-height:1.7}.feature-media img{display:block;width:100%;border-radius:18px;border:1px solid var(--line);box-shadow:0 25px 60px rgba(0,0,0,.33)}.feature-media.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:end}.feature-media.duo img:last-child{transform:translateY(28px)}
.theme-row{display:grid;grid-template-columns:1fr .85fr;gap:22px;align-items:center}.theme-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}.theme-pill{padding:12px;border:1px solid var(--line);border-radius:13px;background:rgba(9,34,62,.72);font-size:10px}.theme-pill b{display:block;margin-bottom:3px}.theme-pill small{color:var(--muted-2)}
.gallery-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.gallery-card{appearance:none;text-align:left;padding:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(8,31,57,.82);color:var(--text);cursor:pointer;transition:.2s transform,.2s border-color}.gallery-card:hover{transform:translateY(-3px);border-color:var(--line-strong)}.gallery-card img{display:block;width:100%;height:170px;object-fit:cover;object-position:top}.gallery-card span{display:block;padding:11px 12px 13px}.gallery-card b,.gallery-card small{display:block}.gallery-card b{font-size:12px}.gallery-card small{margin-top:3px;color:var(--muted);font-size:9px}.lightbox{width:min(1240px,94vw);max-height:92vh;padding:0;border:1px solid var(--line-strong);border-radius:20px;background:#071a30;color:var(--text);box-shadow:0 35px 90px rgba(0,0,0,.68)}.lightbox::backdrop{background:rgba(2,8,16,.88);backdrop-filter:blur(7px)}.lightbox figure{margin:0}.lightbox img{display:block;max-width:100%;max-height:82vh;margin:auto}.lightbox figcaption{padding:11px 16px;border-top:1px solid var(--line);font-size:11px}.lightbox-close{position:absolute;right:10px;top:10px;z-index:2;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:rgba(7,28,51,.95);color:var(--text);font-size:20px;cursor:pointer}
.news-list-full{display:grid;gap:0;border-top:1px solid var(--line)}.news-list-full .timeline-item{grid-template-columns:120px 12px 1fr;padding:21px 0}.roadmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.roadmap-card{padding:23px;border:1px solid var(--line);border-radius:17px;background:rgba(9,34,62,.76)}.roadmap-card .state{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em}.roadmap-card .state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted-2)}.roadmap-card.now .state::before{background:var(--accent)}.roadmap-card.next .state::before{background:var(--accent-2)}.roadmap-card.later .state::before{background:var(--mint)}.roadmap-card h3{margin:14px 0 8px;font-size:17px}.roadmap-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.guide-card{padding:22px;border:1px solid var(--line);border-radius:17px;background:rgba(9,34,62,.74)}.guide-card span{color:var(--accent-2);font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.guide-card h3{font-size:15px;margin:10px 0 7px}.guide-card p{color:var(--muted);font-size:10px;line-height:1.55}.faq-list{display:grid;gap:9px;margin-top:20px}.faq-list details{border:1px solid var(--line);border-radius:14px;background:rgba(9,34,62,.70)}.faq-list summary{cursor:pointer;padding:15px 17px;font-size:11px;font-weight:800}.faq-list p{padding:0 17px 15px;margin:0;color:var(--muted);font-size:10px;line-height:1.6}
.support-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:28px;align-items:start}.support-cards{display:grid;gap:10px}.support-card{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:15px;border:1px solid var(--line);border-radius:14px;background:rgba(9,34,62,.72)}.support-card>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(207,117,74,.09);color:var(--accent-2)}.support-card b{display:block;font-size:12px}.support-card small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.beta-form{border:1px solid var(--line-strong);border-radius:var(--radius);background:linear-gradient(150deg,rgba(15,49,83,.86),rgba(7,27,49,.95));padding:24px}.form-head{padding-bottom:17px;border-bottom:1px solid rgba(235,164,112,.11)}.form-head h2{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:850;letter-spacing:-.02em;margin:7px 0 6px;font-size:24px}.form-head p{margin:0;color:var(--muted);font-size:10px;line-height:1.55}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:18px}.form-grid label{display:grid;gap:7px}.form-grid label>span{color:#e9d6c5;font-size:10px;font-weight:750}.form-span{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid rgba(235,164,112,.20);border-radius:11px;background:rgba(5,22,41,.82);color:var(--text);padding:11px 12px;font:inherit;font-size:11px;outline:none}.form-grid textarea{resize:vertical;min-height:96px}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:rgba(240,173,121,.58);box-shadow:0 0 0 3px rgba(217,119,79,.07)}.form-grid input::placeholder,.form-grid textarea::placeholder{color:#74849a}.form-foot{display:flex;align-items:center;gap:14px;margin-top:16px}.beta-submit{appearance:none;border:1px solid var(--line-strong);border-radius:999px;background:rgba(207,117,74,.08);color:#e1b387;padding:10px 14px;font-size:11px;font-weight:800;cursor:pointer}.beta-submit:hover{background:rgba(207,117,74,.14)}.form-state{margin:0;color:var(--muted);font-size:9px;line-height:1.4}.form-state.success{color:var(--mint)}
.site-footer{margin-top:40px;border-top:1px solid rgba(235,164,112,.13);background:rgba(3,13,25,.84)}.footer-inner{min-height:110px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}.footer-inner nav{justify-self:center;display:flex;gap:17px;flex-wrap:wrap}.footer-inner nav a{color:var(--muted);font-size:9px}.footer-inner nav a:hover{color:var(--text)}.footer-inner>p{color:var(--muted-2);font-size:8px}.footer-brand .brand-mark{width:31px;height:31px}
@media(max-width:1050px){.header-inner{grid-template-columns:auto auto 1fr}.main-nav{position:absolute;top:71px;left:18px;right:18px;display:none;flex-direction:column;align-items:stretch;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(6,24,45,.98);box-shadow:var(--shadow)}.main-nav.open{display:flex}.main-nav a{padding:11px}.menu-toggle{display:block;justify-self:end}.beta-link{justify-self:end}.hero-grid,.showcase,.onboarding,.news-home,.feature-section,.feature-section.reverse,.theme-row,.support-grid{grid-template-columns:1fr}.hero-media{max-width:850px}.hero-badges{grid-template-columns:repeat(2,1fr)}.showcase-copy{padding:0}.feature-section.reverse .feature-text,.feature-section.reverse .feature-media{order:initial}.feature-media.duo{max-width:900px}.workflow,.promise-grid,.roadmap-grid,.guide-grid{grid-template-columns:1fr}.gallery-strip{grid-template-columns:repeat(2,1fr)}.page-hero-inner{grid-template-columns:1fr}.page-hero-side{text-align:left}.footer-inner{grid-template-columns:1fr;text-align:center;padding:25px 0}.footer-inner .brand{justify-content:center}.footer-inner nav{justify-self:center}}
@media(max-width:680px){:root{--shell:calc(100% - 22px)}.header-inner{height:65px;grid-template-columns:1fr auto}.brand-copy small{display:none}.brand-mark{width:34px;height:34px}.beta-link{display:none}.hero{padding-top:42px}.hero-grid{gap:34px}.hero h1{font-size:36px}.hero-lead{font-size:14px}.hero-badges{grid-template-columns:1fr 1fr}.hero-media .product-frame{transform:none}.hero-chip{display:none}.section{padding:39px 0}.workflow-shot{height:190px}.showcase-note{display:none}.gallery-strip{grid-template-columns:1fr}.gallery-card img{height:205px}.feature-media.duo{grid-template-columns:1fr}.feature-media.duo img:last-child{transform:none}.theme-list{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.form-span{grid-column:auto}.form-foot{align-items:flex-start;flex-direction:column}.footer-inner{min-height:140px}}

/* ============================================================
   Prowflow Website V0.5 — Sienne Royale realignment
   Mirrors the validated application theme:
   royal/deep blue + nude beige + restrained terracotta.
   Intentionally placed last so it wins over earlier draft rules.
   ============================================================ */
:root{
  --bg:#071a3b;
  --bg-2:#09234a;
  --surface:#0b234c;
  --surface-2:#0a2551;
  --surface-3:#0d2b5a;
  --text:#f4e7d8;
  --muted:#c9b8a8;
  --muted-2:#988778;
  --line:rgba(218,181,143,.20);
  --line-strong:rgba(218,181,143,.34);
  --accent:#c66d47;
  --accent-2:#d6ad78;
  --sand:#e7d3bc;
  --coral:#c66d47;
  --mint:#72c9a5;
}
html{background:#071a3b;color-scheme:dark}
body{
  background:
    radial-gradient(circle at 14% 0,rgba(40,70,168,.22),transparent 31%),
    radial-gradient(circle at 91% 11%,rgba(198,109,71,.14),transparent 28%),
    radial-gradient(circle at 54% 105%,rgba(214,173,120,.055),transparent 32%),
    #071a3b !important;
  color:var(--text);
}
.site-header{
  background:rgba(4,17,43,.92) !important;
  border-bottom-color:rgba(218,181,143,.16) !important;
}
.panel,.workflow-card,.promise-card,.roadmap-card,.guide-card,.faq-list details,.support-card,.gallery-card,.theme-pill{
  background:linear-gradient(155deg,rgba(11,35,76,.92),rgba(7,26,59,.95)) !important;
  border-color:rgba(218,181,143,.20) !important;
}
.product-frame,.beta-form{
  background:linear-gradient(155deg,rgba(11,35,76,.97),rgba(7,26,59,.98)) !important;
  border-color:rgba(218,181,143,.30) !important;
  box-shadow:0 24px 58px rgba(1,9,27,.40),0 0 42px rgba(40,70,168,.08) !important;
}
.window-bar{background:rgba(5,20,49,.95) !important;border-bottom-color:rgba(218,181,143,.14) !important}
.hero-chip,.showcase-note{background:rgba(8,31,70,.97) !important;border-color:rgba(218,181,143,.28) !important}
.beta-cta{background:linear-gradient(155deg,rgba(12,36,76,.98),rgba(5,20,49,.98)) !important;border-color:rgba(218,181,143,.23) !important}
.site-footer{background:rgba(3,13,35,.92) !important;border-top-color:rgba(218,181,143,.14) !important}
.main-nav a,.hero-lead,.section-head p:not(.eyebrow),.feature-text p,.showcase-copy p,.onboarding-copy p,.roadmap-card p,.guide-card p,.faq-list p,.support-card small,.form-head p{color:var(--muted)}
.eyebrow,.page-kicker,.small-link,.inline-link,.hero-chip b{color:var(--accent-2) !important}
.beta-link,.text-action{color:#e0bf95 !important}
.hero h1 span{color:var(--accent) !important}
.wave-bg,.wave-strip{mix-blend-mode:screen;opacity:.30 !important;filter:hue-rotate(156deg) saturate(.66) brightness(.78) sepia(.10)}

/* Smaller editorial scale: site should feel like Prowflow, not a poster. */
.hero{padding:46px 0 38px}
.hero-grid{grid-template-columns:.88fr 1.12fr;gap:44px}
.hero-copy{padding:10px 0}
.hero h1{
  max-width:590px;
  margin:11px 0 16px;
  font-size:clamp(31px,2.55vw,42px) !important;
  line-height:1.07 !important;
  letter-spacing:-.028em !important;
  font-weight:820 !important;
}
.hero-lead{max-width:560px;font-size:14px;line-height:1.62}
.section-head h2{font-size:clamp(21px,1.8vw,28px) !important;line-height:1.12}
.page-hero{padding:39px 0 28px}
.page-hero h1{font-size:clamp(27px,2.5vw,36px) !important;line-height:1.08 !important}
.feature-text h2{font-size:24px !important;line-height:1.12}
.showcase-copy h2{font-size:26px !important;line-height:1.12}
.onboarding-copy h2{font-size:26px !important;line-height:1.12}
.form-head h2{font-size:22px !important}
.roadmap-card h3{font-size:16px}
.promise-card h3{font-size:15px}

/* Keep terracotta as accent, never as a page-sized wash. */
.promise-card::after{background:rgba(198,109,71,.055) !important}
.workflow-num{background:linear-gradient(135deg,#c66d47,#d79a48) !important}
.beta-link,.beta-submit{background:rgba(198,109,71,.055) !important}
.beta-link:hover,.beta-submit:hover{background:rgba(198,109,71,.11) !important}

@media(max-width:680px){
  .hero h1{font-size:32px !important}
  .page-hero h1{font-size:28px !important}
  .section-head h2{font-size:23px !important}
}

/* ============================================================
   PROWFLOW WEBSITE V0.6 — SIENNE ROYALE ALIGNMENT
   Exact application palette + compact type + visible wave motif
   ============================================================ */
:root{
  --bg:#071a3b;
  --bg-2:#0b234c;
  --surface:#0b234c;
  --surface-2:#0e2d5b;
  --surface-3:#123668;
  --text:#f4e7d8;
  --muted:#c9b8a8;
  --muted-2:#988778;
  --line:rgba(214,173,120,.20);
  --line-strong:rgba(214,173,120,.36);
  --accent:#c66d47;
  --accent-2:#d6ad78;
  --sand:#f4e7d8;
  --coral:#c66d47;
  --mint:#72c9a5;
}

html{
  scrollbar-color:#c66d47 #06162f;
  scrollbar-width:thin;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{width:11px;height:11px}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{background:#06162f}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  min-height:48px;
  border:2px solid #06162f;
  border-radius:999px;
  background:linear-gradient(180deg,#d6ad78 0%,#c66d47 58%,#a9553b 100%);
  box-shadow:inset 0 0 0 1px rgba(244,231,216,.08);
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#e4c398,#d17851 56%,#bb6244 100%)}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner{background:#06162f}

body{
  background:
    radial-gradient(circle at 12% 0%,rgba(40,70,168,.20),transparent 29%),
    radial-gradient(circle at 92% 10%,rgba(198,109,71,.14),transparent 27%),
    radial-gradient(circle at 55% 105%,rgba(214,173,120,.055),transparent 31%),
    linear-gradient(180deg,#071a3b 0%,#082047 46%,#06162f 100%) !important;
  color:var(--text);
}
.site-header{background:rgba(5,20,47,.93) !important;border-bottom-color:rgba(214,173,120,.18) !important}

/* Prowflow wave language: visible, thin and elegant rather than decorative blobs. */
.wave-bg{
  background-image:url('/assets/sidebar-waves-example-3.png') !important;
  background-repeat:no-repeat !important;
  background-position:52% 46% !important;
  background-size:max(1100px,92vw) auto !important;
  opacity:.82 !important;
  mix-blend-mode:screen !important;
  filter:none !important;
}
.hero .wave-bg{background-position:48% 39% !important;opacity:.72 !important}
.page-hero .wave-bg{background-position:66% 47% !important;opacity:.78 !important}
.wave-strip{
  height:66px !important;
  background-image:url('/assets/sidebar-waves-example-3.png') !important;
  background-repeat:no-repeat !important;
  background-position:center 52% !important;
  background-size:1300px auto !important;
  opacity:.62 !important;
  filter:none !important;
}
.hero::before,
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 11% 18%,rgba(214,173,120,.055),transparent 24%),
    radial-gradient(circle at 88% 60%,rgba(198,109,71,.075),transparent 25%);
  z-index:0;
}
.hero-grid,.page-hero-inner{position:relative;z-index:2}

/* Typography scale: Prowflow-like, not oversized marketing typography. */
.hero{padding:42px 0 36px !important}
.hero-grid{grid-template-columns:.88fr 1.12fr !important;gap:42px !important}
.hero-copy{padding:10px 0 !important}
.hero h1{
  max-width:540px !important;
  margin:10px 0 14px !important;
  font-size:clamp(28px,2.05vw,36px) !important;
  line-height:1.08 !important;
  letter-spacing:-.025em !important;
  font-weight:800 !important;
}
.hero-lead{max-width:540px !important;font-size:13px !important;line-height:1.62 !important}
.hero-actions{margin-top:19px !important}
.beta-status{margin-top:18px !important}
.hero-badges{margin-top:17px !important}

.section{padding:42px 0 !important}
.section.compact{padding:31px 0 !important}
.section-head h2{
  font-size:clamp(18px,1.32vw,23px) !important;
  line-height:1.16 !important;
  letter-spacing:-.018em !important;
  font-weight:780 !important;
}
.page-hero{padding:29px 0 23px !important}
.page-hero h1{
  margin:6px 0 7px !important;
  font-size:clamp(22px,1.65vw,28px) !important;
  line-height:1.12 !important;
  letter-spacing:-.018em !important;
  font-weight:790 !important;
}
.page-hero p{font-size:11.5px !important;line-height:1.58 !important}
.page-section{padding:34px 0 !important}
.feature-section{padding:28px 0 !important}
.feature-text h2,
.showcase-copy h2,
.onboarding-copy h2{
  font-size:20px !important;
  line-height:1.16 !important;
  letter-spacing:-.015em !important;
  font-weight:780 !important;
}
.beta-cta h3{font-size:18px !important;line-height:1.18 !important}
.form-head h2{font-size:18px !important;line-height:1.18 !important}
.roadmap-card h3{font-size:14px !important}
.guide-card h3{font-size:13px !important}
.promise-card h3{font-size:14px !important}
.workflow-copy h3{font-size:12px !important}
.timeline-copy strong{font-size:11px !important}

/* Panels follow the blue royal surface from the app. */
.panel,.workflow-card,.promise-card,.gallery-card,.roadmap-card,.guide-card,.faq-list details,.support-card{
  background:linear-gradient(155deg,rgba(14,45,91,.86),rgba(6,27,63,.94)) !important;
  border-color:rgba(214,173,120,.18) !important;
}
.product-frame{background:rgba(6,27,63,.95) !important;border-color:rgba(214,173,120,.28) !important}
.window-bar{background:rgba(4,21,51,.78) !important;border-bottom-color:rgba(214,173,120,.14) !important}

@media(max-width:680px){
  .hero{padding-top:34px !important}
  .hero h1{font-size:29px !important}
  .page-hero h1{font-size:24px !important}
  .section-head h2{font-size:20px !important}
  .feature-text h2,.showcase-copy h2,.onboarding-copy h2{font-size:19px !important}
  .wave-bg{background-size:1250px auto !important;background-position:58% 43% !important;opacity:.58 !important}
}

/* ============================================================
   PROWFLOW WEBSITE V0.7 — READABILITY + VISIBLE WAVE LANGUAGE
   Titles stay compact; general UI type is restored to a readable scale.
   Wave motifs deliberately echo the Prowflow application headers.
   ============================================================ */

/* General readability: V0.6 made supporting copy too small. */
body{font-size:15px;line-height:1.55}
.brand-copy strong{font-size:15px !important}
.brand-copy small{font-size:8px !important}
.main-nav a{font-size:12.5px !important}
.beta-link,.ghost-link,.small-link,.inline-link{font-size:12px !important}
.eyebrow,.page-kicker{font-size:11px !important}
.hero-lead{font-size:15px !important;line-height:1.66 !important}
.text-action{font-size:13px !important}
.beta-status{font-size:11.5px !important}
.hero-badges li{font-size:11.5px !important}
.hero-badges b{font-size:11.5px !important}
.hero-badges small{font-size:9.5px !important}
.window-bar em{font-size:9px !important}
.hero-chip{font-size:10px !important}
.section-head p:not(.eyebrow){font-size:13.5px !important;line-height:1.68 !important}
.workflow-copy h3{font-size:13.5px !important}
.workflow-copy p{font-size:11.5px !important;line-height:1.55 !important}
.promise-card p{font-size:12px !important;line-height:1.64 !important}
.showcase-copy p{font-size:13.5px !important;line-height:1.68 !important}
.feature-list b{font-size:12.5px !important}
.feature-list small{font-size:10.5px !important;line-height:1.5 !important}
.onboarding-copy p{font-size:13.5px !important;line-height:1.68 !important}
.mini-step{font-size:11.5px !important}
.timeline-copy strong{font-size:12.5px !important}
.timeline-copy span{font-size:10.5px !important}
.beta-cta p{font-size:12px !important;line-height:1.6 !important}
.page-hero p{font-size:13.5px !important;line-height:1.66 !important}
.page-hero-side{font-size:11px !important}
.feature-text p{font-size:13.5px !important;line-height:1.68 !important}
.feature-text ul{font-size:12px !important;line-height:1.72 !important}
.theme-pill b{font-size:12px !important}
.theme-pill small{font-size:10px !important}
.gallery-card b{font-size:12px !important}
.gallery-card small{font-size:10px !important}
.roadmap-card p{font-size:12px !important;line-height:1.65 !important}
.roadmap-card .state{font-size:10px !important}
.guide-card span{font-size:10px !important}
.guide-card h3{font-size:14px !important}
.guide-card p{font-size:12px !important;line-height:1.62 !important}
.faq-list summary{font-size:12.5px !important}
.faq-list p{font-size:12px !important;line-height:1.65 !important}
.support-card b{font-size:13px !important}
.support-card small{font-size:11px !important}
.form-head p{font-size:12px !important}
.form-grid label>span{font-size:11px !important}
.form-grid input,.form-grid select,.form-grid textarea{font-size:12.5px !important}
.form-state{font-size:10.5px !important}
.footer-inner nav a{font-size:10.5px !important}
.footer-inner>p{font-size:9.5px !important}

/* Keep the title scale from V0.6: it was validated as compact enough. */
.hero h1{font-size:clamp(28px,2.05vw,36px) !important}
.page-hero h1{font-size:clamp(22px,1.65vw,28px) !important}
.section-head h2{font-size:clamp(18px,1.32vw,23px) !important}

/* Visible Prowflow wave motif. It lives ABOVE the page background and BELOW content. */
.hero,.page-hero{isolation:isolate}
.wave-bg{
  z-index:1 !important;
  background-image:url('/assets/sidebar-waves-example-3.png') !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:center center !important;
  opacity:.92 !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}
.hero .wave-bg{opacity:.88 !important}
.page-hero .wave-bg{opacity:.94 !important}
.hero-grid,.page-hero-inner{z-index:2 !important}

/* A visible wave separator between major home sections. */
.wave-strip{
  height:86px !important;
  background-image:url('/assets/sidebar-waves-example-3.png') !important;
  background-repeat:no-repeat !important;
  background-size:100% 110px !important;
  background-position:center 50% !important;
  opacity:.72 !important;
  filter:none !important;
  position:relative;
}
.wave-strip::before,
.wave-strip::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,173,120,.22),transparent);
}
.wave-strip::before{top:9px}.wave-strip::after{bottom:9px}

/* Scrollbar explicitly follows Sienne Royale. */
html{scrollbar-color:#c66d47 #071a3b !important;scrollbar-width:thin}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:12px;height:12px}
html::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:#071a3b !important}
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{
  border:3px solid #071a3b !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#d6ad78 0%,#c66d47 60%,#a9553b 100%) !important;
}
html::-webkit-scrollbar-thumb:hover,body::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#ead0ad 0%,#d87d56 58%,#be6547 100%) !important;
}

@media(max-width:680px){
  body{font-size:14px}
  .hero-lead{font-size:14px !important}
  .page-hero p,.feature-text p,.showcase-copy p,.onboarding-copy p{font-size:13px !important}
  .main-nav a{font-size:13px !important}
  .wave-bg{background-size:1450px 480px !important;background-position:center 45% !important;opacity:.72 !important}
}


/* ============================================================
   PROWFLOW WEBSITE V0.8 — SIENNE ROYALE WAVES REBUILT
   Re-adapted from the official Midnight waves reference:
   - use the real app wave asset, not a custom SVG
   - keep the wave language mostly on the LEFT side
   - stronger typographic comfort than V0.7
   - preserve Sienne Royale royal-blue / beige / terracotta identity
   ============================================================ */
:root{
  --bg:#071a3b;
  --bg-2:#0a2348;
  --surface:#0b244d;
  --surface-2:#10315b;
  --surface-3:#143968;
  --text:#f4e7d8;
  --muted:#d1c0b0;
  --muted-2:#aa9887;
  --line:rgba(214,173,120,.20);
  --line-strong:rgba(214,173,120,.34);
  --accent:#ca7450;
  --accent-2:#d7af7a;
  --sand:#f4e7d8;
  --coral:#ca7450;
  --mint:#79c9a9;
}

html{
  background:#071a3b;
  color-scheme:dark;
  scrollbar-color:#c97754 #081a37;
  scrollbar-width:thin;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{width:11px;height:11px}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{background:#081a37}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  min-height:46px;
  border:2px solid #081a37;
  border-radius:999px;
  background:linear-gradient(180deg,#e0bd8f 0%,#c97754 62%,#a85f45 100%);
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#edd0aa 0%,#d58460 60%,#b86a4c 100%)}

body{
  background:
    radial-gradient(circle at 10% 4%,rgba(79,116,185,.18),transparent 26%),
    radial-gradient(circle at 88% 14%,rgba(202,116,80,.10),transparent 24%),
    linear-gradient(180deg,#071a3b 0%,#0a2147 48%,#071730 100%) !important;
  color:var(--text);
  font-size:16px;
}
.site-header{
  background:rgba(5,20,47,.93) !important;
  border-bottom-color:rgba(214,173,120,.16) !important;
}

/* General type comfort — user requested less tiny text */
.main-nav a,
.beta-link,
.small-link,
.inline-link,
.text-action{font-size:12.5px !important}
.brand-copy strong{font-size:15px !important}
.brand-copy small{font-size:7.4px !important}
.eyebrow,.page-kicker{font-size:11px !important;letter-spacing:.15em !important}
.hero-lead,
.section-head p:not(.eyebrow),
.feature-text p,
.showcase-copy p,
.onboarding-copy p,
.roadmap-card p,
.guide-card p,
.faq-list p,
.support-card small,
.form-head p,
.page-hero p{font-size:14px !important;line-height:1.68 !important}
.workflow-copy p,
.promise-card p,
.feature-list small,
.timeline-copy p,
.gallery-card p,
.stat-card p,
.support-list li,
.bullet-list li,
.check-list li{font-size:13px !important;line-height:1.62 !important}
.workflow-copy h3,.guide-card h3{font-size:15px !important}
.promise-card h3,.roadmap-card h3,.support-card h3{font-size:17px !important}
.section-head h2{font-size:clamp(24px,1.85vw,31px) !important;line-height:1.12 !important}
.page-hero h1{font-size:clamp(28px,2.15vw,36px) !important;line-height:1.1 !important}
.feature-text h2,
.showcase-copy h2,
.onboarding-copy h2,
.form-head h2,
.beta-cta h3{font-size:clamp(24px,1.9vw,30px) !important;line-height:1.12 !important}
.hero h1{
  max-width:600px !important;
  margin:10px 0 16px !important;
  font-size:clamp(30px,2.35vw,40px) !important;
  line-height:1.07 !important;
  letter-spacing:-.028em !important;
  font-weight:820 !important;
}
.hero-grid{grid-template-columns:.9fr 1.1fr !important;gap:46px !important}
.hero{padding:42px 0 38px !important}
.section{padding:46px 0 !important}
.section.compact{padding:35px 0 !important}
.page-hero{padding:34px 0 26px !important}

/* Panels */
.panel,.workflow-card,.promise-card,.roadmap-card,.guide-card,.faq-list details,.support-card,.gallery-card,.theme-pill{
  background:linear-gradient(155deg,rgba(11,35,76,.92),rgba(7,26,59,.95)) !important;
  border-color:rgba(214,173,120,.18) !important;
}
.product-frame,.beta-form,.showcase-note,.hero-chip,.beta-cta{
  background:linear-gradient(155deg,rgba(11,35,76,.96),rgba(7,26,59,.98)) !important;
  border-color:rgba(214,173,120,.26) !important;
}
.promise-card::after{background:rgba(202,116,80,.05) !important}
.workflow-num{background:linear-gradient(135deg,#cf8258,#bf6947) !important}

/* REAL application wave language — adapted from Midnight reference.
   Keep the effect mostly on the left like the user requested. */
.wave-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,26,59,.06),rgba(7,26,59,0) 58%),
    url('/assets/sidebar-waves-example-3.png') left center / cover no-repeat !important;
  opacity:.44 !important;
  mix-blend-mode:screen !important;
  filter:hue-rotate(148deg) saturate(.68) brightness(.86) sepia(.08) !important;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.98) 42%,rgba(0,0,0,.28) 76%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.98) 42%,rgba(0,0,0,.28) 76%,rgba(0,0,0,0) 100%);
}
.hero .wave-bg{
  background-position:left center !important;
  background-size:cover !important;
  opacity:.50 !important;
}
.page-hero .wave-bg{
  background-position:left center !important;
  background-size:cover !important;
  opacity:.45 !important;
}
.wave-strip{
  height:56px !important;
  background:
    url('/assets/sidebar-waves-example-3.png') left center / cover no-repeat !important;
  opacity:.28 !important;
  mix-blend-mode:screen !important;
  filter:hue-rotate(148deg) saturate(.68) brightness(.86) sepia(.08) !important;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.8) 34%,rgba(0,0,0,.25) 62%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.8) 34%,rgba(0,0,0,.25) 62%,rgba(0,0,0,0) 100%);
}
.hero::before,
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 22%,rgba(214,173,120,.08),transparent 20%),
    radial-gradient(circle at 84% 18%,rgba(202,116,80,.06),transparent 19%);
  z-index:0;
}
.hero-grid,.page-hero-inner{position:relative;z-index:2}

/* Better screenshot breathing */
.product-frame{box-shadow:0 30px 80px rgba(0,0,0,.40),0 0 48px rgba(39,76,146,.10) !important}
.hero-media .product-frame{transform:perspective(1200px) rotateY(-2.2deg) rotateX(1.1deg) !important}
.workflow-shot{height:182px !important}
.gallery-card img{height:220px !important}

/* Mobile */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr !important;gap:32px !important}
  .wave-bg{
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.92) 46%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.92) 46%,rgba(0,0,0,0) 100%);
  }
}
@media(max-width:680px){
  body{font-size:15px}
  .hero h1{font-size:32px !important}
  .page-hero h1{font-size:28px !important}
  .section-head h2,
  .feature-text h2,
  .showcase-copy h2,
  .onboarding-copy h2,
  .form-head h2,
  .beta-cta h3{font-size:24px !important}
  .hero-lead,
  .section-head p:not(.eyebrow),
  .feature-text p,
  .showcase-copy p,
  .onboarding-copy p,
  .roadmap-card p,
  .guide-card p,
  .faq-list p,
  .support-card small,
  .form-head p,
  .page-hero p{font-size:14px !important}
}

/* ============================================================
   PROWFLOW WEBSITE V0.9 — SIENNE ROYALE BACKGROUND WAVES REALIGNMENT
   - official Prowflow PNG only
   - global left-side ambience; no hero-owned waves
   - no wave strips
   - fade before the page centre
   - preserve readable content and Sienne Royale scrollbar
   ============================================================ */

body{
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 88% 10%,rgba(202,116,80,.075),transparent 24%),
    linear-gradient(180deg,#071a3b 0%,#081d40 48%,#061630 100%) !important;
}

/* Global Prowflow signature. The image geometry stays untouched: the
   Sienne Royale adaptation is limited to filtering, opacity and fade. */
body::before{
  content:"";
  position:fixed;
  z-index:0;
  top:72px;
  bottom:-18px;
  left:-26px;
  width:clamp(250px,28vw,410px);
  pointer-events:none;
  background:url('/assets/sidebar-waves-example-3.png') center/cover no-repeat;
  opacity:.31;
  mix-blend-mode:screen;
  filter:hue-rotate(148deg) saturate(.66) brightness(.84) sepia(.08);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.98) 44%,rgba(0,0,0,.70) 66%,rgba(0,0,0,.20) 86%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.98) 44%,rgba(0,0,0,.70) 66%,rgba(0,0,0,.20) 86%,transparent 100%);
  transform:scale(1.035);
  transform-origin:left center;
}

/* Keep every real interface capture and every content block above the
   ambient motif. The wave never becomes an overlay on screenshots. */
main,.site-footer{
  position:relative;
  z-index:1;
}
.site-header{z-index:80}

/* V0.9 removes waves as hero/page-hero decoration. */
.hero .wave-bg,
.page-hero .wave-bg,
.wave-strip{
  display:none !important;
}
.hero::before,
.page-hero::before{
  display:none !important;
}

/* Clean hero surfaces: no extra motif layer, only the page ambience. */
.hero,
.page-hero{
  isolation:auto;
}

@media(max-width:980px){
  body::before{
    width:clamp(205px,34vw,310px);
    left:-34px;
    opacity:.24;
  }
}

@media(max-width:680px){
  body::before{
    top:62px;
    width:190px;
    left:-46px;
    opacity:.16;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.80) 42%,rgba(0,0,0,.28) 72%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.80) 42%,rgba(0,0,0,.28) 72%,transparent 100%);
  }
}

/* No component-owned wave decoration in V0.9. */
.beta-cta::after{display:none !important}


/* ============================================================
   PROWFLOW WEBSITE V0.10 — HEADER ATMOSPHERE & PREMIUM DEPTH
   ------------------------------------------------------------
   Direction:
   - preserve V0.9 hero / editorial structure
   - slightly taller glass header with the official Prowflow PNG
   - keep the dominant wave signature on the left
   - add only a very faint, asymmetric right-side echo
   - add restrained glow, transparency and depth to key surfaces
   ============================================================ */

/* --- Background signature: final V0.9.3 placement, consolidated --- */
body::before{
  top:58px !important;
  bottom:-28px !important;
  left:-142px !important;
  width:clamp(350px,30vw,455px) !important;
  opacity:.345 !important;
  transform:scale(1.08) !important;
  transform-origin:left center !important;
  background-position:center center !important;
  background-size:cover !important;
  filter:hue-rotate(148deg) saturate(.70) brightness(.88) sepia(.07) !important;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.99) 53%,rgba(0,0,0,.76) 72%,rgba(0,0,0,.24) 90%,transparent 100%) !important;
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.99) 53%,rgba(0,0,0,.76) 72%,rgba(0,0,0,.24) 90%,transparent 100%) !important;
}

/* Asymmetric right echo. It is deliberately much fainter than the left
   signature and is absent from the mobile layout. */
body::after{
  content:"";
  display:block !important;
  position:fixed;
  z-index:0;
  top:57vh;
  right:-230px;
  width:365px;
  height:430px;
  pointer-events:none;
  background:url('/assets/sidebar-waves-example-3.png') center/cover no-repeat;
  opacity:.072;
  mix-blend-mode:screen;
  filter:hue-rotate(148deg) saturate(.62) brightness(.86) sepia(.06);
  -webkit-mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.82) 44%,rgba(0,0,0,.28) 72%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.82) 44%,rgba(0,0,0,.28) 72%,transparent 100%);
  transform:scale(1.06);
  transform-origin:right center;
}

/* --- Header: closer to the Prowflow application atmosphere --- */
.site-header{
  height:auto;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg,rgba(7,27,62,.79),rgba(5,19,46,.72)) !important;
  border-bottom:1px solid rgba(214,173,120,.20) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.18);
  backdrop-filter:blur(22px) saturate(1.18);
  box-shadow:
    0 10px 34px rgba(1,8,28,.24),
    0 1px 0 rgba(244,231,216,.035) inset,
    0 -12px 34px rgba(54,91,173,.045) inset;
}
.site-header::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0 auto 0 0;
  width:min(610px,48vw);
  pointer-events:none;
  background:url('/assets/sidebar-waves-example-3.png') left 45% / 640px auto no-repeat;
  opacity:.245;
  mix-blend-mode:screen;
  filter:hue-rotate(148deg) saturate(.67) brightness(.92) sepia(.06);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 50%,rgba(0,0,0,.35) 78%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 50%,rgba(0,0,0,.35) 78%,transparent 100%);
}
.site-header::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 10%,rgba(214,173,120,.075),transparent 24%),
    radial-gradient(circle at 72% 0%,rgba(75,111,185,.055),transparent 28%),
    linear-gradient(90deg,rgba(244,231,216,.016),transparent 34%,rgba(202,116,80,.018));
}
.header-inner{
  position:relative;
  z-index:2;
  height:82px !important;
}
.brand-mark{
  width:42px;
  height:42px;
  filter:drop-shadow(0 0 12px rgba(214,173,120,.10));
}
.brand-copy strong{font-size:15.5px !important}
.main-nav a{padding-top:31px !important;padding-bottom:28px !important}
.main-nav a.active::after{
  bottom:19px;
  box-shadow:0 0 12px rgba(202,116,80,.20);
}
.site-header .beta-link{
  border-color:rgba(214,173,120,.31) !important;
  background:linear-gradient(180deg,rgba(202,116,80,.085),rgba(202,116,80,.045)) !important;
  box-shadow:0 8px 24px rgba(2,10,29,.16),inset 0 1px rgba(244,231,216,.035);
}
.site-header .beta-link:hover{
  background:linear-gradient(180deg,rgba(202,116,80,.14),rgba(202,116,80,.075)) !important;
  box-shadow:0 9px 28px rgba(2,10,29,.20),0 0 20px rgba(202,116,80,.07),inset 0 1px rgba(244,231,216,.05);
}

/* --- Premium depth: selected surfaces, never every pixel --- */
.panel,
.workflow-card,
.promise-card,
.roadmap-card,
.guide-card,
.faq-list details,
.support-card,
.gallery-card,
.theme-pill{
  background:linear-gradient(155deg,rgba(16,48,94,.74),rgba(7,26,59,.86)) !important;
  border-color:rgba(214,173,120,.19) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
  backdrop-filter:blur(10px) saturate(1.08);
  box-shadow:
    0 16px 42px rgba(1,9,30,.14),
    inset 0 1px rgba(244,231,216,.035);
}

.product-frame,
.beta-form,
.showcase-note,
.hero-chip{
  background:linear-gradient(155deg,rgba(15,45,88,.84),rgba(6,23,54,.92)) !important;
  border-color:rgba(214,173,120,.27) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08);
  backdrop-filter:blur(12px) saturate(1.08);
}
.product-frame{
  box-shadow:
    0 30px 82px rgba(0,0,0,.37),
    0 0 46px rgba(63,98,178,.095),
    0 0 24px rgba(202,116,80,.035),
    inset 0 1px rgba(244,231,216,.04) !important;
}
.hero-media .product-frame{
  box-shadow:
    0 34px 88px rgba(0,0,0,.40),
    -12px 8px 48px rgba(56,91,173,.10),
    15px 0 42px rgba(202,116,80,.035),
    inset 0 1px rgba(244,231,216,.04) !important;
}
.window-bar{
  background:rgba(5,20,49,.78) !important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

/* CTA gets a restrained inner light, not another wave decoration. */
.beta-cta{
  background:
    radial-gradient(circle at 86% 8%,rgba(202,116,80,.11),transparent 29%),
    radial-gradient(circle at 12% 100%,rgba(65,101,180,.095),transparent 31%),
    linear-gradient(155deg,rgba(16,48,93,.79),rgba(6,23,54,.91)) !important;
  border-color:rgba(214,173,120,.25) !important;
  -webkit-backdrop-filter:blur(13px) saturate(1.08);
  backdrop-filter:blur(13px) saturate(1.08);
  box-shadow:
    0 18px 48px rgba(1,9,30,.17),
    0 0 34px rgba(202,116,80,.035),
    inset 0 1px rgba(244,231,216,.04);
}
.beta-cta::before{
  content:"";
  position:absolute;
  pointer-events:none;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(244,231,216,.025),transparent 32%,rgba(214,173,120,.018));
  z-index:0;
}
.beta-cta>*{position:relative;z-index:1}
.beta-cta::after{display:none !important}

/* Quiet glow on interactive cards. Keeps the page alive without neon. */
.workflow-card,
.promise-card,
.guide-card,
.roadmap-card,
.support-card,
.gallery-card{
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
@media(hover:hover){
  .workflow-card:hover,
  .promise-card:hover,
  .guide-card:hover,
  .roadmap-card:hover,
  .support-card:hover,
  .gallery-card:hover{
    border-color:rgba(214,173,120,.27) !important;
    box-shadow:0 18px 48px rgba(1,9,30,.20),0 0 28px rgba(72,106,181,.045),inset 0 1px rgba(244,231,216,.045);
    transform:translateY(-1px);
  }
}

/* Keep the hero itself clean. The extra atmosphere belongs to the header,
   background and frames, not to a new hero wave layer. */
.hero .wave-bg,
.page-hero .wave-bg,
.wave-strip,
.hero::before,
.page-hero::before{display:none !important}
.hero::after{
  background:linear-gradient(90deg,transparent,rgba(214,173,120,.065),transparent) !important;
}

@media(max-width:1050px){
  .header-inner{height:78px !important}
  .main-nav{top:77px !important;background:rgba(6,24,56,.94) !important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  .site-header::before{width:460px;background-size:560px auto;opacity:.20}
  body::before{left:-118px !important;width:320px !important;opacity:.255 !important}
  body::after{right:-250px;opacity:.052}
}

@media(max-width:680px){
  .header-inner{height:68px !important}
  .brand-mark{width:36px;height:36px}
  .main-nav{top:67px !important}
  .site-header::before{width:280px;background-size:440px auto;opacity:.16}
  body::before{top:60px !important;left:-92px !important;width:220px !important;opacity:.17 !important;transform:none !important}
  body::after{display:none !important}
}


/* ============================================================
   PROWFLOW WEBSITE V0.10.1 — HEADER HEIGHT CORRECTION
   Make the new header visibly more substantial on desktop.
   ============================================================ */
.site-header{
  min-height:94px !important;
}
.header-inner{
  height:94px !important;
}
.brand-mark{
  width:46px !important;
  height:46px !important;
}
.brand-copy strong{font-size:16px !important}
.brand-copy small{font-size:7.8px !important}
.main-nav a{
  padding-top:37px !important;
  padding-bottom:34px !important;
}
.main-nav a.active::after{bottom:24px !important}
.site-header::before{
  background-position:left 48% !important;
  background-size:690px auto !important;
  opacity:.26 !important;
}

@media(max-width:1050px){
  .site-header{min-height:84px !important}
  .header-inner{height:84px !important}
  .main-nav{top:83px !important}
  .site-header::before{background-size:600px auto !important}
}

@media(max-width:680px){
  .site-header{min-height:72px !important}
  .header-inner{height:72px !important}
  .brand-mark{width:38px !important;height:38px !important}
  .main-nav{top:71px !important}
}


/* ============================================================
   PROWFLOW WEBSITE V0.12 — APPROVED HEADER B2 INTEGRATION
   ------------------------------------------------------------
   Base: V0.10.1 rollback.
   Scope: header only.
   Uses a transparent derivative of the official Prowflow wave PNG;
   source frame/background are removed, so there are no edge bars.
   ============================================================ */

.site-header::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  pointer-events:none !important;
  background:url('assets/site/header-waves-b2.png') center center / cover no-repeat !important;
  opacity:1 !important;
  mix-blend-mode:screen !important;
  filter:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  transform:none !important;
}

/* Keep the V0.10.1 header structure and depth; only calm the overlay so
   the B2 sweep remains the single readable motif. */
.site-header::after{
  background:
    radial-gradient(circle at 14% 8%,rgba(214,173,120,.045),transparent 23%),
    radial-gradient(circle at 73% 0%,rgba(75,111,185,.040),transparent 27%),
    linear-gradient(180deg,rgba(7,26,59,.04),rgba(7,26,59,.16)) !important;
}

@media(max-width:1050px){
  .site-header::before{
    background-size:auto 100% !important;
    background-position:center center !important;
    opacity:.88 !important;
  }
}

@media(max-width:680px){
  .site-header::before{
    background-size:auto 100% !important;
    background-position:42% center !important;
    opacity:.68 !important;
  }
}


/* ============================================================
   PROWFLOW WEBSITE V0.12.4 — SIENNE ROYALE LEFT RAIL
   ------------------------------------------------------------
   - vraie colonne de vagues depuis le haut de la fenêtre
   - header commence à droite de cette colonne
   - vrai motif Prowflow, palette Sienne Royale glossy
   - header B2 conservé
   ============================================================ */

:root{
  --prowflow-wave-rail:clamp(190px,12.5vw,240px);
}

/* Colonne de vagues indépendante : elle part réellement du haut. */
body::before{
  content:"" !important;
  display:block !important;
  position:fixed !important;
  z-index:0 !important;
  inset:0 auto 0 0 !important;
  width:var(--prowflow-wave-rail) !important;
  height:100vh !important;
  pointer-events:none !important;

  background:
    url('assets/site/sidebar-waves-sienne-glossy-v0124.png')
    center center / cover no-repeat !important;

  opacity:.82 !important;
  mix-blend-mode:screen !important;
  filter:drop-shadow(0 0 16px rgba(194,156,121,.12)) !important;
  transform:none !important;

  /* Pas de rectangle ni de bord brutal côté contenu. */
  -webkit-mask-image:linear-gradient(
    90deg,
    #000 0%,
    #000 70%,
    rgba(0,0,0,.86) 82%,
    rgba(0,0,0,.38) 94%,
    transparent 100%
  ) !important;
  mask-image:linear-gradient(
    90deg,
    #000 0%,
    #000 70%,
    rgba(0,0,0,.86) 82%,
    rgba(0,0,0,.38) 94%,
    transparent 100%
  ) !important;
}

/* On coupe le rappel droit pour ne pas diluer l'identité. */
body::after{
  display:none !important;
}

/* Le header n'occupe plus le coin gauche : il commence à la bordure
   de la colonne de vagues, comme le contenu principal dans l'application. */
.site-header{
  background:transparent !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* B2 reste le motif du header, mais seulement à droite du rail. */
.site-header::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  top:0 !important;
  bottom:0 !important;
  left:var(--prowflow-wave-rail) !important;
  right:0 !important;
  width:auto !important;
  height:auto !important;
  pointer-events:none !important;
  background:url('assets/site/header-waves-b2.png') center center / cover no-repeat !important;
  opacity:1 !important;
  mix-blend-mode:screen !important;
  filter:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  transform:none !important;
}

/* Surface vitrée du header : elle commence exactement à la même bordure. */
.site-header::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  top:0 !important;
  bottom:0 !important;
  left:var(--prowflow-wave-rail) !important;
  right:0 !important;
  pointer-events:none !important;

  background:
    radial-gradient(circle at 18% 0%,rgba(194,156,121,.055),transparent 24%),
    radial-gradient(circle at 74% -10%,rgba(75,111,185,.035),transparent 27%),
    linear-gradient(180deg,rgba(7,27,62,.80),rgba(5,19,46,.72)) !important;

  border-bottom:1px solid rgba(194,156,121,.13) !important;
  border-left:1px solid rgba(194,156,121,.07) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.14) !important;
  backdrop-filter:blur(20px) saturate(1.14) !important;
  box-shadow:
    0 9px 28px rgba(1,8,28,.18),
    inset 0 1px rgba(244,231,216,.025) !important;
}

.header-inner{
  position:relative !important;
  z-index:2 !important;
}

/* Le hero n'a plus de coin visuellement coupé : sa surface reste continue. */
.hero{
  background:transparent !important;
}

@media(max-width:1050px){
  :root{--prowflow-wave-rail:clamp(150px,14vw,190px)}
  body::before{
    opacity:.70 !important;
  }
  .site-header::before{
    background-size:auto 100% !important;
    background-position:center center !important;
  }
}

@media(max-width:680px){
  :root{--prowflow-wave-rail:88px}
  body::before{
    opacity:.46 !important;
    background-size:auto 100% !important;
    background-position:48% center !important;
  }
  .site-header::after{
    border-left-color:rgba(194,156,121,.04) !important;
  }
  .site-header::before{
    opacity:.62 !important;
    background-size:auto 100% !important;
    background-position:42% center !important;
  }
}