/* Shared brand foundation for sites that opt into the current AditiKraft visual system. */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --transition-fast: 0ms linear;
    --transition-base: 0ms linear;
    --transition-slow: 0ms linear;
    --transition-bounce: 0ms linear;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    /* Cloth-grain background. A single, very faint speckle texture replaces
       the previous radial primary glow. The grain is anchored to the viewport
       so it stays consistent during scroll, and rendered at low contrast so it
       reads as "printed on paper" rather than as a visual effect. No animation,
       no gradients, no pretend depth. */
    background-image: var(--paper-grain);
    background-size: 220px 220px;
    background-attachment: fixed;
    background-repeat: repeat;
    /* Body OpenType polish — contextual alternates and kerning for clean
       paragraph rendering; tabular numerals are scoped per-component. */
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    text-rendering: optimizeLegibility;
}

:root[data-theme="dark"] body,
body[data-theme="dark"] {
    /* Quieter grain on dark so it doesn't sparkle. */
    background-blend-mode: overlay;
}

/* The signature hairline — the brand's one ritual mark. A thin indigo rule
   fixed at the very top of every page on every AditiKraft site. It is
   structural, not decorative: it never grows beyond 3px and never moves. */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--thread);
    z-index: var(--z-toast);
    pointer-events: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-lg);
    /* Design-system type scale: Inter with normal-to-slightly-tight
       tracking, heading weights 650–700, no second family. */
    font-optical-sizing: auto;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    text-wrap: balance;
}

h1 {
    /* Page title 40/48; marketing display tops out at 48/56. */
    font-size: clamp(2.25rem, 2vw + 1.5rem, 3rem);
    color: var(--text-primary);
    line-height: 1.17;
    letter-spacing: -0.015em;
    font-weight: 700;
}

h2 {
    /* Section heading 32/40. */
    font-size: clamp(1.75rem, 1.2vw + 1.25rem, 2rem);
    line-height: 1.25;
    letter-spacing: -0.012em;
    font-weight: 650;
}

h3 {
    /* Card groups and subsections 24/32. */
    font-size: clamp(1.35rem, 0.6vw + 1.15rem, 1.5rem);
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.33;
}

h4 {
    /* Card titles 20/28. */
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
}

h5 {
    font-size: 1.18rem;
    font-weight: 600;
}

/* The h6 is the editorial eyebrow / kicker tier. We keep it sans, uppercase,
   and hairline-spaced so it reads as metadata, not a heading. */
h6 {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-tertiary);
}

a {
    color: var(--link-color);
    text-decoration-color: color-mix(in srgb, var(--link-color) 45%, transparent);
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:visited {
    color: var(--link-color);
    text-decoration-color: color-mix(in srgb, var(--link-color) 45%, transparent);
}

:where(article, .ak-prose, .ak-legal-document, .legal-content) a:visited {
    color: var(--link-visited);
    text-decoration-color: color-mix(in srgb, var(--link-visited) 45%, transparent);
}

a:hover,
a:focus-visible {
    color: var(--link-hover);
    text-decoration-color: var(--link-hover);
}

button,
input,
select,
textarea {
    font: inherit;
}

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px var(--focus-ring-inner),
    0 0 0 4px var(--focus-ring);
}

p {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.72;
    max-width: var(--measure-prose);
}

.lead {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: var(--measure-tight);
}

.main-content {
    min-height: 100vh;
    padding-top: 100px;
    position: relative;
    z-index: var(--z-base);
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--space-container-inline);
    padding-left: var(--space-container-inline);
    max-width: 1400px;
}

section {
    padding: var(--space-surface-padding) 0;
    position: relative;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

*,
*::before,
*::after {
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
}

.fade-in,
.slide-up,
.animate-fade-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.card:hover,
.ak-social-links__link:hover,
.not-found-content:hover,
.btn-primary:hover,
.btn-primary:hover:not(:disabled),
.pricing-card:hover,
.pricing-card.popular:hover,
.feature-card:hover,
.feature-item:hover,
.service-card:hover,
.register-card:hover,
.navbar-brand:hover .logo-img,
.product-card:hover .product-image,
.feature-list li:hover,
.benefit-card:hover {
    transform: none !important;
}

@media (max-width: 768px) {
    :root {
        --space-4xl: 4rem;
    }

    .container {
        padding: 0 var(--space-container-inline-mobile);
    }
}