/* =========================================================
   MAYATECHNO — DESIGN TOKENS
========================================================= */

:root{
    /* color */
    --ink:#11140F;
    --ink-soft:#42463E;
    --stone:#6B6B60;
    --paper:#F7F5EF;
    --paper-dim:#EFEBE0;
    --paper-flat:#FFFFFF;
    --line:#DDD8C9;
    --line-strong:#C9C3AF;
    --teal:#0F6F62;
    --teal-deep:#0A4A41;
    --teal-tint:#E4EFEA;
    --wine:#6B1B3B;
    --wine-tint:#F2E6EA;

    /* type */
    --font-display:'Space Grotesk',ui-sans-serif,sans-serif;
    --font-body:'Inter',ui-sans-serif,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,monospace;

    /* layout */
    --max:1320px;
    --gutter:48px;
    --radius:3px;
}

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

html{ scroll-behavior:smooth; }

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

body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; }

.container{
    max-width:var(--max);
    margin:0 auto;
    padding:0 var(--gutter);
}

:focus-visible{
    outline:2px solid var(--teal);
    outline-offset:3px;
}

.skip-link{
    position:absolute;
    left:-9999px;
    top:0;
    background:var(--ink);
    color:#fff;
    padding:10px 18px;
    z-index:2000;
}
.skip-link:focus{ left:12px; top:12px; }

/* shared type */

.eyebrow{
    font-family:var(--font-mono);
    font-size:16px;
    letter-spacing:.04em;
    color:var(--wine);
    text-transform:lowercase;
    margin-bottom:18px;
}

.section-head{ max-width:680px; margin-bottom:64px; }
.section-head-wide{ max-width:760px; }

.section-head h2{
    font-family:var(--font-display);
    font-size:clamp(44px,5vw,62px);
    line-height:1.08;
    letter-spacing:-0.01em;
    font-weight:500;
    color:var(--ink);
    margin-bottom:18px;
}

.section-desc{
    font-size:20px;
    line-height:1.75;
    color:var(--stone);
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:var(--teal);
    color:#fff;
    text-decoration:none;
    font-weight:500;
    font-size:15px;
    padding:16px 26px;
    border:none;
    border-radius:var(--radius);
    cursor:pointer;
    transition:background .25s ease, transform .25s ease;
}
.btn-primary:hover{ background:var(--teal-deep); transform:translateY(-2px); }
.btn-primary svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; }

.btn-lg{ padding:18px 30px; font-size:16px; }
.btn-block{ width:100%; }

.btn-ghost{
    display:inline-flex;
    align-items:center;
    color:var(--ink);
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    border-bottom:1px solid var(--ink);
    padding-bottom:4px;
    transition:color .2s ease, border-color .2s ease;
}
.btn-ghost:hover{ color:var(--teal); border-color:var(--teal); }

.diagram-label{
    font-family:var(--font-mono);
    font-size:20px;
    color:var(--stone);
    letter-spacing:.04em;
    margin-bottom:14px;
}

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

.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(247,245,239,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}

.header-row{
    max-width:var(--max);
    margin:0 auto;
    height:78px;
    padding:0 var(--gutter);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.brand{
    display:flex;
    align-items:baseline;
    gap:2px;
    text-decoration:none;
    font-family:var(--font-mono);
    font-size:22px;
    font-weight:500;
    color:var(--ink);
    white-space:nowrap;
}
.brand-mark{ color:var(--wine); }
.brand-word span{ color:var(--teal); }

.site-nav ul{
    display:flex;
    gap:38px;
}
.site-nav a{
    text-decoration:none;
    font-size:18px;
    font-weight:500;
    color:var(--ink);
    position:relative;
    padding-bottom:4px;
}
.site-nav a::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:0; height:1px;
    background:var(--teal);
    transition:width .25s ease;
}
.site-nav a:hover::after{ width:100%; }

.header-actions{
    display:flex;
    align-items:center;
    gap:20px;
}

.status-chip{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-mono);
    font-size:18.5px;
    color:var(--ink-soft);
    border:1px solid var(--line);
    border-radius:100px;
    padding:7px 14px;
}
.status-dot{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--teal);
    box-shadow:0 0 0 0 rgba(15,111,98,.5);
    animation:statusPulse 2.4s infinite;
}
@keyframes statusPulse{
    0%{ box-shadow:0 0 0 0 rgba(15,111,98,.45); }
    70%{ box-shadow:0 0 0 6px rgba(15,111,98,0); }
    100%{ box-shadow:0 0 0 0 rgba(15,111,98,0); }
}

.nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:36px; height:36px;
    background:none;
    border:none;
    cursor:pointer;
}
.nav-toggle span{
    width:100%;
    height:2px;
    background:var(--ink);
    transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
    display:none;
    flex-direction:column;
    gap:24px;
    padding:28px var(--gutter) 32px;
    border-top:1px solid var(--line);
}
.mobile-nav ul{ display:flex; flex-direction:column; gap:20px; }
.mobile-nav a{ text-decoration:none; color:var(--ink); font-size:22px; font-weight:500; }
.mobile-nav.is-open{ display:flex; }

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

.hero{ padding:96px 0 100px; }

.hero-grid{
    max-width:var(--max);
    margin:0 auto;
    padding:0 var(--gutter);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.hero-heading{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(54px,7vw,86px);
    line-height:1.03;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin-bottom:28px;
}

.hero-desc{
    max-width:480px;
    font-size:22px;
    line-height:1.75;
    color:var(--ink-soft);
    margin-bottom:36px;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:30px;
    flex-wrap:wrap;
    margin-bottom:56px;
}

.hero-stats{
    display:flex;
    gap:40px;
    border-top:1px solid var(--line);
    padding-top:28px;
}
.hero-stats dt{
    font-family:var(--font-display);
    font-size:30px;
    color:var(--ink);
    margin-bottom:4px;
}
.hero-stats dd{
    font-size:13px;
    color:var(--stone);
}

.hero-diagram{
    background:var(--paper-flat);
    border:1px solid var(--line);
    padding:28px 28px 18px;
}

.schematic-svg{ width:100%; height:auto; display:block; }

.s-line{
    fill:none;
    stroke:var(--line-strong);
    stroke-width:1.4;
}
.s-line-dash{ stroke-dasharray:4 5; stroke:var(--wine); opacity:.55; }

.s-node rect{
    fill:var(--paper);
    stroke:var(--ink);
    stroke-width:1.2;
}
.s-node-accent rect{
    fill:var(--teal-tint);
    stroke:var(--teal);
}
.s-index{
    font-family:'IBM Plex Mono',monospace;
    font-size:15px;
    fill:var(--stone);
    letter-spacing:.05em;
}
.s-title{
    font-family:'Space Grotesk',sans-serif;
    font-size:22px;
    fill:var(--ink);
    font-weight:500;
}
.s-coord{
    font-family:'IBM Plex Mono',monospace;
    font-size:15px;
    fill:var(--stone);
}

/* =========================================================
   TRUSTBAR
========================================================= */

.trustbar{
    background:var(--paper-flat);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.trustbar-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:32px var(--gutter);
    flex-wrap:wrap;
}
.trustbar-label{
    font-family:var(--font-mono);
    font-size:17px;
    color:var(--stone);
    white-space:nowrap;
}
.trustbar-logos{
    display:flex;
    gap:48px;
    flex-wrap:wrap;
}
.trustbar-logos li{
    font-family:var(--font-display);
    font-size:20px;
    color:var(--line-strong);
    transition:color .25s ease;
    cursor:default;
}
.trustbar-logos li:hover{ color:var(--ink); }

/* =========================================================
   EXPERTISE
========================================================= */

.expertise{ padding:120px 0; }

.expertise-layout{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:64px;
}

.expertise-tabs{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.exp-tab{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    text-align:left;
    background:none;
    border:none;
    border-left:2px solid var(--line);
    cursor:pointer;
    padding:18px 24px;
    transition:border-color .25s ease, background .25s ease;
}
.exp-tab:hover{ background:var(--paper-dim); }
.exp-tab.active{
    border-color:var(--teal);
    background:var(--paper-flat);
}
.exp-tab-path{
    font-family:var(--font-mono);
    font-size:17.5px;
    color:var(--stone);
}
.exp-tab-name{
    font-family:var(--font-display);
    font-size:24px;
    color:var(--ink);
}
.exp-tab.active .exp-tab-path{ color:var(--teal); }

.exp-panel{ display:none; }
.exp-panel.active{ display:block; animation:fadeUp .4s ease; }

@keyframes fadeUp{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
}

.exp-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.exp-card{
    background:var(--paper-flat);
    border:1px solid var(--line);
    padding:36px;
    transition:transform .3s ease, box-shadow .3s ease;
}
.exp-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 36px rgba(17,20,15,.06);
}
.exp-card h3{
    font-family:var(--font-display);
    font-size:26px;
    font-weight:500;
    margin-bottom:24px;
}
.exp-card li{ margin-bottom:14px; }
.exp-card a{
    text-decoration:none;
    font-size:25px;
    color:var(--ink);
    position:relative;
    display:inline-block;
}
.exp-card a::after{
    content:"";
    position:absolute;
    left:0; bottom:-3px;
    width:0; height:1px;
    background:var(--wine);
    transition:width .25s ease;
}
.exp-card a:hover::after{ width:100%; }
.exp-card a:hover{ color:var(--wine); }

/* =========================================================
   DELIVERY
========================================================= */

.delivery{ padding:120px 0; background:var(--paper-dim); }

.delivery-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:48px;
    align-items:start;
}

.delivery-log{
    background:var(--ink);
    color:#E8E6DC;
    padding:32px;
    border-radius:var(--radius);
    position:sticky;
    top:110px;
}
.delivery-log .diagram-label{ color:#9A9A8D; }
.log-lines p{
    font-family:var(--font-mono);
    font-size:17.5px;
    line-height:2.1;
    color:#C9C7BB;
}
.log-tag{ color:#7FBDB1; margin-right:6px; }
.log-tag-active{ color:#E0A8BC; }
.log-cursor{
    color:var(--teal-tint);
    animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.delivery-accordion{ width:100%; }

.delivery-item{
    border-bottom:1px solid var(--line);
    background:var(--paper-flat);
}
.delivery-item:first-child{ border-top:1px solid var(--line); }

.delivery-trigger{
    width:100%;
    display:flex;
    align-items:center;
    gap:20px;
    background:none;
    border:none;
    text-align:left;
    cursor:pointer;
    padding:28px 30px;
    font-size:25px;
    font-weight:500;
    color:var(--ink);
}
.delivery-num{
    font-family:var(--font-mono);
    font-size:18px;
    color:var(--wine);
}
.delivery-trigger span:nth-child(2){ flex:1; }
.delivery-icon{
    font-size:35px;
    font-weight:300;
    color:var(--stone);
}

.delivery-panel{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}
.delivery-item.is-active .delivery-panel{ max-height:900px; }

.delivery-inner{ padding:0 30px 32px; }
.delivery-inner p{
    color:var(--ink-soft);
    font-size:18.5px;
    line-height:1.75;
    margin-bottom:28px;
    max-width:560px;
}

.check-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
}
.check-grid li, .single-list li{
    position:relative;
    padding-left:22px;
    margin-bottom:16px;
    font-size:18.5px;
    color:var(--ink);
}
.check-grid li::before, .single-list li::before{
    content:"";
    position:absolute;
    left:0; top:7px;
    width:9px; height:9px;
    border:1.5px solid var(--teal);
    border-radius:1px;
    transform:rotate(45deg);
}

/* =========================================================
   PROMISE
========================================================= */

.promise{ padding:120px 0; }

.promise-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
}

.promise-card{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:40px 32px;
    transition:background .3s ease;
}
.promise-card:hover{ background:var(--paper-flat); }

.promise-code{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:15px;
    color:var(--wine);
    border:1px solid var(--wine-tint);
    background:var(--wine-tint);
    padding:3px 9px;
    border-radius:100px;
    margin-bottom:24px;
}

.promise-card h3{
    font-family:var(--font-display);
    font-size:27px;
    font-weight:500;
    margin-bottom:16px;
}
.promise-card p{
    font-size:18.5px;
    line-height:1.75;
    color:var(--stone);
}

/* =========================================================
   WORK
========================================================= */

.work{ padding:120px 0; background:var(--paper-dim); }

.work-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
}

.work-card{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:36px;
    background:var(--paper-dim);
    transition:background .3s ease, transform .3s ease;
}
.work-card:hover{
    background:var(--paper-flat);
    transform:translateY(-4px);
}

.work-top{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    margin-bottom:20px;
}
.work-top h3{
    font-family:var(--font-display);
    font-size:18px;
    font-weight:500;
}
.work-category{
    font-family:var(--font-mono);
    font-size:15px;
    color:var(--stone);
    white-space:nowrap;
}

.work-link{
    display:inline-block;
    text-decoration:none;
    color:var(--teal);
    font-size:17.5px;
    font-weight:500;
    margin-bottom:18px;
}
.work-link:hover{ color:var(--teal-deep); }

.work-card ul{ margin-top:4px; }
.work-card li{
    position:relative;
    padding-left:16px;
    margin-bottom:10px;
    font-size:17.5px;
    color:var(--ink-soft);
    line-height:1.6;
}
.work-card li::before{
    content:"–";
    position:absolute;
    left:0; top:0;
    color:var(--wine);
}

/* =========================================================
   CONTACT
========================================================= */

.contact{ padding:120px 0; }

.contact-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:48px;
}

.contact-form{ display:flex; flex-direction:column; gap:22px; }

.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
    font-family:var(--font-mono);
    font-size:15.5px;
    color:var(--stone);
}
.field input, .field textarea{
    width:100%;
    padding:16px 18px;
    border:1px solid var(--line);
    background:var(--paper-flat);
    font-family:var(--font-body);
    font-size:18.5px;
    color:var(--ink);
    border-radius:var(--radius);
    transition:border-color .2s ease;
}
.field input:focus, .field textarea:focus{
    border-color:var(--teal);
}
.field textarea{ resize:vertical; min-height:130px; }

.form-note{
    font-family:var(--font-mono);
    font-size:17px;
    color:var(--teal);
    min-height:18px;
}

.contact-info{
    border:1px solid var(--line);
    background:var(--paper-flat);
    padding:40px;
    display:flex;
    flex-direction:column;
    gap:32px;
}
.info-label{
    font-family:var(--font-mono);
    font-size:17px;
    color:var(--stone);
    display:block;
    margin-bottom:8px;
}
.contact-item h4{
    font-family:var(--font-display);
    font-size:18px;
    font-weight:500;
}
.contact-item a{ text-decoration:none; }
.contact-item a:hover{ color:var(--teal); }

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

.site-footer{
    background:var(--paper-flat);
    border-top:1px solid var(--line);
}

.footer-top{
    display:grid;
    grid-template-columns:0.9fr 1.6fr;
    gap:60px;
    padding:80px 0 50px;
}

.footer-brand p{
    margin-top:20px;
    color:var(--stone);
    line-height:1.75;
    max-width:380px;
    font-size:17px;
}

.footer-links{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.footer-links h4{
    font-family:var(--font-mono);
    font-size:15px;
    color:var(--stone);
    margin-bottom:20px;
}
.footer-links a{
    display:block;
    margin-bottom:13px;
    color:var(--ink);
    text-decoration:none;
    font-size:18px;
}
.footer-links a:hover{ color:var(--teal); }

.footer-bottom{
    border-top:1px solid var(--line);
    padding:26px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:18px;
    color:var(--stone);
}
.footer-socials{ display:flex; gap:24px; }
.footer-socials a{ text-decoration:none; color:var(--ink); }
.footer-socials a:hover{ color:var(--teal); }

/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1100px){

    .hero-grid{ grid-template-columns:1fr; gap:56px; }
    .hero-diagram{ order:-1; max-width:520px; margin:0 auto; }

    .expertise-layout{ grid-template-columns:1fr; }
    .expertise-tabs{ flex-direction:row; flex-wrap:wrap; }
    .exp-tab{ border-left:none; border-bottom:2px solid var(--line); flex:1 1 220px; }
    .exp-tab.active{ border-color:var(--teal); }

    .delivery-grid{ grid-template-columns:1fr; }
    .delivery-log{ position:static; }

    .promise-grid{ grid-template-columns:repeat(2,1fr); }

    .work-grid{ grid-template-columns:repeat(2,1fr); }

    .contact-grid{ grid-template-columns:1fr; }

    .footer-top{ grid-template-columns:1fr; gap:40px; }
}

@media (max-width:860px){

    :root{ --gutter:28px; }

    .site-nav{ display:none; }
    .status-chip{ display:none; }
    .nav-toggle{ display:flex; }

    .hero{ padding:56px 0 64px; }
    .hero-stats{ gap:28px; flex-wrap:wrap; }

    .exp-grid{ grid-template-columns:1fr; }
    .check-grid{ grid-template-columns:1fr; }

    .promise-grid{ grid-template-columns:1fr; }
    .work-grid{ grid-template-columns:1fr; }

    .footer-links{ grid-template-columns:1fr; gap:36px; }
    .footer-bottom{ flex-direction:column; gap:16px; align-items:flex-start; }
}

@media (max-width:560px){

    .hero-heading{ font-size:48px; }
    .hero-actions{ flex-direction:column; align-items:flex-start; gap:20px; }
    .btn-block, .btn-lg{ width:100%; justify-content:center; }

    .section-head h2{ font-size:38px; }

    .delivery-trigger{ padding:22px 18px; font-size:17px; gap:14px; }
    .delivery-inner{ padding:0 18px 26px; }

    .promise-card, .work-card, .exp-card{ padding:26px; }

    .footer-top{ padding:56px 0 40px; }
}

.brand-logo{
    height:48px;
    width:auto;
    display:block;
}

@media (max-width:860px){
    .brand-logo{ height:32px; }
}

.work-image{
    overflow:hidden;
    height:240px;
    margin-bottom:20px;
    border:1px solid var(--line);
}
.work-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}
.work-card:hover .work-image img{
    transform:scale(1.05);
}