:root{--paper: #F7F2E6; --paper-2: #EFE4CC; --ink: #2B1A10; --ink-soft: #6E5B49; --line: rgba(43, 26, 16, 0.12); --blue: #0E6FB0; --blue-deep: #0A4E7D; --blue-light: #3FA9E0; --blue-tint: #DDEDF8; --brown: #3D2411; --brown-deep: #1A0D04; --gold: #E3A43C; --gold-deep: #B9791F; --gold-light: #FFD37E; --gold-soft: #FBE7C0; --font: 'Plus Jakarta Sans', system-ui, sans-serif; --container: 1180px; --radius-lg: 26px; --radius-md: 18px; --radius-sm: 12px;}
*{box-sizing: border-box;}
html{scroll-behavior: smooth; overflow-x: hidden; width: 100%;}
body{margin: 0px; font-family: var(--font); color: var(--ink); background: var(--paper); overflow-x: hidden; line-height: 1.6;}
img{max-width: 100%; display: block;}
a{color: inherit;}
.container{max-width: var(--container); margin: 0px auto; padding: 0px 24px;}
h1, h2, h3{font-family: var(--font); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin: 0px; color: var(--ink);}
h2{font-size: clamp(28px, 3.8vw, 42px);}
h3{font-size: clamp(18px, 2vw, 21px); font-weight: 700;}
p{margin: 0px;}
.grad-text{color: rgb(168, 80, 31); font-weight: 900;}
.ambient-glow{position: fixed; inset: 0px; z-index: -1; pointer-events: none; background: radial-gradient(600px 420px at 88% 4%, rgba(227, 164, 60, 0.16), transparent 60%), radial-gradient(560px 420px at 4% 22%, rgba(14, 111, 176, 0.11), transparent 60%), radial-gradient(500px 500px at 70% 78%, rgba(61, 36, 17, 0.06), transparent 65%); animation: 22s ease-in-out 0s infinite alternate none running driftGlow;}
@keyframes driftGlow { 
  0% { transform: translate(0px, 0px) scale(1); }
  100% { transform: translate(-1.5%, 1.5%) scale(1.04); }
}
.reveal{opacity: 0; transform: translateY(34px); transition: opacity 800ms cubic-bezier(0.16, 0.8, 0.2, 1), transform 800ms cubic-bezier(0.16, 0.8, 0.2, 1); will-change: transform, opacity;}
.reveal.is-visible{opacity: 1; transform: translateY(0px);}
.reveal-1{transition-delay: 80ms;}
.reveal-2{transition-delay: 160ms;}
.reveal-3{transition-delay: 240ms;}
.reveal-4{transition-delay: 320ms;}
@media (prefers-reduced-motion: reduce) {*{animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important;}.reveal{opacity: 1; transform: none;}}
.btn{display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; padding: 15px 28px; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; position: relative; transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms, background 220ms, border-color 220ms; white-space: nowrap;}
.btn-primary{background: linear-gradient(120deg, var(--blue-light) 0%, var(--blue) 50%, var(--blue-deep) 100%); color: rgb(255, 255, 255); box-shadow: rgba(227, 164, 60, 0) 0px 0px 0px 0px, rgba(14, 111, 176, 0.38) 0px 12px 26px, rgba(255, 255, 255, 0.3) 0px 1px 0px inset; animation: 3.2s ease-in-out 0s infinite normal none running btnPulse;}
@keyframes btnPulse { 
  0%, 100% { box-shadow: rgba(227, 164, 60, 0) 0px 0px 0px 0px, rgba(14, 111, 176, 0.38) 0px 12px 26px, rgba(255, 255, 255, 0.3) 0px 1px 0px inset; }
  50% { box-shadow: rgba(227, 164, 60, 0.12) 0px 0px 0px 7px, rgba(14, 111, 176, 0.44) 0px 14px 30px, rgba(255, 255, 255, 0.35) 0px 1px 0px inset; }
}
.btn-primary:hover{transform: translateY(-3px); box-shadow: rgba(227, 164, 60, 0.18) 0px 0px 0px 5px, rgba(14, 111, 176, 0.46) 0px 18px 34px, rgba(255, 255, 255, 0.4) 0px 1px 0px inset;}
.btn-ghost{background: rgba(255, 255, 255, 0.5); border-color: rgba(227, 164, 60, 0.55); color: var(--brown); box-shadow: rgba(227, 164, 60, 0.15) 0px 0px 0px 1px inset;}
.btn-ghost:hover{background: var(--gold-soft); border-color: var(--gold-deep); transform: translateY(-3px); box-shadow: rgba(185, 121, 31, 0.22) 0px 10px 22px;}
.site-header{position: sticky; top: 0px; z-index: 100; background: rgba(247, 242, 230, 0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);}
.site-header .container{display: flex; align-items: center; justify-content: space-between; height: 78px;}
.brand{display: flex; align-items: center; gap: 11px; text-decoration: none;}
.brand img{height: 57px; width: auto; border-radius: 9px;}
.brand-name{font-weight: 800; font-size: 16.5px; color: var(--ink); line-height: 1.1;}
.brand-sub{display: block; font-weight: 700; font-size: 10px; letter-spacing: 0.1em; color: var(--gold-deep); text-transform: uppercase;}
.main-nav{display: flex; align-items: center; gap: 2px;}
.main-nav a{font-weight: 600; font-size: 14px; text-decoration: none; color: var(--ink-soft); padding: 10px 15px; border-radius: 999px; transition: background 180ms, color 180ms;}
.main-nav a:hover{background: var(--blue-tint); color: var(--blue-deep);}
.main-nav a.active{background: linear-gradient(120deg, var(--blue-light), var(--blue-deep)); color: rgb(255, 255, 255); box-shadow: rgba(14, 111, 176, 0.32) 0px 4px 14px;}
.menu-toggle{display: none; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; width: 44px; height: 44px; border-radius: 999px; align-items: center; justify-content: center; cursor: pointer; color: var(--ink);}
.menu-toggle:hover{background: var(--blue-tint);}
.menu-toggle svg{width: 22px; height: 22px;}
.mobile-panel{position: fixed; inset: 78px 0px 0px; background: var(--paper); transform: translateY(-14px); opacity: 0; pointer-events: none; transition: opacity 260ms, transform 260ms; z-index: 99; overflow-y: auto;}
.mobile-panel.open{opacity: 1; transform: translateY(0px); pointer-events: auto;}
.mobile-panel .container{padding-top: 28px; padding-bottom: 40px;}
.mobile-panel nav{display: flex; flex-direction: column; gap: 2px;}
.mobile-panel a{font-weight: 700; font-size: 23px; text-decoration: none; color: var(--ink); padding: 14px 4px; border-bottom: 1px solid var(--line);}
.mobile-panel .btn{margin-top: 24px; width: 100%; justify-content: center;}
@media (max-width: 920px) {.main-nav{display: none;}.menu-toggle{display: inline-flex;}.header-actions .btn-primary{display: none;}}
@media (min-width: 921px) {.mobile-panel{display: none;}}
.hero{padding-top: 64px; padding-bottom: 40px; display: grid; gap: 48px; grid-template-columns: 1fr; align-items: center;}
@media (min-width: 900px) {.hero{grid-template-columns: 1.05fr 0.95fr; padding-top: 76px; padding-bottom: 56px;}}
.hero h1{font-size: clamp(34px, 4.8vw, 56px); margin-top: 20px;}
.hero p.lead{font-size: 17.5px; color: var(--ink-soft); margin-top: 20px; max-width: 480px;}







.hero-media{position: relative;}
.hero-media::before{content: ""; position: absolute; inset: -8%; background: conic-gradient(from 120deg, var(--blue-light), var(--gold-light), var(--blue-light)); filter: blur(46px); opacity: 0.35; border-radius: 50%; animation: 14s linear 0s infinite normal none running spinGlow; z-index: 0;}
@keyframes spinGlow { 
  100% { transform: rotate(360deg); }
}
.hero-media-frame{position: relative; z-index: 1; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: rgba(43, 26, 16, 0.22) 0px 24px 60px, rgba(255, 255, 255, 0.5) 0px 1px 0px inset; background: linear-gradient(160deg, #fff 0%, var(--gold-soft) 150%);}
.hero-media-frame img{width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;}
.hero-media-tag{position: absolute; bottom: 16px; left: 16px; z-index: 2; background: rgba(43, 26, 16, 0.72); color: rgb(255, 255, 255); font-size: 11.5px; font-weight: 700; padding: 7px 13px; border-radius: 999px; backdrop-filter: blur(4px);}









.section{padding: 88px 0px;}
.section-alt{background: var(--paper-2);}
.section-head{max-width: 620px; margin-bottom: 44px;}
.section-head h2{margin-top: 0px;}
.section-head p{margin-top: 14px; font-size: 16.5px; color: var(--ink-soft);}
.split{display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr;}
@media (min-width: 860px) {.split{grid-template-columns: 1fr 1fr; gap: 56px;}}
.grid{display: grid; gap: 22px;}
@media (min-width: 720px) {.grid-4{grid-template-columns: repeat(4, 1fr);}}
.card{background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; position: relative; overflow: hidden; box-shadow: rgba(43, 26, 16, 0.06) 0px 10px 26px; transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms, border-color 260ms;}
.card::after{content: ""; position: absolute; inset: 0px; background: linear-gradient(135deg, rgba(227, 164, 60, 0.1), transparent 55%); opacity: 0; transition: opacity 260ms; pointer-events: none;}
.card:hover{transform: translateY(-6px); box-shadow: rgba(43, 26, 16, 0.14) 0px 22px 42px, rgba(227, 164, 60, 0.35) 0px 0px 0px 1px;}
.card:hover::after{opacity: 1;}
.icon-tile{width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, var(--blue-tint), #C9E6F5); color: var(--blue-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: rgba(255, 255, 255, 0.7) 0px 1px 0px inset, rgba(14, 111, 176, 0.16) 0px 6px 14px; transition: transform 260ms cubic-bezier(0.3, 1.4, 0.4, 1); position: relative; z-index: 1;}
.card:hover .icon-tile{transform: scale(1.1) rotate(-4deg);}
.icon-tile svg{width: 22px; height: 22px;}
.card h3{margin-top: 2px; position: relative; z-index: 1;}
.card p{position: relative; z-index: 1;}



.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 64px 44px;
  text-align: center;
  color: #fff;
  background: linear-gradient(120deg, var(--blue-light), var(--blue), var(--blue-deep), var(--brown));
  background-size: 260% 260%;
  animation: ctaShift 10s ease-in-out infinite;
}
@keyframes ctaShift { 
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.cta::before{content: ""; position: absolute; inset: 0px; opacity: 0.1; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.cta::after{content: ""; position: absolute; top: -60%; left: -20%; width: 65%; height: 220%; background: linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 60%); transform: rotate(12deg); animation: 5s ease-in-out 0s infinite normal none running shine; pointer-events: none;}
@keyframes shine { 
  0%, 100% { transform: rotate(12deg) translateX(0px); }
  50% { transform: rotate(12deg) translateX(60%); }
}
.cta > *{position: relative; z-index: 1;}
.cta h2{color: rgb(255, 255, 255);}
.cta p{color: rgb(234, 243, 250); font-size: 16.5px; max-width: 520px; margin: 16px auto 0px;}
.cta .btn-ghost{background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); color: rgb(255, 255, 255);}
.cta .btn-ghost:hover{background: rgba(255, 255, 255, 0.22); border-color: var(--gold-light);}
.site-footer{background: var(--brown-deep); color: rgb(243, 234, 216); padding: 60px 0px 26px;}
.footer-top{display: grid; gap: 36px; grid-template-columns: 1.3fr 1fr 1fr; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);}
.footer-top .brand-name{color: rgb(255, 255, 255);}
.footer-top .brand-sub{color: var(--gold-light);}
.footer-top p.desc{color: rgb(201, 187, 169); font-size: 14px; max-width: 320px; margin-top: 14px;}
.footer-h{font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); font-weight: 700; margin-bottom: 14px;}
.footer-links{display: flex; flex-direction: column; gap: 10px;}
.footer-links a{text-decoration: none; color: rgb(243, 234, 216); font-weight: 500; font-size: 14px; transition: color 180ms;}
.footer-links a:hover{color: var(--gold-light);}
.footer-bottom{padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: rgb(166, 149, 127);}
@media (max-width: 780px) {.footer-top{grid-template-columns: 1fr;}}











@media (max-width: 780px) {.section{padding: 60px 0px;}}
.wa-float{position: fixed; right: 20px; bottom: 20px; z-index: 200; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, rgb(41, 208, 106), rgb(29, 168, 81)); display: flex; align-items: center; justify-content: center; box-shadow: rgba(29, 168, 81, 0.42) 0px 10px 24px, rgba(255, 255, 255, 0.3) 0px 1px 0px inset; color: rgb(255, 255, 255); text-decoration: none; animation: 2.6s ease-in-out 0s infinite normal none running waPulse; transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms;}
.wa-float svg{width: 28px; height: 28px;}
.wa-float:hover{transform: translateY(-3px) scale(1.05); box-shadow: rgba(29, 168, 81, 0.5) 0px 14px 30px, rgba(255, 255, 255, 0.35) 0px 1px 0px inset;}
@keyframes waPulse { 
  0%, 100% { box-shadow: rgba(29, 168, 81, 0.42) 0px 10px 24px, rgba(41, 208, 106, 0.35) 0px 0px 0px 0px, rgba(255, 255, 255, 0.3) 0px 1px 0px inset; }
  50% { box-shadow: rgba(29, 168, 81, 0.42) 0px 10px 24px, rgba(41, 208, 106, 0) 0px 0px 0px 10px, rgba(255, 255, 255, 0.35) 0px 1px 0px inset; }
}
@media (max-width: 560px) {.wa-float{right: 16px; bottom: 16px; width: 52px; height: 52px;}.wa-float svg{width: 25px; height: 25px;}}
@media (prefers-reduced-motion: reduce) {.wa-float{animation: auto ease 0s 1 normal none running none;}}






































































.page-intro{grid-template-columns: 1fr; padding-bottom: 12px;}
.page-intro h1{max-width: 870px; margin-top: 0px;}
.page-intro p.lead{max-width: 680px;}


















:focus-visible{outline: 3px solid var(--blue); outline-offset: 4px;}
.mobile-panel:not(.open){visibility: hidden;}

@media (min-width: 921px) and (max-width: 1200px) {.header-actions .btn-primary{display: none;}.main-nav a{padding: 10px;}}





































.grad-text{color: rgb(168, 80, 31);}












h2{font-size: clamp(25px, 2.8vw, 34px); line-height: 1.22;}
h3{font-size: clamp(18px, 1.7vw, 20px); line-height: 1.3;}
.hero h1{font-size: clamp(30px, 3.4vw, 43px); line-height: 1.2;}

.section-head{max-width: none; width: 100%; text-align: center; margin: 0px auto 36px;}
.section-head h2, .section-head p{max-width: none;}
.page-intro{text-align: center; padding-top: 60px; padding-bottom: 32px;}
.page-intro h1, .page-intro p.lead{max-width: none; width: 100%;}
.page-intro p.lead{margin: 20px auto 0px;}





.reveal{opacity: 1; transform: none; will-change: auto;}
.reveal-ready .reveal:not(.is-visible){opacity: 0; transform: translateY(22px);}
.reveal-ready .reveal{transition: opacity 650ms, transform 650ms cubic-bezier(0.16, 0.8, 0.2, 1);}
@media (max-width: 560px) {.page-intro{padding-top: 40px;}.reveal-ready .reveal{transition-duration: 500ms; transition-delay: 0ms;}.section-head{margin-bottom: 28px;}}
@media (prefers-reduced-motion: reduce) {.reveal-ready .reveal:not(.is-visible){opacity: 1; transform: none;}}


.section-symbol{display: inline-flex; justify-content: center; align-items: center; color: rgb(168, 80, 31); background: var(--gold-soft); width: 44px; height: 44px; border-radius: 13px; margin-bottom: 16px;}
.section-symbol svg{width: 25px; height: 25px;}
.cta .section-symbol{color: white; background: rgba(255, 255, 255, 0.18);}


.reveal-ready .reveal{transition: none;}




:root{--radius-md: 16px; --radius-lg: 24px;}
body{line-height: 1.65;}
h1, h2, h3{letter-spacing: -0.025em;}
.site-header{background: rgba(247, 242, 230, 0.96);}
.main-nav a{font-size: 13px;}
.btn{padding: 13px 24px; font-size: 14px;}
.btn-primary{animation: auto ease 0s 1 normal none running none; background: linear-gradient(125deg, rgb(22, 131, 188), rgb(10, 83, 127)); box-shadow: rgba(14, 111, 176, 0.18) 0px 6px 16px;}
.btn-primary:hover{box-shadow: rgba(14, 111, 176, 0.24) 0px 9px 22px; transform: translateY(-2px);}
.ambient-glow{animation: auto ease 0s 1 normal none running none; opacity: 0.6;}
.hero-media::before{animation: auto ease 0s 1 normal none running none; opacity: 0.15;}
.card{border: 1px solid rgba(80, 53, 28, 0.09); box-shadow: rgba(43, 26, 16, 0.043) 0px 6px 20px;}
.card:hover{transform: translateY(-3px); box-shadow: rgba(43, 26, 16, 0.08) 0px 12px 28px;}

.section-alt{background: rgb(240, 231, 211);}
.section-head{margin-bottom: 40px;}

.page-intro{padding-top: 68px; padding-bottom: 38px;}
.page-intro .lead{font-size: 16px;}
.section-symbol{background: rgb(248, 232, 205); border: 1px solid rgba(168, 80, 31, 0.08);}
.cta{box-shadow: none;}




@media (max-width: 600px) {.page-intro{padding-top: 40px;}}




















.brand img{border-radius: 0px;}
@media (max-width: 759px) {main .hero, main .split > div{text-align: center;} main .grid > .card{text-align: center;}main .grid > .card > .icon-tile{margin-left: auto; margin-right: auto;}}

@media (max-width: 780px) {.site-footer{padding: 40px 0 calc(88px + env(safe-area-inset-bottom)); text-align: center;}.footer-top{grid-template-columns: minmax(0px, 1fr); gap: 30px; padding-bottom: 28px;}.footer-top > div{min-width: 0px;}.footer-top .brand{justify-content: center;}.footer-top .brand > span{text-align: left;}.footer-top p.desc{max-width: 340px; margin: 16px auto 0px; font-size: 14px; line-height: 1.7;}.footer-h{margin-bottom: 12px;}.footer-links{align-items: center; gap: 4px;}.footer-links a{padding: 7px 0px; max-width: 100%; overflow-wrap: anywhere; line-height: 1.5;}.footer-bottom{flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 12px; line-height: 1.7;}.wa-float{width: 46px; height: 46px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); animation: auto ease 0s 1 normal none running none;}.wa-float svg{width: 23px; height: 23px;}}
.cookie-banner[hidden]{display: none;}
.cookie-banner{position: fixed; inset: auto 0px 0px; z-index: 500; background: rgb(255, 253, 247); border-top: 1px solid var(--line); box-shadow: rgba(43, 26, 16, 0.08) 0px -8px 32px; padding: 22px 0 calc(22px + env(safe-area-inset-bottom)); max-height: 80dvh; overflow: auto;}
.cookie-inner{display: flex; gap: 28px; align-items: center;}
.cookie-inner > div:first-child{flex: 1 1 0%;}
.cookie-banner h2{font-size: 20px; margin-bottom: 8px;}
.cookie-banner p{font-size: 13px; color: var(--ink-soft); line-height: 1.6;}
.cookie-banner a{color: var(--blue-deep);}
.cookie-actions{display: flex; gap: 10px; flex-shrink: 0;}
.cookie-choice{background: var(--blue-deep); color: white; border: 1px solid var(--blue-deep); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 13px; font-weight: 700; padding: 12px 18px;}
.cookie-choice:hover{background: var(--blue);}
body.cookie-visible{padding-bottom: var(--cookie-height,200px);}
body.cookie-visible .wa-float{visibility: hidden;}
.privacy-footer{display: flex; justify-content: center; gap: 16px 28px; flex-wrap: wrap; margin-top: 22px; font-size: 13px;}
.privacy-footer button{background: none; border: 0px; padding: 0px; font: inherit; color: inherit; text-decoration: underline; cursor: pointer;}












@media (max-width: 900px) {.cookie-inner{flex-direction: column; align-items: stretch; gap: 16px;}.cookie-actions{justify-content: center;}}
@media (max-width: 560px) {.cookie-banner{padding-top: 18px;}.cookie-banner h2{font-size: 18px;}.cookie-actions .btn{flex: 1 1 0%; white-space: normal; justify-content: center; text-align: center;}}
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans.ttf?v=16") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; }
.site-icon{display: inline-block; width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle;}
.icon-tile .site-icon{width: 22px; height: 22px;}
.menu-toggle .site-icon{width: 22px; height: 22px;}
.btn .site-icon{width: 16px; height: 16px;}
.btn-primary .site-icon, .wa-float .site-icon{filter: brightness(0) invert(1);}

.wa-float .site-icon{width: 25px; height: 25px;}
.footer-bottom{flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px;}
.privacy-footer{margin-top: 16px; align-items: center;}
.privacy-footer a, .privacy-footer button{font-size: 13px; line-height: 1.6;}
.mobile-panel .btn-primary, .header-actions .btn-primary{color: rgb(255, 255, 255);}
.cta .section-symbol .site-icon{filter: brightness(0) invert(1);}