/* Extracted from templates/company/home.html (redesign 2026-05-31). */
/* ─── Reset spacing untuk landing ────────────────────────────────────── */
.co-shell { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
/* ─── Hero ──────────────────────────────────────────────────────────── */
.co-hero { padding: 6rem 0 4rem; text-align: center; }
.co-hero .co-eyebrow {
display: inline-block; padding: 0.4rem 1rem;
background: color-mix(in srgb, var(--c-app-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-app-accent) 32%, transparent);
border-radius: 999px; font-size: 0.78rem; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--accent, #4DA3FF); margin-bottom: 1.4rem;
}
.co-hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.6rem, 6vw, 4.6rem);
font-weight: 600; letter-spacing: -0.02em;
margin: 0 0 1.4rem; line-height: 1.05;
}
.co-hero h1 em { font-style: italic; color: var(--accent, #4DA3FF); }
.co-hero p {
font-size: 1.18rem; line-height: 1.6;
color: var(--text-secondary, #cbd5e1);
max-width: 660px; margin: 0 auto 2.4rem;
}
.co-cta-row { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.co-btn {
padding: 1rem 1.8rem; border-radius: 12px; font-weight: 600; font-size: 1rem;
text-decoration: none; transition: transform 0.15s, box-shadow 0.15s;
display: inline-flex; align-items: center; gap: 0.5rem;
}
.co-btn-primary {
background: var(--grad); color: #fff;
box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--c-app-accent) 55%, transparent);
}
.co-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -10px color-mix(in srgb, var(--c-app-accent) 70%, transparent); }
.co-btn-ghost {
background: rgba(255,255,255,0.04); color: var(--text-primary);
border: 1px solid rgba(255,255,255,0.10);
}
.co-btn-ghost:hover { background: rgba(255,255,255,0.08); }
/* ─── Stats ─────────────────────────────────────────────────────────── */
.co-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 4rem 0; }
.co-stat { padding: 1.6rem; text-align: center; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.co-stat .num { font-family: 'Playfair Display', serif; font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--accent); }
.co-stat .lbl { font-size: 0.86rem; color: var(--text-secondary); margin-top: 0.4rem; }
/* ─── Features ──────────────────────────────────────────────────────── */
.co-features { padding: 5rem 0; }
.co-features h2 {
font-family: 'Playfair Display', serif; font-size: 2.4rem;
text-align: center; margin: 0 0 0.8rem; font-weight: 600;
}
.co-features h2 em { font-style: italic; color: var(--accent); }
.co-features .lead { text-align: center; color: var(--text-secondary); max-width: 560px; margin: 0 auto 3rem; }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.4rem; }
.feat-card {
padding: 2rem; border-radius: 18px;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
transition: transform 0.3s, border-color 0.3s;
}
.feat-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c-app-accent) 32%, transparent); }
.feat-card .icon { font-size: 2.2rem; margin-bottom: 0.8rem; }
.feat-card h3 { font-size: 1.2rem; margin: 0 0 0.5rem; font-weight: 600; }
.feat-card p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; margin: 0; }
/* ─── Roles ─────────────────────────────────────────────────────────── */
.co-roles { padding: 5rem 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c-app-accent) 4%, transparent) 0%, transparent 100%); border-radius: 36px; margin: 3rem 0; }
.co-roles h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; text-align: center; margin: 0 0 2.6rem; font-style: italic; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.role-card { padding: 1.6rem; border-radius: 14px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); }
.role-card h4 { margin: 0 0 0.4rem; color: var(--accent); }
.role-card p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; }
/* ─── Testimonial ───────────────────────────────────────────────────── */
.co-testi { padding: 5rem 0; text-align: center; }
.co-testi blockquote {
font-family: 'Playfair Display', serif;
font-style: italic; font-size: 1.6rem; line-height: 1.5;
max-width: 720px; margin: 0 auto 1.6rem;
}
.co-testi cite { color: var(--text-secondary); font-style: normal; font-size: 0.92rem; }
/* ─── CTA Final ─────────────────────────────────────────────────────── */
.co-final-cta { padding: 5rem 0 6rem; text-align: center; }
.co-final-cta h2 {
font-family: 'Playfair Display', serif; font-size: 2.4rem; margin: 0 0 1rem;
}
.co-final-cta p { color: var(--text-secondary); margin: 0 0 2rem; }
/* ─── Floating WA ───────────────────────────────────────────────────── */
.float-wa {
position: fixed; bottom: 24px; right: 24px;
width: 56px; height: 56px; border-radius: 50%;
background: #25D366;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
z-index: 100; text-decoration: none;
transition: transform 0.15s;
}
.float-wa:hover { transform: scale(1.08); }
.float-wa svg { width: 28px; height: 28px; fill: white; }
/* ─── Cookie banner ─────────────────────────────────────────────────── */
.cookie-banner {
position: fixed; bottom: 0; left: 0; right: 0;
padding: 1rem 1.5rem;
background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(8px);
border-top: 1px solid rgba(255,255,255,0.10);
z-index: 99; display: none;
color: var(--text-primary);
}
.cookie-banner.show { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: space-between; max-width: 1240px; margin: 0 auto; }
.cookie-banner p { margin: 0; font-size: 0.92rem; flex: 1; min-width: 240px; }
.cookie-banner button {
padding: 0.6rem 1.2rem; border-radius: 8px; font-weight: 600; cursor: pointer;
border: 0; background: var(--accent); color: #1a1a1a;
}
.cookie-banner a { color: var(--accent); }