:root { --paper:#fff; --ink:#202124; --muted:#555b64; --line:#e5e7ea; --orange:#f15a24; --orange-dark:#e84b16; --soft:#fffaf7; --max:1240px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; } button,input,select { font:inherit; }
.site-shell { overflow:hidden; } .site-header,main,.site-footer { width:min(calc(100% - 116px),var(--max)); margin:0 auto; }
.site-header { height:108px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; } .brand-logo { display:block; width:220px; height:auto; }
.brand-copy { display:flex; flex-direction:column; line-height:1; }
.header-note { color:#777b80; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(460px,1fr); align-items:center; min-height:458px; border-bottom:1px solid var(--line); gap:48px; }
.hero-copy { z-index:2; padding:34px 0 52px; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:inherit; } h1 { margin-bottom:25px; font-size:clamp(46px,5vw,68px); line-height:.98; letter-spacing:-.065em; } h1 em { color:var(--orange); font-style:normal; } .hero-description { max-width:440px; margin-bottom:27px; color:#424851; font-size:18px; line-height:1.52; }
.hero-placeholder { position:relative; align-self:stretch; min-height:458px; overflow:hidden; } .hero-placeholder::before { position:absolute; content:""; width:82%; aspect-ratio:1; right:-4%; top:4%; border-radius:50%; background:radial-gradient(circle,rgba(243,244,245,.98) 0 24%,rgba(246,247,248,.6) 42%,transparent 68%); } .hero-placeholder::after { position:absolute; content:""; inset:0; background-image:radial-gradient(circle at 74% 30%,rgba(241,90,36,.85) 0 2px,transparent 2.5px),radial-gradient(circle at 67% 61%,rgba(210,213,216,.75) 0 2px,transparent 2.5px); background-size:26px 26px,42px 42px; opacity:.35; }
.hero-art { position:absolute; z-index:1; right:8%; top:50%; width:min(390px,72%); aspect-ratio:1; transform:translateY(-50%); } .hero-art-ring { position:absolute; inset:10%; border:1px solid #dfe2e5; border-radius:50%; } .ring-two { inset:20%; } .ring-three { inset:30%; }
.hero-art-shield { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:53%; aspect-ratio:1 / 1.1; transform:translate(-50%,-50%) rotate(45deg); border-radius:18% 9% 20% 9%; background:linear-gradient(135deg,#f8f9fa 8%,#d3d7da 88%); box-shadow:18px 22px 28px rgba(34,39,44,.16); } .hero-art-shield::before { content:""; width:74%; height:74%; border-radius:16% 7% 18% 7%; background:#242629; box-shadow:inset 0 0 0 2px #666; } .hero-art-shield b { position:absolute; z-index:1; color:#ff7a17; font-size:76px; line-height:1; transform:rotate(-45deg); text-shadow:4px 5px 1px #ef3f08; }
.placeholder-label,.placeholder-ratio { position:absolute; z-index:3; } .placeholder-label { left:50%; bottom:26px; transform:translateX(-50%); color:#777b80; font-size:10px; font-weight:700; letter-spacing:.15em; white-space:nowrap; } .placeholder-label b { color:var(--orange); } .placeholder-ratio { right:18px; bottom:26px; color:#8a8e92; font-size:10px; letter-spacing:.1em; }
.benefits-section { padding:38px 0 58px; } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:32px; } h2 { margin-bottom:8px; font-size:clamp(31px,3.5vw,42px); line-height:1.06; letter-spacing:-.055em; } .section-intro { margin-bottom:0; color:#4b5158; font-size:14px; line-height:1.45; }
.controls { display:flex; gap:16px; flex:0 0 auto; } .search-field,.select-field { position:relative; display:flex; align-items:center; height:46px; border:1px solid #e1e3e6; border-radius:10px; background:#fff; box-shadow:0 3px 9px rgba(25,35,45,.05); } .search-field { width:245px; gap:11px; padding:0 14px; } .select-field { width:246px; padding:0 16px; } .search-field svg,.select-field svg { width:17px; height:17px; fill:none; stroke:#343a40; stroke-width:1.7; flex:none; } .search-field input { width:100%; border:0; outline:0; color:var(--ink); font-size:13px; } .search-field input::placeholder { color:#868b92; } .select-field select { appearance:none; width:100%; border:0; outline:0; background:transparent; color:#343a40; cursor:pointer; font-size:13px; font-weight:600; } .select-field svg { position:absolute; right:14px; width:14px; pointer-events:none; }
.results-meta { display:flex; align-items:center; gap:15px; height:1px; margin:31px 0 24px; color:transparent; font-size:0; } .results-rule { display:none; }
.benefits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px 20px; } .benefit-card { position:relative; min-width:0; overflow:hidden; border:1px solid #e6e7e8; border-radius:18px; background:#fff; box-shadow:0 8px 22px rgba(31,38,45,.055); transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease; } .benefit-card:hover { border-color:#efb99f; box-shadow:0 18px 34px rgba(31,38,45,.105); transform:translateY(-7px); }
.card-image { position:relative; aspect-ratio:1.77/1; overflow:hidden; background:linear-gradient(120deg,hsl(calc(204 + var(--card-index) * 13) 22% 92%),hsl(calc(18 + var(--card-index) * 7) 20% 88%)); } .card-image::before { position:absolute; content:""; inset:0; background:radial-gradient(circle at 76% 24%,rgba(255,255,255,.85) 0 2px,transparent 3px),linear-gradient(145deg,transparent 30%,rgba(255,255,255,.38) 30.2% 30.6%,transparent 30.8%),linear-gradient(28deg,transparent 65%,rgba(241,90,36,.16) 65.2% 65.6%,transparent 65.8%); } .card-image::after { position:absolute; content:""; inset:13px; border:1px solid rgba(255,255,255,.72); border-radius:11px; } .card-image-bar { position:absolute; z-index:2; left:17px; right:17px; top:15px; display:flex; align-items:center; justify-content:space-between; color:rgba(34,39,44,.56); font-size:9px; font-weight:700; letter-spacing:.13em; } .card-image .placeholder-index { position:static; color:var(--orange-dark); font-size:11px; letter-spacing:.04em; } .card-image-mark { font-size:8px; letter-spacing:.15em; } .card-image .placeholder-label { bottom:auto; top:50%; width:100%; text-align:center; color:rgba(31,36,40,.48); transform:translate(-50%,-50%); font-size:9px; letter-spacing:.15em; }
.card-body { padding:21px 20px 22px; } .card-meta { display:flex; align-items:center; margin-bottom:12px; } .card-category { margin:0; color:var(--orange-dark); font-size:10px; font-weight:700; letter-spacing:.14em; } .card-body h3 { min-height:51px; margin-bottom:12px; font-size:22px; line-height:1.08; letter-spacing:-.05em; } .card-description { min-height:43px; margin-bottom:22px; color:#66707a; font-size:13px; line-height:1.52; } .card-link { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #edeff0; padding-top:16px; color:var(--orange-dark); font-size:12px; font-weight:700; } .card-link b { font-size:21px; font-weight:400; line-height:1; transition:transform .3s ease; } .benefit-card:hover .card-link b { transform:translateX(4px); } .is-placeholder .card-image { background:linear-gradient(120deg,#eef1f2,#e7dfdd); } .is-placeholder .card-body h3 { color:#5e646a; }
.empty-state { border:1px dashed var(--line); padding:42px 20px; color:var(--muted); text-align:center; font-size:14px; }
.institutional { display:grid; grid-template-columns:96px minmax(0,1fr) 260px; align-items:center; gap:25px; margin-bottom:0; border-radius:15px; background:#fffaf7; padding:26px 39px; } .institutional-icon,.calendar-icon { display:grid; place-items:center; border:1px solid #ffd2bd; border-radius:22px; background:#fff; color:var(--orange); } .institutional-icon { position:relative; width:68px; height:68px; } .institutional-icon span { position:absolute; width:17px; height:17px; border:2px solid var(--orange); border-radius:50%; } .institutional-icon span:first-child { top:14px; } .institutional-icon span:nth-child(2) { left:17px; bottom:13px; } .institutional-icon span:last-child { right:17px; bottom:13px; } .institutional-icon::after { content:""; position:absolute; left:16px; right:16px; bottom:11px; height:15px; border:2px solid var(--orange); border-bottom:0; border-radius:18px 18px 0 0; } .institutional-main h2 { margin-bottom:9px; font-size:20px; letter-spacing:-.035em; } .institutional-main p { max-width:630px; margin-bottom:0; color:#555b64; font-size:14px; line-height:1.48; } .institutional-note { display:flex; align-items:center; gap:14px; } .calendar-icon { width:52px; height:52px; border-radius:50%; font-size:29px; } .institutional-note p { margin:0; color:#444a51; font-size:13px; line-height:1.45; } .institutional-note strong { color:var(--ink); }
.site-footer { display:flex; align-items:center; justify-content:center; gap:13px; min-height:78px; color:#4f555b; font-size:12px; } .site-footer strong { color:var(--ink); } .footer-dot { width:4px; height:4px; border-radius:50%; background:var(--ink); }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .65s ease,transform .65s cubic-bezier(.22,1,.36,1); } .reveal.is-visible { opacity:1; transform:translateY(0); } .reveal-delay { transition-delay:.12s; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:930px) { .site-header,main,.site-footer { width:min(calc(100% - 64px),var(--max)); } .hero { grid-template-columns:1fr 1fr; gap:20px; } .hero-art { right:-2%; width:100%; } .section-heading { align-items:start; flex-direction:column; gap:22px; } .controls { width:100%; } .search-field,.select-field { flex:1; width:auto; } }
@media (max-width:650px) { .site-header,main,.site-footer { width:calc(100% - 40px); } .site-header { height:90px; } .header-note { display:none; } .brand-logo { width:190px; } .hero { display:flex; flex-direction:column; gap:0; min-height:0; } .hero-copy { padding:50px 0 36px; } h1 { font-size:clamp(43px,12vw,58px); } .hero-description { font-size:16px; } .hero-placeholder { width:calc(100% + 40px); min-height:300px; margin-left:-20px; } .hero-art { right:8%; width:68%; } .hero-art-shield b { font-size:60px; } .placeholder-label { bottom:16px; font-size:8px; } .placeholder-ratio { right:14px; bottom:16px; } .benefits-section { padding:42px 0 45px; } .controls { flex-direction:column; gap:11px; } .search-field,.select-field { width:100%; flex:none; } .benefits-grid { grid-template-columns:1fr; gap:17px; } .card-body h3 { min-height:auto; font-size:23px; } .card-description { min-height:auto; } .institutional { grid-template-columns:1fr; gap:16px; padding:24px 21px; } .institutional-main h2 { font-size:22px; } .institutional-note { padding-top:9px; border-top:1px solid #f2ddd3; } .site-footer { justify-content:flex-start; flex-wrap:wrap; padding:18px 0; font-size:10px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } .reveal { opacity:1; transform:none; } }