@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Sora:wght@600;700;800&display=swap");

:root{
--bg0:#08120f;
--bg1:#10221b;
--text:#effaf3;
--muted:#bfd8c9;
--line:rgba(86,128,108,.44);
--brand1:#1f8a5b;
--brand2:#f29f05;
--warm:#f2c14e;
--radius:18px;
--shadow:0 18px 50px rgba(0,0,0,.28)
}

body[data-theme="light"]{
--bg0:#f4faf6;
--bg1:#e8f3eb;
--text:#1f3a2e;
--muted:#4d6f60;
--line:rgba(61,107,82,.24);
--brand1:#1f8a5b;
--brand2:#ce8500;
--warm:#c97900;
--shadow:0 14px 28px rgba(24,55,42,.12)
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
color:var(--text);
background:radial-gradient(1200px 800px at 15% -8%, rgba(31,138,91,.22), transparent 55%),
radial-gradient(900px 700px at 100% 12%, rgba(242,159,5,.15), transparent 60%),
linear-gradient(165deg,var(--bg0) 0%,var(--bg1) 48%,#0b1f19 100%);
position:relative;
overflow-x:hidden
}
body::before,
body::after{
content:"";
position:fixed;
pointer-events:none;
z-index:-1;
filter:blur(80px)
}
body::before{
width:320px;
height:320px;
left:-80px;
top:20%;
background:radial-gradient(circle, rgba(31,138,91,.34) 0%, transparent 70%)
}
body::after{
width:360px;
height:360px;
right:-80px;
bottom:12%;
background:radial-gradient(circle, rgba(242,159,5,.24) 0%, transparent 70%)
}

a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 18px}

.topbar{
position:sticky;
top:0;
z-index:50;
backdrop-filter:blur(14px);
background:rgba(6,12,18,.58);
border-bottom:1px solid rgba(73,108,142,.32);
transition:background .25s ease,border-color .25s ease,box-shadow .25s ease
}
.topbar.is-scrolled{
background:rgba(6,12,18,.86);
border-color:rgba(73,108,142,.58);
box-shadow:0 10px 28px rgba(0,0,0,.28)
}

.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand img{height:56px;width:auto;display:block;transition:transform .22s ease}
.brand:hover img{transform:scale(1.04)}

.menu{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.menu a{
font-size:14px;
color:var(--muted);
padding:9px 12px;
border-radius:999px;
border:1px solid transparent;
position:relative;
transition:all .22s ease
}
.menu a::after{
content:"";
position:absolute;
left:12px;
right:12px;
bottom:4px;
height:2px;
background:linear-gradient(90deg,var(--brand1),var(--brand2));
transform:scaleX(0);
transform-origin:left;
transition:transform .25s ease
}
.menu a:hover,
.menu a[aria-current="page"]{
color:var(--text);
border-color:rgba(73,108,142,.42);
background:rgba(19,45,36,.5)
}
.menu a:hover::after,
.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu a.cta{
color:#fff;
border:none;
background:linear-gradient(100deg,var(--brand1),var(--brand2));
box-shadow:0 12px 30px rgba(31,138,91,.26)
}
.theme-toggle{
font-size:13px;
font-weight:700;
color:var(--text);
padding:9px 12px;
border-radius:999px;
border:1px solid rgba(73,108,142,.42);
background:rgba(19,45,36,.5);
cursor:pointer;
transition:all .22s ease
}
.menu-toggle{
	display:none;
	align-items:center;
	gap:8px;
	padding:9px 12px;
	border-radius:999px;
	border:1px solid rgba(73,108,142,.42);
	background:rgba(19,45,36,.5);
	color:var(--text);
	font-size:14px;
	font-weight:700;
	cursor:pointer;
	transition:all .22s ease
}
.menu-toggle:hover{
	background:rgba(19,45,36,.72);
	border-color:rgba(73,108,142,.62)
}
.menu-toggle-bar,
.menu-toggle-bar::before,
.menu-toggle-bar::after{
	display:block;
	width:16px;
	height:2px;
	border-radius:99px;
	background:currentColor;
	transition:transform .22s ease,opacity .22s ease
}
.menu-toggle-bar{position:relative}
.menu-toggle-bar::before,
.menu-toggle-bar::after{content:"";position:absolute;left:0}
.menu-toggle-bar::before{top:-5px}
.menu-toggle-bar::after{top:5px}
.menu-toggle.is-open .menu-toggle-bar{background:transparent}
.menu-toggle.is-open .menu-toggle-bar::before{transform:translateY(5px) rotate(45deg)}
.menu-toggle.is-open .menu-toggle-bar::after{transform:translateY(-5px) rotate(-45deg)}
.theme-toggle:hover{
transform:translateY(-1px);
background:rgba(19,45,36,.72);
border-color:rgba(73,108,142,.62)
}

.hero{position:relative;padding:64px 0 28px;overflow:hidden;isolation:isolate}
.hero::before{
content:"";
position:absolute;
inset:-10px;
background:url("../img/hero_photo.svg") center/cover no-repeat;
opacity:.95;
z-index:-3;
transform:scale(1.02);
animation:hero-pan 18s ease-in-out infinite alternate
}
.hero::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(70% 90% at 12% 20%, rgba(31,138,91,.38), transparent 68%),
radial-gradient(56% 74% at 88% 26%, rgba(242,159,5,.28), transparent 66%),
linear-gradient(180deg, rgba(6,12,18,.84) 0%, rgba(6,12,18,.42) 42%, rgba(6,12,18,.94) 100%);
z-index:-2;
animation:hero-color-shift 10s ease-in-out infinite alternate
}
.hero .container{position:relative}
.hero .container::before,
.hero .container::after{
content:"";
position:absolute;
border-radius:999px;
filter:blur(10px);
pointer-events:none;
z-index:-1
}
.hero .container::before{
width:160px;
height:160px;
top:-24px;
right:12%;
background:radial-gradient(circle, rgba(242,159,5,.30) 0%, rgba(242,159,5,.02) 72%);
animation:hero-orb-float 9s ease-in-out infinite
}
.hero .container::after{
width:130px;
height:130px;
left:-10px;
top:32px;
background:radial-gradient(circle, rgba(31,138,91,.30) 0%, rgba(31,138,91,.03) 74%);
animation:hero-orb-float 11s ease-in-out infinite reverse
}

.kicker{display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:var(--text)}
.chip{
display:inline-flex;
gap:8px;
align-items:center;
padding:8px 12px;
border-radius:999px;
border:1px solid rgba(237,244,255,.20);
background:rgba(19,45,36,.42);
font-size:13px
}

.grid2{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:stretch}
h1{
margin:14px 0 10px;
font-family:"Sora","Manrope",ui-sans-serif,system-ui;
font-size:44px;
line-height:1.1;
letter-spacing:-.02em;
text-wrap:balance
}
.hero h1{
background:linear-gradient(100deg, #ffffff 0%, #d9fce7 42%, #ffdca3 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-shadow:0 8px 26px rgba(0,0,0,.28)
}
.lead{margin:0 0 18px;color:var(--muted);font-size:16px;line-height:1.65;max-width:62ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 16px;
border-radius:999px;
border:1px solid rgba(73,108,142,.62);
background:rgba(19,45,36,.65);
color:var(--text);
font-weight:800;
font-size:14px;
transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease
}
.button:hover{
transform:translateY(-2px);
background:rgba(19,45,36,.88);
border-color:rgba(73,108,142,.82);
box-shadow:0 14px 28px rgba(0,0,0,.22)
}
.button.primary{
border:none;
background:linear-gradient(100deg,var(--brand1),var(--brand2));
box-shadow:0 16px 40px rgba(31,138,91,.28)
}
.button.primary:hover{box-shadow:0 22px 44px rgba(31,138,91,.32)}

.panel{
border:1px solid rgba(237,244,255,.14);
background:linear-gradient(170deg, rgba(19,45,36,.76), rgba(15,34,28,.62));
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:16px;
transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease
}
.panel:hover{
transform:translateY(-4px);
border-color:rgba(242,159,5,.5);
box-shadow:0 20px 40px rgba(0,0,0,.30)
}
.panel h3{margin:4px 0 10px;font-size:15px;color:var(--text)}
.small{font-size:13px;color:var(--muted);line-height:1.6}
.list{margin:0;padding-left:18px}
.list li{margin:6px 0;color:var(--text)}

.section{padding:42px 0}
.section h2{
margin:0 0 10px;
font-family:"Sora","Manrope",ui-sans-serif,system-ui;
font-size:28px;
letter-spacing:-.01em;
text-wrap:balance
}
.section p{margin:0;color:var(--muted);line-height:1.7}

.cards{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
border:1px solid var(--line);
background:linear-gradient(180deg, rgba(19,45,36,.65), rgba(14,31,26,.72));
border-radius:var(--radius);
overflow:hidden;
box-shadow:0 12px 34px rgba(0,0,0,.22);
transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease
}
.card:hover{
transform:translateY(-6px);
border-color:rgba(31,138,91,.62);
box-shadow:0 18px 34px rgba(0,0,0,.30)
}
.card img{
width:100%;
height:170px;
object-fit:cover;
display:block;
background:#0a132a;
transition:transform .45s ease,filter .35s ease
}
.card:hover img{transform:scale(1.05);filter:saturate(1.08) contrast(1.05)}
.card .pad{padding:14px}
.card h3{margin:0 0 8px;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.notice{
border:1px dashed rgba(237,244,255,.28);
background:linear-gradient(160deg, rgba(8,18,15,.56), rgba(15,34,28,.46));
border-radius:var(--radius);
padding:14px;
color:var(--text)
}

.gallery{margin-top:16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.gallery img{
width:100%;
height:200px;
object-fit:cover;
border-radius:var(--radius);
border:1px solid var(--line);
background:#0a132a;
transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease
}
.gallery img:hover{
transform:translateY(-4px) scale(1.02);
border-color:rgba(255,179,71,.65);
box-shadow:0 16px 28px rgba(0,0,0,.3)
}

.footer{border-top:1px solid var(--line);margin-top:40px;padding:22px 0;color:var(--muted);font-size:13px}
.footer .row{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.hr{height:1px;background:var(--line);margin:18px 0}

.form{display:grid;gap:10px}
.input,textarea{
width:100%;
padding:12px 12px;
border-radius:14px;
border:1px solid var(--line);
background:rgba(6,12,18,.45);
color:var(--text);
outline:none;
font-size:14px;
transition:border-color .2s ease,box-shadow .2s ease,background .2s ease
}
.input:focus,textarea:focus{
border-color:rgba(31,138,91,.72);
box-shadow:0 0 0 4px rgba(31,138,91,.14);
background:rgba(6,12,18,.72)
}
textarea{min-height:120px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.note{font-size:12px;color:var(--muted)}

.flow-wrap{overflow:hidden}
.flow-chart{
margin-top:8px;
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:12px;
align-items:stretch
}
.flow-step{
position:relative;
padding:14px;
border-radius:14px;
border:1px solid var(--line);
background:linear-gradient(170deg, rgba(19,45,36,.8), rgba(14,31,26,.64));
box-shadow:0 8px 20px rgba(0,0,0,.18)
}
.flow-step:not(:last-child)::after{
content:"";
position:absolute;
right:-10px;
top:50%;
width:16px;
height:16px;
border-top:2px solid rgba(242,159,5,.7);
border-right:2px solid rgba(242,159,5,.7);
transform:translateY(-50%) rotate(45deg);
z-index:3
}
.flow-index{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:38px;
height:26px;
padding:0 10px;
border-radius:999px;
font-size:12px;
font-weight:800;
letter-spacing:.04em;
color:#ffffff;
background:linear-gradient(100deg,var(--brand1),var(--brand2));
box-shadow:0 8px 20px rgba(31,138,91,.25)
}
.flow-step h4{
margin:10px 0 6px;
font-size:14px;
font-weight:800;
line-height:1.3;
color:var(--text)
}
.flow-step p{
margin:0;
font-size:12px;
line-height:1.55;
color:var(--muted)
}

.pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
border:1px solid rgba(73,108,142,.6);
background:rgba(19,45,36,.58);
color:var(--text);
font-size:13px;
transition:transform .2s ease,border-color .2s ease
}
.pill:hover{transform:translateY(-2px);border-color:rgba(255,179,71,.75)}

.reveal{
opacity:0;
transform:translateY(28px) scale(.98);
transition:opacity .7s cubic-bezier(.19,1,.22,1),transform .7s cubic-bezier(.19,1,.22,1)
}
.reveal.is-visible{opacity:1;transform:translateY(0) scale(1)}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}

body[data-theme="light"]{
background:radial-gradient(1000px 600px at 15% -10%, rgba(31,138,91,.12), transparent 55%),
radial-gradient(900px 700px at 100% 5%, rgba(206,133,0,.12), transparent 60%),
linear-gradient(165deg,var(--bg0) 0%,var(--bg1) 52%,#f8fcf9 100%)
}
body[data-theme="light"]::before{
background:radial-gradient(circle, rgba(31,138,91,.18) 0%, transparent 70%)
}
body[data-theme="light"]::after{
background:radial-gradient(circle, rgba(206,133,0,.16) 0%, transparent 70%)
}
body[data-theme="light"] .topbar{
background:rgba(247,252,248,.82);
border-bottom-color:rgba(61,107,82,.24)
}
body[data-theme="light"] .topbar.is-scrolled{
background:rgba(244,250,246,.96);
border-color:rgba(61,107,82,.34);
box-shadow:0 8px 22px rgba(24,55,42,.12)
}
body[data-theme="light"] .menu a:hover,
body[data-theme="light"] .menu a[aria-current="page"]{
background:rgba(225,239,230,.85);
border-color:rgba(61,107,82,.34)
}
body[data-theme="light"] .theme-toggle{
border-color:rgba(61,107,82,.34);
background:rgba(225,239,230,.85)
}
body[data-theme="light"] .theme-toggle:hover{
background:rgba(214,232,221,.95)
}
body[data-theme="light"] .menu-toggle{
	border-color:rgba(61,107,82,.34);
	background:rgba(225,239,230,.85)
}
body[data-theme="light"] .menu-toggle:hover{background:rgba(214,232,221,.95)}
body[data-theme="light"] .hero::before{opacity:.9}
body[data-theme="light"] .hero::after{
background:
radial-gradient(70% 90% at 12% 20%, rgba(31,138,91,.16), transparent 68%),
radial-gradient(56% 74% at 88% 26%, rgba(206,133,0,.14), transparent 66%),
linear-gradient(180deg, rgba(244,250,246,.88) 0%, rgba(244,250,246,.6) 40%, rgba(244,250,246,.9) 100%)
}
body[data-theme="light"] .hero .container::before{
background:radial-gradient(circle, rgba(206,133,0,.18) 0%, rgba(206,133,0,.03) 72%)
}
body[data-theme="light"] .hero .container::after{
background:radial-gradient(circle, rgba(31,138,91,.20) 0%, rgba(31,138,91,.03) 72%)
}
body[data-theme="light"] .hero h1{
background:linear-gradient(100deg, #174a36 0%, #1f8a5b 45%, #b36800 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-shadow:none
}
body[data-theme="light"] .kicker{color:rgba(31,58,46,.92)}
body[data-theme="light"] .chip{
border-color:rgba(61,107,82,.28);
background:rgba(237,246,240,.9)
}
body[data-theme="light"] .button{
border-color:rgba(61,107,82,.34);
background:rgba(233,243,237,.95)
}
body[data-theme="light"] .button:hover{background:#fff}
body[data-theme="light"] .panel{
border-color:rgba(61,107,82,.2);
background:linear-gradient(170deg, #f8fcf9, #eff7f2)
}
body[data-theme="light"] .card{
border-color:rgba(61,107,82,.2);
background:linear-gradient(180deg, #f8fcf9, #edf6f0)
}
body[data-theme="light"] .notice{
border-color:rgba(61,107,82,.36);
background:linear-gradient(160deg, #f8fcf9, #edf6f0)
}
body[data-theme="light"] .input,
body[data-theme="light"] textarea{
background:#fff;
border-color:rgba(61,107,82,.26)
}
body[data-theme="light"] .input:focus,
body[data-theme="light"] textarea:focus{
background:#fff;
border-color:rgba(31,138,91,.55);
box-shadow:0 0 0 4px rgba(31,138,91,.12)
}
body[data-theme="light"] .pill{
border-color:rgba(61,107,82,.3);
background:rgba(237,246,240,.9)
}
body[data-theme="light"] .flow-step{
border-color:rgba(61,107,82,.22);
background:linear-gradient(170deg, #f8fcf9, #edf6f0)
}
body[data-theme="light"] .flow-step:not(:last-child)::after{
border-top-color:rgba(31,138,91,.58);
border-right-color:rgba(31,138,91,.58)
}

@media (max-width:920px){
.grid2{grid-template-columns:1fr}
h1{font-size:34px}
.cards{grid-template-columns:1fr}
.split{grid-template-columns:1fr}
.gallery{grid-template-columns:1fr}
.flow-chart{grid-template-columns:1fr}
.flow-step:not(:last-child)::after{
right:50%;
top:auto;
bottom:-10px;
transform:translateX(50%) rotate(135deg)
}
.nav{
align-items:center;
justify-content:space-between;
gap:10px;
padding:12px 0;
flex-wrap:wrap
}
.brand{display:flex;justify-content:flex-start;flex:1 1 auto}
.brand img{height:46px}
.menu-toggle{display:inline-flex}
.menu{
display:none;
grid-template-columns:1fr;
gap:10px;
width:100%;
padding-top:10px;
border-top:1px solid var(--line)
}
.menu.is-open{display:grid}
.menu a,
.theme-toggle{
display:flex;
align-items:center;
justify-content:flex-start;
width:100%;
min-height:44px;
font-size:15px;
padding:10px 12px;
text-align:left
}
.menu a::after{display:none}
}

@media (max-width:560px){
.container{padding:0 14px}
.brand img{height:42px}
.menu-toggle{padding:8px 11px;font-size:13px}
h1{font-size:30px}
.section{padding:34px 0}
.hero{padding:56px 0 24px}
.lead{font-size:15px;line-height:1.6}
.button,.theme-toggle{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.reveal{opacity:1;transform:none}
}

@keyframes hero-pan{
0%{transform:scale(1.04) translate3d(-1.5%,0,0)}
100%{transform:scale(1.10) translate3d(1.2%,1.4%,0)}
}

@keyframes hero-color-shift{
0%{filter:saturate(1) brightness(1)}
100%{filter:saturate(1.1) brightness(1.06)}
}

@keyframes hero-orb-float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}