:root {
  --bg: #fbf4e9;
  --bg-soft: #fffaf3;
  --surface: rgba(255,255,255,0.72);
  --surface-strong: rgba(255,255,255,0.92);
  --text: #2d2118;
  --muted: #78665b;
  --line: rgba(129,98,79,0.16);
  --accent: #ef8b2c;
  --accent-2: #4f9b63;
  --accent-3: #8a79ce;
  --glow: rgba(239,139,44,0.18);
  --shadow: 0 20px 60px rgba(87,60,35,0.12);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --header-h: 82px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(233,248,235,0.9), transparent 26%),
    radial-gradient(circle at 100% 10%, rgba(255,229,199,0.9), transparent 32%),
    linear-gradient(180deg, #fff8ef 0%, #fbf4e9 100%);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1200px, calc(100vw - 32px)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: rgba(251,244,233,0.75); border-bottom: 1px solid transparent;
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.site-header.scrolled { background: rgba(255,250,243,0.94); border-color: var(--line); box-shadow: 0 12px 34px rgba(72,49,29,0.08); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap: 24px; height:100%; }
.brand { display:flex; align-items:center; gap:14px; min-width:0; }
.brand-mark {
  width: 52px; height: 52px; border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), #f7c07c 48%, #a6dbb5);
  box-shadow: 0 12px 30px rgba(239,139,44,0.25);
  display:grid; place-items:center; font-weight:800; color:#fff; letter-spacing:.08em;
}
.brand-text { min-width: 0; }
.brand-name { font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.brand-sub { color: var(--muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }
.main-nav { display:flex; align-items:center; gap: 24px; }
.main-nav a { color: #5f4d43; font-weight: 600; position: relative; }
.main-nav a::after { content:''; position:absolute; left:0; right:0; bottom:-8px; height:2px; border-radius:999px; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition: transform .35s ease; }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.nav-toggle { display:none; width:46px; height:46px; border:1px solid var(--line); background:#fff7ef; border-radius:16px; }
.nav-toggle span { display:block; width:18px; height:2px; background:#5e4b41; margin:4px auto; border-radius:99px; }
.hero { position: relative; padding: 48px 0 56px; overflow: clip; }
.hero::before {
  content: ''; position:absolute; inset: 18% auto auto -5%; width: 360px; height: 360px; border-radius:50%; background: radial-gradient(circle, rgba(79,155,99,0.18), transparent 64%); filter: blur(10px);
}
.hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center; }
.hero-copy { position: relative; z-index: 1; }
.hero-badges { display:flex; flex-wrap:wrap; gap: 12px; margin-bottom: 18px; }
.pill {
  display:inline-flex; align-items:center; gap:10px; padding: 10px 16px; border:1px solid var(--line); border-radius:999px; background: rgba(255,255,255,0.66); color:#5e4a3f; box-shadow: 0 10px 24px rgba(92,67,40,0.06);
}
.pill-dot { width:10px; height:10px; border-radius:50%; background:linear-gradient(180deg,var(--accent), var(--accent-2)); box-shadow:0 0 0 6px rgba(239,139,44,0.12); }
.hero h1 {
  margin: 0 0 18px; font-family: 'Fraunces', Georgia, serif; font-size: clamp(3rem, 6vw, 5.4rem); line-height: .96; letter-spacing: -.04em;
}
.accent-text { background: linear-gradient(90deg, #d07017, #ee9d43 55%, #529669); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { font-size: 1.16rem; line-height: 1.75; color: var(--muted); max-width: 60ch; }
.cta-row { display:flex; flex-wrap:wrap; gap:16px; margin-top:28px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding: 0 24px; border-radius: 18px; font-weight: 700; transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease; border: 1px solid transparent; position:relative; overflow:hidden;
}
.btn::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,0.35), transparent 40%); opacity:0; transition: opacity .35s ease; }
.btn:hover::before { opacity:1; }
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: linear-gradient(135deg, #ee8b2b, #f3a34d); color: #fff; box-shadow: 0 22px 40px rgba(239,139,44,0.24); }
.btn-secondary { background: rgba(255,255,255,0.65); border-color: var(--line); color: #4d3d34; }
.hero-side {
  position: relative; min-height: 580px; border-radius: var(--radius-xl);
}
.hero-card {
  position:absolute; inset: 0; border-radius: 38px; background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.52)); border:1px solid rgba(150,120,96,0.12); box-shadow: var(--shadow); overflow:hidden;
}
.hero-orbit, .hero-orbit-2 { position:absolute; border-radius:50%; filter: blur(2px); }
.hero-orbit { width: 280px; height: 280px; background: radial-gradient(circle, rgba(79,155,99,.16), transparent 64%); top: -40px; right: -30px; }
.hero-orbit-2 { width: 230px; height: 230px; background: radial-gradient(circle, rgba(239,139,44,.18), transparent 62%); bottom: -30px; left: -20px; }
.stack {
  position:absolute; inset: 0; padding: 28px; display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end;
}
.phone-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.82)); border:1px solid rgba(150,120,96,0.12); border-radius: 28px; padding: 12px; box-shadow: 0 30px 50px rgba(94,70,42,0.10); transform-style: preserve-3d; transition: transform .45s ease;
}
.phone-card img { border-radius: 22px; }
.float-note {
  position:absolute; max-width: 240px; background: rgba(255,255,255,0.9); border:1px solid rgba(150,120,96,0.14); border-radius: 22px; padding: 16px 18px; box-shadow: 0 16px 30px rgba(93,62,37,0.08); backdrop-filter: blur(10px);
}
.note-a { top: 28px; right: 26px; }
.note-b { bottom: 40px; left: 24px; }
.mini-title { font-size: .8rem; letter-spacing: .18em; color:#8b7567; text-transform: uppercase; margin-bottom: 8px; }
.note-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kpi {
  border-radius:18px; background: rgba(251,244,233,0.9); padding: 14px; border:1px solid rgba(150,120,96,0.12);
}
.kpi strong { display:block; font-size:1.6rem; line-height:1; margin-bottom: 8px; }
.section { padding: 28px 0 90px; }
.panel {
  border-radius: 34px; background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.55)); border: 1px solid rgba(150,120,96,0.12); box-shadow: var(--shadow);
}
.grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap: 18px; margin-bottom: 24px; }
.section-kicker { color:#a17149; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; }
.section h2 { margin: 8px 0 0; font-family: 'Fraunces', Georgia, serif; font-size: clamp(2.2rem, 3vw, 3.4rem); letter-spacing: -.04em; line-height: 1.02; }
.section-copy { color: var(--muted); max-width: 58ch; line-height: 1.75; }
.feature-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.feature-card { padding: 24px; min-height: 220px; position:relative; overflow:hidden; }
.feature-card::before { content:''; position:absolute; inset:auto -20% -40% auto; width: 160px; height:160px; border-radius:50%; background: radial-gradient(circle, rgba(239,139,44,0.16), transparent 64%); transition: transform .45s ease; }
.feature-card:hover::before { transform: translate(-12px,-12px) scale(1.04); }
.feature-icon { width: 54px; height: 54px; border-radius: 18px; display:grid; place-items:center; background: #fff8f0; border:1px solid var(--line); margin-bottom: 18px; font-size: 1.4rem; }
.feature-card h3 { margin: 0 0 8px; font-size: 1.22rem; }
.feature-card p { margin:0; color: var(--muted); line-height:1.7; }
.product-band { padding: 34px; overflow:hidden; position:relative; }
.product-band::before { content:''; position:absolute; inset: 15% auto auto -8%; width: 280px; height:280px; border-radius:50%; background: radial-gradient(circle, rgba(79,155,99,0.14), transparent 68%); }
.product-grid { display:grid; grid-template-columns: .82fr 1.18fr; gap: 26px; align-items: center; }
.app-frame { padding: 12px; border-radius: 34px; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.74)); border:1px solid rgba(150,120,96,0.12); }
.app-frame img { border-radius: 24px; }
.chips { display:flex; flex-wrap:wrap; gap: 10px; margin: 18px 0 0; }
.chip { padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,0.9); border:1px solid var(--line); color:#5e4a3f; }
.metrics { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.metric { padding: 20px; border-radius: 24px; background: rgba(255,255,255,0.75); border:1px solid var(--line); }
.metric strong { font-size: 2rem; display:block; margin-bottom: 6px; font-family:'Fraunces', Georgia, serif; }
.service-list { display:grid; gap: 16px; }
.service-item { padding: 20px 22px; display:flex; gap:16px; align-items:flex-start; }
.service-num { flex: 0 0 auto; width: 40px; height:40px; border-radius: 14px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(239,139,44,0.16), rgba(79,155,99,0.16)); font-weight: 700; }
.timeline { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.timeline .step { padding: 24px; min-height: 170px; }
.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stats-card { padding: 22px; text-align:left; }
.stats-card strong { display:block; font-size: 2rem; font-family:'Fraunces', Georgia, serif; margin-bottom: 6px; }
.contact-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: 24px; }
.contact-list { display:grid; gap: 14px; }
.contact-line { display:flex; gap: 14px; align-items:flex-start; padding: 16px 0; border-bottom: 1px solid rgba(150,120,96,0.12); }
.contact-line:last-child { border-bottom: none; }
.contact-line .icon { width: 42px; height: 42px; border-radius: 14px; background:#fff7ef; border:1px solid var(--line); display:grid; place-items:center; }
.form-card { padding: 26px; }
.form-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.input, textarea { width:100%; padding: 16px 18px; border-radius: 16px; border:1px solid rgba(150,120,96,0.18); background: rgba(255,255,255,0.86); font: inherit; color:var(--text); }
textarea { min-height: 140px; resize: vertical; }
.footer { padding: 40px 0; border-top: 1px solid rgba(150,120,96,0.12); background: rgba(255,248,239,0.74); }
.footer-grid { display:grid; grid-template-columns: 1.1fr .8fr .8fr; gap: 26px; }
.footer small, .footer p, .footer a { color: var(--muted); line-height: 1.75; }
.legal-list, .footer-links { display:grid; gap: 10px; }
.page-hero { padding: 34px 0 34px; }
.page-hero .panel { padding: 30px; }
.page-hero h1 { margin: 0 0 12px; font-family:'Fraunces', Georgia, serif; font-size: clamp(2.5rem, 5vw, 4.4rem); line-height:1; }
.page-hero p { margin:0; color: var(--muted); line-height:1.75; max-width: 70ch; }
.article { padding: 26px; }
.article h2 { margin: 26px 0 10px; font-size: 1.22rem; }
.article p, .article li { color: var(--muted); line-height:1.78; }
.article .effective { margin-top: 16px; font-weight: 700; color: #5e4a3f; }
[data-reveal] { opacity:0; transform: translateY(26px) scale(.985); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
[data-reveal].visible { opacity:1; transform:none; }
.parallax { will-change: transform; transition: transform .18s linear; }
.magnetic { transform: translate(var(--mx, 0), var(--my, 0)); }
@media (max-width: 1100px) {
  .hero-grid, .product-grid, .grid-2, .contact-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .timeline, .stats-grid { grid-template-columns: repeat(2,1fr); }
  .hero-side { min-height: 700px; }
}
@media (max-width: 860px) {
  :root { --header-h: 74px; }
  .nav-toggle { display:block; }
  .main-nav {
    position:absolute; top: calc(100% + 8px); left: 16px; right: 16px; padding: 18px; border-radius: 22px;
    background: rgba(255,250,243,0.96); border:1px solid rgba(150,120,96,0.12); box-shadow: var(--shadow);
    display:grid; gap: 14px; transform-origin: top; transform: scaleY(.92); opacity:0; pointer-events:none; transition: .35s ease;
  }
  .main-nav.open { transform: scaleY(1); opacity:1; pointer-events:auto; }
  .hero { padding-top: 24px; }
  .hero-side { min-height: 630px; }
  .stack { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .note-a { right: 20px; top: 20px; }
  .note-b { left: 20px; bottom: 20px; }
  .feature-grid, .timeline, .stats-grid, .footer-grid, .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .container { width: min(100vw - 22px, 1200px); }
  .hero h1 { font-size: 2.7rem; }
  .section h2 { font-size: 2rem; }
  .hero-side { min-height: 540px; }
  .float-note { position:relative; max-width:none; left:auto; right:auto; top:auto; bottom:auto; margin: 12px 16px; }
  .phone-card { padding: 8px; }
  .cta-row { display:grid; }
}