/* Prosperus · Glass & Light · shared website styles
   Materials: frosted glass, limestone, light (blurred prism fields + caustics), glass objects.
   Type: Red Hat Display (Light for headlines) + Red Hat Mono (specs). Light-only by design. */
:root{
  color-scheme:light;
  --ink:#0F1720; --slate:#3B4B5C; --mute:#6A7886; --clear:#F6F9FB; --mist:#DCE6EE; --lime:#E8E3DA;
  --sky:#7FB4FF; --mint:#C7F0E6; --blush:#F6C8E0; --amber:#F5C27A;
  --prism:linear-gradient(90deg,#7FB4FF,#C7F0E6 34%,#F6C8E0 66%,#F5C27A);
  --disp:'Red Hat Display','Helvetica Neue',Arial,sans-serif; --mono:'Red Hat Mono',ui-monospace,Menlo,monospace;
  --g:clamp(16px,4vw,64px); --max:1320px;
  --stone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.04' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.83 0 0 0 0 0.78 0 0 0 -1.5 1.15'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.85' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.5 0 0 0 0 0.44 0 0 0 -9 1.5'/%3E%3C/filter%3E%3Crect width='600' height='600' fill='%23E8E3DA'/%3E%3Crect width='600' height='600' filter='url(%23a)'/%3E%3Crect width='600' height='600' filter='url(%23b)' opacity='.28'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important; animation:none!important}}
body{margin:0; background:var(--clear); color:var(--ink); font-family:var(--disp); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--sky); outline-offset:3px}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--g)}
p{margin:0; max-width:62ch; color:var(--slate)}
h1,h2,h3,h4{margin:0; font-weight:300; letter-spacing:-.025em; text-wrap:balance}
.lbl{font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--mute)}
.lbl b{color:var(--ink); font-weight:500}
.caps{font-weight:400; letter-spacing:.3em; text-transform:uppercase}

/* materials */
.stone{background:var(--lime) var(--stone) center/600px 600px}
.scene{position:relative; overflow:hidden; isolation:isolate}
.field{position:absolute; inset:-15%; z-index:-1; filter:blur(52px) saturate(125%); pointer-events:none}
.field i{position:absolute; border-radius:50%}
.glass{background:rgba(255,255,255,.34); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.75); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 34px 70px -40px rgba(25,50,90,.5)}
.glass-dark{background:rgba(255,255,255,.07); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.obj{position:absolute}
.sphere{border-radius:50%; aspect-ratio:1; background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.98),rgba(255,255,255,.45) 16%,rgba(214,230,246,.22) 44%,rgba(127,180,255,.22) 72%,rgba(255,255,255,.6) 100%);
  -webkit-backdrop-filter:blur(6px) saturate(150%); backdrop-filter:blur(6px) saturate(150%); border:1px solid rgba(255,255,255,.75); box-shadow:inset -10px -14px 30px rgba(120,150,190,.18), 0 30px 40px -26px rgba(25,50,90,.4)}
.arch{border-radius:999px 999px 10px 10px; background:linear-gradient(110deg,rgba(255,255,255,.62),rgba(255,255,255,.18) 40%,rgba(255,255,255,.4) 70%,rgba(255,255,255,.12));
  -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%); border:1px solid rgba(255,255,255,.8); box-shadow:inset 6px 0 14px rgba(255,255,255,.5), 0 34px 44px -28px rgba(25,50,90,.45)}
.vial{border-radius:999px; background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.75) 30%,rgba(255,255,255,.18) 55%,rgba(245,194,122,.25));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.8); box-shadow:0 30px 40px -26px rgba(25,50,90,.4)}
.caustic{position:absolute; border-radius:50%; filter:blur(14px); opacity:.85; background:conic-gradient(from 90deg,#7FB4FF,#C7F0E6,#F6C8E0,#F5C27A,#7FB4FF)}

/* Glass P mark (scales with font-size) */
.gp{position:relative; display:inline-block; width:1.28em; height:1.78em; flex:none; font-size:100px}
.gp .rod,.gp .disc{position:absolute; background:rgba(255,255,255,.34); -webkit-backdrop-filter:blur(.12em) saturate(150%); backdrop-filter:blur(.12em) saturate(150%);
  border:max(1px,.012em) solid rgba(255,255,255,.85); box-shadow:inset 0 .02em 0 rgba(255,255,255,.95), 0 .25em .5em -.28em rgba(25,50,90,.45)}
.gp .rod{left:0; top:0; width:.4em; height:1.78em; border-radius:.2em; background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(127,180,255,.28))}
.gp .disc{left:.19em; top:0; width:1.08em; height:1.08em; border-radius:50%; background:linear-gradient(140deg,rgba(255,255,255,.55),rgba(199,240,230,.35) 45%,rgba(246,200,224,.35) 75%,rgba(245,194,122,.32))}
.gp .rod::after{content:""; position:absolute; left:.08em; top:.18em; bottom:.26em; width:.035em; border-radius:1em; background:rgba(255,255,255,.9)}
.gp .disc::after{content:""; position:absolute; inset:.09em; border-radius:50%; border:.035em solid transparent; border-top-color:rgba(255,255,255,.95); border-left-color:rgba(255,255,255,.55); transform:rotate(-18deg)}
.fp{display:inline-block; width:.72em; height:1em; flex:none; vertical-align:-.12em}
.fp svg{width:100%; height:100%; display:block; overflow:visible}

/* wordmark */
.brand{display:inline-flex; align-items:center; gap:.4em; text-decoration:none; font-weight:300; letter-spacing:-.02em; white-space:nowrap}
.spec{display:block; height:2px; border-radius:2px; background:var(--prism); box-shadow:0 0 10px rgba(127,180,255,.5)}

/* buttons, chips */
.btn{position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:10px; font:500 15px/1 var(--disp); letter-spacing:.005em; padding:16px 24px; border-radius:999px; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, border-color .25s}
.btn:active{transform:translateY(0) scale(.98)}
/* Dark glass: ink body, bright top edge, prism glow underneath on hover */
.btn-ink{color:#fff; background:linear-gradient(180deg,rgba(44,58,76,.92),rgba(15,23,32,.97) 55%); border-color:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.06), 0 16px 32px -16px rgba(15,23,32,.65)}
.btn-ink::after{content:""; position:absolute; z-index:-1; left:14%; right:14%; bottom:-7px; height:14px; border-radius:50%; background:var(--prism); filter:blur(10px); opacity:0; transition:opacity .3s}
.btn-ink:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 22px 40px -18px rgba(15,23,32,.7)}
.btn-ink:hover::after{opacity:.75}
/* Clear glass: frosted pane with a bright hairline and inner highlight */
.btn-glass{color:var(--ink); background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.3)); border-color:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 #fff, inset 0 -8px 16px -10px rgba(127,180,255,.35), 0 14px 30px -18px rgba(25,50,90,.45)}
.btn-glass:hover{transform:translateY(-2px); background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.45)); box-shadow:inset 0 1px 0 #fff, inset 0 -8px 16px -10px rgba(246,200,224,.5), 0 20px 36px -18px rgba(25,50,90,.5)}
.btn-line{color:var(--ink); border-color:rgba(15,23,32,.2); background:rgba(255,255,255,.35); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.btn-line:hover{border-color:var(--ink); transform:translateY(-1px)}
.btn-lg{font-size:16.5px; padding:20px 30px; gap:12px}
@media (max-width:560px){ .btn-lg{padding:18px 24px; font-size:16px} }
.chip{font-family:var(--mono); font-size:11px; letter-spacing:.04em; padding:6px 11px; border-radius:99px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85); color:var(--slate); white-space:nowrap}

/* nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; padding:14px 0}
.nav .bar{display:flex; align-items:center; justify-content:space-between; gap:20px; border-radius:999px; padding:10px 10px 10px 22px}
.nav .brand{font-size:22px}
.nav .links{display:flex; gap:28px; font-size:14px; color:var(--slate)}
.nav .links a{text-decoration:none}
.nav .links a:hover{color:var(--ink)}
.nav .btn{padding:11px 18px; font-size:13px}
@media (max-width:860px){ .nav .links{display:none} }

/* sections */
.sec{padding-block:clamp(72px,10vw,140px)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 64px; align-items:end; margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2{font-size:clamp(2.2rem,4.6vw,4rem); line-height:1.02}
.sec-head .k{display:grid; gap:14px}
.sec-head p{font-size:17px}
@media (max-width:860px){ .sec-head{grid-template-columns:minmax(0,1fr)} }

/* engagements */
.tiers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.tier{border-radius:26px; padding:30px; display:grid; gap:18px; align-content:start; position:relative}
.tier h3{font-size:28px; line-height:1.1}
.tier ul{margin:0; padding:0; list-style:none; display:grid; gap:10px; font-size:15px; color:var(--slate)}
.tier li{padding-left:20px; position:relative}
.tier li::before{content:""; position:absolute; left:0; top:.7em; width:10px; height:2px; border-radius:2px; background:var(--prism)}
.tier .btn{justify-self:start; margin-top:6px}
.tier.feature{background:var(--ink); color:#fff; border-color:transparent}
.tier.feature p,.tier.feature ul{color:#B8C4D0}
.tier.feature .lbl{color:#8FA0B2}
@media (max-width:960px){ .tiers{grid-template-columns:minmax(0,1fr)} }

/* FAQ */
.faq{display:grid; gap:10px; max-width:900px}
.faq details{border-radius:18px; padding:4px 22px; background:#fff; border:1px solid rgba(15,23,32,.07)}
.faq summary{list-style:none; cursor:pointer; padding:18px 0; font-size:18px; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-weight:300; font-size:24px; color:var(--mute); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:20px; font-size:15.5px}

/* form */
.form{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form .full{grid-column:1/-1}
.field-w{display:grid; gap:6px}
.field-w label{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate)}
.field-w input,.field-w select,.field-w textarea{font:400 15px/1.4 var(--disp); color:var(--ink); padding:13px 14px; border-radius:14px; border:1px solid rgba(15,23,32,.14); background:rgba(255,255,255,.7); width:100%; min-width:0}
.field-w textarea{min-height:120px; resize:vertical}
.field-w input:focus,.field-w select:focus,.field-w textarea:focus{outline:none; border-color:var(--sky); box-shadow:0 0 0 3px rgba(127,180,255,.25)}
.form .note{font-size:13px; color:var(--mute)}
.form .done{grid-column:1/-1; padding:14px 16px; border-radius:14px; background:rgba(199,240,230,.6); color:var(--ink); font-size:14px}
@media (max-width:640px){ .form{grid-template-columns:minmax(0,1fr)} }

/* footer */
.foot{padding-block:56px 40px; display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px; font-size:14px; color:var(--slate)}
.foot h5{margin:0 0 10px; font:500 12px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--mute)}
.foot ul{margin:0; padding:0; list-style:none; display:grid; gap:6px}
.foot a{text-decoration:none}
.foot .brand{font-size:26px; color:var(--ink)}
.legal{padding-block:18px 32px; border-top:1px solid rgba(15,23,32,.08); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--mute)}
@media (max-width:860px){ .foot{grid-template-columns:1fr 1fr} }

/* variation switcher (prototype only) */
.switch{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:90; display:flex; gap:4px; padding:5px; border-radius:999px}
.switch a{font:500 12px/1 var(--disp); text-decoration:none; padding:9px 12px; border-radius:999px; color:var(--slate)}
.switch a[aria-current="page"]{background:var(--ink); color:#fff}

.glass-dark .field-w input,.glass-dark .field-w select,.glass-dark .field-w textarea{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff}
.glass-dark .field-w textarea::placeholder{color:#8FA0B2}
.glass-dark .field-w select option{color:var(--ink)}
.glass-dark .field-w label{color:#B8C4D0}