/* ============================================================
   CAREPFAD — DESIGN SYSTEM v4 (Navy/Teal Editorial)
   Research-driven: asymmetric, photography-first, grain + motion
   Used by: index.html and subsidiary pages
   ============================================================ */

:root {
    /* Canvas — paper editorial */
    --canvas:        #F7F6F2;
    --canvas-2:      #EDEBE5;
    --surface:       #FFFFFF;
    --surface-2:     #F9F8F5;
    --line:          #D6D3CB;
    --line-strong:   #B8B4A8;

    /* Ink */
    --ink:           #16181d;
    --ink-soft:      #4A4D52;
    --muted:         #7A7D82;
    --faint:         #A0A3A8;

    /* Accent — NAVY #003050 (owned), teal #40a090 (secondary) */
    --accent:        #003050;
    --accent-deep:   #00203a;
    --accent-ink:    #F7F6F2;
    --accent-soft:   #e6eef4;
    --accent-line:   #c3d4e0;
    --teal:          #40a090;
    --teal-soft:     rgba(64,160,144,0.12);
    --teal-line:     rgba(64,160,144,0.30);

    /* Semantic */
    --warn:          #c2851a;
    --danger:        #c0392b;

    /* Type */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'IBM Plex Mono', monospace;

    /* Radius — varied (not uniform 16px) */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;

    /* Shadow (editorial, paper) */
    --sh-sm: 0 1px 3px rgba(0,0,0,0.06);
    --sh-md: 0 4px 16px rgba(0,0,0,0.08);
    --sh-lg: 0 8px 32px rgba(0,0,0,0.10);
    --sh-xl: 0 16px 48px rgba(0,0,0,0.12);

    /* Motion */
    --ease-out: cubic-bezier(0.16,1,0.3,1);
    --dur-fast: 150ms;
    --dur-med: 200ms;
    --dur-slow: 250ms;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--accent-ink); }

a { color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ---------- NAV ---------- */
nav {
    position: sticky; top:0; z-index:100;
    background: rgba(247,246,242,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.nav-inner { max-width:1200px; margin:0 auto; padding:0 28px; height:68px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { width:34px; height:34px; border-radius:9px; background:var(--accent); display:grid; place-items:center; flex-shrink:0; }
.brand-mark svg { width:19px; height:19px; }
.brand-name { font-family:var(--font-display); font-size:1.12rem; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.brand-name span { color: var(--teal); }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { text-decoration:none; font-size:0.88rem; font-weight:500; color:var(--muted); transition:color var(--dur-fast) var(--ease-out); }
.nav-links a:hover { color:var(--ink); }
.lang-switch { font-size:0.78rem; font-weight:700; color:var(--accent); text-decoration:none; border:1px solid var(--accent-line); border-radius:100px; padding:7px 14px; background:var(--accent-soft); letter-spacing:0.06em; }

/* ---------- BUTTONS (radius:8px) ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 24px; border-radius:var(--r-sm); font-family:var(--font-body); font-size:0.9rem; font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); white-space:nowrap; }
.btn-primary { background:var(--accent); color:var(--accent-ink); font-weight:700; }
.nav-links a.btn-primary { color:var(--accent-ink); }
.btn-primary:hover { background:var(--accent-deep); box-shadow:0 0 0 4px var(--accent-soft); }
.btn-primary:active { transform:translateY(1px); }
.btn-secondary { background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-secondary:hover { border-color:var(--ink); background:var(--surface-2); }
.btn-ghost { background:transparent; color:var(--ink-soft); border-color:transparent; }
.btn-ghost:hover { color:var(--ink); border-color:var(--line-strong); background:var(--surface-2); }
.btn-lg { padding:15px 32px; font-size:0.98rem; }
.btn-block { width:100%; }

/* ---------- SECTIONS ---------- */
.section { padding:88px 0; }
.section + .section { border-top:1px solid var(--line); }
.section-head { max-width:680px; margin-bottom:48px; }
.kicker { display:inline-flex; align-items:center; gap:10px; font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal); margin-bottom:16px; }
.kicker::before { content:''; width:20px; height:1px; background:var(--teal); }
.section-head h2 { font-family:var(--font-display); font-size:clamp(1.9rem,3.8vw,2.7rem); font-weight:500; letter-spacing:-0.02em; line-height:1.12; margin-bottom:14px; text-wrap:pretty; }
.section-head p { color:var(--ink-soft); font-size:1rem; line-height:1.7; }

/* ---------- CARDS ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:30px 28px; display:flex; flex-direction:column; transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out); }
.card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--line-strong); }

/* ---------- MOTION ---------- */
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
    html { scroll-behavior:auto; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px) {
    .nav-links { overflow-x:auto; }
}
@media (max-width:640px) {
    .nav-links { display:none; }
    .section { padding:56px 0; }
    .nav-toggle { display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--surface); border:1px solid var(--line); color:var(--ink); font-size:1.15rem; cursor:pointer; }
    .mobile-menu { position:absolute; top:calc(var(--nav-h,64px) + 8px); left:12px; right:12px; z-index:60; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-lg,0 12px 32px rgba(0,0,0,0.14)); padding:10px; display:flex; flex-direction:column; gap:2px; }
    .mobile-menu a { display:block; padding:13px 14px; border-radius:10px; text-decoration:none; font-size:0.95rem; font-weight:500; color:var(--ink); }
    .mobile-menu a:hover { background:var(--surface-soft, #eef3f6); }
    .mobile-menu a.btn-primary { margin-top:6px; text-align:center; }
    .mobile-menu .lang-switch { color:var(--teal); font-weight:600; }
}

/* Hidden by default on desktop; the button only shows <640px */
.nav-toggle { display:none; }
.mobile-menu[hidden] { display:none; }