/*
Theme Name: GYSMR Group Premium
Author: OpenAI
Description: Premium Nordic WordPress theme for GYSMR Group AB
Version: 3.3
*/

:root{
    --bg:#0b1020;
    --bg2:#0f1730;
    --card:rgba(18,26,49,.78);
    --text:#eef2ff;
    --muted:#c7d1ea;
    --line:rgba(255,255,255,.10);
    --accent:#94b6ff;
    --warm:#f0dfc2;
    --max:1200px;
    --radius:24px;
    --shadow:0 20px 50px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
    margin:0;
    padding-top:82px;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--text);
    background:
            radial-gradient(circle at 15% 15%, rgba(148,182,255,.18), transparent 24%),
            radial-gradient(circle at 82% 12%, rgba(240,223,194,.10), transparent 18%),
            linear-gradient(180deg,var(--bg) 0%, var(--bg2) 55%, #0d1426 100%);
    line-height:1.6;
}

a{
    text-decoration:none;
    color:inherit;
    transition:opacity .2s ease;
}

a:hover{
    opacity:.85;
}

img{
    max-width:100%;
    height:auto;
}

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

.section{
    padding:120px 0;
    position:relative;
    border-top:1px solid rgba(255,255,255,.04);
}

.section:last-of-type{
    padding-bottom:80px;
}

.kicker{
    display:inline-block;
    padding:8px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    color:#dce7ff;
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(10px);
    font-size:14px;
    letter-spacing:.04em;
}

.lead{
    font-size:clamp(17px,2vw,22px);
    color:var(--muted);
    max-width:840px;
}

/* Header */
.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:50;
    transition:.25s ease;
    background:linear-gradient(180deg, rgba(8,12,24,.85), rgba(8,12,24,.35));
    backdrop-filter:blur(18px);
}

.site-header.scrolled{
    background:rgba(8,12,24,.88);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
}

.header-inner{
    min-height:82px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:6px;
    padding-bottom:6px;
}

.brand{
    font-size:18px;
    font-weight:800;
    letter-spacing:.16em;
}

.brand small{
    display:block;
    margin-top:2px;
    font-size:11px;
    font-weight:500;
    letter-spacing:.06em;
    color:var(--muted);
}

.nav-wrap{
    display:flex;
    align-items:center;
    gap:14px;
    position:relative;
}

/* Desktop + mobile menu button visible */
.menu-toggle{
    display:inline-flex;
    border:1px solid var(--line);
    padding:10px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.03);
    color:#fff;
    cursor:pointer;
}

.lang-switch{
    border:1px solid var(--line);
    padding:10px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.03);
    color:#dce7ff;
    font-size:13px;
}

/* Dropdown nav */
.primary-nav{
    position:absolute;
    top:72px;
    right:0;
    width:260px;
    display:none;
    background:rgba(8,12,24,.98);
    border:1px solid var(--line);
    border-radius:18px;
    backdrop-filter:blur(18px);
    padding:18px;
    box-shadow:0 30px 80px rgba(0,0,0,.45);
    z-index:100;
}

.primary-nav.open{
    display:block;
}

.primary-nav ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.primary-nav li{
    border-bottom:1px solid rgba(255,255,255,.06);
    padding-bottom:10px;
}

.primary-nav li:last-child{
    border-bottom:none;
}

.primary-nav a{
    font-size:15px;
    color:#f4f7ff;
    opacity:.92;
}

.primary-nav a:hover{
    opacity:1;
}

/* Hero */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    padding-top:40px;
}

.hero:before{
    content:"";
    position:absolute;
    inset:0;
    background:
            linear-gradient(180deg, rgba(6,10,20,.18), rgba(6,10,20,.55)),
            radial-gradient(circle at 20% 40%, rgba(148,182,255,.25), transparent 30%),
            radial-gradient(circle at 80% 30%, rgba(240,223,194,.18), transparent 25%);
    pointer-events:none;
    animation:heroGlow 12s ease-in-out infinite alternate;
}

.hero-grid{
    position:relative;
    z-index:1;
    width:100%;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:36px;
    align-items:center;
}

.hero-copy h1{
    font-size:clamp(46px,7vw,92px);
    line-height:.93;
    letter-spacing:-0.065em;
    margin:18px 0 20px;
}

.hero-copy p{
    font-size:clamp(18px,2vw,22px);
    color:var(--muted);
    max-width:540px;
}

.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:30px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:0 20px;
    border-radius:999px;
    border:1px solid var(--line);
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
    letter-spacing:.02em;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn-primary{
    background:linear-gradient(135deg, rgba(148,182,255,.22), rgba(255,255,255,.08));
    border-color:rgba(148,182,255,.34);
}

.btn-primary:hover{
    box-shadow:0 10px 30px rgba(148,182,255,.25);
}

.btn-secondary{
    background:rgba(255,255,255,.03);
}

.btn-secondary:hover{
    background:rgba(255,255,255,.08);
}

.hero-panel{
    background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    border:1px solid var(--line);
    border-radius:28px;
    padding:24px;
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
    transform:translateY(10px);
    transition:0.3s ease;
}

.hero-panel:hover{
    transform:translateY(0);
}

.hero-panel h3{
    margin:0 0 14px;
    font-size:20px;
}

.hero-panel ul{
    margin:0;
    padding-left:18px;
    color:var(--muted);
}

.hero-panel li{
    margin:8px 0;
}

.scroll-cue{
    position:absolute;
    left:50%;
    bottom:26px;
    transform:translateX(-50%);
    color:var(--muted);
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* Moving band */
.parallax-band{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:
            linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
            linear-gradient(120deg, rgba(148,182,255,.10), rgba(240,223,194,.06));
    overflow:hidden;
    margin-top:12px;
    opacity:.6;
}

.band-track{
    display:flex;
    gap:42px;
    white-space:nowrap;
    padding:18px 0;
    font-size:14px;
    color:#dce7ff;
    opacity:.7;
    animation:marquee 24s linear infinite;
}

/* Headings and cards */
.section h2{
    font-size:clamp(34px,5vw,58px);
    line-height:1.08;
    margin:18px 0 16px;
    letter-spacing:-.03em;
}

.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
}

.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px;
    backdrop-filter:blur(16px);
    box-shadow:var(--shadow);
    transition:transform .25s ease, box-shadow .25s ease;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 80px rgba(0,0,0,.35);
}

.card h3{
    font-size:30px;
    margin:0 0 12px;
    letter-spacing:-.025em;
}

.card p{
    color:var(--muted);
    margin:0 0 20px;
    line-height:1.7;
}

.tag-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.tag{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--line);
    color:#dce7ff;
    font-size:13px;
}

.company-link{
    display:inline-flex;
    margin-top:18px;
    font-weight:600;
}

.company-tech{
    background:linear-gradient(180deg, rgba(148,182,255,.14), rgba(255,255,255,.03));
}

.company-bakery{
    background:linear-gradient(180deg, rgba(240,223,194,.14), rgba(255,255,255,.03));
}

/* Vision */
.vision-box{
    padding:34px;
    border-radius:28px;
    border:1px solid var(--line);
    background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    box-shadow:var(--shadow);
}

.vision-quote{
    font-size:clamp(28px,4vw,48px);
    line-height:1.1;
    letter-spacing:-.03em;
    margin:0 0 12px;
}

.subgrid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:28px;
    align-items:start;
}

.list-clean{
    margin:0;
    padding-left:18px;
    color:var(--muted);
}

.list-clean li{
    margin:8px 0;
}

/* Footer */
.footer{
    padding:40px 0 50px;
    border-top:1px solid var(--line);
    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45));
}

.footer-grid{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    flex-wrap:wrap;
}

.footer p,
.footer a{
    color:var(--muted);
    font-size:14px;
}

/* Scroll anchors */
#companies,
#about,
#contact{
    scroll-margin-top:120px;
}

/* Animations */
.fade-in{
    opacity:1;
    transform:none;
    transition:all .7s ease;
}

.js-enabled .fade-in{
    opacity:0;
    transform:translateY(22px);
}

.js-enabled .fade-in.visible{
    opacity:1;
    transform:none;
}

@keyframes marquee{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

@keyframes heroGlow{
    0%{
        transform:scale(1);
        opacity:1;
    }
    100%{
        transform:scale(1.05);
        opacity:.85;
    }
}

/* Responsive */
@media (max-width:980px){
    .hero-grid,
    .subgrid,
    .grid-2{
        grid-template-columns:1fr;
    }

    .hero{
        min-height:auto;
        padding-top:110px;
        padding-bottom:80px;
    }
}

@media (max-width:760px){
    .container{
        padding:0 18px;
    }

    .primary-nav{
        left:auto;
        right:0;
        min-width:220px;
        top:60px;
    }
}