/* ==========================================================================
VISAC TECHNOLOGIES
INDUSTRIAL INTELLIGENCE DESIGN SYSTEM V7

OMEY Enterprise Intelligence Edition

========================================================================== */


/* ==========================================================================
01 — FOUNDATION
========================================================================== */

:root {

    --font-sans:
    "Inter",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

    --font-mono:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;


    /* Colors */

    --bg:#ffffff;
    --bg-soft:#f5f5f3;
    --bg-dark:#050505;

    --black:#050505;
    --black-soft:#151515;

    --text:#111111;
    --text-secondary:#555555;
    --text-muted:#777777;


    --line:#dedede;
    --line-dark:#202020;


    --green:#0f9f6e;


    /* Layout */

    --container:1600px;


    /* Motion */

    --ease:cubic-bezier(.16,1,.3,1);
    --transition:.25s var(--ease);

}


/* ==========================================================================
02 — RESET
========================================================================== */


*,
*::before,
*::after {

    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

    overflow-x:hidden;

}


body {

    margin:0;

    background:var(--bg);

    color:var(--text);

    font-family:var(--font-sans);

    -webkit-font-smoothing:antialiased;

    overflow-x:hidden;

}


img,
svg,
video {

    max-width:100%;

    height:auto;

    display:block;

}


a {

    color:inherit;

    text-decoration:none;

}


/* ==========================================================================
03 — TYPOGRAPHY
========================================================================== */


h1,
h2,
h3,
h4 {

    margin:0;

    color:var(--black);

    letter-spacing:-.045em;

}


h1 {

    font-size:clamp(52px,6vw,90px);

    font-weight:400;

    line-height:1.02;

}


h1 strong {

    font-weight:700;

}


h2 {

    font-size:clamp(40px,4vw,64px);

    font-weight:400;

    line-height:1.05;

}


h3 {

    font-size:28px;

    font-weight:600;

}


h4 {

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.12em;

}


p {

    color:var(--text-secondary);

    font-size:16px;

    line-height:1.7;

}


.tag {

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;

    font-family:var(--font-mono);

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.25em;

    color:var(--text-muted);

}


.status-dot {

    width:7px;

    height:7px;

    background:var(--green);

    border-radius:50%;

}



/* ==========================================================================
04 — CONTAINERS
========================================================================== */


.container {

    width:100%;

    max-width:var(--container);

    margin:0 auto;

    padding:0 56px;

}


.section {

    padding:120px 0;

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

}


.bg-light {

    background:var(--bg-soft);

}



/* ==========================================================================
05 — HEADER
========================================================================== */


.site-header {

    height:72px;

    position:sticky;

    top:0;

    z-index:100;

    background:rgba(5,5,5,.78);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);

}


.header-container {

    height:100%;

    max-width:var(--container);

    margin:auto;

    padding:0 56px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:32px;

}


.header-brand {

    display:flex;

    align-items:center;

    flex-shrink:0;

}


.header-logo {

    height:34px;

    width:auto;

    object-fit:contain;

}



.nav-links {

    display:flex;

    align-items:center;

    gap:34px;

    margin-left:auto;

}


.nav-links a {

    font-family:var(--font-mono);

    font-size:11px;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:rgba(255,255,255,.72);

    white-space:nowrap;

    transition:var(--transition);

}


.nav-links a:hover {

    color:#fff;

}



.header-actions {

    margin-left:40px;

}


.header-actions .btn {

    min-width:210px;

}



/* ==========================================================================
06 — BUTTON SYSTEM
========================================================================== */


.btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;


    min-height:46px;

    padding:14px 28px;


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

    border-radius:0;


    font-family:var(--font-mono);

    font-size:11px;

    font-weight:600;

    letter-spacing:.16em;

    text-transform:uppercase;


    transition:var(--transition);

}


.btn-primary {

    background:#000;

    color:#fff;

}


.btn-primary:hover {

    background:#fff;

    color:#000;

}



.btn-outline {

    background:#fff;

    color:#000;

}


.btn-outline:hover {

    background:#000;

    color:#fff;

}



/* ==========================================================================
07 — HERO SYSTEM
========================================================================== */


.hero {

    padding:120px 0 100px;

}


.hero-grid {

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:100px;

    align-items:center;

}


.hero-content {

    max-width:1100px;

}


.hero h1 {

    max-width:980px;

}


.hero .subtitle {

    margin-top:32px;

    max-width:720px;

    font-size:21px;

}


.hero-actions {

    display:flex;

    gap:16px;

    margin-top:50px;

}



/* ==========================================================================
08 — OMEY BRAND SYSTEM
========================================================================== */


.omey-hero-logo {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    margin-bottom:50px;

}


.omey-symbol {

    width:48px;

    height:48px;

}


.omey-wordmark {

    width:150px;

}


.omey-product-mark {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}



/* OMEY Hero refinement */


.omey-hero {

    padding-top:150px;

}


.omey-hero .hero-content {

    max-width:1100px;

}


.omey-hero h1 {

    max-width:1000px;

}

/* ==========================================================================
09 — INTELLIGENCE CARDS
========================================================================== */


.grid {

    display:grid;

    gap:24px;

}


.grid-3 {

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

}


.grid-4 {

    grid-template-columns:repeat(4,1fr);

}



.card {

    position:relative;

    background:#fff;

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

    padding:42px;

    transition:var(--transition);


    background-image:
    linear-gradient(
        90deg,
        transparent 49%,
        rgba(0,0,0,.03) 50%,
        transparent 51%
    ),
    linear-gradient(
        transparent 49%,
        rgba(0,0,0,.03) 50%,
        transparent 51%
    );

    background-size:40px 40px;

}



.card:hover {

    border-color:#000;

    transform:translateY(-4px);

}



.card::before {

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:3px;

    height:0;

    background:#000;

    transition:var(--transition);

}


.card:hover::before {

    height:100%;

}




/* ==========================================================================
10 — PROBLEM / SOLUTION SYSTEM
========================================================================== */


.problem-solution-grid {

    display:grid;

    grid-template-columns:1fr 1.05fr;

    gap:40px;

}



.ps-label {

    margin-bottom:18px;

    font-family:var(--font-mono);

    font-size:11px;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--text-muted);

}



.ps-card {

    min-height:240px;

}



.solution-panel {

    background:#050505;

    color:#fff;

    padding:52px;

    border:1px solid #202020;

}



.solution-panel h3 {

    color:#fff;

    font-size:42px;

    letter-spacing:-.05em;

}



.solution-panel > p {

    margin-top:22px;

    max-width:600px;

    color:rgba(255,255,255,.65);

    font-size:18px;

}



.solution-points {

    display:grid;

    gap:20px;

    margin-top:40px;

}



.solution-point {

    border-top:1px solid rgba(255,255,255,.15);

    padding-top:20px;

}



.solution-point strong {

    color:#fff;

    display:block;

    margin-bottom:8px;

}



.solution-point p {

    color:rgba(255,255,255,.65);

    margin:0;

}



/* ==========================================================================
11 — OMEY INTELLIGENCE ARCHITECTURE
========================================================================== */


.omey-architecture {

    padding:150px 0;

    background:#050505;

    color:#fff;

}



.omey-architecture .section-header h2 {

    color:#fff;

}



.omey-architecture .tag {

    color:#aaa;

}



.omey-architecture .section-desc {

    color:rgba(255,255,255,.65);

}



.omey-architecture-panel {


    display:grid;

    grid-template-columns:
    minmax(380px,.9fr)
    minmax(600px,1.1fr);


    gap:90px;


    padding:90px;


    background:#050505;

    border:1px solid #202020;


}



.omey-architecture-copy h3 {


    color:#fff;

    font-size:48px;

    line-height:1.05;

    letter-spacing:-.055em;

    max-width:520px;


}



.omey-architecture-copy p {


    margin-top:24px;

    max-width:560px;

    color:rgba(255,255,255,.68);

    font-size:18px;


}



/* ==========================================================================
12 — OMEY FUSION ENGINE STACK
========================================================================== */



.omey-architecture-stack {


    display:flex;

    flex-direction:column;

    gap:20px;


}




.omey-layer {


    display:grid;

    grid-template-columns:50px 1fr;


    align-items:center;


    gap:24px;


    min-height:120px;


    padding:34px;


    background:#0b0b0b;


    border:1px solid rgba(255,255,255,.14);


    transition:.25s ease;


}




.omey-layer:hover {


    border-color:rgba(255,255,255,.45);


}



/* Active Intelligence Fusion Engine */


.omey-layer.active {


    background:#fff;


    border-color:#fff;


    color:#050505;


}



.omey-layer-icon {


    font-family:var(--font-mono);

    font-size:12px;

    letter-spacing:.18em;

    color:var(--green);

}




.omey-layer h4 {


    margin:0 0 10px;


    font-size:20px;


    letter-spacing:-.03em;


    color:#fff;


}




.omey-layer p {


    margin:0;


    max-width:520px;


    font-size:15px;


    color:rgba(255,255,255,.65);


}




/* ACTIVE FIX
Fusion Engine readability
*/


.omey-layer.active .omey-layer-icon,

.omey-layer.active h4 {


    color:#050505;


}



.omey-layer.active p {


    color:#555;


}





/* ==========================================================================
13 — VISAC INTELLIGENCE STACK
========================================================================== */



.intelligence-stack {


    display:grid;

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

    gap:24px;


}



.intelligence-card {


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

    background:#fff;

    padding:40px;


}



.intelligence-card h3 {


    font-size:34px;

    margin-bottom:18px;


}



.intelligence-card p {


    color:var(--text-secondary);


}



.intelligence-code {


    font-family:var(--font-mono);

    font-size:11px;

    letter-spacing:.2em;

    text-transform:uppercase;

    color:var(--text-muted);

    margin-bottom:40px;


}

/* ==========================================================================
14 — TECHNOLOGY SYSTEM
========================================================================== */


#technology {

    padding:140px 0;

}



.tech-panel {


    position:relative;


    display:grid;

    grid-template-columns:1fr 1fr;


    gap:80px;


    padding:90px;


    min-height:620px;


    background:#050505;


    color:#fff;


    overflow:hidden;


}




.tech-panel::before {


    content:"";


    position:absolute;


    inset:0;


    background:

    linear-gradient(
        90deg,
        transparent 49%,
        rgba(255,255,255,.08) 50%,
        transparent 51%
    ),

    linear-gradient(
        transparent 49%,
        rgba(255,255,255,.08) 50%,
        transparent 51%
    );


    background-size:50px 50px;


    opacity:.15;


}



.tech-panel > * {


    position:relative;

    z-index:2;


}



.tech-panel h2 {


    color:#fff;

    font-size:clamp(44px,5vw,76px);


}



.tech-panel p {


    margin-top:35px;

    max-width:560px;

    color:rgba(255,255,255,.65);

    font-size:20px;


}





/* ==========================================================================
15 — TECHNOLOGY NETWORK
========================================================================== */


.tech-network {


    position:relative;

    min-height:420px;


}



.tech-core {


    position:absolute;


    top:50%;

    left:50%;


    transform:translate(-50%,-50%);


    width:190px;

    height:190px;


    background:#fff;

    color:#000;


    display:flex;

    flex-direction:column;


    justify-content:center;

    align-items:center;


    text-align:center;


}



.tech-core span {


    font-family:var(--font-mono);

    font-size:11px;

    letter-spacing:.3em;


}



.tech-core strong {


    margin-top:8px;

    font-size:34px;

    letter-spacing:-.05em;


}




.tech-node {


    position:absolute;


    width:120px;

    height:120px;


    display:flex;

    align-items:center;

    justify-content:center;


    text-align:center;


    background:#fff;


    border:1px solid #d4d4d4;


    font-family:var(--font-mono);

    font-size:11px;

    text-transform:uppercase;


}



/* ==========================================================================
16 — COMPANY / CAREERS
========================================================================== */


.company-grid,
.careers-grid {


    display:grid;

    gap:24px;


}



.company-grid {


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


}



.careers-grid {


    grid-template-columns:repeat(4,1fr);


}



.company-card,
.careers-card {


    position:relative;


    background:#fff;


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


    padding:42px;


    transition:var(--transition);


}



.company-card:hover,
.careers-card:hover {


    transform:translateY(-4px);

    border-color:#000;


}



.company-card::before,
.careers-card::before {


    content:"";


    position:absolute;


    left:0;

    top:0;


    width:3px;


    height:0;


    background:#000;


    transition:var(--transition);


}



.company-card:hover::before,
.careers-card:hover::before {


    height:100%;


}



.company-code {


    margin-bottom:40px;


    font-family:var(--font-mono);

    font-size:11px;


    letter-spacing:.25em;


    text-transform:uppercase;


    color:var(--text-muted);


}



/* ==========================================================================
17 — STORE / PDP SYSTEM
========================================================================== */


.store,
.pdp {


    max-width:var(--container);

    margin:auto;


    padding:80px 56px 120px;


}



.store-hero,
.pdp-hero {


    display:grid;


    grid-template-columns:1.1fr .9fr;


    gap:64px;


    margin-top:50px;


    padding-bottom:50px;


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


}



.store-hero-image,
.pdp-gallery-main {


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

    background:var(--bg-soft);


}



.store-grid {


    display:grid;


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


    gap:24px;


}



.store-card {


    background:#fff;


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


    transition:var(--transition);


}



.store-card:hover {


    transform:translateY(-4px);

    border-color:#000;


}



.store-card-body {


    padding:24px;


}



.store-card-title {


    font-size:22px;

    letter-spacing:-.04em;


}



.pdp-grid {


    display:grid;


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


    gap:32px;


}



.pdp-related article {


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


    padding:24px;


    background:#fff;


}



/* ==========================================================================
18 — FOOTER PREMIUM SYSTEM
========================================================================== */


.site-footer {


    background:#050505;


    color:#fff;


    padding:90px 0 60px;


}



.footer-grid {


    display:grid;


    grid-template-columns:420px 1fr;


    gap:70px;


}



.footer-brand {


    display:flex;


    align-items:center;


    gap:14px;


}



.footer-logo-symbol {


    width:40px;

    height:40px;


}



.footer-brand-wordmark {


    width:100px;


}



.footer-columns {


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:32px;


}



.footer-column h4 {


    color:#fff;


    margin-bottom:18px;


    font-size:12px;


}



.footer-column a {


    display:block;


    min-height:40px;


    color:rgba(255,255,255,.65);


    font-size:13px;


    transition:.25s;


}



.footer-column a:hover {


    color:#fff;


}



/* ==========================================================================
19 — SOCIAL ICONS
========================================================================== */


.social-icons {


    display:flex;


    align-items:center;


    gap:14px;


}



.social-icons a {


    width:28px;

    height:28px;


    display:flex;


    align-items:center;


    justify-content:center;


    opacity:.75;


    transition:.25s;


}



.social-icons a:hover {


    opacity:1;


}



.social-icons img {


    width:18px;

    height:18px;


    object-fit:contain;


}



/* ==========================================================================
20 — COOKIE BUTTON
========================================================================== */


.footer-cookie-btn {


    margin-top:20px;


    width:100%;


    padding:10px 14px;


    border:1px solid rgba(255,255,255,.2);


    background:none;


    color:#fff;


    font-family:var(--font-mono);


    font-size:11px;


    letter-spacing:.15em;


    text-transform:uppercase;


}

/* ==========================================================================
21 — ANIMATION SYSTEM
========================================================================== */


.card,
.tech-panel,
.omey-layer,
.company-card,
.careers-card,
.store-card {

    animation:fadeUp .6s var(--ease) both;

}



@keyframes fadeUp {


    from {

        opacity:0;

        transform:translateY(24px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }


}





/* ==========================================================================
22 — TABLET RESPONSIVE
========================================================================== */


@media(max-width:1200px){



.container {

    padding-left:36px;

    padding-right:36px;

}



.header-container {

    padding-left:36px;

    padding-right:36px;

}



.hero-grid {

    grid-template-columns:1fr;

    gap:60px;

}



.omey-architecture-panel {


    grid-template-columns:1fr;


    padding:60px;


    gap:50px;


}



.tech-panel {


    grid-template-columns:1fr;


    padding:60px;


}



.company-grid {


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


}



.careers-grid {


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


}



.store-grid {


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


}



.footer-grid {


    grid-template-columns:1fr;


}



.footer-columns {


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


}



}




/* ==========================================================================
23 — MOBILE HEADER
========================================================================== */


@media(max-width:900px){


html,
body {

    width:100%;

    max-width:100%;

    overflow-x:hidden;

}



.site-header {

    height:auto;

}



.header-container {


    height:auto;


    padding:16px 24px;


    display:grid;


    grid-template-columns:auto auto;


    grid-template-areas:

    "brand action"

    "nav nav";


    gap:14px;


}



.header-brand {


    grid-area:brand;


}



.header-actions {


    grid-area:action;

    margin:0;

    justify-self:end;


}



.header-actions .btn {


    min-width:auto;

    padding:12px 16px;

    font-size:10px;


}



.nav-links {


    grid-area:nav;


    width:100%;


    margin:0;


    display:flex;


    overflow-x:auto;


    gap:22px;


    justify-content:flex-start;


    scrollbar-width:none;


}



.nav-links::-webkit-scrollbar {

    display:none;

}



.nav-links a {


    flex:0 0 auto;

    font-size:10px;


}




}





/* ==========================================================================
24 — MOBILE GENERAL
========================================================================== */


@media(max-width:700px){



.container {


    padding-left:18px;

    padding-right:18px;


}



.section {


    padding:80px 0;


}



h1 {


    font-size:clamp(36px,10vw,54px);


}



h2 {


    font-size:clamp(30px,8vw,42px);


}



h3 {


    font-size:22px;


}




.hero {


    padding:80px 0 70px;


}



.hero .subtitle {


    font-size:17px;


}



.hero-actions {


    flex-direction:column;


    margin-top:35px;


}



.hero-actions .btn {


    width:100%;


}




/* OMEY MARK */


.omey-hero-logo {


    margin-bottom:35px;


}



.omey-symbol {


    width:42px;

    height:42px;


}



.omey-wordmark {


    width:130px;


}





/* Architecture */


.omey-architecture {


    padding:90px 0;


}



.omey-architecture-panel {


    padding:28px 22px;


}



.omey-architecture-copy h3 {


    font-size:32px;


}



.omey-layer {


    grid-template-columns:40px 1fr;


    padding:22px;


    min-height:auto;


}



.omey-layer h4 {


    font-size:17px;


}



.omey-layer p {


    font-size:14px;


}




/* Technology */


.tech-panel {


    padding:32px 22px;


}



.tech-panel h2 {


    font-size:38px;


}



.tech-network {


    min-height:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;


}



.tech-core,
.tech-node {


    position:static;

    transform:none;

    width:100%;

    height:auto;

    min-height:120px;


}



/* Cards */


.card {


    padding:24px;


}



.grid-3,
.grid-4 {


    grid-template-columns:1fr;


}



/* Company */


.company-grid,
.careers-grid {


    grid-template-columns:1fr;


}




/* Store */


.store,
.pdp {


    padding:50px 18px 80px;


}



.store-hero,
.pdp-hero {


    grid-template-columns:1fr;

    gap:30px;


}



.store-grid {


    grid-template-columns:1fr;


}



.pdp-grid {


    grid-template-columns:1fr;


}



/* Footer */


.footer-columns {


    grid-template-columns:1fr;


}



.footer-column {


    width:100%;


}



.social-icons {


    margin-top:10px;


}

/* =====================================================
TECHNOLOGY LINKS
===================================================== */


.technology-links {

display:flex;

gap:16px;

flex-wrap:wrap;

margin-top:40px;

}



.technology-links a {
    border:1px solid #d8d8d8;
    padding:14px 22px;
    font-size:13px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#111;
    transition:.3s;
}

.technology-links a:hover {
    background:#050505;
    color:white;
}
    


}