/*
Theme Name: Shidli Packaging
Theme URI: https://shidli.ir/
Author: Shidli Packaging
Description: قالب اختصاصی و مدرن صنایع بسته‌بندی شیدلی
Version: 1.0.0
Text Domain: shidli
*/

:root{
    --ink:#101a18;
    --ink-2:#17231f;
    --paper:#f4f1e9;
    --paper-2:#ebe6db;
    --white:#fffdf8;
    --acid:#d9f35b;
    --orange:#ef7047;
    --muted:#68716c;
    --line:rgba(16,26,24,.14);
    --radius:28px;
    --shadow:0 24px 70px rgba(16,26,24,.13);
    --ease:cubic-bezier(.2,.75,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Vazirmatn',sans-serif;
    overflow-x:hidden;
    line-height:1.85;
}
body,button,a{font-synthesis:none}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;display:block}
::selection{background:var(--acid);color:var(--ink)}

.section-shell{width:min(1240px,calc(100% - 48px));margin:auto}
.site-header{
    position:fixed;top:0;left:0;width:100%;z-index:1000;
    transition:.35s var(--ease);
    background:rgba(244,241,233,.84);
    backdrop-filter:blur(18px);
    border-bottom:1px solid transparent;
}
.site-header.scrolled{
    background:rgba(244,241,233,.94);
    border-color:var(--line);
    box-shadow:0 10px 40px rgba(16,26,24,.06)
}
.header-inner{
    width:min(1320px,calc(100% - 48px));height:84px;margin:auto;
    display:flex;align-items:center;gap:32px;
}
.brand{display:flex;align-items:center;gap:11px;min-width:max-content}
.brand-mark{
    width:43px;height:43px;border:2px solid var(--ink);display:grid;place-items:center;
    font-family:Montserrat,sans-serif;font-weight:800;font-size:21px;
    transform:rotate(-8deg);background:var(--acid);
}
.brand-copy{display:flex;flex-direction:column;line-height:1}
.brand-copy strong{font:800 22px/1 Montserrat,sans-serif;letter-spacing:.06em}
.brand-copy small{font:600 7px/1.3 Montserrat,sans-serif;letter-spacing:.14em;margin-top:6px}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:25px;flex:1}
.desktop-nav a{
    font-size:13px;font-weight:600;white-space:nowrap;position:relative;padding:10px 0
}
.desktop-nav a:after{
    content:"";position:absolute;bottom:3px;right:0;width:0;height:2px;background:var(--ink);
    transition:.3s var(--ease)
}
.desktop-nav a:hover:after{width:100%}
.header-cta{
    display:flex;align-items:center;gap:12px;padding:12px 17px;border:1px solid var(--ink);
    font-size:12px;font-weight:700;white-space:nowrap;transition:.3s
}
.header-cta i{font-style:normal;font-size:18px}
.header-cta:hover{background:var(--ink);color:var(--acid)}
.mobile-toggle{display:none;background:none;border:0;width:42px;cursor:pointer}
.mobile-toggle span{display:block;width:25px;height:2px;background:var(--ink);margin:5px auto;transition:.25s}
.mobile-nav{display:none}

.hero{
    min-height:860px;position:relative;overflow:hidden;background:var(--paper);
    padding:155px 0 70px;
}
.hero:before{
    content:"";position:absolute;width:780px;height:780px;border-radius:50%;
    right:-330px;top:-180px;background:var(--acid);opacity:.9
}
.hero-inner{
    width:min(1320px,calc(100% - 48px));margin:auto;display:grid;
    grid-template-columns:1fr 1.05fr;align-items:center;gap:50px;position:relative;z-index:2
}
.hero-copy{padding-right:4vw;max-width:650px}
.eyebrow,.section-tag{
    font:700 10px/1.2 Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;
}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.eyebrow-dot{width:8px;height:8px;background:var(--orange);border-radius:50%;display:block}
.hero h1{
    font-size:clamp(48px,6vw,86px);line-height:1.04;letter-spacing:-.045em;font-weight:700;
    max-width:680px
}
.hero h1 em,.section-heading span,.about-title span,.manifesto h2 em,.contact h2 em{
    font-style:normal;color:var(--orange)
}
.hero-lead{margin-top:28px;color:#4d5953;max-width:590px;font-size:16px;line-height:2.1}
.hero-lead strong{color:var(--ink)}
.hero-actions{display:flex;gap:12px;margin-top:34px}
.btn{min-height:55px;padding:0 23px;display:inline-flex;align-items:center;justify-content:center;gap:18px;font-size:13px;font-weight:700;transition:.3s}
.btn span{font-size:19px}
.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary:hover{background:var(--orange);transform:translateY(-3px)}
.btn-ghost{border:1px solid var(--line)}
.btn-ghost:hover{background:var(--white);transform:translateY(-3px)}
.hero-note{display:flex;align-items:center;gap:12px;margin-top:46px;color:#69716d;font-size:11px}
.note-line{width:40px;height:1px;background:var(--ink)}
.hero-visual{min-height:600px;display:grid;place-items:center}
.visual-panel{
    width:min(590px,100%);height:590px;background:#19231f;color:var(--white);position:relative;
    overflow:hidden;box-shadow:var(--shadow);transform:rotate(2.2deg)
}
.visual-panel:before{
    content:"";position:absolute;width:390px;height:390px;border-radius:50%;background:var(--acid);
    right:-150px;top:75px
}
.panel-top,.panel-bottom{
    position:absolute;left:30px;right:30px;display:flex;justify-content:space-between;
    z-index:5;font:700 10px Montserrat,sans-serif;letter-spacing:.14em
}
.panel-top{top:27px}.panel-bottom{bottom:27px}
.panel-arrow{font-size:20px;color:var(--acid)}
.package-stage{position:absolute;inset:80px 35px 70px}
.package{
    position:absolute;background:linear-gradient(140deg,#f6efe1,#d5c9b6);
    box-shadow:15px 25px 35px rgba(0,0,0,.24);color:var(--ink);
    display:flex;align-items:center;justify-content:center
}
.package-back{width:220px;height:390px;right:100px;top:45px;transform:rotate(10deg)}
.package-front{width:250px;height:410px;left:85px;top:55px;transform:rotate(-7deg);background:linear-gradient(140deg,#f8f3e8,#e2d7c5)}
.package-small{width:175px;height:255px;right:20px;bottom:10px;transform:rotate(7deg);background:linear-gradient(140deg,#ee7048,#c84e31);color:#fff}
.package-label{
    width:75%;height:72%;border:2px solid currentColor;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;gap:9px
}
.package-label small{font:700 10px Montserrat;letter-spacing:.18em}
.package-label b{font:800 33px Montserrat;letter-spacing:.04em}
.package-label span{font:600 7px Montserrat;letter-spacing:.12em}
.package-seal{
    position:absolute;top:18px;right:18px;width:38px;height:38px;border:1px solid var(--ink);
    border-radius:50%;display:grid;place-items:center;font:800 14px Montserrat
}
.hero-scroll{
    position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
    display:flex;align-items:center;gap:14px;font:700 8px Montserrat;letter-spacing:.13em
}
.hero-scroll i{width:45px;height:1px;background:var(--ink)}
.hero-orbit{position:absolute;border:1px solid rgba(16,26,24,.12);border-radius:50%;pointer-events:none}
.orbit-one{width:440px;height:440px;left:-250px;bottom:-240px}
.orbit-two{width:650px;height:650px;left:-350px;bottom:-350px}

.marquee{background:var(--acid);overflow:hidden;padding:17px 0;border-block:1px solid var(--ink)}
.marquee-track{
    width:max-content;display:flex;align-items:center;gap:28px;
    animation:marquee 30s linear infinite;font:800 11px Montserrat;letter-spacing:.13em
}
.marquee b{font-size:13px}
@keyframes marquee{to{transform:translateX(-50%)}}

.about{padding:145px 0}
.section-tag{color:#717a75;margin-bottom:28px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.about-title h2,.section-heading h2{
    font-size:clamp(43px,5vw,70px);line-height:1.08;letter-spacing:-.04em;font-weight:700
}
.about-content{padding-top:12px}
.large-copy{font-size:22px;line-height:1.9;font-weight:500;margin-bottom:25px}
.about-content>p:not(.large-copy){font-size:14px;color:var(--muted);max-width:580px}
.parent-brand{margin-top:38px;border-top:1px solid var(--line);padding-top:22px;display:flex;align-items:baseline;gap:13px;flex-wrap:wrap}
.parent-brand span{font-size:10px;color:var(--muted)}
.parent-brand strong{font-size:14px}
.parent-brand small{font:600 8px Montserrat;letter-spacing:.14em;color:var(--muted)}

.section-dark{background:var(--ink);color:var(--white)}
.solutions{padding:125px 0}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:58px}
.section-heading p{max-width:350px;color:var(--muted);font-size:13px}
.section-heading.light p{color:#a9b1ad}
.light .section-tag{color:#8f9993}
.solution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#3a4540}
.solution-card{background:var(--ink);padding:34px 27px;min-height:365px;display:flex;flex-direction:column;position:relative;transition:.4s var(--ease)}
.solution-card:hover{background:#202c27;transform:translateY(-7px)}
.solution-card.featured{background:#25312b}
.card-number{font:600 9px Montserrat;color:#7f8983;letter-spacing:.1em}
.card-icon{font-size:37px;color:var(--acid);margin:38px 0 22px}
.solution-card h3{font-size:18px;margin-bottom:13px}
.solution-card p{font-size:12px;color:#9ba49f;line-height:2}
.solution-card a{margin-top:auto;font-size:11px;font-weight:700;color:var(--acid);display:flex;justify-content:space-between}
.solution-card a span{font-size:18px}

.products{padding:140px 0}
.products .section-heading{margin-bottom:55px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.product-card{
    min-height:245px;padding:25px;position:relative;display:flex;flex-direction:column;justify-content:space-between;
    overflow:hidden;background:#ded8ca;transition:.45s var(--ease)
}
.product-card:before{
    content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-70px;bottom:-90px;
    background:rgba(255,255,255,.3);transition:.5s var(--ease)
}
.product-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.product-card:hover:before{transform:scale(1.4)}
.product-card.rice{background:#e0d9c7}.product-card.tea{background:#cad1b7}
.product-card.coffee{background:#c8b09b}.product-card.spice{background:#e1b69c}
.product-card.nuts{background:#d3b68d}.product-card.beans{background:#c3c7ad}
.product-index{font:700 9px Montserrat;position:relative;z-index:2}
.product-card div{position:relative;z-index:2}
.product-card small{font:600 8px Montserrat;letter-spacing:.12em}
.product-card h3{font-size:29px;margin-top:5px}
.product-card strong{font:700 10px Montserrat;letter-spacing:.12em}
.product-card>i{position:absolute;z-index:3;left:24px;bottom:20px;font-style:normal;font-size:22px}
.product-card:after{
    content:"SHIDLI";position:absolute;right:23px;top:49%;font:800 58px Montserrat;opacity:.07;transform:rotate(-90deg);
}

.manifesto{background:var(--orange);color:var(--white);padding:150px 0;position:relative;overflow:hidden}
.manifesto-bg{
    position:absolute;right:-20px;bottom:-100px;font:800 220px Montserrat;line-height:1;opacity:.09;letter-spacing:-.08em
}
.manifesto-inner{position:relative;z-index:2}
.manifesto .section-tag{color:rgba(255,255,255,.72)}
.manifesto h2{font-size:clamp(48px,7vw,96px);line-height:1.02;letter-spacing:-.05em;max-width:950px}
.manifesto h2 em{color:var(--acid)}
.manifesto p{max-width:540px;margin-top:30px;color:rgba(255,255,255,.83);font-size:14px}

.process{padding:140px 0}
.process-line{height:1px;background:var(--line);margin:65px 0 0}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.process-item{padding:27px 24px 0 0;border-right:1px solid var(--line);min-height:190px}
.process-item:first-child{border-right:0}
.process-item span{font:700 11px Montserrat;color:var(--orange)}
.process-item h3{font-size:18px;margin:24px 0 10px}
.process-item p{font-size:12px;color:var(--muted);max-width:220px}

.contact{padding:125px 0;position:relative;overflow:hidden}
.contact-glow{position:absolute;width:650px;height:650px;border-radius:50%;background:rgba(217,243,91,.09);left:-330px;top:-230px}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:90px;align-items:center;position:relative;z-index:2}
.light-tag{color:#919b95}
.contact h2{font-size:clamp(45px,5vw,76px);line-height:1.06;letter-spacing:-.045em}
.contact h2 em{color:var(--acid)}
.contact> .section-shell>div:first-child>p{max-width:560px;color:#9ea7a2;font-size:13px;margin-top:28px}
.contact-card{border:1px solid #3d4843;padding:13px 28px;background:rgba(255,255,255,.025)}
.contact-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:19px 0;border-bottom:1px solid #303a36;font-size:12px}
.contact-row span{color:#7e8882}.contact-row a{color:var(--acid);font:700 13px Montserrat}
.contact-row strong{font-size:12px}
.contact-button{
    margin:22px 0 10px;background:var(--acid);color:var(--ink);padding:16px 20px;
    display:flex;justify-content:space-between;font-size:12px;font-weight:800
}
.contact-button span{font-size:19px}

.site-footer{background:#0b1210;color:#dbe0dc;padding-top:65px}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:45px;padding-bottom:55px}
.footer-brand .brand-mark{border-color:var(--white)}
.footer-desc p{color:#7f8983;font-size:12px;max-width:280px}
.footer-links{display:flex;justify-content:flex-end;gap:23px;align-items:flex-start;flex-wrap:wrap}
.footer-links a{font-size:11px;color:#a9b1ad}.footer-links a:hover{color:var(--acid)}
.footer-bottom{border-top:1px solid #252e2b;padding:20px 0;display:flex;justify-content:space-between;gap:20px;color:#69736d;font:600 8px Montserrat;letter-spacing:.1em}

.back-top{
    position:fixed;bottom:25px;left:25px;width:45px;height:45px;border:1px solid var(--ink);
    background:var(--acid);color:var(--ink);font-size:20px;cursor:pointer;z-index:900;
    opacity:0;visibility:hidden;transform:translateY(15px);transition:.3s
}
.back-top.visible{opacity:1;visibility:visible;transform:none}
.reveal{opacity:0;transform:translateY(35px);transition:.8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

@media(max-width:1050px){
    .desktop-nav{gap:14px}
    .desktop-nav a{font-size:11px}
    .hero-inner{grid-template-columns:1fr 1fr}
    .solution-grid{grid-template-columns:repeat(2,1fr)}
    .product-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
    .section-shell,.header-inner,.hero-inner{width:min(100% - 32px,1240px)}
    .header-inner{height:72px}
    .desktop-nav,.header-cta{display:none}
    .mobile-toggle{display:block;margin-right:auto}
    .mobile-nav{
        display:flex;flex-direction:column;background:rgba(244,241,233,.98);
        max-height:0;overflow:hidden;transition:.4s var(--ease);border-top:0 solid var(--line)
    }
    .mobile-nav.open{max-height:430px;border-top:1px solid var(--line);padding:12px 16px 18px}
    .mobile-nav a{padding:12px 10px;font-size:13px;border-bottom:1px solid var(--line)}
    .mobile-nav a:last-child{border:0}
    .hero{padding:125px 0 65px;min-height:auto}
    .hero:before{width:500px;height:500px;right:-300px;top:-150px}
    .hero-inner{grid-template-columns:1fr;gap:50px}
    .hero-copy{padding:0}
    .hero h1{font-size:clamp(45px,13vw,68px)}
    .hero-visual{min-height:auto}
    .visual-panel{height:470px;transform:none}
    .package-back{width:175px;height:310px;right:80px}
    .package-front{width:200px;height:330px;left:45px}
    .package-small{width:140px;height:210px}
    .about,.products,.process{padding:95px 0}
    .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
    .about-grid{gap:28px}
    .section-heading{display:block}
    .section-heading p{margin-top:22px}
    .solution-grid{grid-template-columns:1fr}
    .solution-card{min-height:320px}
    .process-grid{grid-template-columns:1fr 1fr}
    .process-line{display:none}
    .process-item{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line);padding:24px 18px 28px 0}
    .process-item:nth-child(odd){border-right:0!important}
    .contact-grid{gap:55px}
    .footer-top{grid-template-columns:1fr;gap:28px}
    .footer-links{justify-content:flex-start}
    .footer-bottom{display:block;line-height:2.2}
    .footer-bottom span{display:block}
}
@media(max-width:520px){
    .brand-copy small{display:none}
    .brand-copy strong{font-size:19px}
    .brand-mark{width:39px;height:39px}
    .hero-actions{flex-direction:column}
    .btn{width:100%}
    .hero-note{margin-top:30px}
    .visual-panel{height:390px}
    .package-back{width:140px;height:250px;right:60px;top:55px}
    .package-front{width:160px;height:270px;left:35px;top:65px}
    .package-small{width:115px;height:170px;right:15px}
    .package-label b{font-size:23px}
    .package-label span{font-size:5px}
    .product-grid{grid-template-columns:1fr}
    .product-card{min-height:220px}
    .manifesto{padding:105px 0}
    .manifesto h2{font-size:48px}
    .process-grid{grid-template-columns:1fr}
    .process-item:nth-child(odd){border-right:0!important}
    .contact{padding:95px 0}
    .contact-card{padding:10px 18px}
    .contact-row{align-items:flex-start;flex-direction:column;gap:5px}
    .back-top{left:15px;bottom:15px}
}