:root {
  --bg: #030913;
  --bg-soft: #071426;
  --surface: rgba(10, 27, 48, 0.76);
  --surface-strong: #0a1d34;
  --line: rgba(125, 220, 255, 0.2);
  --text: #f3f8ff;
  --muted: #a9bdd1;
  --cyan: #72ddff;
  --blue: #3c85ff;
  --green: #6ca66f;
  --green-deep: #244d36;
  --cream: #f4efe3;
  --warm: #e8c89a;
  --shadow: 0 22px 70px rgba(0,0,0,.35);
  --radius: 24px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 2%, rgba(54, 132, 255, .19), transparent 32%),
    radial-gradient(circle at 10% 36%, rgba(77, 220, 255, .10), transparent 30%),
    linear-gradient(180deg, #020812 0%, #05101e 48%, #020811 100%);
  min-height: 100vh;
}
body.care-page {
  color: #173524;
  background:
    radial-gradient(circle at 78% 0%, rgba(232, 200, 154, .42), transparent 35%),
    radial-gradient(circle at 7% 35%, rgba(119, 173, 121, .20), transparent 28%),
    linear-gradient(180deg, #fbf8ef 0%, #edf5e9 56%, #f8f3e8 100%);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  padding: 12px 16px; border-radius: 12px; background: white; color: #111;
}
.skip-link:focus { top: 12px; }

.container { width: min(calc(100% - 36px), var(--max)); margin-inline: auto; }
.section { padding: 92px 0; }
.section-tight { padding: 56px 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.care-page .eyebrow { color: var(--green-deep); }
.section-title { margin: 16px 0 18px; font-size: clamp(2rem, 5vw, 4.25rem); line-height: 1.02; letter-spacing: -.045em; }
.section-copy { max-width: 760px; color: var(--muted); font-size: 1.08rem; line-height: 1.75; }
.care-page .section-copy { color: #4e6958; }

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(2, 8, 18, .76); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(125, 220, 255, .12);
}
.care-page .site-header { background: rgba(251, 248, 239, .86); border-bottom-color: rgba(36,77,54,.13); }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 190px; }
.brand img { width: 186px; height: 42px; object-fit: contain; object-position: left center; }
.brand-fallback { font-size: .9rem; line-height: .86; letter-spacing: .17em; font-weight: 900; }
.brand-fallback span { display: block; color: var(--cyan); }
.care-page .brand-fallback span { color: var(--green); }
.nav-links { display: flex; align-items: center; gap: 22px; color: #c5d5e5; font-size: .94rem; }
.care-page .nav-links { color: #385542; }
.nav-links a:hover, .nav-links a:focus-visible { color: white; }
.care-page .nav-links a:hover, .care-page .nav-links a:focus-visible { color: #173524; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-button { display: none; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 12px; padding: 9px 11px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
  font-weight: 800; cursor: pointer; transition: .2s transform, .2s border-color, .2s background, .2s box-shadow;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #02111a; background: linear-gradient(135deg, var(--cyan), #b8efff); box-shadow: 0 12px 40px rgba(114,221,255,.18); }
.btn-secondary { color: var(--text); border-color: rgba(125,220,255,.28); background: rgba(255,255,255,.035); }
.btn-care { color: white; background: linear-gradient(135deg, #2f6848, #75a977); box-shadow: 0 12px 40px rgba(47,104,72,.18); }
.btn-care-secondary { color: #244d36; border-color: rgba(36,77,54,.25); background: rgba(255,255,255,.56); }
.btn-small { min-height: 40px; padding-inline: 16px; font-size: .88rem; }

.hero { position: relative; overflow: hidden; padding: 88px 0 72px; }
.hero::after {
  content: ""; position: absolute; width: 530px; height: 530px; right: -220px; top: 40px;
  border-radius: 50%; border: 1px solid rgba(114,221,255,.17); box-shadow: inset 0 0 90px rgba(60,133,255,.08);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 58px; }
.hero h1 { margin: 18px 0 24px; font-size: clamp(3.7rem, 9vw, 7.8rem); line-height: .89; letter-spacing: -.07em; max-width: 850px; }
.hero h1 span { display: block; color: var(--cyan); text-shadow: 0 0 45px rgba(114,221,255,.25); }
.hero-lead { max-width: 720px; color: #bdd0e2; font-size: clamp(1.06rem, 2.1vw, 1.35rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px; color: #8fa8bf; font-size: .9rem; }
.hero-note span { display: inline-flex; gap: 8px; align-items: center; }
.hero-note span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

.command-card {
  position: relative; padding: 28px; min-height: 510px; border-radius: 32px;
  border: 1px solid rgba(125,220,255,.24); background: linear-gradient(160deg, rgba(11,34,59,.96), rgba(5,17,31,.8));
  box-shadow: var(--shadow); overflow: hidden;
}
.command-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.5%, rgba(114,221,255,.035) 50%, transparent 50.5%), linear-gradient(transparent 49.5%, rgba(114,221,255,.035) 50%, transparent 50.5%); background-size: 42px 42px; }
.command-content { position: relative; z-index: 1; }
.command-top { display: flex; align-items: center; justify-content: space-between; color: #9fb6ca; font-size: .82rem; }
.status { display: inline-flex; align-items: center; gap: 7px; }
.status::before { content:""; width: 8px; height: 8px; border-radius: 50%; background: #63e59b; box-shadow: 0 0 12px #63e59b; }
.logic-orb { width: 152px; height: 152px; margin: 58px auto 34px; border-radius: 50%; position: relative; background: radial-gradient(circle at 37% 30%, #d6f8ff 0%, #72ddff 16%, #286ea7 51%, #051625 72%); box-shadow: 0 0 30px rgba(114,221,255,.28), 0 0 80px rgba(60,133,255,.20); }
.logic-orb::before, .logic-orb::after { content:""; position:absolute; inset:-18px; border: 1px solid rgba(114,221,255,.22); border-radius:50%; }
.logic-orb::after { inset:-38px; border-style:dashed; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.command-message { padding: 18px; border-radius: 18px; background: rgba(3,12,22,.62); border: 1px solid rgba(125,220,255,.14); line-height: 1.55; }
.command-message strong { display:block; color: var(--cyan); margin-bottom: 6px; }
.signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.signal { padding: 13px; border-radius: 14px; background: rgba(255,255,255,.035); color: #a9bdd1; font-size: .78rem; }
.signal b { display:block; color:white; font-size: 1.08rem; margin-bottom: 3px; }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 42px; }
.card {
  position: relative; padding: 32px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); box-shadow: 0 18px 50px rgba(0,0,0,.15); overflow: hidden;
}
.card::after { content:""; position:absolute; width: 160px; height:160px; right:-100px; bottom:-110px; border-radius:50%; border:1px solid rgba(114,221,255,.12); }
.card h3 { margin: 14px 0 12px; font-size: 1.55rem; }
.card p { color: var(--muted); line-height: 1.7; margin: 0 0 24px; }
.card-tag { display:inline-flex; padding:7px 10px; border-radius:999px; background:rgba(114,221,255,.08); color:var(--cyan); font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.care-card { background: linear-gradient(145deg, rgba(244,239,227,.98), rgba(225,239,218,.95)); color:#183b29; border-color:rgba(84,135,90,.24); }
.care-card p { color:#526a59; }
.care-card .card-tag { background:rgba(76,132,82,.1); color:#2f6848; }

.flow { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.flow-step { min-height: 150px; padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.flow-step span { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:rgba(114,221,255,.1); color:var(--cyan); font-weight:900; }
.flow-step strong { display:block; margin-top:20px; font-size:1.02rem; }
.flow-step small { display:block; margin-top:8px; color:var(--muted); line-height:1.5; }

.story-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; }
.story-statement { position:sticky; top:120px; font-size:clamp(2rem,4vw,4rem); line-height:1.06; letter-spacing:-.04em; }
.story-statement em { color:var(--cyan); font-style:normal; }
.story-copy { display:grid; gap:18px; }
.story-copy p { margin:0; color:var(--muted); font-size:1.05rem; line-height:1.85; }

.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:38px; align-items:start; }
.contact-panel { padding:32px; border-radius:28px; background:linear-gradient(150deg, rgba(9,29,51,.92), rgba(4,14,26,.92)); border:1px solid var(--line); }
.contact-item { display:block; padding:18px 0; border-bottom:1px solid rgba(125,220,255,.12); }
.contact-item:last-child { border-bottom:0; }
.contact-item small { display:block; color:#879eb4; margin-bottom:6px; }
.contact-item strong { font-size:1.08rem; }
.smart-form { padding:32px; border-radius:28px; border:1px solid var(--line); background:rgba(255,255,255,.035); }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.field { display:grid; gap:8px; }
.field-full { grid-column:1/-1; }
.field label { color:#c9d8e6; font-weight:700; font-size:.9rem; }
.field input, .field select, .field textarea {
  width:100%; border:1px solid rgba(125,220,255,.22); background:#071424; color:white; border-radius:14px; padding:14px 15px; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 4px rgba(114,221,255,.08); }
.field textarea { resize:vertical; min-height:120px; }
.form-note { color:#8199ae; font-size:.78rem; line-height:1.5; }
.bot-field { position:absolute; overflow:hidden; clip:rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; }
.conditional-group[hidden] { display:none; }

.site-footer { padding:42px 0; border-top:1px solid rgba(125,220,255,.12); color:#879eb4; }
.footer-grid { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; }
.social-links:empty { display:none; }
.social-links { display:flex; gap:10px; margin-top:14px; }
.social-links a { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; font-size:.78rem; }

.chat-launcher { position:fixed; right:22px; bottom:22px; z-index:50; width:62px; height:62px; border:1px solid rgba(114,221,255,.45); border-radius:50%; background:radial-gradient(circle at 37% 30%, #d6f8ff, #72ddff 20%, #154878 67%, #03101d); box-shadow:0 12px 38px rgba(0,0,0,.34), 0 0 35px rgba(114,221,255,.18); cursor:pointer; }
.chat-launcher span { position:absolute; right:54px; top:10px; white-space:nowrap; background:#071424; color:white; border:1px solid var(--line); padding:10px 13px; border-radius:12px; font-size:.82rem; }
.chat-panel { position:fixed; right:22px; bottom:96px; z-index:55; width:min(390px,calc(100vw - 28px)); border-radius:24px; overflow:hidden; background:#071424; border:1px solid rgba(125,220,255,.3); box-shadow:var(--shadow); transform:translateY(18px); opacity:0; pointer-events:none; transition:.2s; }
.chat-panel.open { transform:translateY(0); opacity:1; pointer-events:auto; }
.chat-head { display:flex; align-items:center; justify-content:space-between; padding:17px 18px; background:linear-gradient(135deg,#0a2845,#0a1a2e); border-bottom:1px solid var(--line); }
.chat-head strong { display:block; }
.chat-head small { color:#8fa8bf; }
.chat-close { border:0; background:transparent; color:white; font-size:1.3rem; cursor:pointer; }
.chat-body { padding:18px; max-height:360px; overflow:auto; display:grid; gap:12px; }
.bubble { max-width:88%; padding:12px 14px; border-radius:16px; line-height:1.48; font-size:.9rem; }
.bubble.logic { background:#0e2a46; border:1px solid rgba(114,221,255,.12); }
.bubble.user { justify-self:end; background:#dff7ff; color:#082033; }
.chat-options { display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 18px; }
.chat-option { border:1px solid rgba(114,221,255,.24); background:rgba(114,221,255,.06); color:#d9f6ff; border-radius:999px; padding:9px 12px; cursor:pointer; font-size:.79rem; }

/* Care */
.care-hero { padding:86px 0 70px; position:relative; overflow:hidden; }
.care-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.care-hero h1 { margin:18px 0 24px; font-size:clamp(3.3rem,7.5vw,7rem); line-height:.92; letter-spacing:-.065em; color:#173524; }
.care-hero h1 span { display:block; color:#5f9566; }
.care-hero p { color:#4d6b58; font-size:1.2rem; line-height:1.7; }
.care-visual { min-height:480px; border-radius:42px; position:relative; background:linear-gradient(150deg,#eef4df,#e4d3b7); border:1px solid rgba(36,77,54,.13); box-shadow:0 24px 70px rgba(65,97,68,.17); overflow:hidden; }
.care-visual::before { content:""; position:absolute; width:310px; height:310px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#a7c8a1 34%,#477351 74%); box-shadow:0 0 0 28px rgba(255,255,255,.28),0 0 0 60px rgba(96,148,99,.08); }
.care-heart { position:absolute; inset:0; display:grid; place-items:center; font-size:4rem; color:white; z-index:1; }
.care-badge { position:absolute; z-index:2; padding:15px 17px; border-radius:18px; background:rgba(255,255,255,.82); backdrop-filter:blur(12px); box-shadow:0 12px 30px rgba(44,72,49,.12); color:#244d36; font-weight:800; }
.care-badge.one { left:26px; top:30px; }
.care-badge.two { right:24px; bottom:32px; }
.care-section { padding:88px 0; }
.care-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px; }
.care-feature { padding:28px; border-radius:24px; background:rgba(255,255,255,.62); border:1px solid rgba(36,77,54,.13); }
.care-feature .icon { display:grid; place-items:center; width:46px; height:46px; border-radius:15px; background:#dcebd7; color:#2f6848; font-size:1.25rem; }
.care-feature h3 { margin:18px 0 10px; }
.care-feature p { margin:0; color:#526a59; line-height:1.65; }
.care-safety { padding:34px; border-radius:28px; background:#244d36; color:white; display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:center; }
.care-safety p { color:#d9e9db; line-height:1.7; }
.care-page .smart-form { background:rgba(255,255,255,.62); border-color:rgba(36,77,54,.18); }
.care-page .field label { color:#31543d; }
.care-page .field input, .care-page .field select, .care-page .field textarea { background:#fffdf7; color:#173524; border-color:rgba(36,77,54,.22); }
.care-page .field input:focus, .care-page .field select:focus, .care-page .field textarea:focus { border-color:#5f9566; box-shadow:0 0 0 4px rgba(95,149,102,.12); }
.care-page .site-footer { border-top-color:rgba(36,77,54,.14); color:#58705f; }
.care-page .chat-panel { background:#fffdf7; border-color:rgba(36,77,54,.2); color:#173524; }
.care-page .chat-head { background:#e3eee0; border-bottom-color:rgba(36,77,54,.13); }
.care-page .chat-head small { color:#58705f; }
.care-page .chat-close { color:#173524; }
.care-page .bubble.logic { background:#e8f1e5; border-color:rgba(36,77,54,.11); }
.care-page .bubble.user { background:#315f43; color:white; }
.care-page .chat-option { border-color:rgba(36,77,54,.22); background:#edf4e9; color:#244d36; }

.page-hero { padding:78px 0 48px; }
.page-hero h1 { margin:16px 0 20px; font-size:clamp(3rem,7vw,6.5rem); line-height:.94; letter-spacing:-.06em; }
.portal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:36px; }
.portal-card { padding:34px; border-radius:26px; border:1px solid var(--line); background:var(--surface); }
.portal-card h2 { margin:12px 0; font-size:1.7rem; }
.portal-card p { color:var(--muted); line-height:1.7; }

@media (max-width: 980px) {
  .nav-links { position:fixed; inset:76px 18px auto; display:none; flex-direction:column; align-items:stretch; padding:22px; background:#071424; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
  .care-page .nav-links { background:#fffdf7; }
  .nav-links.open { display:flex; }
  .nav-actions .btn-secondary { display:none; }
  .menu-button { display:inline-flex; }
  .hero-grid, .care-hero-grid, .story-grid, .contact-grid, .care-safety { grid-template-columns:1fr; }
  .command-card { min-height:auto; }
  .story-statement { position:static; }
  .flow { grid-template-columns:repeat(2,1fr); }
  .care-cards { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
  .container { width:min(calc(100% - 24px), var(--max)); }
  .section, .care-section { padding:70px 0; }
  .site-header .btn-small { display:none; }
  .brand { min-width:auto; }
  .brand img { width:150px; }
  .hero { padding-top:58px; }
  .hero h1 { font-size:clamp(3.2rem,18vw,5.4rem); }
  .hero-actions .btn { width:100%; }
  .hero::after { display:none; }
  .cards, .portal-grid, .form-grid { grid-template-columns:1fr; }
  .field-full { grid-column:auto; }
  .flow { grid-template-columns:1fr; }
  .signal-grid { grid-template-columns:1fr; }
  .card, .smart-form, .contact-panel { padding:24px; }
  .footer-grid { grid-template-columns:1fr; }
  .chat-launcher span { display:none; }
  .chat-launcher { width:56px; height:56px; right:14px; bottom:14px; }
  .chat-panel { right:14px; bottom:82px; }
  .care-visual { min-height:390px; }
  .care-badge { font-size:.82rem; }
}

/* =========================================================
   LOGIC DYNAMICS WEBSITE V3 · FINAL BRAND SYSTEM
   ========================================================= */

.nav {
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible;
}

.brand img {
  display: block;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}

.brand img.brand-home {
  width: 218px;
  border-radius: 10px;
}

.brand img.brand-care {
  width: 238px;
  border-radius: 10px;
}

.brand-fallback[hidden] {
  display: none !important;
}

.care-brand-visual {
  min-height: 0;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border-radius: 36px;
  background: #f3e4cf;
  box-shadow: 0 24px 70px rgba(65,97,68,.17);
}

.care-brand-visual::before {
  display: none;
}

.care-brand-visual > img {
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  box-shadow: none;
}

@media (max-width: 1100px) {
  .brand img.brand-home {
    width: 198px;
  }

  .brand img.brand-care {
    width: 216px;
  }

  .nav-links {
    gap: 16px;
  }
}

@media (max-width: 980px) {
  .brand img.brand-home {
    width: 190px;
  }

  .brand img.brand-care {
    width: 205px;
  }
}

@media (max-width: 680px) {
  .nav {
    min-height: 68px;
    gap: 10px;
  }

  .brand img.brand-home {
    width: 176px;
  }

  .brand img.brand-care {
    width: 184px;
  }

  .nav-actions {
    gap: 8px;
    margin-left: auto;
  }

  .menu-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .care-brand-visual {
    border-radius: 26px;
  }
}

@media (max-width: 400px) {
  .brand img.brand-home {
    width: 164px;
  }

  .brand img.brand-care {
    width: 170px;
  }

  .menu-button {
    padding: 8px 10px;
    font-size: .9rem;
  }
}