/* ========== PAGINA-ABOUT.CSS ==========
   About Us child page — Compuprint GDS
   Parent reference: test3 (blue/gold palette, white header)
   Betheme prebuild structural inspirations: ITService6 About, Business4 About, Company2 About
   ==================================== */

/* ========== RESET ========== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;background:#0a1526;color:#0f172a;overflow-x:hidden;line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;border:none;background:none}
svg{width:100%;height:100%}

/* ========== VARIABLES ========== */
:root{
  --blue:#0050a0;
  --blue-dark:#003d7a;
  --blue-light:#2560ac;
  --gold:#c5a059;
  --gold-light:#d4b06b;
  --gold-bright:#d4af52;
  --navy:#0a1526;
  --navy-light:#0c1c33;
  --navy-mid:#12305a;
  --white:#ffffff;
  --light:#F9FAFB;
  --grey:#475569;
  --grey-light:#64748b;
  --grey-border:#E2E8F0;
  --font-heading:'Barlow Condensed',sans-serif;
  --font-body:'Inter',sans-serif;
}

/* ========== UTILITIES ========== */
.container{max-width:1400px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.15em;color:var(--gold);font-size:14px;display:block}
.eyebrow-dark{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.15em;color:var(--blue);font-size:14px;display:block}
.gold{color:var(--gold)}
.blue{color:var(--blue)}
.gold-italic{color:var(--gold);font-style:italic;font-weight:500}
.section-heading{font-family:var(--font-heading);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin-top:12px}
.section-heading-light{font-family:var(--font-heading);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin-top:12px;color:var(--white)}
.section-heading em{font-style:normal}
.divider-gold{width:64px;height:3px;background:var(--gold);margin:24px 0}
.divider-gold.center{margin-left:auto;margin-right:auto}
.section-center{text-align:center;max-width:680px;margin:0 auto 64px}
.section-desc{color:rgba(255,255,255,.6);margin-top:16px;line-height:1.7;font-size:17px}
.section-desc-dark{color:var(--grey-light);margin-top:16px;line-height:1.7;font-size:17px}


.grigliaval {display: grid;
  place-items: center; 
  min-height: 600px;}
/* ========== SECTIONS ========== */
.section-light{background:var(--light);padding:96px 0}
.section-dark{background:var(--navy);padding:96px 0}
.section-cta{background:var(--navy);padding:96px 0;position:relative;overflow:hidden}


/* ========== BREADCRUMB ========== */
.breadcrumb{background:var(--navy-light);border-bottom:1px solid rgba(255,255,255,.08);padding:16px 0}
.breadcrumb-inner{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.5);flex-wrap:wrap}
.breadcrumb-inner a{color:rgba(255,255,255,.6);transition:color .3s}
.breadcrumb-inner a:hover{color:var(--gold)}
.breadcrumb-inner .sep{color:rgba(255,255,255,.3)}
.breadcrumb-inner .current{color:var(--gold)}

/* ========== SPLIT LAYOUT ========== */
.split-layout{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:1024px){.split-layout{grid-template-columns:1fr 1fr;gap:80px}}
.body-text p{color:var(--grey);line-height:1.7;margin-bottom:16px;font-size:16px}
.body-text-light{color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:16px;font-size:16px}
.body-text-light strong{color:var(--white)}
.split-visual{position:relative}
.image-frame{
  position:relative;background:linear-gradient(135deg,var(--navy-light),var(--navy-mid));
  border-radius:16px;padding:40px;display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/5;overflow:hidden;
}
.image-glow{position:absolute;width:66%;height:66%;border-radius:50%;background:rgba(28,77,143,.3);filter:blur(60px)}
.image-frame img{position:relative;z-index:10;max-height:70%;object-fit:contain;filter:drop-shadow(0 25px 50px rgba(0,0,0,.5))}
.corner-accent{position:absolute;top:-16px;right:-16px;width:80px;height:80px;border-top:2px solid var(--gold);border-right:2px solid var(--gold)}
.corner-accent.top-right{top:-16px;right:-16px}
.badge-floating{
  position:absolute;bottom:-16px;left:32px;background:var(--navy);color:var(--white);
  font-family:var(--font-heading);letter-spacing:.15em;text-transform:uppercase;font-size:12px;
  padding:10px 18px;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:5;
}

/* ========== STATS ROW ========== */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;border-top:1px solid var(--grey-border);border-bottom:1px solid var(--grey-border);padding:24px 0}
.stat-item{text-align:left}
.stat-num{font-family:var(--font-heading);font-weight:700;color:var(--navy);font-size:2.5rem;line-height:1}
@media(min-width:768px){.stat-num{font-size:3rem}}
.stat-num sup{color:var(--gold);font-size:1.5rem}
.stat-label{color:var(--grey-light);font-size:13px;margin-top:4px}

/* ========== HERITAGE (Business4 client section) ========== */
.heritage-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:1024px){.heritage-grid{grid-template-columns:1fr 1fr;gap:64px}}
.heritage-image img{border-radius:16px;width:100%;border:1px solid rgba(255,255,255,.1)}
.partner-tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.partner-tag{
  font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.1em;font-size:14px;font-weight:500;
  color:var(--gold);border:1px solid rgba(197,160,89,.3);padding:8px 20px;border-radius:4px;transition:all .3s;
}
.partner-tag:hover{background:rgba(197,160,89,.1);border-color:var(--gold)}

/* ========== GLOBAL OPERATIONS — NUMBERED STEPS (ITService6 pattern) ========== */
.global-image-wrap{margin-bottom:64px;border-radius:16px;overflow:hidden}
.global-banner-img{width:100%;height:auto;border-radius:16px;border:1px solid var(--grey-border)}
.steps-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.steps-grid{grid-template-columns:repeat(3,1fr)}}
.step-card{
  background:var(--white);border:1px solid var(--grey-border);border-radius:12px;padding:32px;
  transition:all .5s;position:relative;overflow:hidden;
}
.step-card:hover{transform:translateY(-6px);border-color:var(--blue);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.step-num{
  font-family:var(--font-heading);font-weight:700;font-size:3rem;color:rgba(0,80,160,.1);
  position:absolute;top:16px;right:24px;line-height:1;
}
.step-icon{width:48px;height:48px;color:var(--blue);margin-bottom:20px}
.step-card h3{font-family:var(--font-heading);font-weight:600;font-size:22px;color:var(--navy);margin-bottom:12px}
.step-card p{color:var(--grey-light);font-size:15px;line-height:1.6}

/* ========== FACILITIES (Business4 two-column) ========== */
.facilities-layout{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:1024px){.facilities-layout{grid-template-columns:1.3fr 1fr;gap:64px}}
.facilities-image{position:relative;border-radius:16px;overflow:hidden}
.facilities-img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.facilities-overlay{
  position:absolute;bottom:0;left:0;right:0;padding:32px 24px 24px;
  background:linear-gradient(to top,rgba(10,21,38,.9),transparent);
  border-radius:0 0 16px 16px;
}
.facilities-label{font-family:var(--font-heading);letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--gold);font-weight:600}

/* ========== BRAND FEATURES (Company2 feature list) ========== */
.brand-features{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.brand-features{grid-template-columns:repeat(3,1fr)}}
.brand-feature{
  background:var(--white);border:1px solid var(--grey-border);border-radius:12px;padding:32px;
  display:flex;flex-direction:column;gap:16px;transition:all .5s;
}
.brand-feature:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 16px 32px rgba(0,0,0,.06)}
.brand-icon{width:44px;height:44px;color:var(--blue);flex-shrink:0}
.brand-feature h4{font-family:var(--font-heading);font-weight:600;font-size:20px;color:var(--navy)}
.brand-feature p{color:var(--grey-light);font-size:15px;line-height:1.6}

/* ========== MISSION (ITService6 numbered list) ========== */
.mission-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.mission-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.mission-grid{grid-template-columns:repeat(3,1fr)}}
.mission-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:32px;
  transition:all .5s;position:relative;overflow:hidden;
}
.mission-card:hover{transform:translateY(-4px);border-color:rgba(197,160,89,.3);background:rgba(255,255,255,.05)}
.mission-num{
  font-family:var(--font-heading);font-weight:700;font-size:2.5rem;color:var(--gold);
  opacity:.3;line-height:1;margin-bottom:16px;
}
.mission-card h3{font-family:var(--font-heading);font-weight:600;font-size:20px;color:var(--white);margin-bottom:8px}
.mission-card p{color:rgba(255,255,255,.6);font-size:15px;line-height:1.6}

/* ========== VALUES (Business4 icon blocks) ========== */
.values-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.values-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.values-grid{grid-template-columns:repeat(3,1fr)}}
.value-card{
  background:var(--white);border:1px solid var(--grey-border);border-radius:12px;padding:32px;
  transition:all .5s;text-align:left;
}
.value-card:hover{transform:translateY(-6px);border-color:var(--blue);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.value-icon{width:48px;height:48px;color:var(--blue);margin-bottom:20px}
.value-card h3{font-family:var(--font-heading);font-weight:600;font-size:22px;color:var(--navy);margin-bottom:12px}
.value-card p{color:var(--grey-light);font-size:15px;line-height:1.6}

/* ========== ENVIRONMENTAL BADGES ========== */
.env-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.env-badge{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:32px 24px;text-align:center;transition:all .5s;
}
.env-badge:hover{border-color:rgba(197,160,89,.3);background:rgba(255,255,255,.05)}
.env-badge-icon{width:48px;height:48px;color:var(--gold);margin:0 auto 16px}
.env-badge-title{font-family:var(--font-heading);font-weight:600;font-size:20px;color:var(--white)}
.env-badge-sub{color:rgba(255,255,255,.5);font-size:14px;margin-top:4px}

/* ========== GDS GROUP CARD (ITService6 stats) ========== */
.gds-card{
  background:var(--white);border:1px solid var(--grey-border);border-radius:16px;
  overflow:hidden;display:grid;grid-template-columns:1fr;
}
@media(min-width:768px){.gds-card{grid-template-columns:1fr 1.5fr}}
.gds-info{padding:40px;background:linear-gradient(135deg,var(--navy-light),var(--navy-mid));text-align:center}
.gds-logo-text{font-family:var(--font-heading);font-size:28px;font-weight:700;color:var(--white);letter-spacing:.05em}
.gds-sub{color:rgba(255,255,255,.5);font-size:14px;margin-top:4px}
.gds-cert{font-family:var(--font-heading);color:var(--gold);font-size:16px;margin-top:20px;letter-spacing:.05em}
.gds-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding:40px}
@media(min-width:1024px){.gds-stats{grid-template-columns:repeat(4,1fr)}}
.gds-stat{text-align:center}
.gds-stat-num{font-family:var(--font-heading);font-weight:700;color:var(--navy);font-size:2rem;line-height:1}
@media(min-width:1024px){.gds-stat-num{font-size:2.5rem}}
.gds-stat-num sup{color:var(--gold);font-size:1.2rem}
.gds-stat-label{color:var(--grey-light);font-size:13px;margin-top:8px}

/* ========== CTA ========== */
.cta-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cta-rings div{width:700px;height:700px;border-radius:50%;border:1px solid rgba(197,160,89,.06)}
.cta-inner{position:relative;text-align:center;max-width:640px;margin:0 auto}
.cta-buttons{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:32px}

/* ========== FOOTER ========== */
footer{background:var(--navy);color:var(--white)}
.footer-cta{max-width:1400px;margin:0 auto;padding:80px 0;border-top:1px solid rgba(255,255,255,.1)}
.footer-cta-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:start}
@media(min-width:1024px){.footer-cta-grid{grid-template-columns:1fr 1fr}}
.footer-heading{font-family:var(--font-heading);font-weight:700;font-size:2rem;line-height:1.1;margin-top:12px;color:var(--white)}
@media(min-width:768px){.footer-heading{font-size:2.5rem}}
.footer-contact-list{margin-top:32px;display:flex;flex-direction:column;gap:20px}
.footer-contact-item{display:flex;align-items:flex-start;gap:12px;color:rgba(255,255,255,.8);transition:color .3s;font-size:15px;line-height:1.5}
.footer-contact-item:hover{color:var(--gold)}
.footer-contact-item svg{width:20px;height:20px;color:var(--gold);flex-shrink:0;margin-top:2px}
.footer-form{display:flex;flex-direction:column;gap:20px}
.footer-form input{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.2);
  padding:16px 0;font-size:18px;color:var(--white);outline:none;transition:border-color .3s;font-family:inherit;
}
.footer-form input::placeholder{color:rgba(255,255,255,.4)}
.footer-form input:focus{border-bottom-color:var(--gold)}
.footer-form button{
  align-self:flex-start;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.15em;font-size:14px;font-weight:500;
  background:var(--gold);color:var(--navy);padding:16px 32px;border-radius:4px;transition:all .3s;
}
.footer-form button:hover{background:var(--gold-light);transform:scale(1.02)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:32px 0}
.footer-bottom-inner{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px}
@media(min-width:768px){.footer-bottom-inner{flex-direction:row}}
.footer-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand-text{font-family:var(--font-heading);font-size:20px;font-weight:700}
.brand-info{color:rgba(255,255,255,.4);font-size:14px}
.footer-links{display:flex;align-items:center;gap:24px;font-size:14px;color:rgba(255,255,255,.5)}
.footer-links a{transition:color .3s}
.footer-links a:hover{color:var(--gold)}

/* ========== ANIMATIONS ========== */
.fade-in{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ========== RESPONSIVE ========== */
@media(max-width:1023px){
  .section-light,.section-dark,.section-cta{padding:64px 0}
  .section-center{margin-bottom:48px}
}
@media(max-width:767px){
  .section-light,.section-dark,.section-cta{padding:48px 0}
  .container{padding:0 20px}
  .hero-text h1{font-size:2.5rem}
  .stats-row{grid-template-columns:repeat(3,1fr);gap:8px}
  .stat-num{font-size:1.75rem}
  .stat-label{font-size:11px}
  .gds-stats{grid-template-columns:1fr 1fr;gap:16px;padding:24px}
  .gds-info{padding:24px}
  .values-grid,.brand-features,.mission-grid{gap:16px}
  .value-card,.brand-feature,.mission-card,.step-card{padding:24px}
  .grigliaval { min-height: 200px !important;}
}