/* =========================================================
CNC · ARTSITES
Main stylesheet
========================================================= */

/* ---------------------------------------------------------
VARIABLES
--------------------------------------------------------- */

:root {

    
--blue: #1769e0;
--blue-dark: #0f56bd;
--blue-light: #eef5ff;

--dark: #181818;
--dark-soft: #202020;

--text: #17202a;
--text-soft: #66717d;
--text-light: #d0d4d8;

--white: #ffffff;

--bg: #f6f7f9;

--border: #e1e5e9;

--radius-sm: 8px;
--radius: 12px;
--radius-lg: 18px;

--container: 1100px;
    

}

/* ---------------------------------------------------------
RESET
--------------------------------------------------------- */

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {

    
margin: 0;

background: var(--bg);
color: var(--text);

font-family:
    Arial,
    Helvetica,
    sans-serif;

font-size:
    clamp(0.95rem, 0.92rem + 0.15vw, 1rem);

line-height: 1.6;

-webkit-font-smoothing: antialiased;
    

}

a {
color: inherit;
}

button {
font: inherit;
}

/* ---------------------------------------------------------
CONTAINER
--------------------------------------------------------- */

.container {

    
width:
    min(
        calc(100% - 40px),
        var(--container)
    );

margin-inline: auto;
    

}

/* =========================================================
HEADER
========================================================= */

.site-header {

    
position: relative;

background: var(--white);

border-bottom:
    1px solid var(--border);

z-index: 100;
    

}

.nav {

    
min-height: 70px;

display: flex;

align-items: center;

gap: clamp(1rem, 2vw, 2rem);
    

}

/* ---------------------------------------------------------
BRAND
--------------------------------------------------------- */

.brand {

    
flex: 0 0 auto;

color: var(--text);

text-decoration: none;

font-size:
    clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem);

font-weight: 800;

letter-spacing: -0.03em;
    

}

.brand span {
color: var(--blue);
}

/* ---------------------------------------------------------
DESKTOP NAV
--------------------------------------------------------- */

.cnc-nav {

    
display: flex;

align-items: center;

justify-content: center;

gap: 0.1rem;

margin-inline: auto;
    

}

.nav-link {

    
position: relative;

display: inline-flex;

align-items: center;

min-height: 38px;

padding:
    0.4rem
    0.65rem;

border-radius: 7px;

color: var(--text-soft);

text-decoration: none;

font-size:
    clamp(0.72rem, 0.69rem + 0.12vw, 0.82rem);

font-weight: 700;

white-space: nowrap;

transition:
    background 0.2s ease,
    color 0.2s ease;
    

}

.nav-link:hover {

    
background: var(--blue-light);

color: var(--blue);
    

}

.nav-link.active {

    
background: var(--blue-light);

color: var(--blue);
    

}

/* disabled */

.nav-disabled {

    
cursor: default;

opacity: 0.55;
    

}

.nav-disabled:hover {

    
background: transparent;

color: var(--text-soft);
    

}

/* desktop hidden status */

.nav-link small {
display: none;
}

/* ---------------------------------------------------------
BACK LINK
--------------------------------------------------------- */

.back-link {

    
flex: 0 0 auto;

color: var(--text-soft);

text-decoration: none;

font-size:
    clamp(0.72rem, 0.69rem + 0.12vw, 0.82rem);

white-space: nowrap;

transition:
    color 0.2s ease;
    

}

.back-link:hover {
color: var(--blue);
}

/* ---------------------------------------------------------
BURGER
--------------------------------------------------------- */

.menu-toggle {

    
display: none;

width: 42px;
height: 42px;

padding: 0;

border: 1px solid var(--border);

border-radius: 8px;

background: var(--white);

cursor: pointer;

align-items: center;
justify-content: center;

flex-direction: column;

gap: 5px;
    

}

.menu-toggle span {

    
display: block;

width: 19px;
height: 2px;

border-radius: 2px;

background: var(--text);

transition:
    transform 0.2s ease,
    opacity 0.2s ease;
    

}

/* burger -> X */

.menu-toggle.is-open span:nth-child(1) {

    
transform:
    translateY(7px)
    rotate(45deg);
    

}

.menu-toggle.is-open span:nth-child(2) {

    
opacity: 0;
    

}

.menu-toggle.is-open span:nth-child(3) {

    
transform:
    translateY(-7px)
    rotate(-45deg);
    

}

/* =========================================================
MOBILE MENU
========================================================= */

.mobile-menu {

    
display: none;

background: var(--white);

border-top:
    1px solid var(--border);
    

}

.mobile-menu-inner {

    
width:
    min(
        calc(100% - 28px),
        var(--container)
    );

margin-inline: auto;

padding-block:
    1.25rem
    1.5rem;
    

}

.mobile-menu-heading {

    
padding-bottom:
    1rem;

border-bottom:
    1px solid var(--border);
    

}

.mobile-menu-heading span {

    
display: block;

color: var(--text);

font-size:
    clamp(1rem, 0.95rem + 0.2vw, 1.15rem);

font-weight: 800;
    

}

.mobile-menu-heading small {

    
display: block;

margin-top: 0.15rem;

color: var(--text-soft);

font-size:
    clamp(0.72rem, 0.69rem + 0.12vw, 0.82rem);
    

}

/* MOBILE NAV */

.mobile-nav {

    
display: grid;

gap: 0.25rem;

padding-block:
    0.75rem;
    

}

.mobile-nav-link {

    
display: flex;

align-items: center;

justify-content: space-between;

min-height: 46px;

padding:
    0.65rem
    0.75rem;

border-radius: 8px;

color: var(--text);

text-decoration: none;

font-size:
    clamp(0.86rem, 0.82rem + 0.15vw, 0.95rem);

font-weight: 700;
    

}

.mobile-nav-link:hover {

    
background: var(--blue-light);

color: var(--blue);
    

}

.mobile-nav-link.active {

    
background: var(--blue-light);

color: var(--blue);
    

}

.mobile-nav-link.disabled {

    
color: var(--text-soft);

opacity: 0.55;

cursor: default;
    

}

.mobile-nav-link.disabled:hover {

    
background: transparent;

color: var(--text-soft);
    

}

.mobile-nav-link small {

    
font-size:
    clamp(0.62rem, 0.59rem + 0.1vw, 0.7rem);

font-weight: 600;

color: #8b949e;
    

}

/* MOBILE BACK */

.mobile-back {

    
display: block;

padding-top: 1rem;

border-top:
    1px solid var(--border);

color: var(--text-soft);

text-decoration: none;

font-size:
    clamp(0.78rem, 0.74rem + 0.12vw, 0.88rem);

font-weight: 700;
    

}

.mobile-back:hover {
color: var(--blue);
}

/* =========================================================
HERO
========================================================= */

.hero {

    
position: relative;

overflow: hidden;

background: var(--dark);

color: var(--white);

padding-block:
    clamp(4.5rem, 9vw, 7.5rem);
    

}

.hero::before {

    
content: "";

position: absolute;

width: 520px;
height: 520px;

right: -220px;
top: -280px;

border:
    1px solid rgba(255, 255, 255, 0.06);

border-radius: 50%;
    

}

.hero::after {

    
content: "";

position: absolute;

width: 300px;
height: 300px;

left: -190px;
bottom: -230px;

border:
    1px solid rgba(255, 255, 255, 0.04);

border-radius: 50%;
    

}

.hero-content {

    
position: relative;

z-index: 1;

max-width: 800px;
    

}

.eyebrow {

    
display: inline-flex;

padding:
    0.4rem
    0.75rem;

border:
    1px solid rgba(184, 201, 255, 0.2);

border-radius: 999px;

background: #252d38;

color: #b8c9ff;

font-size:
    clamp(0.68rem, 0.64rem + 0.12vw, 0.78rem);

font-weight: 800;

letter-spacing: 0.05em;
    

}

.hero h1 {

    
margin:
    clamp(1rem, 2vw, 1.5rem)
    0;

max-width: 800px;

font-size:
    clamp(2.6rem, 6vw, 4.8rem);

line-height: 0.98;

letter-spacing: -0.05em;
    

}

.hero h1 span {
color: var(--blue);
}

.hero-lead {

    
max-width: 720px;

margin: 0;

color: var(--text-light);

font-size:
    clamp(1rem, 1rem + 0.45vw, 1.2rem);

line-height: 1.65;
    

}

/* =========================================================
SECTIONS
========================================================= */

.section {

    
padding-block:
    clamp(4rem, 7vw, 6.5rem);
    

}

.section-dark {

    
background: var(--dark);

color: var(--white);
    

}

.section-heading {

    
max-width: 720px;

margin-bottom:
    clamp(2rem, 4vw, 3rem);
    

}

.section-label {

    
display: block;

margin-bottom:
    0.6rem;

color: var(--blue);

font-size:
    clamp(0.68rem, 0.64rem + 0.12vw, 0.78rem);

font-weight: 800;

letter-spacing: 0.08em;
    

}

.section-heading h2,
.about-intro h2 {

    
margin:
    0 0 0.8rem;

font-size:
    clamp(2rem, 4vw, 2.8rem);

line-height: 1.08;

letter-spacing: -0.04em;
    

}

.section-heading p {

    
margin: 0;

color: var(--text-soft);

font-size:
    clamp(0.92rem, 0.88rem + 0.2vw, 1.08rem);
    

}

/* =========================================================
TOOLS
========================================================= */

.tools-grid {

    
display: grid;

grid-template-columns:
    repeat(3, minmax(0, 1fr));

gap:
    clamp(1rem, 2vw, 1.25rem);
    

}

.tool-card {

    
display: flex;

flex-direction: column;

min-height: 310px;

padding:
    clamp(1.25rem, 2.5vw, 1.75rem);

background: var(--white);

border:
    1px solid var(--border);

border-radius: var(--radius);

transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
    

}

.tool-card:hover {

    
transform:
    translateY(-4px);

border-color:
    #cfd7e0;

box-shadow:
    0 15px 40px rgba(23, 32, 42, 0.08);
    

}

.tool-card-active {

    
border-color:
    rgba(23, 105, 224, 0.3);

box-shadow:
    0 8px 30px rgba(23, 105, 224, 0.08);
    

}

.tool-card-top {

    
display: flex;

align-items: center;
justify-content: space-between;

gap: 1rem;

margin-bottom:
    1.25rem;
    

}

.tool-icon {

    
display: flex;

align-items: center;
justify-content: center;

width: 46px;
height: 46px;

border-radius: 10px;

background: var(--blue-light);

color: var(--blue);

font-size: 1.2rem;

font-weight: 800;
    

}

.tool-status {

    
display: inline-flex;

padding:
    0.3rem
    0.55rem;

border-radius: 5px;

background: var(--blue-light);

color: var(--blue);

font-size:
    clamp(0.58rem, 0.55rem + 0.1vw, 0.68rem);

font-weight: 800;

letter-spacing: 0.03em;
    

}

.tool-status-soon {

    
background: #f0f2f4;

color: #737d87;
    

}

.tool-card h3 {

    
margin:
    0 0 0.6rem;

color: var(--text);

font-size:
    clamp(1.1rem, 1rem + 0.25vw, 1.3rem);

line-height: 1.2;
    

}

.tool-card p {

    
margin:
    0 0 1.5rem;

color: var(--text-soft);

font-size:
    clamp(0.84rem, 0.81rem + 0.15vw, 0.95rem);

line-height: 1.65;
    

}

.tool-link {

    
display: inline-flex;

align-items: center;

gap: 0.5rem;

margin-top: auto;

color: var(--blue);

text-decoration: none;

font-size:
    clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);

font-weight: 800;
    

}

.tool-link:hover {
color: var(--blue-dark);
}

.tool-link span {

    
transition:
    transform 0.2s ease;
    

}

.tool-link:hover span {

    
transform:
    translateX(4px);
    

}

.tool-link.disabled {

    
color: #8b949e;

cursor: default;
    

}

/* =========================================================
ABOUT
========================================================= */

.about-grid {

    
display: grid;

grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

gap:
    clamp(2rem, 7vw, 6rem);

align-items: start;
    

}

.about-intro h2 {

    
color: var(--white);
    

}

.about-content {

    
color: var(--text-light);

font-size:
    clamp(0.92rem, 0.88rem + 0.2vw, 1.05rem);
    

}

.about-content p {

    
margin:
    0 0 1.25rem;
    

}

.about-content p:last-child {
margin-bottom: 0;
}

/* =========================================================
CTA
========================================================= */

.cta-section {

    
padding-block:
    clamp(3rem, 6vw, 5rem);

background: var(--bg);
    

}

.cta-box {

    
display: flex;

align-items: center;

justify-content: space-between;

gap: 2rem;

padding:
    clamp(1.5rem, 4vw, 2.75rem);

background: var(--white);

border:
    1px solid var(--border);

border-radius: var(--radius-lg);

box-shadow:
    0 10px 35px rgba(23, 32, 42, 0.05);
    

}

.cta-box h2 {

    
margin:
    0 0 0.35rem;

font-size:
    clamp(1.6rem, 3vw, 2.25rem);

line-height: 1.1;

letter-spacing: -0.035em;
    

}

.cta-box p {

    
margin: 0;

color: var(--text-soft);

font-size:
    clamp(0.84rem, 0.81rem + 0.15vw, 0.95rem);
    

}

/* =========================================================
BUTTON
========================================================= */

.btn {

    
display: inline-flex;

align-items: center;
justify-content: center;

gap: 0.6rem;

min-height: 48px;

padding:
    0.8rem
    1.25rem;

border-radius: var(--radius-sm);

text-decoration: none;

font-size:
    clamp(0.84rem, 0.81rem + 0.15vw, 0.95rem);

font-weight: 800;

white-space: nowrap;

transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
    

}

.btn:hover {

    
transform:
    translateY(-2px);
    

}

.btn-primary {

    
background: var(--blue);

color: var(--white);

box-shadow:
    0 8px 25px rgba(23, 105, 224, 0.2);
    

}

.btn-primary:hover {

    
background:
    var(--blue-dark);
    

}

/* =========================================================
FOOTER
========================================================= */

.footer {

    
background: var(--white);

border-top:
    1px solid var(--border);

color: var(--text-soft);
    

}

.footer-inner {

    
min-height: 75px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 1rem;

font-size:
    clamp(0.72rem, 0.69rem + 0.12vw, 0.84rem);
    

}

.footer-inner strong {
color: var(--text);
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 950px) {

    
.cnc-nav {
    gap: 0;
}

.nav-link {
    padding-inline:
        0.5rem;
}

.back-link {
    display: none;
}

.tools-grid {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.about-grid {

    grid-template-columns: 1fr;

    gap: 2rem;
}
    

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

    
.container {

    width:
        min(
            calc(100% - 28px),
            var(--container)
        );
}


.nav {

    min-height: 62px;

    justify-content: space-between;
}


/* hide desktop nav */

.cnc-nav,
.back-link {

    display: none;
}


/* show burger */

.menu-toggle {

    display: flex;
}


/* mobile menu */

.mobile-menu {

    display: block;

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height 0.3s ease,
        opacity 0.2s ease;
}


.mobile-menu.is-open {

    max-height: 700px;

    opacity: 1;
}


.hero {

    padding-block:
        clamp(3.5rem, 12vw, 5rem);
}


.tools-grid {

    grid-template-columns: 1fr;
}


.tool-card {

    min-height: 0;
}


.cta-box {

    align-items: flex-start;

    flex-direction: column;
}


.cta-box .btn {

    width: 100%;
}


.footer-inner {

    min-height: 90px;

    align-items: flex-start;

    justify-content: center;

    flex-direction: column;
}
    

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    
.container {

    width:
        min(
            calc(100% - 24px),
            var(--container)
        );
}


.hero h1 {

    font-size:
        clamp(2.35rem, 13vw, 3rem);
}


.mobile-menu-inner {

    padding-bottom:
        1.25rem;
}
    

}