/* ================================================================
   WORKORA — Design System & Stylesheet
   ================================================================ */

/* 1. DESIGN TOKENS */
:root {
  --bg:         #F7F7F2;
  --surface:    #FFFFFF;
  --text:       #18201D;
  --muted:      #66716C;
  --primary:    #174C3C;
  --primary-lt: #1F6B54;
  --primary-dk: #0F3328;
  --accent:     #C8E86B;
  --accent-dk:  #A8CC47;
  --border:     #DDE3DD;
  --border-str: #C5D0C5;
  --orange:     #E57C2D;
  --blue:       #3B82C4;
  --green:      #2E9E68;
  --purple:     #7C6BE3;
  --alert:      #D94F3B;
  --font-h:     'Plus Jakarta Sans', system-ui, sans-serif;
  --font-b:     'Inter', system-ui, sans-serif;
  --nav-h:      68px;
  --container:  1200px;
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-full: 9999px;
  --sh-sm: 0 1px 3px rgba(24,32,29,.06),0 1px 2px rgba(24,32,29,.04);
  --sh-md: 0 4px 12px rgba(24,32,29,.08),0 2px 4px rgba(24,32,29,.04);
  --sh-lg: 0 16px 48px rgba(24,32,29,.10),0 4px 16px rgba(24,32,29,.06);
  --sh-xl: 0 32px 80px rgba(24,32,29,.14),0 8px 24px rgba(24,32,29,.08);
  --t: .2s ease;
  --ts: .4s ease;
}

html[lang="th"] {
  --font-h: 'Sarabun','Plus Jakarta Sans',system-ui,sans-serif;
  --font-b: 'Sarabun','Inter',system-ui,sans-serif;
}

/* 2. RESET */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-b); font-size:1rem; line-height:1.65; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img,svg { display:block; max-width:100%; }
ul,ol { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input { font-family:inherit; }
h1,h2,h3,h4 { font-family:var(--font-h); font-weight:700; line-height:1.18; letter-spacing:-.02em; }

/* 3. LAYOUT */
.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,5vw,2.5rem); }

/* 4. TYPOGRAPHY */
.section-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-b); font-size:.75rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--primary);
  margin-bottom:1rem;
}
.section-eyebrow::before { content:''; display:inline-block; width:20px; height:2px; background:var(--accent); border-radius:2px; }
.section-title { font-size:clamp(2rem,4vw,3rem); color:var(--text); margin-bottom:1rem; }
.section-sub { font-size:1.0625rem; color:var(--muted); max-width:520px; line-height:1.7; }
.section-note { font-size:.875rem; font-style:italic; color:var(--muted); }
.section-header { max-width:680px; margin-bottom:clamp(2.5rem,5vw,4rem); }

/* 5. BUTTONS */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; font-family:var(--font-b); font-size:.9375rem; font-weight:600;
  line-height:1; padding:.75rem 1.375rem; border-radius:var(--r-md);
  border:1.5px solid transparent; transition:all var(--t); cursor:pointer;
  white-space:nowrap; text-decoration:none;
}
.btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.btn--primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn--primary:hover { background:var(--primary-lt); border-color:var(--primary-lt); transform:translateY(-1px); box-shadow:0 4px 12px rgba(23,76,60,.25); }
.btn--accent { background:var(--accent); color:var(--primary); border-color:var(--accent); }
.btn--accent:hover { background:var(--accent-dk); border-color:var(--accent-dk); transform:translateY(-1px); box-shadow:0 4px 12px rgba(200,232,107,.35); }
.btn--ghost { background:transparent; color:var(--text); border-color:transparent; }
.btn--ghost:hover { background:rgba(24,32,29,.05); }
.btn--outline { background:transparent; color:var(--primary); border-color:var(--border-str); }
.btn--outline:hover { border-color:var(--primary); background:rgba(23,76,60,.04); }
.btn--outline-light { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn--outline-light:hover { border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.08); }
.btn--lg { font-size:1rem; padding:.9rem 1.625rem; }

/* 6. BADGES */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:.6875rem; font-weight:600; letter-spacing:.04em;
  padding:.25rem .625rem; border-radius:var(--r-full); text-transform:uppercase;
}
.badge--now { background:rgba(23,76,60,.08); color:var(--primary); border:1px solid rgba(23,76,60,.15); }
.badge--now::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--primary); }
.badge--soon { background:rgba(102,113,108,.08); color:var(--muted); border:1px solid var(--border); }

/* 7. SKIP LINK */
.skip-link { position:absolute; top:-100px; left:1rem; background:var(--primary); color:#fff; padding:.5rem 1rem; border-radius:0 0 var(--r-md) var(--r-md); font-weight:600; z-index:9999; transition:top var(--t); }
.skip-link:focus { top:0; }

/* 8. NAV */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h); background:transparent; transition:background var(--t),box-shadow var(--t); }
.nav.nav--scrolled { background:rgba(247,247,242,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--border); }
.nav__inner { display:flex; align-items:center; height:100%; gap:2rem; }
.nav__logo { display:flex; align-items:center; gap:.5rem; font-family:var(--font-h); font-weight:700; font-size:1.125rem; color:var(--text); flex-shrink:0; }
.nav__logo-mark { width:32px; height:32px; background:var(--primary); color:var(--accent); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; flex-shrink:0; }
.nav__links { display:flex; align-items:center; gap:4px; flex:1; }
.nav__link { font-size:.9375rem; font-weight:500; color:var(--muted); padding:.5rem .75rem; border-radius:var(--r-md); transition:color var(--t),background var(--t); }
.nav__link:hover { color:var(--text); background:rgba(24,32,29,.04); }
.nav__link:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.nav__actions { display:flex; align-items:center; gap:.5rem; margin-left:auto; }

/* Language Toggle */
.lang-toggle { display:flex; align-items:center; gap:4px; font-size:.8125rem; font-weight:600; color:var(--muted); padding:.35rem .625rem; border-radius:var(--r-md); border:1.5px solid var(--border); background:var(--surface); transition:all var(--t); letter-spacing:.02em; }
.lang-toggle:hover { border-color:var(--border-str); color:var(--text); }
.lang-toggle:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.lang-opt { color:var(--muted); transition:color var(--t); }
.lang-opt.active { color:var(--primary); font-weight:700; }
.lang-sep { color:var(--border-str); }

/* Hamburger */
.nav__hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; padding:8px; border-radius:var(--r-md); border:1.5px solid var(--border); background:var(--surface); }
.nav__hamburger:hover { border-color:var(--border-str); }
.nav__hamburger span { display:block; width:100%; height:1.5px; background:var(--text); border-radius:2px; transition:transform var(--t),opacity var(--t); }
.nav__hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity:0; }
.nav__hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.nav__mobile { display:none; position:absolute; top:var(--nav-h); left:0; right:0; background:var(--surface); border-bottom:1px solid var(--border); padding:1rem clamp(1.25rem,5vw,2.5rem); flex-direction:column; gap:.5rem; box-shadow:var(--sh-lg); }
.nav__mobile.open { display:flex; }
.nav__mobile-link { font-size:1rem; font-weight:500; color:var(--text); padding:.75rem 0; border-bottom:1px solid var(--border); }
.nav__mobile-link:last-of-type { border-bottom:none; }
.nav__mobile-actions { display:flex; gap:.5rem; padding-top:1rem; }

/* 9. HERO */
.hero { min-height:100svh; display:flex; align-items:center; position:relative; overflow:hidden; padding-top:var(--nav-h); background-color:var(--bg); }
.hero__grid-bg { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(221,227,221,.8) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; }
.hero__inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; padding-top:clamp(2rem,5vw,4rem); padding-bottom:clamp(3rem,6vw,5rem); }
.hero__eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.8125rem; font-weight:600; color:var(--primary); letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.5rem; padding:.375rem .875rem; background:rgba(23,76,60,.07); border:1px solid rgba(23,76,60,.12); border-radius:var(--r-full); }
.hero__headline { font-size:clamp(3.25rem,7vw,5.75rem); font-weight:800; line-height:1.05; letter-spacing:-.03em; color:var(--text); margin-bottom:1.5rem; }
.hero__sub { font-size:clamp(1rem,2vw,1.125rem); color:var(--muted); line-height:1.7; margin-bottom:2rem; max-width:480px; }
.hero__cta { display:flex; flex-wrap:wrap; gap:1rem; }

/* Work Graph */
.hero__visual { position:relative; display:flex; justify-content:center; align-items:center; }
.work-graph { position:relative; width:100%; max-width:500px; }
.wg-svg { width:100%; height:auto; }

/* Flow path animation */
.fp { animation:flowDash 2.5s linear infinite; }
.fp-1 { animation-delay:0s; }
.fp-2 { animation-delay:.5s; }
.fp-3 { animation-delay:.8s; }
.fp-4 { animation-delay:1.3s; }
.fp-5 { animation-delay:.4s; }
@keyframes flowDash { to { stroke-dashoffset:-20; } }

/* Floating work cards */
.wg-card { position:absolute; display:flex; align-items:center; gap:.625rem; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:.625rem .875rem; box-shadow:var(--sh-md); font-size:.8125rem; animation:floatCard 4s ease-in-out infinite; }
.wg-card--1 { bottom:8%; left:-6%; animation-delay:0s; }
.wg-card--2 { top:4%; right:-4%; animation-delay:1.5s; }
.wg-card--3 { bottom:28%; right:-6%; animation-delay:.8s; }
@keyframes floatCard { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.wg-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.wg-dot--orange { background:var(--orange); }
.wg-dot--green { background:var(--green); }
.wg-dot--accent { background:var(--accent); }
.wg-card__title { font-weight:600; color:var(--text); white-space:nowrap; }
.wg-card__sub { font-size:.75rem; color:var(--muted); white-space:nowrap; }

/* 10. TRUST BAR */
.trust-bar { background:var(--primary); padding:clamp(1.5rem,3vw,2rem) 0; }
.trust-bar__text { font-family:var(--font-h); font-size:clamp(1.125rem,2.5vw,1.5rem); font-weight:600; color:rgba(255,255,255,.9); text-align:center; letter-spacing:-.01em; }

/* 11. HOW IT WORKS */
.hiw { padding:clamp(5rem,10vw,8rem) 0; background:var(--surface); }
.hiw__layout { display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.hiw__label { font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; padding-bottom:.5rem; border-bottom:1.5px solid var(--border); }
.hiw__label--after { color:var(--primary); border-color:var(--accent); }
.hiw__scattered { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem; }
.scatter-chip { display:flex; align-items:center; gap:6px; font-size:.875rem; font-weight:500; color:var(--muted); background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r-full); padding:.375rem .75rem; }
.hiw__problems { display:flex; flex-direction:column; gap:.5rem; }
.hiw__problems li { font-size:.9375rem; color:var(--muted); padding-left:1.25rem; position:relative; }
.hiw__problems li::before { content:'—'; position:absolute; left:0; color:var(--border-str); }
.hiw__center { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.hiw__connector { width:2px; height:48px; background:linear-gradient(to bottom,transparent,var(--border)); }
.hiw__connector--r { background:linear-gradient(to bottom,var(--border),transparent); }
.hiw__hub { background:var(--primary); color:#fff; border-radius:var(--r-xl); padding:1.5rem 1.75rem; text-align:center; box-shadow:var(--sh-lg); min-width:140px; }
.hiw__hub-mark { width:40px; height:40px; background:rgba(200,232,107,.15); color:var(--accent); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-weight:800; font-size:1.25rem; margin:0 auto .75rem; }
.hiw__hub-name { font-family:var(--font-h); font-weight:700; font-size:1.0625rem; margin-bottom:4px; }
.hiw__hub-sub { font-size:.75rem; color:rgba(255,255,255,.5); }
.hiw__outcomes { display:flex; flex-direction:column; gap:1.25rem; }
.hiw__outcome { display:flex; gap:1rem; align-items:flex-start; }
.hiw__check { width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.75rem; flex-shrink:0; margin-top:2px; }
.hiw__out-title { font-weight:600; color:var(--text); font-size:.9375rem; margin-bottom:2px; }
.hiw__out-sub { font-size:.875rem; color:var(--muted); }

/* 12. CAPABILITIES */
.capabilities { padding:clamp(5rem,10vw,8rem) 0; background:var(--bg); }
.cap__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.cap__card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-xl); padding:1.75rem; transition:transform var(--t),box-shadow var(--t),border-color var(--t); position:relative; overflow:hidden; }
.cap__card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--border-str); }
.cap__card--featured { grid-column:span 2; background:var(--primary); border-color:var(--primary); }
.cap__card--featured .cap__name { color:#fff; }
.cap__card--featured .cap__desc { color:rgba(255,255,255,.7); }
.cap__card--featured .cap__icon { color:var(--accent); }
.cap__card--soon { opacity:.72; }
.cap__card--soon:hover { opacity:.92; }
.cap__icon { font-size:1.5rem; margin-bottom:1rem; display:block; }
.cap__name { font-size:1.0625rem; font-weight:700; color:var(--text); margin:.75rem 0 .5rem; }
.cap__desc { font-size:.9375rem; color:var(--muted); line-height:1.6; }

/* 13. PRODUCT PREVIEW */
.product-preview { padding:clamp(5rem,10vw,8rem) 0; background:var(--surface); }
.product-frame { display:flex; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--sh-xl); max-height:520px; }
/* Sidebar */
.pf-sidebar { width:220px; flex-shrink:0; background:var(--primary); padding:1.25rem 0; display:flex; flex-direction:column; gap:.5rem; }
.pf-sidebar__brand { width:36px; height:36px; background:rgba(200,232,107,.15); color:var(--accent); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-weight:800; font-size:1.125rem; margin:0 1.25rem 1rem; }
.pf-sidebar__nav { display:flex; flex-direction:column; gap:2px; padding:0 .5rem; }
.pf-nav { display:flex; align-items:center; gap:.75rem; padding:.625rem .875rem; border-radius:var(--r-md); font-size:.875rem; font-weight:500; color:rgba(255,255,255,.5); text-decoration:none; transition:background var(--t),color var(--t); }
.pf-nav:hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); }
.pf-nav--active { background:rgba(255,255,255,.1); color:#fff; font-weight:600; }
.pf-nav__icon { font-size:.9375rem; flex-shrink:0; }
.pf-nav__badge { margin-left:auto; background:var(--accent); color:var(--primary); font-size:.6875rem; font-weight:700; padding:.125rem .4rem; border-radius:var(--r-full); }
/* Main */
.pf-main { flex:1; overflow-y:auto; padding:1.5rem; display:flex; flex-direction:column; gap:1.5rem; }
.pf-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:1.25rem; border-bottom:1.5px solid var(--border); }
.pf-header__title { font-family:var(--font-h); font-size:1.25rem; font-weight:700; }
.pf-header__date { font-size:.8125rem; color:var(--muted); }
.pf-group { display:flex; flex-direction:column; gap:.5rem; }
.pf-group__label { font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.pf-item { display:flex; align-items:center; gap:1rem; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:.875rem 1.25rem; transition:border-color var(--t),box-shadow var(--t); }
.pf-item:hover { border-color:var(--border-str); box-shadow:var(--sh-sm); }
.pf-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.pf-dot--orange { background:var(--orange); }
.pf-dot--blue   { background:var(--blue); }
.pf-dot--green  { background:var(--green); }
.pf-dot--purple { background:var(--purple); }
.pf-item__body { flex:1; min-width:0; }
.pf-item__title { font-size:.9375rem; font-weight:600; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-item__meta { font-size:.8125rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-tag { font-size:.6875rem; font-weight:600; padding:.25rem .625rem; border-radius:var(--r-full); white-space:nowrap; flex-shrink:0; }
.pf-tag--waiting  { background:rgba(229,124,45,.1); color:var(--orange); }
.pf-tag--progress { background:rgba(59,130,196,.1); color:var(--blue); }
.pf-tag--review   { background:rgba(23,76,60,.08); color:var(--primary); }
.pf-tag--alert    { background:rgba(217,79,59,.08); color:var(--alert); }

/* 14. USE CASES */
.use-cases { padding:clamp(5rem,10vw,8rem) 0; background:var(--bg); }
.uc__tabs { display:flex; gap:4px; overflow-x:auto; padding-bottom:1rem; margin-bottom:2rem; border-bottom:1.5px solid var(--border); scrollbar-width:none; }
.uc__tabs::-webkit-scrollbar { display:none; }
.uc__tab { font-size:.9375rem; font-weight:500; color:var(--muted); padding:.625rem 1.125rem; border-radius:var(--r-md); white-space:nowrap; cursor:pointer; transition:color var(--t),background var(--t); border:none; background:none; font-family:var(--font-b); }
.uc__tab:hover { color:var(--text); }
.uc__tab--active { background:var(--primary); color:#fff; font-weight:600; }
.uc__tab:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.uc__panel { display:none; animation:fadePanel .3s ease; }
.uc__panel--active { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@keyframes fadePanel { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.uc__panel-title { font-size:clamp(1.625rem,3vw,2.125rem); font-weight:700; margin:.75rem 0; }
.uc__panel-desc { font-size:1rem; color:var(--muted); line-height:1.7; margin-bottom:1.5rem; }
.uc__features { display:flex; flex-direction:column; gap:.875rem; }
.uc__features li { font-size:.9375rem; color:var(--text); padding-left:1.5rem; position:relative; }
.uc__features li::before { content:''; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.uc__text { display:flex; flex-direction:column; justify-content:center; }
.uc__visual { display:flex; align-items:center; justify-content:center; }
/* Use case flow */
.uc-flow { display:flex; flex-direction:column; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-xl); padding:2rem; }
.uc-flow--soon { opacity:.5; }
.uc-step { display:flex; align-items:center; gap:1rem; width:100%; padding:.875rem 1rem; border-radius:var(--r-md); font-size:.9375rem; font-weight:500; }
.uc-step--done { background:rgba(23,76,60,.06); color:var(--primary); font-weight:600; }
.uc-step__num { width:28px; height:28px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8125rem; font-weight:700; flex-shrink:0; }
.uc-step--done .uc-step__num { background:var(--accent); color:var(--primary); }
.uc-arrow { padding-left:calc(28px / 2 + 1rem - 1px); color:var(--border-str); font-size:1.125rem; margin:2px 0; }

/* 15. AI SECTION */
.ai-section { padding:clamp(5rem,10vw,8rem) 0; background:var(--surface); position:relative; overflow:hidden; }
.ai-section::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent 0%,var(--accent) 50%,transparent 100%); }
.ai__inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,5rem); align-items:center; }
.ai__bullets { display:flex; flex-direction:column; gap:.625rem; margin:.75rem 0 1.5rem; }
.ai__bullets li { display:flex; align-items:center; gap:1rem; font-size:.9375rem; }
.ai__bullets li::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
/* Chat */
.ai-chat { background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--sh-lg); }
.ai-chat__header { display:flex; align-items:center; gap:.5rem; padding:1rem 1.25rem; background:var(--surface); border-bottom:1.5px solid var(--border); font-size:.875rem; font-weight:600; }
.ai-pulse { width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
.ai-chat__body { padding:1.5rem 1.25rem; display:flex; flex-direction:column; gap:1.25rem; min-height:180px; }
.ai-msg { display:flex; gap:1rem; }
.ai-msg--user { justify-content:flex-end; }
.ai-msg--user span { background:var(--primary); color:#fff; font-size:.9375rem; padding:.75rem 1.25rem; border-radius:var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); max-width:80%; }
.ai-avatar { width:32px; height:32px; border-radius:50%; background:var(--primary); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.875rem; flex-shrink:0; }
.ai-bubble { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-sm) var(--r-lg) var(--r-lg) var(--r-lg); padding:.875rem 1.25rem; max-width:85%; display:flex; flex-direction:column; gap:4px; }
.ai-bubble p { font-size:.9375rem; color:var(--text); line-height:1.5; }
.ai-link { font-size:.875rem; font-weight:600; color:var(--primary); margin-top:.5rem; }
.ai-chat__footer { display:flex; gap:.5rem; padding:1rem 1.25rem; border-top:1.5px solid var(--border); background:var(--surface); }
.ai-input { flex:1; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r-md); padding:.625rem 1rem; font-size:.875rem; color:var(--muted); cursor:default; }
.ai-send { width:36px; height:36px; border-radius:var(--r-md); background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }

/* 16. SECURITY */
.security { padding:clamp(5rem,10vw,8rem) 0; background:var(--bg); }
.sec__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.sec__item { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-xl); padding:2rem 1.75rem; transition:transform var(--t),box-shadow var(--t); }
.sec__item:hover { transform:translateY(-3px); box-shadow:var(--sh-md); }
.sec__icon { font-size:2rem; margin-bottom:1.25rem; display:block; color:var(--primary); }
.sec__name { font-size:1.0625rem; font-weight:700; margin-bottom:.75rem; }
.sec__desc { font-size:.9375rem; color:var(--muted); line-height:1.6; }

.svg-icon { width:32px; height:32px; flex-shrink:0; }

/* 17. FINAL CTA */
.final-cta { padding:clamp(5rem,10vw,8rem) 0; background:var(--primary); position:relative; overflow:hidden; }
.final-cta__inner { text-align:center; position:relative; z-index:1; }
.final-cta__title { font-size:clamp(2.5rem,5vw,4rem); font-weight:800; color:#fff; margin-bottom:1.25rem; letter-spacing:-.03em; }
.final-cta__sub { font-size:clamp(1rem,2vw,1.125rem); color:rgba(255,255,255,.65); line-height:1.7; margin-bottom:2rem; }
.final-cta__actions { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* 18. FOOTER */
.footer { background:#111814; padding:clamp(3rem,6vw,5rem) 0 clamp(1.5rem,3vw,2rem); }
.footer__top { display:flex; gap:clamp(2rem,5vw,4rem); padding-bottom:clamp(2rem,4vw,3rem); border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:1.5rem; }
.footer__brand { flex:0 0 280px; }
.footer__logo { display:flex; align-items:center; gap:.5rem; font-family:var(--font-h); font-weight:700; font-size:1.125rem; color:#fff; text-decoration:none; margin-bottom:1rem; }
.footer__logo-mark { width:32px; height:32px; background:rgba(200,232,107,.12); color:var(--accent); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; }
.footer__tagline { font-size:.9375rem; color:rgba(255,255,255,.4); line-height:1.6; }
.footer__nav { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.footer__col { display:flex; flex-direction:column; gap:.625rem; }
.footer__col-title { font-size:.8125rem; font-weight:600; color:rgba(255,255,255,.5); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.5rem; }
.footer__col a { font-size:.9375rem; color:rgba(255,255,255,.4); transition:color var(--t); }
.footer__col a:hover { color:rgba(255,255,255,.85); }
.footer__col a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.footer__copy { font-size:.875rem; color:rgba(255,255,255,.3); }
.footer__legal { display:flex; gap:1.25rem; }
.footer__legal a { font-size:.875rem; color:rgba(255,255,255,.3); transition:color var(--t); }
.footer__legal a:hover { color:rgba(255,255,255,.65); }

/* 19. SCROLL REVEAL */
.reveal { opacity:0; transform:translateY(24px); transition:opacity var(--ts),transform var(--ts); }
.reveal.visible { opacity:1; transform:translateY(0); }
.cap__grid .reveal:nth-child(1) { transition-delay:0ms; }
.cap__grid .reveal:nth-child(2) { transition-delay:80ms; }
.cap__grid .reveal:nth-child(3) { transition-delay:160ms; }
.cap__grid .reveal:nth-child(4) { transition-delay:240ms; }
.cap__grid .reveal:nth-child(5) { transition-delay:320ms; }
.sec__grid .reveal:nth-child(1) { transition-delay:0ms; }
.sec__grid .reveal:nth-child(2) { transition-delay:100ms; }
.sec__grid .reveal:nth-child(3) { transition-delay:200ms; }

/* 20. FOCUS */
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* 21. RESPONSIVE */
@media (max-width:1024px) {
  .hero__inner { grid-template-columns:1fr; }
  .hero__content { max-width:100%; text-align:center; }
  .hero__cta { justify-content:center; }
  .hero__visual { display:flex; max-width:620px; margin:2rem auto 0; }
  .hiw__layout { grid-template-columns:1fr; }
  .hiw__center { flex-direction:row; justify-content:center; }
  .hiw__connector { width:48px; height:2px; background:linear-gradient(to right,transparent,var(--border)); }
  .hiw__connector--r { background:linear-gradient(to right,var(--border),transparent); }
  .ai__inner { grid-template-columns:1fr; }
  .hero__sub { max-width:100%; }
}
@media (max-width:900px) {
  .cap__grid { grid-template-columns:repeat(2,1fr); }
  .cap__card--featured { grid-column:span 2; }
  .sec__grid { grid-template-columns:1fr 1fr; }
  .sec__grid .sec__item:last-child { grid-column:span 2; }
  .footer__top { flex-direction:column; }
  .footer__brand { flex:none; }
}
@media (max-width:768px) {
  .nav__links { display:none; }
  .nav__hamburger { display:flex; }
  .nav__actions .btn { display:none; }
  .nav__actions .lang-toggle { display:flex; }
  .uc__panel--active { display:flex; flex-direction:column; }
  .sec__grid { grid-template-columns:1fr; }
  .sec__grid .sec__item:last-child { grid-column:span 1; }
  .footer__nav { grid-template-columns:repeat(2,1fr); }
  .footer__bottom { flex-direction:column; text-align:center; }
  .product-frame { flex-direction:column; max-height:none; }
  .pf-sidebar { width:100%; flex-direction:row; flex-wrap:wrap; padding:.875rem 1.25rem; gap:.5rem; }
  .pf-sidebar__brand { margin:0; }
  .pf-sidebar__nav { flex-direction:row; flex-wrap:wrap; }
}
@media (max-width:480px) {
  .cap__grid { grid-template-columns:1fr; }
  .cap__card--featured { grid-column:span 1; }
  .footer__nav { grid-template-columns:1fr; }
  .hero__cta { flex-direction:column; }
  .hero__cta .btn { width:100%; justify-content:center; }
}

/* 22. REDUCED MOTION */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
  html { scroll-behavior:auto; }
}

/* 23. WORKORA AI CHAT */
.wo-chat { position:fixed; right:24px; bottom:24px; z-index:1000; font-family:var(--font-b); }
.wo-chat__toggle { display:flex; align-items:center; gap:.625rem; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.75rem 1rem .75rem .75rem; color:#fff; background:linear-gradient(135deg,#111827,#1f2937); box-shadow:0 18px 48px rgba(0,0,0,.24); cursor:pointer; }
.wo-chat__toggle-icon { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#111827; background:var(--accent); font-weight:800; font-size:.8125rem; }
.wo-chat__toggle-text { font-weight:700; font-size:.9375rem; }
.wo-chat__panel { position:absolute; right:0; bottom:64px; width:min(380px,calc(100vw - 32px)); height:min(560px,calc(100vh - 120px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:24px; background:#fff; box-shadow:0 24px 80px rgba(15,23,42,.28); }
.wo-chat__header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.125rem; color:#fff; background:linear-gradient(135deg,#0f172a,#1e293b); }
.wo-chat__title { font-family:var(--font-h); font-weight:800; font-size:1rem; }
.wo-chat__status { margin-top:.125rem; color:rgba(255,255,255,.65); font-size:.8125rem; }
.wo-chat__close { border:0; width:32px; height:32px; border-radius:50%; color:#fff; background:rgba(255,255,255,.1); font-size:1.35rem; line-height:1; cursor:pointer; }
.wo-chat__messages { flex:1; display:flex; flex-direction:column; gap:.75rem; padding:1rem; overflow-y:auto; background:linear-gradient(180deg,#f8fafc,#fff); }
.wo-chat__bubble { max-width:86%; padding:.75rem .875rem; border-radius:16px; white-space:pre-wrap; line-height:1.5; font-size:.9375rem; }
.wo-chat__bubble--assistant { align-self:flex-start; color:#1f2937; background:#eef2ff; border-bottom-left-radius:6px; }
.wo-chat__bubble--user { align-self:flex-end; color:#fff; background:#111827; border-bottom-right-radius:6px; }
.wo-chat__form { display:flex; gap:.625rem; align-items:flex-end; padding:.875rem; border-top:1px solid var(--border); background:#fff; }
.wo-chat__input { flex:1; resize:none; border:1px solid var(--border); border-radius:14px; padding:.75rem .875rem; min-height:44px; max-height:120px; font:inherit; line-height:1.4; outline:none; }
.wo-chat__input:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.14); }
.wo-chat__send { border:0; border-radius:14px; padding:.75rem 1rem; min-height:44px; color:#111827; background:var(--accent); font-weight:800; cursor:pointer; }
.wo-chat__send:disabled { opacity:.55; cursor:not-allowed; }

@media (max-width:480px) {
  .wo-chat { right:16px; bottom:16px; }
  .wo-chat__panel { bottom:60px; }
  .wo-chat__toggle-text { display:none; }
  .wo-chat__toggle { padding:.625rem; }
}