/*
   Wartek Cilincing — Dermaga Digital Theme Layer
   This file adds the Cilincing visual identity without changing the reference CSS structure.
*/

:root {
    --primary-dark: #0f2942;
    --primary: #1d8b86;
    --primary-light: #4eb8ae;
    --accent-coral: #e76f51;
    --accent-sand: #f4e7d0;
    --accent-green: #16a34a;
    --accent-green-dark: #15803d;
    --gray-50: #fffaf2;
    --gray-100: #f6efe4;
    --gray-200: #e8ded0;
    --gray-300: #d6c9b9;
    --gray-400: #9d9488;
    --gray-500: #716a61;
    --gray-600: #554f48;
    --gray-700: #30322f;
    --gray-800: #1b272d;
    --gray-900: #0f1e27;
    --shadow-sm: 0 1px 2px 0 rgb(15 41 66 / 0.06);
    --shadow: 0 2px 5px 0 rgb(15 41 66 / 0.08), 0 1px 2px -1px rgb(15 41 66 / 0.08);
    --shadow-md: 0 6px 12px -4px rgb(15 41 66 / 0.14), 0 3px 6px -3px rgb(15 41 66 / 0.1);
    --shadow-lg: 0 16px 28px -12px rgb(15 41 66 / 0.22), 0 6px 10px -6px rgb(15 41 66 / 0.14);
    --shadow-xl: 0 28px 42px -18px rgb(15 41 66 / 0.28), 0 12px 18px -10px rgb(15 41 66 / 0.14);
    --radius-sm: 0.35rem;
    --radius: 0.55rem;
    --radius-md: 0.9rem;
    --radius-lg: 1.15rem;
    --transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #fffdf8;
    color: var(--gray-700);
}

h1, h2, h3, h4, h5, h6,
.logo,
.nav-list a,
.btn,
.eyebrow {
    font-family: 'Manrope', 'Inter', sans-serif;
}

.header {
    background: rgba(255, 253, 248, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(29, 139, 134, 0.12);
}

.logo img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.logo-text {
    letter-spacing: -0.02em;
}

.logo-text small {
    color: var(--primary);
    letter-spacing: 0.02em;
}

.nav-list a:hover,
.nav-list a.active {
    color: var(--primary-dark);
    background: #e9f4f0;
}

.hero,
.service-hero {
    background:
        linear-gradient(135deg, rgba(15, 41, 66, 0.98) 0%, rgba(18, 76, 88, 0.97) 56%, rgba(29, 139, 134, 0.94) 100%);
    isolation: isolate;
}

.hero::before {
    background-image:
        linear-gradient(135deg, rgba(231, 111, 81, 0.16) 0 12%, transparent 12% 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cpath d='M0 48 C32 24 54 68 86 44 S130 20 160 38' fill='none' stroke='%23ffffff' stroke-opacity='.11' stroke-width='1.5'/%3E%3Cpath d='M0 62 C32 38 54 82 86 58 S130 34 160 52' fill='none' stroke='%23f4e7d0' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
    background-size: auto, 320px 160px;
    opacity: 1;
}

.hero::after {
    content: '';
    position: absolute;
    right: -8%;
    bottom: -45%;
    width: 70%;
    height: 90%;
    border: 1px solid rgba(244, 231, 208, 0.22);
    border-radius: 50%;
    transform: rotate(-9deg);
    pointer-events: none;
}

.hero-content,
.hero-image {
    animation: cilincing-reveal 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.hero-image {
    animation-delay: 0.08s;
    border: 8px solid rgba(255, 253, 248, 0.12);
    background: rgba(255, 253, 248, 0.08);
}

.hero-content h1 span {
    color: var(--accent-coral);
}

.hero-feature svg {
    color: var(--accent-sand);
}

.btn-primary {
    background: var(--accent-coral);
    border-color: var(--accent-coral);
}

.btn-primary:hover {
    background: #c9553a;
    border-color: #c9553a;
}

.btn-secondary {
    color: var(--primary-dark);
    border-color: rgba(244, 231, 208, 0.72);
    background: rgba(255, 253, 248, 0.96);
}

.btn-secondary:hover {
    color: var(--white);
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.service-card,
.testimonial-card,
.process-step,
.sidebar-card {
    border-color: var(--gray-200);
    box-shadow: 0 1px 0 rgba(15, 41, 66, 0.04);
}

.service-card:nth-child(3n + 2) {
    transform: translateY(0.65rem);
}

.service-card:nth-child(3n + 2):hover {
    transform: translateY(0.2rem);
}

.service-icon {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    border-radius: 0.55rem 1rem 0.55rem 1rem;
}

.read-more,
.service-card .read-more,
.sidebar-list a:hover,
.area-card:hover {
    color: var(--primary-dark);
}

.section-alt {
    background:
        linear-gradient(180deg, rgba(246, 239, 228, 0.74), rgba(255, 253, 248, 0.86)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='80' viewBox='0 0 180 80'%3E%3Cpath d='M0 45 C35 17 62 68 95 43 S145 18 180 40' fill='none' stroke='%231d8b86' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
    background-size: auto, 360px 160px;
}

.eyebrow {
    color: var(--primary);
    position: relative;
}

.eyebrow::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 3px;
    margin: 0 0.55rem 0.2rem 0;
    background: var(--accent-coral);
    transform: skewX(-24deg);
}

.callout {
    background: #edf7f4;
    border-left-color: var(--accent-coral);
}

.callout strong {
    color: var(--primary-dark);
}

.process-step::before {
    background: var(--accent-coral);
}

.feature-icon {
    background: #edf7f4;
    border-color: rgba(29, 139, 134, 0.2);
    color: var(--primary);
}

.footer {
    background: var(--primary-dark);
}

.footer a:hover {
    color: var(--accent-sand);
}

.wa-float {
    box-shadow: 0 12px 20px rgba(15, 41, 66, 0.18);
}

@keyframes cilincing-reveal {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

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