@layer reset,tokens,base,utilities,components,overrides;@layer overrides{}@layer reset{*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit}button{cursor:pointer}:focus{outline:none}:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}}@layer tokens{:root{color-scheme:light dark;--font-sans:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
      Arial, "Apple Color Emoji", "Segoe UI Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;--step--1:clamp(0.92rem, 0.88rem + 0.2vw, 1rem);--step-0:clamp(1rem, 0.95rem + 0.3vw, 1.125rem);--step-0-5:clamp(1.1rem, 1rem + 0.55vw, 1.3625rem);--step-1:clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem);--step-2:clamp(1.45rem, 1.2rem + 1.4vw, 2.2rem);--step-3:clamp(1.8rem, 1.4rem + 2.2vw, 3rem);--space-0:0;--space-1:clamp(0.5rem, 0.45rem + 0.3vw, 0.75rem);--space-2:clamp(0.75rem, 0.65rem + 0.5vw, 1rem);--space-3:clamp(1rem, 0.9rem + 0.7vw, 1.5rem);--space-4:clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);--space-5:clamp(2rem, 1.6rem + 1.8vw, 3rem);--space-6:clamp(3rem, 2.2rem + 3vw, 4.5rem);--space-7:clamp(4.5rem, 3.5rem + 5vw, 7rem);--radius-1:0.5rem;--radius-2:0.9rem;--radius-3:1.25rem;--shadow-1:0 1px 0 hsl(0 0% 0% / 0.04), 0 8px 30px hsl(0 0% 0% / 0.06);--btn-padding-y:0.75rem;--btn-padding-x:1rem;--input-padding-y:0.75rem;--input-padding-x:1rem;--nav-link-padding:0.6rem 0.75rem;--brand:oklch(36.71% 0.0969 258.03);--brand-2:oklch(50.31% 0.0881 186.47);--bg:oklch(0.99 0.01 260);--surface:oklch(0.985 0.012 260);--surface-2:oklch(0.97 0.02 260);--text:oklch(0.23 0.02 260);--muted:oklch(0.52 0.02 260);--border:color-mix(in oklch, var(--text), transparent 86%);--link:color-mix(in oklch, var(--brand), var(--text) 15%);--link-hover:color-mix(in oklch, var(--brand), white 10%);--focus-ring:color-mix(in oklch, var(--brand), white 15%);--ok:oklch(0.7 0.12 155);--warn:oklch(0.82 0.12 85);--footer-bg-dark:oklch(0.2 0.02 260);--footer-text:oklch(0.94 0.01 260);--footer-muted:oklch(0.78 0.01 260)}@media(prefers-color-scheme:dark){:root{--bg:oklch(0.17 0.02 260);--surface:oklch(0.2 0.02 260);--surface-2:oklch(0.24 0.02 260);--text:oklch(0.94 0.01 260);--muted:oklch(0.78 0.01 260);--border:color-mix(in oklch, var(--text), transparent 82%);--brand:oklch(75.21% 0.1251 215.16);--brand-2:oklch(76.91% 0.0899 179.98);--link-hover:color-mix(in oklch, var(--brand), white 22%);--shadow-1:0 1px 0 hsl(0 0% 100% / 0.06), 0 16px 50px hsl(0 0% 0% / 0.35)}}}@layer base{body{font-family:var(--font-sans);font-size:var(--step-0);line-height:1.6;color:var(--text);font-feature-settings:"kern" 1,"liga" 1,"calt" 1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg)}a{color:var(--link);text-decoration-thickness:.08em;text-underline-offset:.18em;&:hover { color:var(--link-hover); }}h1,h2,h3,h4,h5,h6{line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance;font-weight:700}h1{font-size:var(--step-3);text-align:center}h2{font-size:var(--step-2)}h3{font-size:var(--step-1)}h4{font-size:var(--step-0-5);letter-spacing:-.01em}h5{font-size:var(--step-0);letter-spacing:0}h6{font-size:var(--step--1);letter-spacing:.02em;text-transform:uppercase}p{margin:0}main{display:block}code,pre{font-family:var(--font-mono)}::selection{background:color-mix(in oklch,var(--brand),transparent 70%)}}@layer utilities{.container{width:min(72rem,100% - (var(--space-3) * 2));margin-inline:auto}.flow>*+*{margin-block-start:var(--flow-space,var(--space-3))}.flow-2{--flow-space:var(--space-2)}.flow-3{--flow-space:var(--space-3)}.flow-4{--flow-space:var(--space-4)}.flow-5{--flow-space:var(--space-5)}.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster-gap,var(--space-2))}.cluster-gap-2{--cluster-gap:var(--space-2)}.cluster-gap-3{--cluster-gap:var(--space-3)}.stack{display:grid;gap:var(--stack-gap,var(--space-1))}.text-muted{color:var(--muted)}.text-brand{color:var(--brand)}.h1{font-size:var(--step-3);font-weight:700;line-height:1.15;letter-spacing:-.02em}.h2{font-size:var(--step-2);font-weight:700;line-height:1.15;letter-spacing:-.02em}.h3{font-size:var(--step-1);font-weight:700;line-height:1.15;letter-spacing:-.02em}.h4{font-size:var(--step-0-5);font-weight:700;line-height:1.15;letter-spacing:-.01em}.h5{font-size:var(--step-0);font-weight:700;line-height:1.15}.h6{font-size:var(--step--1);font-weight:700;line-height:1.15;text-transform:uppercase;letter-spacing:.05em}.fs-3{font-size:var(--step-3)}.fs-2{font-size:var(--step-2)}.fs-1{font-size:var(--step-1)}.fs-0-5{font-size:var(--step-0-5)}.fs-0{font-size:var(--step-0)}.fs--1{font-size:var(--step--1)}.fs-lead{font-size:var(--step-0-5);line-height:1.4}.lead{font-size:var(--step-0-5);font-weight:400;line-height:1.5}.text-start{text-align:left}.text-center{text-align:center}.text-end{text-align:right}.d-none{display:none}.d-block{display:block}.d-flex{display:flex}.d-grid{display:grid}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.m-0{margin:0}.mt-0{margin-block-start:0}.mt-1{margin-block-start:var(--space-1)}.mt-2{margin-block-start:var(--space-2)}.mt-3{margin-block-start:var(--space-3)}.mt-4{margin-block-start:var(--space-4)}.mt-5{margin-block-start:var(--space-5)}.mb-0{margin-block-end:0}.mb-1{margin-block-end:var(--space-1)}.mb-2{margin-block-end:var(--space-2)}.mb-3{margin-block-end:var(--space-3)}.mb-4{margin-block-end:var(--space-4)}.mb-5{margin-block-end:var(--space-5)}.mx-auto{margin-inline:auto}.p-0{padding:0}.py-3{padding-block:var(--space-3)}.py-4{padding-block:var(--space-4)}.py-5{padding-block:var(--space-5)}.py-6{padding-block:var(--space-6)}.px-3{padding-inline:var(--space-3)}.px-4{padding-inline:var(--space-4)}.bg-surface{background:var(--surface)}.border{border:1px solid var(--border)}.border-top{border-top:1px solid var(--border)}.border-bottom{border-bottom:1px solid var(--border)}.w-100{width:100%}.mw-prose{max-width:70ch}.mw-narrow{max-width:48rem}.mw-wide{max-width:80ch}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.card-grid{display:grid;gap:var(--space-3);grid-template-columns:1fr;margin-block-start:var(--space-3)}@media(min-width:48rem){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:64rem){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.animated-statement{margin:0;font-size:var(--step-2);line-height:1.5;color:var(--brand);font-weight:600;letter-spacing:-.01em;white-space:pre-wrap;word-break:keep-all;text-align:left}@media(min-width:48rem){.animated-statement{line-height:1.4}}@media(prefers-color-scheme:dark){.animated-statement{color:color-mix(in oklch,var(--brand),white 25%)}}.animated-char{display:inline-block;opacity:0;animation:fadeIn .3s ease-in forwards}@keyframes fadeIn{to{opacity:1}}}@layer components{.skip-link{position:absolute;top:.75rem;left:.75rem;padding:.6rem .8rem;border-radius:.6rem;background:var(--surface);color:var(--text);border:1px solid var(--border);transform:translateY(-160%);transition:transform 160ms ease;z-index:1000;&:focus { transform:translateY(0); }}.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:color-mix(in oklch,var(--bg),transparent 15%);border-bottom:1px solid var(--border);& .inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-block: var(--space-2); gap: var(--space-2); }}.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:650;font-size:var(--step-3);letter-spacing:-.02em;color:var(--text);& .mark { width: 40px; height: 40px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='4 2 16 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L4 5V11C4 16.06 7.41 20.74 12 22C16.59 20.74 20 16.06 20 11V5L12 2Z' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='4 2 16 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L4 5V11C4 16.06 7.41 20.74 12 22C16.59 20.74 20 16.06 20 11V5L12 2Z' /%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; display: inline-block; } & .brand-logo { height: var(--space-3); width: auto; display: inline-block; background-image: url('/reproxhrfinal/proxhrFULL_LIGHT.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; aspect-ratio: 551.98 / 155.48; }}@media(max-width:48rem){.brand .brand-logo{height:var(--space-4)}}@media(min-width:56rem){.brand .brand-logo{height:var(--space-4)}}@media(prefers-color-scheme:dark){.brand .brand-logo{background-image:url(/reproxhrfinal/proxhrFULL_DARK.svg)}}.nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid var(--border);background:var(--surface);border-radius:.8rem;padding:.65rem .75rem;position:relative;& .hamburger { display: block; width: 1.25rem; height: 1.25rem; color: var(--text); transition: transform 0.2s ease; }}.site-nav{display:none;padding-block-end:var(--space-2);flex-basis:100%;width:100%;& ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; } & a { display: block; padding: var(--nav-link-padding); border-radius: var(--radius-2); text-decoration: none; color: var(--text); &:hover { background: var(--surface); } &[aria-current="page"] { background: color-mix(in oklch, var(--brand), transparent 92%); border: 1px solid color-mix(in oklch, var(--brand), transparent 60%); } }}.site-header[data-nav-open=true] .site-nav{display:block}.has-dropdown{position:relative;& .dropdown-label { display: block; padding: var(--nav-link-padding); border-radius: var(--radius-2); color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 0.35rem; &:hover { background: var(--surface); } } & .dropdown-arrow { display: inline-block; width: 0; height: 0; border-left: 0.3rem solid transparent; border-right: 0.3rem solid transparent; border-top: 0.3rem solid var(--text); transition: transform 0.2s ease; } & .dropdown-menu { list-style: none; padding: 0.5rem; margin: 0; display: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: var(--shadow-1); & li { margin: 0; } & a { display: block; padding: var(--nav-link-padding); color: var(--text); text-decoration: none; border-radius: var(--radius-2); &:hover { background: color-mix(in oklch, var(--surface), var(--brand) 10%); } &[aria-current="page"] { background: color-mix(in oklch, var(--brand), transparent 92%); border: 1px solid color-mix(in oklch, var(--brand), transparent 60%); } } } &:hover .dropdown-menu { display: block; } &:hover .dropdown-arrow { transform: rotate(180deg); }}@media(min-width:56rem){.nav-toggle{display:none}.site-nav{display:block;padding-block-end:0;flex-basis:auto;width:auto;& ul { display: flex; align-items: center; gap: 0.25rem; }}.has-dropdown .dropdown-menu{position:absolute;top:calc(100% + .25rem);left:0;min-width:12rem;padding:.5rem;&::before { content:""; position:absolute; top:-0.25rem; left:0; right:0; height:0.25rem; }}}.section{padding-block:var(--space-6)}@media(min-width:48rem){.section{padding-block:clamp(var(--space-6),8vw,8rem)}}.hero{padding-block:var(--space-7);background:radial-gradient( 1200px 600px at 30% 0%,color-mix(in oklch,var(--brand),transparent 85%),transparent 60% ),var(--bg)}@media(min-width:56rem){.hero{padding-block:clamp(var(--space-6),25vh,15rem)var(--space-6)}}.hero{& .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); color: var(--muted); border: 1px solid var(--border); background: color-mix(in oklch, var(--surface), transparent 5%); padding: 0.45rem 0.75rem; border-radius: 999px; width: fit-content; } & .headline { margin-block-start: var(--space-3); } & .lead { margin-block-start: var(--space-2); font-size: clamp(var(--step-0-5), 5vw, var(--step-2)); color: var(--muted); max-width: 70ch; line-height: 1.5; } & .actions { margin-block-start: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; justify-content: center; & .btn { width: 100%; justify-content: center; } } @media (min-width: 48rem) { & .actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: left; & .btn { width: auto; } } }}.hero-grid{display:grid;gap:var(--space-4);grid-template-columns:1fr;align-items:center;& img { width: 100%; height: auto; } & .hero-image { order: -1; } & .hero-content { order: 1; }}@media(min-width:56rem){.hero-grid{grid-template-columns:1.3fr 1fr;& .hero-image { order: 0; } & .hero-content { order: 0; }}}.hero-content{display:flex;flex-direction:column;& .headline { margin-block-start: 0; margin-block-end: var(--space-2); text-align: left; } & .lead { margin-block-start: 0; margin-block-end: var(--space-3); } & .actions { margin-block-start: var(--space-4); margin-block-end: 0; }}.hero-image{display:flex;align-items:center;justify-content:center;& img { width: 100%; max-width: 320px; height: auto; object-fit: cover; object-position: center; }}.hero-icon{display:block;width:100%;max-width:320px;aspect-ratio:1/1;background-image:url(/reproxhrfinal/proxhr_FAV_LT_180x180.png);background-repeat:no-repeat;background-size:contain;background-position:50%}@media(prefers-color-scheme:dark){.hero-icon{background-image:url(/reproxhrfinal/proxhr_FAV_DK_180x180.png)}}.solutions-banner{padding-block:var(--space-6);background:linear-gradient( 135deg,color-mix(in oklch,var(--brand),transparent 96%),color-mix(in oklch,var(--brand-2),transparent 96%) );border-top:1px solid color-mix(in oklch,var(--brand),transparent 88%);border-bottom:1px solid color-mix(in oklch,var(--brand),transparent 88%);position:relative;overflow:hidden;&::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient( 90deg,transparent,color-mix(in oklch,var(--brand),transparent 70%),transparent ); }}.solutions-banner-content{display:flex;align-items:center;justify-content:left;gap:var(--space-3);min-height:4rem;position:relative}@media(max-width:56rem){.solutions-banner-content{min-height:6rem}}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--btn-padding-y)var(--btn-padding-x);border-radius:var(--radius-2);border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;font-weight:650;letter-spacing:-.01em;box-shadow:var(--shadow-1);&:hover { background:color-mix(in oklch,var(--surface),var(--brand) 6%); border-color:color-mix(in oklch,var(--border),var(--brand) 30%); transform:translateY(-2px); box-shadow:0 24px 60px color-mix(in oklch,var(--brand),transparent 65%); }}.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent;box-shadow:0 18px 50px color-mix(in oklch,var(--brand),transparent 70%);transition:all .2s ease;&:hover { filter:saturate(1.1); color:var(--text); }}.pill{display:inline-flex;align-items:center;border-radius:999px;padding:.25rem .6rem;font-size:var(--step--1);border:1px solid var(--border);background:var(--surface)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-2);padding:var(--space-3);box-shadow:var(--shadow-1);& .title { margin-block: 0; } & .meta { margin-block-start: var(--space-2); color: var(--muted); font-size: var(--step-0-5); }}.cta-card{text-align:center;& .mw-prose { margin-inline: auto; } & .cluster { justify-content: center; } & h1, & h2, & h3, & p { text-align: center; }}@supports selector(:has(*)){.card:has(.badge[data-variant=new]){border-color:color-mix(in oklch,var(--brand),var(--border) 55%);box-shadow:0 0 0 1px color-mix(in oklch,var(--brand),transparent 70%),var(--shadow-1)}}.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--step--1);padding:.25rem .55rem;border-radius:999px;border:1px solid var(--border);background:color-mix(in oklch,var(--surface),var(--brand) 5%);&[data-variant="new"] { border-color: color-mix(in oklch, var(--brand), transparent 70%); background: color-mix(in oklch, var(--brand), var(--surface) 88%); }}.feature-grid{container-type:inline-size;display:grid;gap:var(--space-4);grid-template-columns:1fr;margin-block-start:var(--space-3)}@container(min-width:52rem){.feature-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }.page-hero{padding-block:var(--space-5)var(--space-3);background:color-mix(in oklch,var(--surface),transparent 10%)}.page{padding-block:var(--space-5)}.prose{font-size:var(--step-0);&:where(p,ul,ol) { margin:0; } &:where(p,ul,ol) +:where(p,ul,ol,h2,h3) { margin-block-start:var(--space-3); } &:where(ul,ol) { padding-inline-start:1.2rem; } &:where(h1) { text-align:left; } &:where(h2,h3) { margin-block-start:var(--space-4); } & h2 { text-align:left; } & h2 + p { text-align:left; margin-block-start:var(--space-3); } & figure { margin-block:var(--space-0); margin-inline:0; padding:0; & img { display:block; width:100%; height:auto; } & figcaption { margin-block-start:var(--space-2); font-size:var(--step--1); color:var(--muted); text-align:center; } } & table { width:calc(100% + var(--space-3)); margin-inline:calc(var(--space-3)/-2); border-collapse:separate; border-spacing:var(--space-3) 0; margin-block-start:var(--space-4); margin-block-end:var(--space-6); & thead { & th { border:1px solid var(--border); border-bottom:none; border-radius:var(--radius-2) var(--radius-2) 0 0; padding:var(--space-3); font-weight:650; font-size:var(--step-1); text-align:left; } } & tbody { & td { border:1px solid var(--border); border-radius:0 0 var(--radius-2) var(--radius-2); padding:var(--space-4); vertical-align:top; text-align:left; box-shadow:var(--shadow-1); } } } @media (max-width:48rem) { & table { width:100%; margin-inline:0; border-spacing:0; display:block; & thead { display:none; } & tbody { display:block; & tr { display:block; margin-block-end:var(--space-4); &:last-child { margin-block-end:0; } } & td { display:block; width:100%; border-radius:var(--radius-2); margin-block-end:var(--space-3); &:last-child { margin-block-end:0; } &::before { content:attr(data-label); display:block; font-weight:700; font-size:var(--step-0); color:var(--text); margin-block-end:var(--space-2); padding-block-end:var(--space-2); border-bottom:1px solid var(--border); } } } } }}.site-footer{padding-block:var(--space-6);background:linear-gradient( 135deg,color-mix(in oklch,var(--brand),var(--footer-bg-dark) 80%),color-mix(in oklch,var(--brand-2),var(--footer-bg-dark) 82%) );border-top:1px solid color-mix(in oklch,var(--brand),transparent 70%);position:relative;color:var(--footer-text);&::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient( 90deg,transparent,color-mix(in oklch,var(--brand),transparent 40%),transparent ); } & .brand { color:var(--footer-text); font-size:var(--step-1); } & .brand-lg { font-size:var(--step-2); font-weight:700; & .mark-lg { width:48px; height:48px; } & .brand-logo { height:var(--space-4); } & .brand-logo-white { height:var(--space-4); width:auto; display:inline-block; background-image:url('/reproxhrfinal/proxhrFULL_WHITE.svg'); background-repeat:no-repeat; background-size:contain; background-position:center; aspect-ratio:551.98/155.48; } } & .footer-brand { margin-block-end:var(--space-5); } & .footer-tagline { font-size:var(--step-0); color:var(--footer-text); font-weight:500; opacity:0.95; line-height:1.5; } & .row { display:grid; gap:var(--space-6); align-items:start; } & .col { width:100%; } & .col-content { display:grid; gap:var(--space-5); } & .footer-contact { & .contact-list { display:flex; flex-direction:column; gap:var(--space-0); } & .contact-item { display:flex; align-items:center; gap:var(--space-2); color:var(--footer-text); font-size:var(--step-0); } & .contact-link,& .contact-text { color:var(--footer-text); text-decoration:none; transition:color 0.2s; font-weight:500; } & .contact-link:hover { color:color-mix(in oklch,var(--brand),white 40%); } & .btn-copy { background:none; border:none; padding:var(--space-1); cursor:pointer; color:var(--footer-muted); display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-1); transition:color 0.2s,background 0.2s,transform 0.2s; position:relative; &:hover { color:var(--footer-text); background:color-mix(in oklch,white,transparent 90%); } &.copied { color:var(--brand); } &:hover .tooltip-text { opacity:1; visibility:visible; } &:active { transform:scale(0.95); } & svg { display:block; } } & .tooltip-text { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:var(--space-1); padding:0.35rem 0.65rem; background:var(--footer-text); color:var(--footer-bg-dark); font-size:var(--step--1); border-radius:var(--radius-1); white-space:nowrap; opacity:0; visibility:hidden; transition:opacity 0.2s,visibility 0.2s; pointer-events:none; font-weight:600; &::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--footer-text); } } } & .fineprint { margin-block-start:var(--space-6); padding-block-start:var(--space-4); border-top:1px solid color-mix(in oklch,white,transparent 85%); color:var(--footer-muted); font-size:var(--step--1); display:grid; gap:var(--space-3); justify-items:center; } & .fineprint p { margin:0; } & .legal-links { display:flex; gap:var(--space-3); } & .legal-links a { color:var(--footer-muted); text-decoration:none; transition:color 0.2s; &:hover { color:var(--footer-text); } }}@media(min-width:48rem){.site-footer{& .row { grid-template-columns: 1fr 1fr; gap: var(--space-6); } & .fineprint { grid-template-columns: auto auto; justify-content: space-between; justify-items: start; }}}@media(min-width:64rem){.site-footer{& .row { grid-template-columns: 1.2fr 1fr; align-items: center; }}}.form{display:grid;gap:var(--space-3);max-width:44rem;& label { display: grid; gap: 0.4rem; font-weight: 600; } & input { display: block; width: 100%; padding: var(--input-padding-y) var(--input-padding-x); border-radius: var(--radius-2); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: var(--step-0); font-family: inherit; letter-spacing: -0.01em; box-shadow: var(--shadow-1); outline: none; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; &::placeholder { color: var(--muted); opacity: 1; } &:hover { background: color-mix(in oklch, var(--surface), var(--brand) 3%); border-color: color-mix(in oklch, var(--border), var(--brand) 20%); } &:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--focus-ring); background: var(--bg); } &:disabled { opacity: 0.6; cursor: not-allowed; } } & textarea, & select { border-radius: var(--radius-2); border: 1px solid var(--border); background: var(--surface); padding: var(--input-padding-y) var(--input-padding-x); } & textarea { min-height: 10rem; resize: vertical; } & .hint { font-weight: 500; color: var(--muted); font-size: var(--step--1); } &.subscribe { & input { border-radius: var(--radius-2) 0 0 var(--radius-2); } & button { border-radius: 0 var(--radius-2) var(--radius-2) 0; } }}.subscribe-component{width:100%}.subscribe-wrapper{max-width:42rem;margin:0;padding:var(--space-5);background:color-mix(in oklch,white,transparent 94%);border-radius:var(--radius-3);backdrop-filter:blur(10px);box-shadow:0 8px 32px color-mix(in oklch,black,transparent 80%)}.subscribe-title{font-size:var(--step-2);font-weight:700;color:#fff;margin:0 0 var(--space-1);letter-spacing:-.03em;line-height:1.2}.subscribe-description{font-size:var(--step--1);line-height:1.5;margin:0 0 var(--space-4);color:color-mix(in oklch,var(--footer-text),transparent 25%);font-weight:500}.site-footer .text-muted{color:var(--footer-muted)}.subscribe-form{display:flex;flex-direction:column}.input-group{display:grid;grid-template-columns:1fr auto;gap:0;align-items:stretch;box-shadow:0 4px 16px color-mix(in oklch,black,transparent 85%);border-radius:var(--radius-2);overflow:hidden;& input.form-control { padding: var(--space-3) var(--space-4); border: none; background-color: white; color: oklch(0.2 0.02 260); border-radius: 0; outline: none; box-sizing: border-box; transition: all 0.2s; font-size: var(--step-0); font-family: inherit; font-weight: 500; box-shadow: none; &::placeholder { color: oklch(0.5 0.02 260); opacity: 0.85; font-weight: 500; } &:focus { background-color: color-mix(in oklch, var(--brand), white 96%); box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand), transparent 90%) inset; } &:hover:not(:focus) { background-color: color-mix(in oklch, white, var(--brand) 3%); } } & input.form-control-lg { padding: var(--space-3) var(--space-4); font-size: var(--step-0); } & .btn { border-radius: 0; border: none; box-sizing: border-box; } & .btn-lg { padding: var(--space-3) var(--space-4); font-size: var(--step-0); font-weight: 700; white-space: nowrap; }}.site-footer .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none;box-shadow:0 2px 8px color-mix(in oklch,var(--brand),transparent 60%);transition:all .2s ease;cursor:pointer;font-weight:700;letter-spacing:-.01em;&:hover { transform:scale(1.02); box-shadow:0 4px 16px color-mix(in oklch,var(--brand),transparent 50%); filter:brightness(1.08); } &:active { transform:scale(0.98); }}.alert{padding:var(--space-3);border-radius:var(--radius-2);font-size:var(--step-0);line-height:1.5;border:2px solid}.alert-success{background-color:color-mix(in oklch,var(--ok),transparent 85%);color:color-mix(in oklch,var(--ok),white 20%);border-color:color-mix(in oklch,var(--ok),transparent 60%);& strong { font-weight: 700; color: color-mix(in oklch, var(--ok), white 10%); }}.subscribe-form__error{margin-top:var(--space-3);padding:var(--space-3);background-color:color-mix(in oklch,var(--warn),transparent 80%);color:color-mix(in oklch,var(--warn),white 20%);font-size:var(--step-0);line-height:1.5;border-radius:var(--radius-2);border:2px solid color-mix(in oklch,var(--warn),transparent 60%)}@media(max-width:36rem){.input-group{grid-template-columns:1fr;gap:var(--space-2);overflow:visible;box-shadow:none;& input.form-control { border-radius: var(--radius-2); background: white; box-shadow: 0 2px 8px color-mix(in oklch, black, transparent 90%); padding: var(--space-3) var(--space-4); }}.input-group .btn-lg{border-radius:var(--radius-2);width:100%}.subscribe-wrapper{padding:var(--space-4)}.subscribe-title{font-size:var(--step-1)}.subscribe-description{font-size:var(--step--1);margin-bottom:var(--space-3)}}.icon-box{display:flex;align-items:center;justify-content:center;border-radius:var(--radius-1);background:linear-gradient(135deg,color-mix(in oklch,var(--brand),transparent 90%),color-mix(in oklch,var(--brand-2),transparent 90%) );color:var(--brand)}.icon-box--md{width:4rem;height:4rem;border-radius:var(--radius-2)}.team-grid{display:grid;gap:var(--space-4);grid-template-columns:1fr}@media(min-width:48rem){.team-grid{grid-template-columns:repeat(2,1fr)}}.team-member-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-2);box-shadow:var(--shadow-1);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);transition:all .2s ease;&:hover { box-shadow:0 4px 16px color-mix(in oklch,var(--brand),transparent 90%),var(--shadow-1); transform:translateY(-2px); }}.team-member-avatar{display:flex;align-items:center;justify-content:center}.avatar-placeholder{width:6rem;height:6rem;border-radius:50%;background:linear-gradient(135deg,color-mix(in oklch,var(--brand),transparent 85%),color-mix(in oklch,var(--brand-2),transparent 85%) );display:flex;align-items:center;justify-content:center;color:var(--brand);border:2px solid color-mix(in oklch,var(--brand),transparent 70%);overflow:hidden;& img { width: 100%; height: 100%; object-fit: cover; object-position: center; }}.team-member-info{display:flex;flex-direction:column;gap:var(--space-1);text-align:center;& h3 { font-size: var(--step-1); margin: 0; }}.team-member-role{font-size:var(--step-0);color:var(--brand);font-weight:600;margin:0}.team-member-bio{font-size:var(--step--1);color:var(--muted);line-height:1.6;margin-block-start:var(--space-2);text-align:left}.section-bordered{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.content-hero{padding-block:var(--space-7);background:var(--bg);border-bottom:1px solid color-mix(in oklch,var(--brand),transparent 88%);position:relative;&::after { content:""; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient( 90deg,transparent,color-mix(in oklch,var(--brand),transparent 70%),transparent ); }}.content-section{padding-block-start:var(--space-6)}.content-intro{font-size:var(--step-0);color:var(--muted);line-height:1.6}.content-info-grid{display:grid;gap:var(--space-4);grid-template-columns:1fr;max-width:56rem;margin-inline:auto}@media(min-width:48rem){.content-info-grid{grid-template-columns:repeat(2,1fr)}}.content-info-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-5);transition:all .2s ease;&:hover { border-color:color-mix(in oklch,var(--brand),transparent 60%); box-shadow:0 0 0 1px color-mix(in oklch,var(--brand),transparent 80%),0 16px 40px color-mix(in oklch,var(--brand),transparent 85%); transform:translateY(-4px); } & h3 { margin:0; font-size:var(--step-1); } & p { margin:0; font-size:var(--step-0); }}.content-link{font-size:var(--step-0-5);font-weight:600;color:var(--brand);text-decoration:none;transition:all .2s ease;&:hover { color:var(--link-hover); text-decoration:underline; }}}@layer components{.hero-blog{border-bottom:1px solid color-mix(in oklch,var(--brand),transparent 88%);& .headline a { color: var(--text); text-decoration: none; transition: color 0.2s ease; &:hover { color: var(--brand); } } & .post-meta { gap: var(--space-2); }}.hero-grid-blog{& .hero-image img { border-radius: var(--radius-2); box-shadow: var(--shadow-1); transition: transform 0.3s ease; &:hover { transform: scale(1.02); } }}.blog-grid{display:grid;gap:var(--space-4);grid-template-columns:1fr;margin-block-start:var(--space-4)}@media(min-width:48rem){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:64rem){.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.blog-grid-compact{gap:var(--space-3)}.card-blog{display:flex;flex-direction:column;overflow:hidden;transition:all .3s ease;height:100%;&:hover { transform:translateY(-4px); border-color:color-mix(in oklch,var(--brand),transparent 60%); box-shadow:0 0 0 1px color-mix(in oklch,var(--brand),transparent 80%),0 16px 40px color-mix(in oklch,var(--brand),transparent 85%); }}.card-img-top{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:linear-gradient( 135deg,color-mix(in oklch,var(--brand),transparent 95%),color-mix(in oklch,var(--brand-2),transparent 95%) );& img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } & a:hover img { transform: scale(1.05); }}.card-body{display:flex;flex-direction:column;gap:var(--space-2);flex:1;padding:var(--space-3)}.badge-category{display:inline-flex;align-self:flex-start;font-weight:600;color:var(--brand);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.05em}.card-title{margin:0;font-size:var(--step-1);line-height:1.3;& a { color: var(--text); text-decoration: none; transition: color 0.2s ease; &:hover { color: var(--brand); } }}.card-text{color:var(--muted);font-size:var(--step-0);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-footer{display:flex;align-items:center;gap:var(--space-2);font-size:var(--step--1);color:var(--muted);margin-block-start:auto;padding-block-start:var(--space-2);border-top:1px solid var(--border);background:0 0}.meta-date{font-weight:500}.meta-reading-time{display:flex;align-items:center;gap:.4rem;&::before { content:"•"; color:var(--border); }}.post-hero{padding-block:var(--space-7)var(--space-5);background:linear-gradient( 180deg,color-mix(in oklch,var(--brand),transparent 97%),var(--bg) );border-bottom:1px solid color-mix(in oklch,var(--brand),transparent 88%);position:relative;&::after { content:""; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient( 90deg,transparent,color-mix(in oklch,var(--brand),transparent 70%),transparent ); }}.post-header{display:flex;flex-direction:column;gap:var(--space-3);text-align:center}.post-title{margin:0;font-size:clamp(var(--step-2),6vw,var(--step-3));line-height:1.1;text-wrap:balance}.post-lead{font-size:var(--step-0-5);color:var(--muted);line-height:1.5;margin:0;text-wrap:balance}.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);font-size:var(--step-0);color:var(--muted)}.post-meta-item{display:flex;align-items:center;gap:.5rem;& svg { width: 20px; height: 20px; color: color-mix(in oklch, var(--brand), var(--text) 40%); }}.post-hero .post-meta{justify-content:center}.post-featured-image{margin-block-start:var(--space-5);margin-block-end:var(--space-6);& img { width: 100%; height: auto; max-height: 500px; object-fit: cover; border-radius: var(--radius-2); box-shadow: var(--shadow-1); }}.post-body{padding-block:var(--space-5)}.post-footer{padding-block:var(--space-5);border-top:1px solid var(--border)}.post-tags-title{font-size:var(--step-0);margin-block-end:var(--space-2);color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.pagination{margin-block-start:var(--space-6);padding-block-start:var(--space-5);border-top:1px solid var(--border)}.pagination-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.pagination-btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;& svg { width: 16px; height: 16px; }}.pagination-info{font-size:var(--step-0);color:var(--muted);font-weight:500}@media(max-width:48rem){.pagination-info{display:none}}}