@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
    --tp-crimson-pulse: #A60000;
    --tp-deep-obsidian: #550000;
    --tp-ghost-gray: #F5F5F5;
    --tp-surface-container-lowest: #ffffff;
    --tp-border-stroke: #D1D1D1;
    --tp-interface-blue: #0099E5;
    
    --font-heading: 'Hanken Grotesk', sans-serif;
    --font-body: 'Hanken Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

body {
    font-family: var(--font-body);
    background-color: var(--tp-surface-container-lowest);
    color: #1a1c1c;
    overflow-x: hidden;
}

::selection {
    background: var(--tp-crimson-pulse);
    color: white;
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--tp-deep-obsidian);
}

.text-crimson { color: var(--tp-crimson-pulse) !important; }
.bg-crimson { background-color: var(--tp-crimson-pulse) !important; }
.text-obsidian { color: var(--tp-deep-obsidian) !important; }
.bg-obsidian { background-color: var(--tp-deep-obsidian) !important; }
.bg-ghost { background-color: var(--tp-ghost-gray) !important; }
.bg-ghost { background-color: var(--tp-ghost-gray) !important; }

.font-mono { font-family: var(--font-mono) !important; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-tighter { letter-spacing: -0.05em; }

/* Custom Utilities */
.shard-clip {
    clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
}

.shard-overlay {
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
}

.text-shimmer {
    background: linear-gradient(90deg, #A60000, #360D0D, #A60000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 5s linear infinite;
}

@keyframes shimmer {
    to { background-position: 200% center; }
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

/* Custom Buttons */
.btn-tp-primary {
    background: linear-gradient(135deg, var(--tp-crimson-pulse), var(--tp-deep-obsidian));
    color: white;
    font-family: var(--font-mono);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}
.btn-tp-primary:hover {
    filter: brightness(1.1);
    color: white;
    text-decoration: none;
}

.btn-tp-outline {
    border: 2px solid var(--tp-deep-obsidian);
    color: var(--tp-deep-obsidian);
    font-family: var(--font-mono);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1rem 2rem;
    border-radius: 0;
    transition: all 0.3s ease;
    background: transparent;
    display: inline-block;
    text-decoration: none;
}
.btn-tp-outline:hover {
    background-color: var(--tp-deep-obsidian);
    color: white;
    text-decoration: none;
}

/* Navbar */
.tp-navbar {
    border-bottom: 1px solid var(--tp-border-stroke);
    background: white;
}
.tp-nav-link {
    color: var(--tp-deep-obsidian);
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 14px;
    padding: 2.5rem 1rem !important;
    transition: color 0.3s;
}
.tp-nav-link:hover, .tp-nav-link.active {
    color: var(--tp-crimson-pulse);
}

/* Slick Slider Customization */
.hero-slider-wrapper {
    position: relative;
    border: 1px solid var(--tp-border-stroke);
}
.hero-slide {
    height: 600px;
    position: relative;
}
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-slide-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(166, 0, 0, 0.1);
    mix-blend-mode: multiply;
}

/* Cards & Components */
.tp-card {
    background: white;
    border: 1px solid var(--tp-border-stroke);
    padding: 2.5rem;
    transition: all 0.3s;
    height: 100%;
}
.tp-card:hover {
    border-color: var(--tp-crimson-pulse);
    transform: translateY(-5px);
}
.tp-card.dark-card {
    background: var(--tp-deep-obsidian);
    border-color: var(--tp-deep-obsidian);
    color: white;
}
.tp-card.dark-card:hover {
    border-color: var(--tp-crimson-pulse);
}
.tp-card.dark-card h3 {
    color: white;
}
.tp-icon-box {
    width: 48px;
    height: 48px;
    background: var(--tp-ghost-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    transition: all 0.3s;
}
.tp-card:hover .tp-icon-box {
    background: var(--tp-crimson-pulse);
    color: white;
}
.tp-card.dark-card .tp-icon-box {
    background: rgba(255,255,255,0.1);
    color: white;
}

/* Layout Utilities (Replaces Inline Styles) */
.max-w-1280 { max-width: 1280px; margin-left: auto; margin-right: auto; }
.py-tp-lg { padding-top: 6rem; padding-bottom: 6rem; }
.py-tp-xl { padding-top: 8rem; padding-bottom: 8rem; }
.py-tp-xxl { padding-top: 10rem; padding-bottom: 10rem; }
.lh-lg { line-height: 1.8 !important; }
.lh-1 { line-height: 1 !important; }

.tech-watermark {
    font-size: 200px;
    opacity: 0.1;
    line-height: 1;
    font-weight: bold;
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.gradient-bg-crimson {
    background: linear-gradient(135deg, var(--tp-crimson-pulse) 0%, #5a0000 100%);
}

.opacity-10 { opacity: 0.1; }
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }
.opacity-90 { opacity: 0.9; }

.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: #25D366;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 100;
    text-decoration: none;
    transition: transform 0.3s ease;
}
.whatsapp-float:hover {
    transform: scale(1.05);
    color: white;
}

.h-400px { height: 400px; }
.h-500px { height: 500px; }
.h-600px { height: 600px; }

.img-cover { object-fit: cover; }
.filter-contrast-120 { filter: contrast(1.2); }

.border-opacity-10 { border-color: rgba(0,0,0,0.1) !important; }
.border-opacity-25 { border-color: rgba(0,0,0,0.25) !important; }
.w-40px { width: 40px; }
.h-2px { height: 2px; }

.badge-obsidian {
    background-color: rgba(54, 13, 13, 0.5);
    color: white;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    letter-spacing: 0.1em;
}

.font-size-85rem { font-size: 0.85rem; }
.font-size-75rem { font-size: 0.75rem; }
.font-size-70rem { font-size: 0.7rem; }
.font-size-90rem { font-size: 0.9rem; }