/* Qoffa Smart — About / brand story */
:root{--about-cream:#f7f4ec;--about-ink:#17241e;--about-green:#1c6b49;--about-mint:#dfeee0;--about-lime:#d6ed80;--about-orange:#f19a57;--about-line:rgba(28,107,73,.14);--about-shadow:0 24px 70px rgba(25,55,39,.12);--about-spring:cubic-bezier(.16,1,.3,1)}
body.about-page{background:var(--about-cream);color:var(--about-ink);overflow-x:hidden}body.about-page *,body.about-page *:before,body.about-page *:after{box-sizing:border-box}body.about-page #mainHeader{background:rgba(247,244,236,.82);border-bottom:1px solid rgba(28,107,73,.08);backdrop-filter:blur(22px)}body.about-page .navbar{min-height:88px}body.about-page .logo-img{width:45px;height:45px;border-radius:15px}body.about-page .nav-link{border-radius:999px;color:#506158;padding:10px 13px}body.about-page .nav-link:hover,body.about-page .nav-link.active{color:var(--about-green);background:#fff;box-shadow:0 7px 20px rgba(22,60,41,.07)}body.about-page .cart-btn{background:var(--about-green);box-shadow:0 9px 22px rgba(28,107,73,.19)}
body.about-page .about-hero{width:min(calc(100% - 32px),1320px);min-height:470px;margin:18px auto 0;border-radius:36px;overflow:hidden;position:relative;background:linear-gradient(135deg,#dfeee0,#f7f4ec 52%,#d6ed80);box-shadow:var(--about-shadow);isolation:isolate}body.about-page .about-hero:before{content:'QOFFA';position:absolute;left:-22px;bottom:-48px;font:900 clamp(8rem,20vw,18rem)/.8 'DM Sans',sans-serif;letter-spacing:-.1em;color:rgba(28,107,73,.07);z-index:-1}body.about-page .about-hero:after{content:'';position:absolute;right:-100px;top:-150px;width:520px;height:520px;border-radius:50%;background:rgba(241,154,87,.12);box-shadow:-150px 160px 0 rgba(214,237,128,.2);z-index:-1}body.about-page .about-hero .container{min-height:470px;display:flex;align-items:center}body.about-page .about-hero .hero-content{max-width:800px;padding:62px 8px}body.about-page .about-hero .hero-title{font-size:clamp(3.8rem,10vw,8rem);line-height:.9;letter-spacing:-.09em;margin:0 0 22px;color:var(--about-ink)}body.about-page .about-hero .hero-subtitle{font-size:clamp(1.25rem,2.8vw,2.1rem);font-weight:800;color:var(--about-green);margin:0 0 13px}body.about-page .about-hero .hero-description{max-width:690px;color:#61736a;font-size:1.08rem;line-height:1.9;margin:0}
body.about-page .project-definition,body.about-page .problem-solution,body.about-page .business-model,body.about-page .value-proposition{padding:100px 0 0}body.about-page .section-header{text-align:center;margin-bottom:44px}body.about-page .section-title{font-size:clamp(2.2rem,5vw,4.5rem);letter-spacing:-.08em;line-height:1;margin:0 0 12px;color:var(--about-ink)}body.about-page .section-subtitle{color:#718078;margin:0;font-size:1rem}body.about-page .definition-content{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:28px;align-items:center}body.about-page .definition-text{color:#62746a;line-height:2;font-size:1rem}body.about-page .definition-text p{margin:0 0 17px}body.about-page .definition-text h3{color:var(--about-green);font-size:1.45rem;margin:22px 0 8px}body.about-page .definition-visual{background:var(--about-green);border-radius:30px;padding:30px;min-height:390px;position:relative;overflow:hidden;box-shadow:var(--about-shadow)}body.about-page .definition-visual:before{content:'✦';position:absolute;right:24px;top:18px;color:var(--about-lime);font-size:3rem}body.about-page .visual-card{position:relative;z-index:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:22px;padding:22px;color:#fff;margin-top:75px}body.about-page .visual-card h3{font-size:1.8rem;margin:0 0 17px;color:var(--about-lime)}body.about-page .visual-card p{color:#e5f1e7;line-height:1.8}body.about-page .highlight{position:relative;padding:10px 0 10px 28px;margin:14px 0;color:var(--about-ink);font-weight:700}.about-page .highlight:before{content:'✓';position:absolute;right:0;color:var(--about-green);font-weight:900}.about-page .highlight{padding-right:27px}
body.about-page .problem-solution{background:linear-gradient(180deg,transparent,#edf5e6)}body.about-page .problem-solution-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.about-page .problem-card,.about-page .solution-card{border-radius:28px;padding:32px;border:1px solid var(--about-line);box-shadow:0 13px 36px rgba(28,107,73,.07)}.about-page .problem-card{background:#fff4ea}.about-page .solution-card{background:#e7f4e8}.about-page .problem-card h3,.about-page .solution-card h3{font-size:1.5rem;margin:0 0 19px}.about-page .problem-card h3{color:#bb6635}.about-page .solution-card h3{color:var(--about-green)}.about-page .problem-list,.about-page .solution-list{list-style:none;padding:0;margin:0;display:grid;gap:11px;color:#687a71;line-height:1.75}.about-page .problem-list li,.about-page .solution-list li{position:relative;padding-right:25px}.about-page .problem-list li:before{content:'×';position:absolute;right:0;color:#d37540;font-weight:900}.about-page .solution-list li:before{content:'✓';position:absolute;right:0;color:var(--about-green);font-weight:900}.about-page .solution-card{position:relative;overflow:hidden}.about-page .solution-card:after{content:'Q';position:absolute;left:-8px;bottom:-40px;font:900 12rem/.8 'DM Sans',sans-serif;color:rgba(28,107,73,.08)}
body.about-page .model-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative}body.about-page .model-steps:before{content:'';position:absolute;top:35px;right:10%;left:10%;height:2px;background:var(--about-line)}.about-page .model-step{position:relative;z-index:1;background:#fff;border:1px solid var(--about-line);border-radius:24px;padding:26px 20px;text-align:center;box-shadow:0 10px 28px rgba(28,107,73,.06);transition:.45s var(--about-spring)}.about-page .model-step:hover{transform:translateY(-8px);box-shadow:var(--about-shadow)}.about-page .step-number{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;margin:0 auto 14px;background:var(--about-green);color:var(--about-lime);font-weight:900;box-shadow:0 0 0 7px var(--about-cream)}.about-page .step-icon{font-size:1.5rem;color:var(--about-green);margin-bottom:12px}.about-page .step-title{font-size:1.1rem;margin:0 0 8px}.about-page .step-description{font-size:.82rem;line-height:1.8;color:#718078;margin:0}
body.about-page .values-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.about-page .value-card{background:#fff;border:1px solid var(--about-line);border-radius:24px;padding:26px;transition:.45s var(--about-spring)}.about-page .value-card:hover{transform:translateY(-8px);border-color:rgba(28,107,73,.3);box-shadow:var(--about-shadow)}.about-page .value-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:17px;background:var(--about-mint);color:var(--about-green);font-size:1.25rem;margin-bottom:17px}.about-page .value-title{font-size:1.2rem;margin:0 0 8px}.about-page .value-description{color:#718078;line-height:1.8;margin:0;font-size:.9rem}
body.about-page .future-vision{margin-top:100px;padding:100px 0;background:var(--about-ink);color:#fff;position:relative;overflow:hidden}.about-page .future-vision:before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;right:-220px;top:-230px;background:rgba(214,237,128,.16)}.about-page .future-vision .section-title{color:#fff}.about-page .future-vision .section-subtitle{color:#dbeadd}.about-page .vision-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative}.about-page .vision-timeline:before{content:'';position:absolute;right:8%;left:8%;top:27px;height:2px;background:rgba(214,237,128,.3)}.about-page .timeline-item{position:relative;z-index:1}.about-page .timeline-year{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:var(--about-lime);color:var(--about-ink);font-weight:900;margin-bottom:18px;box-shadow:0 0 0 8px var(--about-ink)}.about-page .timeline-content{padding:20px;border-radius:20px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);min-height:170px}.about-page .timeline-content h3{color:var(--about-lime);font-size:1.1rem;margin:0 0 8px}.about-page .timeline-content p{color:#dbeadd;line-height:1.8;font-size:.83rem;margin:0}
body.about-page .about-cta{width:min(calc(100% - 32px),1320px);margin:0 auto;border-radius:34px;padding:82px 0;background:var(--about-green);color:#fff;position:relative;overflow:hidden}.about-page .about-cta:after{content:'';position:absolute;left:-110px;bottom:-190px;width:420px;height:420px;border-radius:50%;background:rgba(214,237,128,.2)}.about-page .about-cta .container{position:relative;z-index:1}.about-page .cta-title{font-size:clamp(2.3rem,5vw,4.8rem);letter-spacing:-.08em;margin:0 0 15px}.about-page .cta-description{max-width:690px;color:#e3f0e4;line-height:1.8}.about-page .cta-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.about-page .cta-buttons .btn{border-radius:999px;padding:12px 18px;font-weight:800;transition:.35s var(--about-spring)}.about-page .cta-buttons .btn:hover{transform:translateY(-4px)}.about-page .cta-buttons .btn-primary{background:var(--about-lime);color:var(--about-ink)}.about-page .cta-buttons .btn-outline{border:1px solid rgba(255,255,255,.35);color:#fff;background:transparent}
@media(max-width:900px){body.about-page .definition-content{grid-template-columns:1fr}.about-page .model-steps,.about-page .vision-timeline{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.about-page .model-steps:before,.about-page .vision-timeline:before{display:none}.about-page .values-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-page .problem-solution-grid{grid-template-columns:1fr}}
@media(max-width:600px){body.about-page .about-hero,body.about-page .about-cta{width:calc(100% - 16px);border-radius:24px}.about-page .about-hero,.about-page .about-hero .container{min-height:480px}.about-page .about-hero .hero-content{padding:40px 20px}.about-page .about-hero .hero-title{font-size:clamp(3.5rem,17vw,6rem)}body.about-page .project-definition,body.about-page .problem-solution,body.about-page .business-model,body.about-page .value-proposition{padding-top:70px}.about-page .definition-visual,.about-page .problem-card,.about-page .solution-card{padding:24px;border-radius:24px}.about-page .model-steps,.about-page .vision-timeline,.about-page .values-grid{grid-template-columns:1fr}.about-page .future-vision{margin-top:70px;padding:70px 0}.about-page .about-cta{padding:54px 0}.about-page .cta-buttons{flex-direction:column}.about-page .cta-buttons .btn{text-align:center}}
@media(prefers-reduced-motion:reduce){body.about-page *,body.about-page *:before,body.about-page *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}