:root{
--space-4xs: clamp(0.33rem,calc(-0.03vw + 0.33rem),0.31rem);
--space-3xs: clamp(0.41rem,calc(0.04vw + 0.40rem),0.44rem);
--space-2xs: clamp(0.51rem,calc(0.16vw + 0.48rem),0.62rem);
--space-xs: clamp(0.64rem,calc(0.35vw + 0.57rem),0.88rem);
--space-s: clamp(0.80rem,calc(0.65vw + 0.67rem),1.24rem);
--space-m: clamp(1.00rem,calc(1.11vw + 0.78rem),1.75rem);
--space-l: clamp(1.25rem,calc(1.81vw + 0.89rem),2.47rem);
--space-xl: clamp(1.56rem,calc(2.87vw + 0.99rem),3.50rem);
--space-2xl: clamp(1.95rem,calc(4.44vw + 1.07rem),4.95rem);
--space-3xl: clamp(2.44rem,calc(6.75vw + 1.09rem),7.00rem);
--space-4xl: clamp(3.05rem,calc(10.13vw + 1.02rem),9.89rem);
--text-xs: clamp(0.79rem,calc(-0.23vw + 0.84rem),0.63rem);
--text-s: clamp(0.89rem,calc(-0.07vw + 0.90rem),0.84rem);
--text-m: clamp(1.00rem,calc(0.19vw + 0.96rem),1.13rem);
--text-l: clamp(1.13rem,calc(0.55vw + 1.01rem),1.50rem);
--text-xl: clamp(1.27rem,calc(1.09vw + 1.05rem),2.00rem);
--text-2xl: clamp(1.42rem,calc(1.84vw + 1.06rem),2.66rem);
--text-3xl: clamp(1.60rem,calc(2.89vw + 1.02rem),3.55rem);
--text-4xl: clamp(1.80rem,calc(4.34vw + 0.93rem),4.74rem);
--radius-xs: clamp(0.25rem,calc(0vw + 0.25rem),0.25rem);
--radius-s: clamp(0.38rem,calc(-0.19vw + 0.54rem),0.50rem);
--radius-m: clamp(0.63rem,calc(-0.19vw + 0.79rem),0.75rem);
--radius-l: clamp(1.00rem,calc(-0.37vw + 1.32rem),1.25rem);
--radius-xl: clamp(1.63rem,calc(-0.56vw + 2.11rem),2.00rem);
--radius-full: 999rem;
--hero-title-size: var(--text-4xl);
--post-title-size: var(--text-3xl);
--content-title-size: var(--text-2xl);
--nav-link-size: var(--text-s);
--header-space: var(--space-s);
--btn-space: var(--space-xs) var(--space-m);
--card-space: var(--space-m);
--footer-space: var(--space-l) var(--space-m);
--accent: #006241;
--accent-secondary: #050e08;
--accent-bright: #00875a;
--accent-text: #00c47a;
--accent-dim: rgba(0,98,65,0.28);
--accent-glow: rgba(0,98,65,0.45);
--accent-tag-bg: rgba(75,96,67,0.30);
--accent-tag-text: #8ec98a;
--accent-tag-border:rgba(75,96,67,0.45);
--radius-sm: var(--radius-m);
--radius-md: var(--radius-l);
--radius-lg: var(--radius-xl);
--radius-2xl: 2rem;
--radius-pill: var(--radius-full);
--glass-bg: rgba(20,36,26,0.55);
--glass-bg-card: rgba(14,28,20,0.50);
--glass-bg-tint: #050e08f2;
--glass-border: rgba(255,255,255,0.18);
--glass-highlight: rgba(255,255,255,0.28);
--glass-shadow: rgba(0,0,0,0.55);
--glass-inner: rgba(0,98,65,0.08);
--glass-blur: saturate(200%) blur(32px);
--bg: #050e08;
--bg-mesh-1:rgba(0,98,65,0.18);
--bg-mesh-2:rgba(75,96,67,0.12);
--text-primary: rgba(255,255,255,0.92);
--text-secondary: rgba(255,255,255,0.52);
--text-tertiary: rgba(255,255,255,0.28);
--svg-title: #c8e6d4;
--border: rgba(255,255,255,0.10);
--border-strong: rgba(255,255,255,0.20);
--ease-spring: cubic-bezier(0.34,1.56,0.64,1);
--ease-smooth: cubic-bezier(0.4,0,0.2,1);
--duration: 220ms;
--shadow-primary: rgba(0,0,0,0.35);
--shadow-xs: 0 1px 2px var(--shadow-primary);
--shadow-s: 0 1.5px 3px var(--shadow-primary);
--shadow-m: 0 2px 6px var(--shadow-primary);
--shadow-l: 0 3px 12px var(--shadow-primary);
--shadow-xl: 0 6px 48px var(--shadow-primary);
color-scheme: dark;
}
[data-theme="light"]{
--accent-text: #004d32;
--accent-bright: #005538;
--accent-dim: rgba(0,98,65,0.14);
--accent-glow: rgba(0,98,65,0.28);
--accent-tag-bg: rgba(75,96,67,0.14);
--accent-tag-text: #3a5c36;
--accent-tag-border: rgba(75,96,67,0.30);
--glass-bg: rgba(255,255,255,0.62);
--glass-bg-card: rgba(255,255,255,0.52);
--glass-bg-tint: #c8e6d4f2;
--glass-border: rgba(255,255,255,0.92);
--glass-highlight: rgba(255,255,255,1);
--glass-shadow: rgba(0,0,0,0.10);
--glass-inner: rgba(0,98,65,0.04);
--glass-blur: saturate(220%) blur(32px);
--bg: #c8e6d4;
--bg-mesh-1:rgba(0,98,65,0.16);
--bg-mesh-2:rgba(75,96,67,0.10);
--text-primary: rgba(0,0,0,0.88);
--text-secondary: rgba(0,0,0,0.52);
--text-tertiary: rgba(0,0,0,0.30);
--svg-title: #050e08;
--border: rgba(0,0,0,0.08);
--border-strong: rgba(0,0,0,0.15);
--shadow-primary: rgba(0,0,0,0.12);
color-scheme: light;
}
@media (prefers-color-scheme: light){
:root:not([data-theme="dark"]){
--accent-text: #004d32;
--accent-bright: #005538;
--accent-dim: rgba(0,98,65,0.14);
--accent-glow: rgba(0,98,65,0.28);
--accent-tag-bg: rgba(75,96,67,0.14);
--accent-tag-text: #3a5c36;
--accent-tag-border: rgba(75,96,67,0.30);
--glass-bg: rgba(255,255,255,0.62);
--glass-bg-card: rgba(255,255,255,0.52);
--glass-border: rgba(255,255,255,0.92);
--glass-highlight: rgba(255,255,255,1);
--glass-shadow: rgba(0,0,0,0.10);
--glass-inner: rgba(0,98,65,0.04);
--glass-blur: saturate(220%) blur(32px);
--bg: #c8e6d4;
--bg-mesh-1:rgba(0,98,65,0.16);
--bg-mesh-2:rgba(75,96,67,0.10);
--text-primary: rgba(0,0,0,0.88);
--text-secondary: rgba(0,0,0,0.52);
--text-tertiary: rgba(0,0,0,0.30);
--svg-title: #050e08;
--border: rgba(0,0,0,0.08);
--border-strong: rgba(0,0,0,0.15);
--shadow-primary: rgba(0,0,0,0.12);
color-scheme: light;
}
}
h1{font-size: var(--text-4xl);line-height: 1.1}
h2{font-size: var(--text-3xl);line-height: 1.2}
h3{font-size: var(--text-2xl);line-height: 1.3}
h4{font-size: var(--text-xl);line-height: 1.3}
h5{font-size: var(--text-l);line-height: 1.3}
h6{font-size: var(--text-m);line-height: 1.4}
*,
*::before,
*::after{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body{
font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
"Helvetica Neue",Arial,sans-serif;
font-size: var(--text-m);
line-height: 1.6;
background-color: var(--bg);
background-image:
radial-gradient(ellipse 80% 50% at 20% 10%,var(--bg-mesh-1),transparent),
radial-gradient(ellipse 60% 40% at 80% 80%,var(--bg-mesh-2),transparent);
color: var(--text-primary);
min-height: 100dvh;
transition:
background-color var(--duration) var(--ease-smooth),
color var(--duration) var(--ease-smooth);
}
a{
color: var(--accent-text);
text-decoration: none;
transition: opacity var(--duration) var(--ease-smooth);
}
a:hover{opacity: 0.75}
img,
svg{
display: block;
max-width: 100%;
}
.glass{
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow:
0 1px 0 0 var(--glass-highlight) inset,
0 0 0 1px var(--glass-inner) inset,
0 8px 32px var(--glass-shadow);
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--header-space) var(--space-l);
position: sticky;
top: 0;
z-index: 100;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-bottom: 1px solid var(--glass-border);
box-shadow:
0 1px 0 0 var(--glass-highlight) inset,
0 0 0 1px var(--glass-inner) inset,
0 4px 32px var(--glass-shadow);
transition:
background var(--duration) var(--ease-smooth),
border-color var(--duration) var(--ease-smooth);
}
.nav-logo{
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-l);
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.4px;
flex-shrink: 0;
position: relative;
}
.nav-logo:hover{opacity: 0.8}
.nav-logo svg{
height: 40px;
width: auto;
}
.nav-toggle{display: none}
.nav-hamburger{
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: var(--space-xs);
z-index: 101;
position: relative;
background: none;
border: none;
}
.nav-hamburger span{
display: block;
width: 24px;
height: 2px;
background-color: var(--text-primary);
border-radius: 2px;
transition: all var(--duration) var(--ease-spring);
}
.nav-links{
display: flex;
align-items: center;
gap: var(--space-l);
}
.nav-links > a{
color: var(--text-secondary);
font-size: var(--nav-link-size);
font-weight: 500;
transition: color var(--duration) var(--ease-smooth);
}
.nav-links > a:hover,
.nav-links > a[aria-current="page"]{
color: var(--text-primary);
opacity: 1;
}
.dropdown-menu a[aria-current="page"]{
color: var(--accent-text);
font-weight: 600;
background: var(--accent-dim);
}
.dropdown-label[data-active="true"]{
color: var(--accent-text);
font-weight: 600;
}
.nav-dropdown{position: relative}
.dropdown-toggle{display: none}
.dropdown-label{
display: flex;
align-items: center;
gap: var(--space-3xs);
color: var(--text-secondary);
font-size: var(--nav-link-size);
font-weight: 500;
cursor: pointer;
user-select: none;
transition: color var(--duration) var(--ease-smooth);
}
.dropdown-label svg{
transition: transform var(--duration) var(--ease-spring);
}
.dropdown-label:hover{color: var(--text-primary)}
.dropdown-menu{
position: absolute;
top: calc(100% + var(--space-s));
left: 50%;
transform: translateX(-50%) translateY(-8px);
min-width: 200px;
background: var(--glass-bg-tint);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
box-shadow:
0 1px 0 0 var(--glass-highlight) inset,
0 0 0 1px var(--glass-inner) inset,
0 12px 48px var(--glass-shadow);
padding: var(--space-2xs);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity var(--duration) var(--ease-smooth),
transform var(--duration) var(--ease-spring),
visibility var(--duration);
}
.dropdown-menu a{
display: block;
padding: var(--space-xs) var(--space-s);
color: var(--text-secondary);
font-size: var(--text-s);
font-weight: 500;
border-radius: var(--radius-sm);
transition:
background var(--duration) var(--ease-smooth),
color var(--duration) var(--ease-smooth);
}
.dropdown-menu a:hover{
background: var(--accent-dim);
color: var(--text-primary);
opacity: 1;
}
.dropdown-menu .dropdown-all{
margin-top: var(--space-2xs);
padding-top: var(--space-xs);
border-top: 1px solid var(--border);
color: var(--accent-text);
font-weight: 600;
}
.dropdown-toggle:checked ~ .dropdown-menu{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.dropdown-toggle:checked ~ .dropdown-label svg{
transform: rotate(180deg);
}
.theme-toggle{
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-pill);
border: 1px solid var(--glass-border);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
color: var(--text-secondary);
cursor: pointer;
font-size: var(--text-m);
line-height: 1;
flex-shrink: 0;
will-change: transform;
transition:
background var(--duration) var(--ease-smooth),
border-color var(--duration) var(--ease-smooth),
transform var(--duration) var(--ease-spring);
}
.theme-toggle:hover{
background: var(--accent-dim);
border-color: var(--accent);
color: var(--accent-text);
transform: scale(1.08);
}
.nav-backdrop{display: none}
@media (max-width: 768px){
.nav-hamburger{display: flex}
.nav-links{
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: min(75%,320px);
background: var(--bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-left: 1px solid var(--glass-border);
box-shadow:
0 1px 0 0 var(--glass-highlight) inset,
0 0 0 1px var(--glass-inner) inset,
-8px 0 40px var(--glass-shadow);
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
padding-top: 5rem;
gap: 0;
overflow-y: auto;
z-index: 99;
transition: right 320ms var(--ease-spring);
}
.nav-links > a{
width: 100%;
padding: var(--space-m) var(--space-xl);
text-align: left;
font-size: var(--text-m);
color: var(--text-primary);
border-bottom: 1px solid var(--border);
}
.nav-links > a:hover{
background: var(--accent-dim);
color: var(--accent-text);
}
.nav-dropdown{
width: 100%;
border-bottom: 1px solid var(--border);
}
.dropdown-label{
width: 100%;
padding: var(--space-m) var(--space-xl);
font-size: var(--text-m);
color: var(--text-primary);
justify-content: space-between;
}
.dropdown-menu{
position: static;
left: 0;
transform: none;
opacity: 0;
visibility: hidden;
max-height: 0;
overflow: hidden;
background: rgba(0,0,0,0.2);
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
width: 100%;
min-width: auto;
transition:
max-height 320ms var(--ease-spring),
opacity var(--duration) var(--ease-smooth),
padding var(--duration) var(--ease-smooth);
}
.dropdown-toggle:checked ~ .dropdown-menu{
opacity: 1;
visibility: visible;
max-height: 400px;
padding: var(--space-2xs) 0;
transform: none;
}
.dropdown-menu a{
font-size: var(--text-s);
border-radius: 0;
padding: var(--space-xs) calc(var(--space-xl) + var(--space-2xs));
}
.dropdown-menu .dropdown-all{
border-top: 1px solid rgba(255,255,255,0.05);
margin-top: var(--space-2xs);
padding-top: var(--space-s);
padding-left: calc(var(--space-xl) + var(--space-2xs));
}
.theme-toggle{
margin: var(--space-l) var(--space-xl);
align-self: flex-start;
width: 44px;
height: 44px;
}
.nav-toggle:checked ~ .nav-links{right: 0}
.nav-toggle:checked ~ .nav-hamburger span:nth-child(1){
transform: rotate(45deg) translate(6px,4px);
}
.nav-toggle:checked ~ .nav-hamburger span:nth-child(2){
opacity: 0;
transform: translateX(-10px);
}
.nav-toggle:checked ~ .nav-hamburger span:nth-child(3){
transform: rotate(-45deg) translate(6px,-4px);
}
.nav-backdrop{
display: block;
position: fixed;
inset: 0;
background: transparent;
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
z-index: 98;
opacity: 0;
pointer-events: none;
transition:
opacity 220ms var(--ease-smooth),
backdrop-filter 220ms var(--ease-smooth),
background 220ms var(--ease-smooth);
}
.nav-toggle:checked ~ .nav-backdrop{
opacity: 1;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
pointer-events: auto;
}
}
@media (max-width: 1024px) and (min-width: 769px){
.nav-links{gap: var(--space-m)}
.nav-links > a,
.dropdown-label{font-size: var(--text-s)}
}
@media (min-width: 769px){
nav{
padding-top: var(--space-xs);
padding-bottom: var(--space-xs);
}
.nav-logo svg{height: 54px}
}
.btn{
display: inline-flex;
align-items: center;
gap: var(--space-3xs);
background: linear-gradient(160deg,var(--accent-bright),var(--accent));
color: #fff;
padding: var(--btn-space);
border-radius: var(--radius-pill);
font-weight: 600;
font-size: var(--text-s);
letter-spacing: -0.1px;
white-space: nowrap;
will-change: transform;
transition:
transform var(--duration) var(--ease-spring),
box-shadow var(--duration) var(--ease-smooth);
box-shadow:
0 1px 0 rgba(255,255,255,0.2) inset,
0 2px 16px var(--accent-glow);
}
.btn:hover{
transform: scale(1.04) translateY(-1px);
box-shadow:
0 1px 0 rgba(255,255,255,0.2) inset,
0 8px 28px var(--accent-glow);
opacity: 1;
}
.btn:active{transform: scale(0.97)}
.btn:disabled{
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.btn-sm{
padding: var(--space-2xs) var(--space-s);
font-size: var(--text-s);
border-radius: var(--radius-pill);
}
.btn-outline{
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow:
0 1px 0 0 var(--glass-highlight) inset,
0 0 0 1px var(--glass-inner) inset,
0 2px 12px var(--glass-shadow);
color: var(--text-primary);
margin-left: var(--space-2xs);
}
.btn-outline:hover{
background: var(--accent-dim);
border-color: rgba(0,98,65,0.5);
box-shadow:
0 1px 0 0 var(--glass-highlight) inset,
0 4px 20px var(--accent-glow);
}
.btn-appstore{
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
background: var(--text-primary);
color: var(--bg);
padding: var(--space-xs) var(--space-l);
border-radius: var(--radius-pill);
font-weight: 600;
font-size: var(--text-s);
letter-spacing: -0.1px;
margin-top: var(--space-m);
white-space: nowrap;
will-change: transform;
transition:
transform var(--duration) var(--ease-spring),
opacity var(--duration) var(--ease-smooth);
}
.btn-appstore:hover{
opacity: 0.85;
transform: scale(1.03) translateY(-1px);
}
.app-store-link{
display: inline-block;
margin-top: var(--space-m);
}
.contact-wrap{
max-width: 640px;
margin: 0 auto;
padding: var(--space-2xl) var(--space-l);
}
.contact-card{
background: var(--glass-bg-card);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
padding: var(--space-xl);
box-shadow:
0 1px 0 0 var(--glass-highlight) inset,
0 0 0 1px var(--glass-inner) inset,
0 8px 40px var(--glass-shadow);
}
.form-group{margin-bottom: var(--space-m)}
.form-group label{
display: block;
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-secondary);
letter-spacing: 0.02em;
margin-bottom: var(--space-3xs);
}
.form-group input,
.form-group select,
.form-group textarea{
width: 100%;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: inherit;
font-size: var(--text-m);
padding: var(--space-xs) var(--space-s);
outline: none;
-webkit-appearance: none;
appearance: none;
transition:
border-color var(--duration) var(--ease-smooth),
box-shadow var(--duration) var(--ease-smooth);
}
.form-group select{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300c47a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-s) center;
padding-right: var(--space-xl);
cursor: pointer;
}
.form-group textarea{
resize: vertical;
min-height: 130px;
line-height: 1.6;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-group input::placeholder,
.form-group textarea::placeholder{color: var(--text-tertiary)}
.form-actions{
margin-top: var(--space-l);
display: flex;
justify-content: flex-end;
}
.form-status{
display: none;
margin-top: var(--space-s);
padding: var(--space-xs) var(--space-s);
font-size: var(--text-xs);
border-radius: var(--radius-md);
}
.form-status.success{
display: block;
background: rgba(0,98,65,0.15);
border: 1px solid rgba(0,98,65,0.35);
color: var(--accent-tag-text);
}
.form-status.error{
display: block;
background: rgba(180,40,40,0.12);
border: 1px solid rgba(180,40,40,0.30);
color: #f28b82;
}
.section{
padding: var(--space-2xl) var(--space-l);
max-width: 1000px;
margin: 0 auto;
}
.section-label{
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-text);
margin-bottom: var(--space-2xs);
}
.section h2{
font-size: var(--text-2xl);
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.5px;
margin-bottom: var(--space-3xs);
}
.section-sub{
color: var(--text-secondary);
font-size: var(--text-m);
margin-bottom: var(--space-2xl);
}
.section-cta{
text-align: center;
margin-top: var(--space-l);
}
.page-header{
padding: var(--space-2xl) var(--space-l) var(--space-l);
max-width: 1000px;
margin: 0 auto;
}
.page-header h1{
font-size: var(--post-title-size);
font-weight: 800;
color: var(--text-primary);
letter-spacing: -1px;
margin-bottom: var(--space-2xs);
}
.page-header p{
color: var(--text-secondary);
font-size: var(--text-m);
}
.page-header img{
border-radius: var(--radius-lg);
margin-bottom: var(--space-m);
}
.hero{
text-align: center;
padding: var(--space-4xl) var(--space-l) var(--space-3xl);
max-width: 760px;
margin: 0 auto;
}
.hero-badge{
display: inline-flex;
align-items: center;
gap: var(--space-3xs);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow:
0 1px 0 0 var(--glass-highlight) inset,
0 0 0 1px var(--glass-inner) inset,
0 4px 16px var(--glass-shadow);
color: var(--accent-text);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: var(--space-3xs) var(--space-s);
border-radius: var(--radius-pill);
margin-bottom: var(--space-l);
}
.hero h1{
font-size: var(--hero-title-size);
font-weight: 800;
line-height: 1.1;
letter-spacing: -2px;
color: var(--text-primary);
margin-bottom: var(--space-m);
}
.hero h1 span{
color: var(--accent-text);
text-shadow: 0 0 48px var(--accent-glow);
}
.hero p{
font-size: var(--text-m);
color: var(--text-secondary);
max-width: 520px;
margin: 0 auto var(--space-xl);
line-height: 1.65;
}
.hero-actions{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-xs);
}
.cards{
display: grid;
grid-template-columns: repeat(auto-fill,minmax(min(100%,260px),1fr));
gap: var(--space-m);
}
.card{
background: var(--glass-bg-card);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: var(--card-space);
box-shadow:
0 1px 0 0 var(--glass-highlight) inset,
0 0 0 1px var(--glass-inner) inset,
0 8px 40px var(--glass-shadow);
will-change: transform;
transition:
transform var(--duration) var(--ease-spring),
box-shadow var(--duration) var(--ease-smooth),
border-color var(--duration) var(--ease-smooth);
}
.card:hover{
transform: translateY(-5px) scale(1.015);
border-color: rgba(0,98,65,0.45);
box-shadow:
0 1px 0 0 var(--glass-highlight) inset,
0 0 0 1px var(--glass-inner) inset,
0 20px 56px var(--glass-shadow),
0 0 32px var(--accent-glow);
}
.card-icon{
height: 60px;
width: 60px;
}
.card h2,
.card h3{
font-size: var(--text-m);
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.2px;
margin-bottom: var(--space-3xs);
}
.card p{
font-size: var(--text-s);
color: var(--text-secondary);
line-height: 1.55;
margin-bottom: var(--space-s);
}
.card-meta{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2xs);
margin-top: auto;
}
.app-grid{
display: grid;
grid-template-columns: repeat(auto-fill,minmax(min(100%,260px),1fr));
gap: var(--space-m);
padding: 0 var(--space-l);
max-width: 1000px;
margin: 0 auto var(--space-2xl);
}
.app-grid .card{
display: flex;
flex-direction: column;
min-height: 200px;
}
.app-grid .card .card-icon{margin-bottom: var(--space-s)}
.app-grid .card h2{margin-bottom: var(--space-s)}
.tag,
.card-tag{
display: inline-flex;
align-items: center;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--accent-tag-text);
background: var(--accent-tag-bg);
border: 1px solid var(--accent-tag-border);
padding: var(--space-4xs) var(--space-xs);
border-radius: var(--radius-pill);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.card-tag{margin-top: var(--space-xs)}
.card-meta .tag{margin-top: 0}
.content{
max-width: 720px;
margin: 0 auto;
padding: var(--space-2xl) var(--space-l);
line-height: 1.75;
}
.content h1{
font-size: var(--content-title-size);
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.8px;
margin-bottom: var(--space-3xs);
}
.content .updated{
color: var(--text-tertiary);
font-size: var(--text-xs);
margin-bottom: var(--space-2xl);
}
.content h2{
font-size: var(--text-l);
font-weight: 700;
color: var(--text-primary);
margin: var(--space-xl) 0 var(--space-2xs);
}
.content h3{
font-size: var(--text-m);
font-weight: 700;
color: var(--text-primary);
margin: var(--space-l) 0 var(--space-3xs);
}
.content p{
color: var(--text-secondary);
margin-bottom: var(--space-s);
}
.content ul{
color: var(--text-secondary);
padding-left: var(--space-l);
margin-bottom: var(--space-s);
}
.content ul li{margin-bottom: var(--space-3xs)}
.content strong{
color: var(--text-primary);
font-weight: 600;
}
footer{
border-top: 1px solid var(--border);
text-align: center;
padding: var(--footer-space);
color: var(--text-tertiary);
font-size: var(--text-xs);
margin-top: var(--space-2xl);
}
footer a{color: var(--accent-text)}
@media (max-width: 480px){
.btn-outline{margin-left: 0}
.hero-actions{
flex-direction: column;
align-items: stretch;
}
.hero-actions .btn,
.hero-actions .btn-outline{
width: 100%;
justify-content: center;
margin-left: 0;
}
}
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
html{scroll-behavior: auto}
}