/*
Theme Name: The Code Factory
Theme URI: https://www.thecodefactory.in/
Author: The Code Factory
Author URI: https://www.thecodefactory.in/
Description: AI-Augmented Software Development Program website theme for The Code Factory. Includes responsive landing page, interactive engineering workflows, Google review testimonials, social footer, SEO metadata and structured data.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: the-code-factory
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/


:root {
  --cyan:#00B3E3;
  --cyan-2:#47d1f3;
  --indigo:#3E4377;
  --deep:#09111f;
  --deep-2:#111a31;
  --text:#182033;
  --muted:#667085;
  --soft:#f5f9fc;
  --soft-cyan:#effbfe;
  --soft-indigo:#f3f4fa;
  --line:#dce7ef;
  --white:#fff;
  --shadow:0 20px 60px rgba(16,24,40,.12);
  --radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(1320px,calc(100% - 48px));margin:auto}
.eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);display:flex;align-items:center;gap:10px;margin-bottom:16px
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--cyan)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(46px,6vw,86px);line-height:.98;letter-spacing:-.045em;margin-bottom:24px}
h2{font-size:clamp(38px,4.5vw,64px);line-height:1.02;letter-spacing:-.04em;margin-bottom:20px}
h3{font-size:24px;line-height:1.15;letter-spacing:-.025em}
.lead{font-size:clamp(18px,2vw,23px);color:#d6deeb;max-width:760px}
.section-lead{font-size:20px;color:var(--muted);max-width:790px}
.gradient-text{
  background:linear-gradient(90deg,var(--cyan),#79e0f7 45%,#8c95df 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;height:84px;
  backdrop-filter:blur(18px);background:rgba(255,255,255,.88);border-bottom:1px solid rgba(220,231,239,.85)
}
.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;min-width:190px}
.logo img{width:205px;height:auto;display:block}
.nav-links{display:flex;align-items:center;gap:25px;font-size:14px;font-weight:650;color:#3c4658}
.nav-links a{position:relative;padding:31px 0 27px}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:19px;height:2px;background:var(--cyan);transition:.25s}
.nav-links a:hover::after{right:0}
.nav-cta,.btn{
  border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;font-weight:750;transition:.25s;padding:14px 20px
}
.nav-cta,.btn-primary{background:var(--cyan);color:#07101c;box-shadow:0 10px 30px rgba(0,179,227,.24)}
.nav-cta:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 38px rgba(0,179,227,.3)}
.btn-secondary{background:rgba(255,255,255,.08);color:white;border:1px solid rgba(255,255,255,.2)}
.btn-light{background:#fff;color:var(--deep);border:1px solid var(--line)}
.mobile-menu{display:none;background:none;border:0;font-size:24px}

.hero{
  min-height:900px;padding:165px 0 100px;background:
  radial-gradient(circle at 78% 24%,rgba(0,179,227,.15),transparent 30%),
  radial-gradient(circle at 63% 66%,rgba(83,92,169,.18),transparent 28%),
  linear-gradient(135deg,#07101d 0%,#0b1324 65%,#101933 100%);
  color:#fff;position:relative;overflow:hidden
}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;mask-image:linear-gradient(to bottom,black,transparent 88%)
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px}
.hero .eyebrow{color:#7de3fa} .hero .eyebrow::before{background:#7de3fa}
.hero-copy p{max-width:760px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-note{display:flex;align-items:center;gap:10px;margin-top:28px;color:#9fb0c9;font-size:14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 20px var(--cyan)}
.hero-visual{position:relative;min-height:580px}

 .window-top span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3)}




  




 
 







.section{padding:110px 0}
.section.soft{background:var(--soft)} .section.indigo{background:var(--deep);color:#fff}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;transition:.25s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#c9eefa}
.icon{width:46px;height:46px;border-radius:14px;background:var(--soft-cyan);display:grid;place-items:center;color:var(--cyan);font-weight:900;margin-bottom:22px}
.gap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:42px}
.cap{padding:20px;border-radius:18px;background:#fff;border:1px solid var(--line);font-weight:720}
.cap span{display:block;color:var(--muted);font-weight:500;font-size:13px;margin-top:8px}
.dashboard{
  background:#fff;border:1px solid #dbe5ef;border-radius:30px;padding:26px;box-shadow:var(--shadow);position:relative;overflow:hidden
}
.dashboard::after{content:"";position:absolute;width:250px;height:250px;border-radius:50%;right:-90px;top:-100px;background:rgba(0,179,227,.09)}
.dash-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.dash-title b{display:block;font-size:18px} .dash-title span{color:var(--muted);font-size:12px}
.badge{font-size:11px;padding:8px 11px;border-radius:999px;background:var(--soft-cyan);color:#087d9a;font-weight:800}
.skill{display:grid;grid-template-columns:115px 1fr 48px;gap:14px;align-items:center;margin:15px 0;font-size:13px}
.skill-track{height:10px;border-radius:999px;background:#edf2f7;overflow:hidden}
.skill-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--indigo));transform-origin:left;animation:grow 1.4s ease both}
@keyframes grow{from{transform:scaleX(.1)}to{transform:scaleX(1)}}
.flow{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:42px;align-items:stretch
}
.flow-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 16px;min-height:145px}
.flow-step b{font-size:12px;color:var(--cyan);letter-spacing:.1em} .flow-step strong{display:block;margin-top:9px;font-size:18px}
.flow-step p{font-size:12px;color:var(--muted);margin-top:8px}
.flow-step:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:53px;color:var(--cyan);font-size:22px;z-index:2}
.quote-block{padding:42px;border-radius:30px;background:linear-gradient(135deg,#eefbfe,#f5f4fb);border:1px solid #d8e8ef}
.quote-block p{font-size:30px;line-height:1.18;letter-spacing:-.02em;margin-bottom:0}
.daily{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}
.daily-item{padding:24px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);min-height:150px}
.daily-item .num{font-size:11px;color:#77dff6;font-weight:800;letter-spacing:.14em}
.daily-item strong{display:block;margin:10px 0 8px;font-size:17px}
.daily-item p{font-size:12px;color:#9fb0c9}
.sdlc-wrap{margin-top:46px;position:relative}
.sdlc-line{height:3px;background:linear-gradient(90deg,var(--cyan),var(--indigo));position:absolute;left:4%;right:4%;top:28px}
.sdlc{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;position:relative}
.sdlc-item{text-align:center;position:relative}
.sdlc-dot{width:56px;height:56px;border-radius:50%;margin:0 auto 16px;background:#fff;border:2px solid var(--cyan);display:grid;place-items:center;font-weight:850;color:var(--indigo);box-shadow:0 7px 20px rgba(0,179,227,.15)}
.sdlc-item strong{font-size:14px}
.sdlc-item span{display:block;color:var(--muted);font-size:11px;margin-top:5px}
.ai-loop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:35px}
.ai-node{padding:16px 18px;border-radius:15px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);font-weight:700}
.ai-arrow{color:var(--cyan);font-size:22px}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.metric-card{border-radius:24px;padding:34px;background:#fff;border:1px solid var(--line)}
.metric-card strong{font-size:54px;line-height:1;color:var(--indigo);letter-spacing:-.05em}
.metric-card span{display:block;margin-top:12px;color:var(--muted);font-weight:650}
.slider-wrap{position:relative;margin-top:38px}
.slider{display:flex;gap:18px;overflow:hidden;scroll-behavior:smooth}
.domain{min-width:calc(25% - 14px);border-radius:25px;padding:30px;min-height:285px;position:relative;overflow:hidden;background:linear-gradient(145deg,#0d1728,#162541);color:#fff}
.domain::before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-80px;top:-80px;background:rgba(0,179,227,.18)}
.domain .big-icon{font-size:48px;margin:18px 0}
.domain p{color:#a9b8ca;font-size:14px}
.slider-controls{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.slider-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:20px}
.leaders{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.leader-card{border-radius:25px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:.25s}
.leader-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}


.leader-body{padding:24px}
.leader-body h3{font-size:22px;margin-bottom:5px} .role{color:var(--indigo);font-weight:750;font-size:13px}
.exp{margin-top:14px;color:var(--muted);font-size:13px}
.profile-toggle{margin-top:18px;width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer;text-align:left;font-weight:750;display:flex;justify-content:space-between}
.profile-more{max-height:0;overflow:hidden;transition:max-height .4s ease;color:var(--muted);font-size:13px}
.profile-more.open{max-height:260px}
.profile-more ul{padding-left:18px;margin-bottom:0}
.contact-panel{
  display:grid;grid-template-columns:1.05fr .95fr;border-radius:34px;overflow:hidden;background:var(--deep);color:#fff;box-shadow:var(--shadow)
}
.contact-copy{padding:60px} .contact-copy p{color:#b2c0d1;max-width:630px}
.contact-details{padding:60px;background:linear-gradient(145deg,#182341,#26325b)}
.contact-row{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.11)} .contact-row small{display:block;color:#8ca1bc;margin-bottom:5px;text-transform:uppercase;letter-spacing:.12em}
.footer{padding:55px 0 35px;background:#060d17;color:#b7c4d4}
.footer-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:50px}
.footer img{width:220px;filter:none}
.footer h4{color:#fff;margin:0 0 14px} .footer a{display:block;margin:9px 0;font-size:13px}
.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;display:flex;justify-content:space-between}
.reveal{opacity:0;transform:translateY(20px);transition:.7s ease}
.reveal.show{opacity:1;transform:none}

@media (max-width:1100px){
  .nav-links{display:none} .mobile-menu{display:block}
  .hero-grid,.two-col,.contact-panel{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero-visual{min-height:520px}
  .gap-grid{grid-template-columns:repeat(3,1fr)}
  .flow{grid-template-columns:repeat(3,1fr)} .flow-step::after{display:none}
  .daily{grid-template-columns:repeat(3,1fr)}
  .leaders{grid-template-columns:repeat(2,1fr)}
  .domain{min-width:calc(50% - 9px)}
  .sdlc{grid-template-columns:repeat(3,1fr);row-gap:30px} .sdlc-line{display:none}
}
@media (max-width:700px){
  .container{width:min(100% - 30px,1320px)}
  .nav{height:72px} .logo img{width:170px}
  .hero{padding:130px 0 70px}
  .hero-grid{gap:35px} .hero-visual{min-height:430px}
    
  
  
  .section{padding:78px 0}
  .cards,.gap-grid,.metric-grid,.leaders{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr}
  .daily{grid-template-columns:1fr 1fr}
  .domain{min-width:86%}
  .sdlc{grid-template-columns:repeat(2,1fr)}
  .contact-copy,.contact-details{padding:35px 26px}
  .footer-grid{grid-template-columns:1fr} .footer-bottom{display:block}
}

/* ===== 2026 UPDATE: Landing slider, industry-ready roadmap, animated metrics ===== */
.hero-slider{padding:0;min-height:900px;position:relative}
.hero-slides{position:relative;min-height:900px}
.hero-slide{
  position:absolute;inset:0;padding:165px 0 110px;
  opacity:0;visibility:hidden;transform:translateX(22px);
  transition:opacity .7s ease,transform .7s ease,visibility .7s;
  display:flex;align-items:center
}
.hero-slide.active{opacity:1;visibility:visible;transform:none;z-index:2}
.hero-slide:nth-child(1){background:
  radial-gradient(circle at 82% 22%,rgba(0,179,227,.16),transparent 32%),
  linear-gradient(135deg,#07101d,#0b1324 65%,#101933)}
.hero-slide:nth-child(2){background:
  radial-gradient(circle at 75% 18%,rgba(0,179,227,.12),transparent 30%),
  linear-gradient(135deg,#0B1324,#151A38 60%,#252B56)}
.hero-slide:nth-child(3){background:
  radial-gradient(circle at 72% 35%,rgba(90,105,190,.22),transparent 32%),
  linear-gradient(135deg,#07101d,#111b32 58%,#202d54)}
.hero-image-frame{
  border-radius:30px;padding:12px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);box-shadow:0 40px 110px rgba(0,0,0,.38);
  transform:perspective(1000px) rotateY(-3deg);transition:transform .4s ease
}
.hero-image-frame:hover{transform:perspective(1000px) rotateY(0) translateY(-4px)}
.hero-image-frame img{display:block;width:100%;height:auto;border-radius:22px}
.hero-image-frame.light{background:rgba(255,255,255,.13)}
.hero-arrow{
  position:absolute;z-index:5;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(7,16,29,.45);backdrop-filter:blur(12px);color:#fff;font-size:24px;cursor:pointer;
  transition:.25s
}
.hero-arrow:hover{background:var(--cyan);color:#06101b;border-color:var(--cyan)}
.hero-prev{left:22px}.hero-next{right:22px}
.hero-dots{
  position:absolute;z-index:6;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;gap:10px;padding:10px 13px;border-radius:999px;background:rgba(5,12,23,.42);backdrop-filter:blur(10px)
}
.hero-dot{width:10px;height:10px;border:0;border-radius:50%;background:rgba(255,255,255,.38);cursor:pointer;padding:0;transition:.25s}
.hero-dot.active{width:30px;border-radius:20px;background:var(--cyan)}

.industry-ready-section{background:linear-gradient(180deg,#ffffff 0%,#f4fbfe 100%)}
.industry-ready-intro{margin-bottom:48px}
.industry-roadmap{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative
}
.industry-step{
  min-height:235px;padding:25px 22px;border-radius:22px;background:#fff;border:1px solid var(--line);
  position:relative;overflow:hidden;transition:.28s
}
.industry-step::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(var(--cyan),var(--indigo));opacity:.9
}
.industry-step:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#bce9f5}
.industry-step .step-no{
  font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--cyan);margin-bottom:18px
}
.industry-step h3{font-size:19px;margin-bottom:11px}
.industry-step p{font-size:13px;color:var(--muted);margin:0}

.count-up{font-variant-numeric:tabular-nums}
.footer-logo-card{
  display:inline-flex;align-items:center;justify-content:center;background:#fff;
  padding:13px 18px;border-radius:16px;margin-bottom:18px;box-shadow:0 10px 30px rgba(0,0,0,.18)
}
.footer-logo-card img{width:220px;display:block}
@media(max-width:1100px){
  .hero-slider,.hero-slides{min-height:1040px}
  .hero-slide{padding:135px 0 100px;align-items:flex-start}
  .industry-roadmap{grid-template-columns:repeat(2,1fr)}
  .hero-arrow{top:auto;bottom:28px;transform:none}
  .hero-prev{left:24px}.hero-next{right:24px}
}
@media(max-width:700px){
  .hero-slider,.hero-slides{min-height:1020px}
  .hero-slide{padding:120px 0 110px}
  .hero-slide .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-slide h1{font-size:clamp(43px,12vw,62px)}
  .hero-image-frame{transform:none}
  .hero-arrow{width:44px;height:44px}
  .hero-dots{bottom:30px}
  .industry-roadmap{grid-template-columns:1fr}
  .industry-step{min-height:auto}
  .simple-flow-wrap{padding:20px}
}


/* ===== RICH MEDIA + SEO/PERFORMANCE VISUAL REFINEMENT ===== */



.engineering-media{
  margin-top:42px;display:grid;grid-template-columns:1.15fr .85fr;gap:18px;
  border-radius:30px;overflow:hidden
}






.engineering-motion-card{
  min-height:420px;border-radius:28px;padding:34px;background:
  radial-gradient(circle at 80% 10%,rgba(0,179,227,.18),transparent 28%),
  linear-gradient(145deg,#0b1324,#19284a);color:#fff;display:flex;flex-direction:column;justify-content:center;overflow:hidden
}
.motion-label{font-size:10px;letter-spacing:.16em;color:#76dff7;font-weight:850;margin-bottom:28px}
.motion-network{display:flex;align-items:center;gap:8px;margin-bottom:28px;overflow:hidden}
.motion-node{
  flex:0 0 auto;padding:13px 14px;border-radius:13px;background:#14243e;border:1px solid #34516f;
  font-size:12px;font-weight:800;position:relative;z-index:2
}
.motion-line{height:2px;min-width:26px;flex:1;background:linear-gradient(90deg,var(--cyan),#7782cf);position:relative;overflow:hidden}
.motion-line::after{
  content:"";position:absolute;top:0;left:-50%;width:50%;height:100%;background:white;opacity:.8;
  animation:signalMove 2.2s linear infinite
}
.motion-line.l2::after{animation-delay:.35s}.motion-line.l3::after{animation-delay:.7s}
@keyframes signalMove{to{left:120%}}
.engineering-motion-card p{color:#a9b9cc;font-size:14px;margin:0}








.industry-accordion-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px
}
.industry-accordion{
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s
}
.industry-accordion[open]{box-shadow:0 16px 44px rgba(16,24,40,.08);border-color:#b9eaf5}
.industry-accordion summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:48px 1fr 32px;gap:14px;align-items:center;
  padding:20px 20px 20px 18px
}
.industry-accordion summary::-webkit-details-marker{display:none}
.industry-accordion .step-no{
  width:42px;height:42px;border-radius:13px;background:var(--soft-cyan);display:grid;place-items:center;
  color:#078aa8;font-size:11px;font-weight:900;letter-spacing:.08em
}
.step-copy strong{display:block;font-size:16px;color:var(--text);margin-bottom:3px}
.step-copy small{display:block;color:var(--muted);font-size:12px;line-height:1.4}
.accordion-plus{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#f3f6f9;color:var(--indigo);
  font-size:20px;transition:.25s
}
.industry-accordion[open] .accordion-plus{transform:rotate(45deg);background:var(--soft-cyan);color:#078aa8}
.industry-detail{padding:0 20px 19px 80px}
.industry-detail p{margin:0;color:var(--muted);font-size:13px}

.success-storyline{
  display:flex;align-items:center;margin-top:30px;padding:24px 28px;border:1px solid var(--line);
  border-radius:22px;background:#fff
}
.storyline-dot{flex:0 0 auto;width:72px;height:72px;border-radius:50%;background:#f5f8fb;border:1px solid #dce7ef;display:grid;place-items:center}
.storyline-dot span{font-size:11px;font-weight:850;color:var(--indigo)}
.storyline-dot.active{background:var(--deep);border-color:var(--deep);box-shadow:0 12px 30px rgba(11,16,32,.18)}
.storyline-dot.active span{color:#fff}
.storyline-track{height:4px;flex:1;background:#e7eef3;overflow:hidden;position:relative}
.storyline-track i{
  display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--indigo));
  animation:storyGrow 4.8s ease forwards
}
.storyline-track:nth-of-type(4) i{animation-delay:.3s}.storyline-track:nth-of-type(6) i{animation-delay:.6s}
@keyframes storyGrow{to{width:100%}}

@media(max-width:1100px){
  .engineering-media{grid-template-columns:1fr}
  .industry-accordion-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  
  
  .engineering-media-photo,.engineering-media-photo img,.engineering-motion-card{min-height:330px}
  .motion-network{overflow-x:auto;padding-bottom:8px}
  
  
  .industry-accordion summary{grid-template-columns:42px 1fr 30px;padding:16px}
  .industry-detail{padding:0 16px 17px 72px}
  .success-storyline{padding:18px 14px}
  .storyline-dot{width:54px;height:54px}
}
@media(prefers-reduced-motion:reduce){
  .motion-line::after,.storyline-track i{animation:none}
  .storyline-track i{width:100%}
}


/* ===== INFOGRAPHIC-ONLY OPTIMIZED VISUAL SYSTEM ===== */
.hero-slider{min-height:820px}
.hero-slides{min-height:820px}
.hero-slide{padding:145px 0 90px}
.hero-slide .hero-grid{grid-template-columns:1.02fr .98fr;gap:52px}

.hero-infographic{
  min-height:470px;border-radius:28px;padding:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 32px 80px rgba(0,0,0,.25);
  backdrop-filter:blur(10px);
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden
}
.hero-infographic::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:34px 34px
}
.hero-infographic > *{position:relative;z-index:1}
.info-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;color:#8ddff3;font-size:10px;font-weight:900;letter-spacing:.17em}
.info-topline b{font-size:14px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);width:36px;height:36px;border-radius:11px;display:grid;place-items:center}

.system-map{display:flex;align-items:center;gap:8px;margin:18px 0 30px}
.system-node{padding:13px 12px;border-radius:13px;background:#17263e;border:1px solid #36516f;color:#d9e8f3;font-size:11px;font-weight:800;white-space:nowrap}
.system-node.primary{border-color:var(--cyan);color:#8ce7fb}
.system-node.accent{background:var(--cyan);color:#07111c;border-color:var(--cyan)}
.system-link{height:2px;flex:1;min-width:16px;background:linear-gradient(90deg,var(--cyan),#6c77be);position:relative;overflow:hidden}
.system-link::after{content:"";position:absolute;inset:0;width:30%;background:#fff;opacity:.75;animation:infographicSignal 2.2s linear infinite}
@keyframes infographicSignal{from{transform:translateX(-120%)}to{transform:translateX(420%)}}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini-info{padding:17px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}
.mini-info strong{display:block;font-size:14px;color:#fff;margin-bottom:5px}
.mini-info span{display:block;color:#9cafc3;font-size:11px;line-height:1.4}

.dashboard-layout{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:center}
.score-ring{width:166px;height:166px;border-radius:50%;background:conic-gradient(var(--cyan) 0 74%,#24314a 74% 100%);display:grid;place-items:center}
.score-ring::before{content:"";position:absolute}
.score-ring-inner{width:130px;height:130px;border-radius:50%;background:#0c1728;display:grid;place-items:center;align-content:center}
.score-ring-inner strong{font-size:38px;color:#fff;line-height:1}
.score-ring-inner span{font-size:11px;color:#92a6bc;margin-top:7px}
.score-bars{display:grid;gap:12px}
.score-bars > div{display:grid;grid-template-columns:95px 1fr 30px;gap:10px;align-items:center;color:#a9b8ca;font-size:11px}
.score-bars i{height:8px;background:#223149;border-radius:999px;overflow:hidden}
.score-bars i b{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),#6975bb);border-radius:999px}
.score-bars em{font-style:normal;color:#fff;font-weight:800}
.growth-track{display:flex;align-items:center;gap:10px;margin-top:30px;color:#9cafc3;font-size:10px}
.growth-track i{height:2px;flex:1;background:linear-gradient(90deg,var(--cyan),#6773b7)}

.production-flow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0}
.production-flow > div{flex:1;min-width:0;padding:16px 8px;border-radius:14px;text-align:center;background:#16263e;border:1px solid #354e6b}
.production-flow div strong{display:block;color:#7ee2f8;font-size:10px;letter-spacing:.12em;margin-bottom:5px}
.production-flow div span{font-size:11px;color:#eef7fb;font-weight:750}
.production-flow > i{font-style:normal;color:var(--cyan)}
.production-flow.second{margin-top:10px}
.delivery-loop{margin-top:22px;padding:14px;border-radius:14px;background:rgba(0,179,227,.08);border:1px solid rgba(0,179,227,.18);text-align:center;color:#9edff0;font-size:11px;font-weight:750;letter-spacing:.02em}

.engineering-media{grid-template-columns:1fr}
.engineering-motion-card.wide{min-height:330px}
.architecture-layers{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:24px 0}
.architecture-layers div{padding:18px 12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.architecture-layers b{display:block;color:#7fe2f8;font-size:10px;letter-spacing:.14em;margin-bottom:8px}
.architecture-layers span{font-size:13px;font-weight:750;color:#fff}

.daily-infographic{
  margin:34px 0 20px;padding:30px;border-radius:26px;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12)
}
.daily-infographic-title small{display:block;color:#7ce1f7;letter-spacing:.15em;font-weight:850;margin-bottom:9px}
.daily-infographic-title strong{display:block;color:#fff;font-size:clamp(24px,3vw,38px);line-height:1.05;letter-spacing:-.03em}
.daily-track{display:flex;align-items:center;gap:9px;margin-top:28px;overflow-x:auto;padding-bottom:5px}
.daily-track span{white-space:nowrap;padding:11px 14px;border-radius:12px;background:#15233b;border:1px solid #344b67;color:#dceaf4;font-size:11px;font-weight:800}
.daily-track i{min-width:34px;height:2px;background:linear-gradient(90deg,var(--cyan),#6e78bc);position:relative;overflow:hidden}
.daily-track i::after{content:"";position:absolute;inset:0;width:35%;background:#fff;opacity:.75;animation:infographicSignal 2.6s linear infinite}

.leader-avatar{
  height:250px;display:grid;place-items:center;align-content:center;gap:14px;
  background:
    radial-gradient(circle at 50% 42%,rgba(0,179,227,.12),transparent 35%),
    linear-gradient(145deg,#f7fbfd,#f0f2f9);
  border-bottom:1px solid var(--line)
}
.leader-avatar-ring{
  width:145px;height:145px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid var(--cyan);box-shadow:0 18px 48px rgba(22,33,55,.1);
  position:relative
}
.leader-avatar-ring::after{
  content:"";position:absolute;width:115px;height:115px;border-radius:50%;
  border:1px dashed rgba(62,67,119,.28)
}
.leader-avatar-ring span{position:relative;z-index:2;font-size:44px;font-weight:850;letter-spacing:-.04em;color:var(--indigo)}
.leader-avatar small{font-size:9px;letter-spacing:.18em;color:#7b8795;font-weight:900}

.hero-arrow{
  width:46px;height:46px;background:rgba(7,16,29,.55)
}
.hero-dots{bottom:24px}
.hero-dot{transition:width .18s ease,background .18s ease}
.hero-slide{transition:opacity .42s ease,transform .42s ease,visibility .42s}
.hero-image-frame{display:none}

@media(max-width:1100px){
  .hero-slider,.hero-slides{min-height:960px}
  .hero-slide{padding:125px 0 90px}
  .hero-slide .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-infographic{min-height:360px}
}
@media(max-width:700px){
  .hero-slider,.hero-slides{min-height:980px}
  .hero-infographic{min-height:360px;padding:20px}
  .dashboard-layout{grid-template-columns:1fr}
  .score-ring{margin:auto}
  .production-flow{overflow-x:auto;justify-content:flex-start}
  .production-flow > div{min-width:92px}
  .architecture-layers{grid-template-columns:1fr 1fr}
  .system-map{overflow-x:auto;padding-bottom:5px}
  .system-node{min-width:max-content}
  .info-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .system-link::after,.daily-track i::after{animation:none}
  .hero-slide{transition:none}
}


.hero-slide:nth-child(4){
  background:
    radial-gradient(circle at 75% 28%,rgba(0,179,227,.18),transparent 30%),
    radial-gradient(circle at 60% 70%,rgba(92,101,184,.2),transparent 28%),
    linear-gradient(135deg,#07101d,#101a31 58%,#252e58)
}


/* ===== ABOUT + RESPONSIBLE AI REFINEMENT ===== */
.about-story-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:42px}
.about-story-card{padding:30px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 34px rgba(16,24,40,.05)}
.about-kicker{display:block;font-size:10px;letter-spacing:.16em;font-weight:900;color:var(--cyan);margin-bottom:16px}
.about-story-card h3{font-size:23px;margin-bottom:12px}
.about-story-card p{font-size:14px;color:var(--muted);margin:0}
.about-core-message{margin-top:20px;padding:34px;border-radius:26px;background:linear-gradient(145deg,#0d1728,#1b2b4c);color:#fff;display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:center}
.about-core-message small{display:block;color:#7fe1f8;letter-spacing:.16em;font-weight:900;margin-bottom:10px}
.about-core-message h3{font-size:34px;margin:0}
.about-core-message p{color:#bdcadd;margin:0;font-size:15px}
.about-process{margin-top:28px;padding:30px;border-radius:24px;background:var(--soft-cyan);border:1px solid #cfedf5}
.about-process-flow{display:flex;align-items:center;gap:9px;overflow-x:auto}
.about-process-flow div{min-width:175px;padding:16px;border-radius:15px;background:#fff;border:1px solid #d8e9ef}
.about-process-flow b{display:block;color:var(--cyan);font-size:11px;margin-bottom:6px}
.about-process-flow span{font-size:12px;font-weight:800;color:var(--text)}
.about-process-flow i{font-style:normal;color:var(--cyan)}
.ai-project-model{display:flex;align-items:stretch;gap:8px;margin:14px 0}
.ai-project-step{flex:1;padding:17px 12px;border-radius:14px;background:#16263e;border:1px solid #354e6b;text-align:center}
.ai-project-step strong{display:block;color:#7fe2f8;font-size:10px;letter-spacing:.12em}
.ai-project-step span{display:block;color:#fff;font-size:14px;font-weight:850;margin:6px 0}
.ai-project-step small{display:block;color:#9bacc0;font-size:9px;line-height:1.4}
.ai-project-model > i{align-self:center;font-style:normal;color:var(--cyan)}
.ai-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:42px}
.ai-principles article{padding:24px;border-radius:20px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11)}
.ai-principles article > span{display:block;color:#78e2f8;font-size:10px;font-weight:900;letter-spacing:.14em;margin-bottom:14px}
.ai-principles h3{font-size:18px;color:#fff;margin-bottom:9px}
.ai-principles p{font-size:12px;color:#aebdd0;margin:0}
@media(max-width:900px){.about-story-grid{grid-template-columns:1fr}.about-core-message{grid-template-columns:1fr}.ai-principles{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.ai-principles{grid-template-columns:1fr}.ai-project-model{overflow-x:auto}.ai-project-step{min-width:135px}}



}


/* ===== ABOUT US DROPDOWN CARDS ===== */
.about-story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:36px
}
.about-dropdown{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease
}
.about-dropdown[open]{
  border-color:#bce9f4;
  box-shadow:0 14px 38px rgba(16,24,40,.07)
}
.about-dropdown summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:1fr 32px;
  gap:12px;
  align-items:center;
  padding:22px 22px 20px
}
.about-dropdown summary::-webkit-details-marker{display:none}
.about-dropdown summary .about-kicker{
  grid-column:1;
  color:var(--cyan);
  font-size:10px;
  font-weight:900;
  letter-spacing:.15em;
  margin-bottom:5px
}
.about-dropdown summary strong{
  grid-column:1;
  display:block;
  font-size:18px;
  line-height:1.25;
  color:var(--text)
}
.about-dropdown-icon{
  grid-column:2;
  grid-row:1 / span 2;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--soft-cyan);
  color:var(--indigo);
  font-size:20px;
  transition:transform .2s ease
}
.about-dropdown[open] .about-dropdown-icon{
  transform:rotate(45deg)
}
.about-dropdown-content{
  padding:0 22px 22px
}
.about-dropdown-content p{
  color:var(--muted);
  font-size:14px;
  margin:0
}
@media(max-width:800px){
  .about-story-grid{grid-template-columns:1fr}
}


/* ===== LONG-TERM VALUE TILES ===== */
.long-term-intro{
  color:var(--muted);
  max-width:760px;
  margin-bottom:28px
}
.long-term-tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}
.long-term-tile{
  position:relative;
  padding:26px 22px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  min-height:220px;
  overflow:hidden
}
.long-term-tile::after{
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  right:-55px;
  top:-55px;
  border-radius:50%;
  background:rgba(0,179,227,.06)
}
.tile-index{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--soft-cyan);
  color:#078ba8;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  margin-bottom:18px
}
.long-term-tile h4{
  font-size:18px;
  line-height:1.2;
  margin:0 0 10px;
  color:var(--indigo)
}
.long-term-tile p{
  margin:0;
  color:var(--muted);
  font-size:13px
}

/* ===== MISSION / VISION / OBJECTIVE / PHILOSOPHY ===== */
.mvop-section{
  border-top:1px solid #e7eef3;
  border-bottom:1px solid #e7eef3
}
.mvop-intro{margin-bottom:38px}
.mvop-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.mvop-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease
}
.mvop-card[open]{
  border-color:#bce9f4;
  box-shadow:0 14px 36px rgba(16,24,40,.06)
}
.mvop-card summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:1fr 34px;
  gap:12px;
  align-items:center;
  padding:22px
}
.mvop-card summary::-webkit-details-marker{display:none}
.mvop-label{
  grid-column:1;
  color:var(--cyan);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  margin-bottom:5px
}
.mvop-card summary strong{
  grid-column:1;
  display:block;
  font-size:18px;
  line-height:1.24;
  color:var(--text)
}
.mvop-plus{
  grid-column:2;
  grid-row:1 / span 2;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--soft-cyan);
  color:var(--indigo);
  font-size:20px;
  transition:transform .2s ease
}
.mvop-card[open] .mvop-plus{transform:rotate(45deg)}
.mvop-content{
  padding:0 22px 22px;
  color:var(--muted);
  font-size:14px
}
.mvop-content p{margin:0 0 10px}
.mvop-content p:last-child{margin-bottom:0}
.mvop-content ul{
  margin:0;
  padding-left:18px
}
.mvop-content li{
  margin:8px 0;
  line-height:1.5
}
.mvop-wide{
  grid-column:1 / -1
}
@media(max-width:1050px){
  .long-term-tiles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
  .mvop-grid{grid-template-columns:1fr}
  .mvop-wide{grid-column:auto}
}
@media(max-width:650px){
  .long-term-tiles{grid-template-columns:1fr}
}


/* ================================================================
   ELEGANT CONTENT-OPTIMIZED THEME
   Focus: clarity, whitespace, hierarchy, restrained motion
   ================================================================ */
.elegant-content-theme{
  --e-ink:#0B1115;
  --e-text:#172027;
  --e-muted:#657179;
  --e-line:#E1E7E9;
  --e-soft:#F7F9FA;
  --e-cyan:#00B3E3;
  --e-indigo:#3E4377;
  background:#fff;
  color:var(--e-text);
}
.elegant-content-theme .container{width:min(1200px,calc(100% - 56px))}
.elegant-content-theme .section{padding:88px 0}
.elegant-content-theme h1{font-size:clamp(52px,5.8vw,82px);line-height:.95;letter-spacing:-.055em}
.elegant-content-theme h2{font-size:clamp(38px,4.2vw,58px);line-height:1;letter-spacing:-.045em}
.elegant-content-theme h3{letter-spacing:-.025em}
.elegant-content-theme .section-lead{font-size:18px;line-height:1.55;color:var(--e-muted);max-width:680px}
.elegant-content-theme .eyebrow{font-size:9px;letter-spacing:.18em;margin-bottom:14px}
.elegant-content-theme .eyebrow::before{width:20px;height:1px}

/* header */
.elegant-content-theme .nav{height:72px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--e-line);backdrop-filter:blur(12px)}
.elegant-content-theme .nav-inner{height:72px}
.elegant-content-theme .nav-links{gap:26px;font-size:12px}
.elegant-content-theme .nav-cta{border-radius:999px;padding:11px 18px;background:var(--e-ink);color:#fff;box-shadow:none}

/* hero */
.elegant-content-theme .hero-slider,
.elegant-content-theme .hero-slides,
.elegant-content-theme .hero-slide{min-height:720px}
.elegant-content-theme .hero-slide{padding:120px 0 112px}
.elegant-content-theme .hero-grid{grid-template-columns:1.08fr .92fr;gap:70px}
.elegant-content-theme .hero-copy{max-width:690px}
.elegant-content-theme .hero .lead{font-size:18px;line-height:1.5;max-width:600px}
.elegant-content-theme .hero-infographic{min-height:380px;border-radius:20px;padding:28px;box-shadow:0 24px 70px rgba(8,20,28,.10)}
.elegant-content-theme .hero-stage-tabs{width:min(720px,calc(100% - 140px));border-radius:999px;box-shadow:0 10px 30px rgba(8,20,28,.05)}
.elegant-content-theme .hero-stage-tabs .hero-dot{height:48px}

/* headings and layout */
.elegant-content-theme .two-col{gap:78px}
.elegant-content-theme .minimal-section-head{max-width:820px;margin-bottom:36px}
.elegant-content-theme .minimal-section-head p{font-size:17px;line-height:1.55;max-width:650px}

/* accordion cards */
.elegant-content-theme .about-story-grid,
.elegant-content-theme .industry-accordion-grid{gap:12px;border:0;background:transparent;overflow:visible}
.elegant-content-theme .about-dropdown,
.elegant-content-theme .industry-accordion,
.elegant-content-theme .mvop-card{
  border:1px solid var(--e-line)!important;
  border-radius:16px!important;
  background:#fff;
  box-shadow:none!important
}
.elegant-content-theme .about-dropdown summary,
.elegant-content-theme .industry-accordion summary,
.elegant-content-theme .mvop-card summary{padding:18px 20px}
.elegant-content-theme .about-dropdown[open],
.elegant-content-theme .industry-accordion[open],
.elegant-content-theme .mvop-card[open]{border-color:#BFE8F1!important}
.elegant-content-theme .about-dropdown-content,
.elegant-content-theme .industry-detail,
.elegant-content-theme .mvop-content{font-size:13px}
.elegant-content-theme .about-dropdown-icon,
.elegant-content-theme .accordion-plus,
.elegant-content-theme .mvop-plus{border-radius:50%}

/* long term */
.elegant-content-theme .about-usefulness{margin-top:44px;padding-top:0}
.elegant-content-theme .long-term-tiles{gap:12px;border:0;overflow:visible}
.elegant-content-theme .long-term-tile{
  min-height:150px;padding:22px;border:1px solid var(--e-line);border-radius:16px!important;
  background:#fff
}
.elegant-content-theme .long-term-tile h4{font-size:17px}
.elegant-content-theme .long-term-tile p{font-size:12.5px;line-height:1.45}

/* self evaluation */
.elegant-content-theme .dashboard{border-radius:20px;padding:26px;box-shadow:0 20px 55px rgba(10,24,32,.06)}
.elegant-content-theme .skill{margin:12px 0}

/* coding cards */
.elegant-content-theme .cards{gap:12px;border:0;overflow:visible}
.elegant-content-theme .card{
  min-height:180px;padding:24px;border:1px solid var(--e-line)!important;border-radius:16px!important;
  background:#fff
}
.elegant-content-theme .card h3{font-size:20px}
.elegant-content-theme .card p{font-size:13px;line-height:1.45}

/* six month journey */
.elegant-content-theme .flow{gap:10px;border:0;overflow:visible}
.elegant-content-theme .flow-step{
  min-height:110px;padding:18px 16px;border:1px solid var(--e-line)!important;
  border-radius:14px!important
}
.elegant-content-theme .flow-step strong{font-size:16px}

/* daily engineering */
.elegant-content-theme .daily{grid-template-columns:repeat(3,1fr);gap:10px;background:transparent;border:0;overflow:visible}
.elegant-content-theme .daily-item{min-height:130px;border:1px solid rgba(255,255,255,.10);border-radius:14px!important;padding:20px}
.elegant-content-theme .daily-infographic{border-radius:16px;padding:26px}

/* AI */
.elegant-content-theme .ai-principles{grid-template-columns:repeat(4,1fr);gap:10px;background:transparent;border:0;overflow:visible}
.elegant-content-theme .ai-principles article{border:1px solid rgba(255,255,255,.11)!important;border-radius:14px!important;min-height:180px}

/* success: retain strong visual priority */
.elegant-content-theme .success-impact-section{padding:115px 0}
.elegant-content-theme .success-impact-head{margin-bottom:54px}
.elegant-content-theme .success-impact-primary,
.elegant-content-theme .success-impact-stat{border-radius:18px}
.elegant-content-theme .mega-count{font-size:clamp(110px,14vw,205px)}
.elegant-content-theme .large-count{font-size:clamp(72px,7vw,112px)}

/* domains and leaders */
.elegant-content-theme .domain{min-height:220px;border-radius:16px;padding:24px}
.elegant-content-theme .leaders{gap:12px;border:0;overflow:visible}
.elegant-content-theme .leader-card{border:1px solid var(--e-line)!important;border-radius:16px!important}
.elegant-content-theme .leader-avatar{height:150px}
.elegant-content-theme .leader-body{padding:20px}

/* contact */
.elegant-content-theme .contact-panel{border-radius:20px;box-shadow:none}
.elegant-content-theme .contact-copy,
.elegant-content-theme .contact-details{padding:48px}

/* motion */
.elegant-content-theme .reveal{transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}

@media(max-width:1000px){
  .elegant-content-theme .hero-slider,
  .elegant-content-theme .hero-slides,
  .elegant-content-theme .hero-slide{min-height:920px}
  .elegant-content-theme .hero-grid{grid-template-columns:1fr;gap:32px}
  .elegant-content-theme .ai-principles{grid-template-columns:1fr 1fr}
  .elegant-content-theme .daily{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .elegant-content-theme .container{width:calc(100% - 28px)}
  .elegant-content-theme .section{padding:72px 0}
  .elegant-content-theme .hero-slider,
  .elegant-content-theme .hero-slides,
  .elegant-content-theme .hero-slide{min-height:1010px}
  .elegant-content-theme .hero-slide{padding:104px 0 125px}
  .elegant-content-theme .hero-stage-tabs{width:calc(100% - 28px)}
  .elegant-content-theme .daily,
  .elegant-content-theme .ai-principles{grid-template-columns:1fr}
  .elegant-content-theme .about-story-grid,
  .elegant-content-theme .industry-accordion-grid{grid-template-columns:1fr}
}

/* ================================================================
   SELF-EVALUATION FEATURE BLOCK
   ================================================================ */
.evaluation-feature{
  padding:92px 0;
  background:#EEF9FC;
  border-top:1px solid #D9EDF2;
  border-bottom:1px solid #D9EDF2;
}
.evaluation-feature-card{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:62px;
  align-items:center;
  padding:56px;
  background:#fff;
  border:1px solid #DCE9ED;
  border-radius:24px;
  box-shadow:0 24px 70px rgba(10,33,42,.07);
}
.evaluation-feature-copy h2{
  margin-bottom:18px;
  font-size:clamp(42px,4.5vw,64px);
  line-height:.98;
  letter-spacing:-.05em;
}
.evaluation-feature-copy h2 span{
  color:var(--cyan);
}
.evaluation-feature-copy > p{
  max-width:480px;
  margin-bottom:34px;
  color:var(--muted);
  font-size:18px;
  line-height:1.5;
}
.evaluation-feature-points{
  display:grid;
  gap:10px;
}
.evaluation-feature-points > div{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid #E8EEF0;
}
.evaluation-feature-points > div:last-child{
  border-bottom:0;
}
.evaluation-feature-points b{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--soft-cyan);
  color:#078AA8;
  font-size:10px;
  letter-spacing:.1em;
}
.evaluation-feature-points span{
  font-size:14px;
  font-weight:700;
  color:var(--text);
}

/* infographic */
.evaluation-infographic{
  min-height:440px;
  padding:28px;
  border-radius:20px;
  background:
    radial-gradient(circle at 85% 12%,rgba(0,179,227,.15),transparent 28%),
    linear-gradient(145deg,#0A1520,#13243B);
  color:#fff;
  overflow:hidden;
  position:relative;
}
.evaluation-infographic::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.14;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:34px 34px;
}
.evaluation-infographic > *{
  position:relative;
  z-index:1;
}
.evaluation-infographic-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:17px;
  margin-bottom:26px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.evaluation-infographic-head span{
  font-size:10px;
  letter-spacing:.16em;
  font-weight:900;
  color:#83E0F4;
}
.evaluation-infographic-head small{
  color:#8497A9;
  font-size:10px;
}
.evaluation-visual-grid{
  display:grid;
  grid-template-columns:175px 1fr;
  gap:28px;
  align-items:center;
}
.evaluation-score{
  text-align:center;
}
.evaluation-score-ring{
  width:165px;
  height:165px;
  margin:auto;
  border-radius:50%;
  background:conic-gradient(var(--cyan) 0 74%,#28364D 74% 100%);
  display:grid;
  place-items:center;
}
.evaluation-score-ring > div{
  width:125px;
  height:125px;
  border-radius:50%;
  background:#0D1828;
  display:grid;
  place-items:center;
  align-content:center;
}
.evaluation-score-ring strong{
  display:block;
  font-size:38px;
  line-height:1;
}
.evaluation-score-ring span{
  display:block;
  margin-top:6px;
  color:#8EA4B7;
  font-size:10px;
}
.evaluation-score > small{
  display:block;
  margin-top:13px;
  color:#8EA4B7;
  font-size:10px;
}
.evaluation-bars{
  display:grid;
  gap:13px;
}
.evaluation-bar{
  display:grid;
  grid-template-columns:98px 1fr 30px;
  gap:10px;
  align-items:center;
}
.evaluation-bar > span{
  color:#A7B7C6;
  font-size:11px;
}
.evaluation-bar i{
  display:block;
  height:8px;
  border-radius:999px;
  background:#26344A;
  overflow:hidden;
}
.evaluation-bar i b{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),#737CC4);
  transform-origin:left;
  animation:evaluationBarGrow 1.4s ease both;
}
.evaluation-bar em{
  color:#fff;
  font-style:normal;
  font-size:11px;
  font-weight:800;
}
@keyframes evaluationBarGrow{
  from{transform:scaleX(.08)}
  to{transform:scaleX(1)}
}
.evaluation-cycle{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:30px;
  padding:14px;
  overflow-x:auto;
  border-radius:12px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
}
.evaluation-cycle span{
  white-space:nowrap;
  font-size:10px;
  font-weight:750;
  color:#D5E2EA;
}
.evaluation-cycle i{
  font-style:normal;
  color:var(--cyan);
}

@media(max-width:1000px){
  .evaluation-feature-card{
    grid-template-columns:1fr;
  }
}
@media(max-width:700px){
  .evaluation-feature{
    padding:68px 0;
  }
  .evaluation-feature-card{
    padding:26px;
    border-radius:18px;
  }
  .evaluation-visual-grid{
    grid-template-columns:1fr;
  }
  .evaluation-score{
    margin-bottom:10px;
  }
  .evaluation-bar{
    grid-template-columns:90px 1fr 26px;
  }
}
@media(prefers-reduced-motion:reduce){
  .evaluation-bar i b{
    animation:none;
  }
}

/* ================================================================
   BRAND PURPOSE + INFROGRAPHIC COMPONENT
   ================================================================ */
.brand-purpose-section{
  padding:94px 0;
  background:
    linear-gradient(180deg,#ffffff 0%,#F6FAFB 100%);
  border-bottom:1px solid #E2EAED;
}
.brand-purpose-head{
  max-width:840px;
  margin-bottom:42px;
}
.brand-purpose-head h2{
  margin-bottom:14px;
}
.brand-purpose-head h2 span{
  color:var(--indigo);
}
.brand-purpose-head p{
  margin:0;
  font-size:18px;
  color:var(--muted);
}
.brand-purpose-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.purpose-card{
  position:relative;
  padding:28px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid #DFE8EB;
  background:#fff;
  box-shadow:0 16px 42px rgba(10,25,33,.05);
}
.purpose-card::before{
  content:"";
  position:absolute;
  inset:auto -20% -45% auto;
  width:180px;
  height:180px;
  border-radius:50%;
  opacity:.45;
}
.mission-card{background:linear-gradient(145deg,#F7FDFF,#FFFFFF)}
.mission-card::before{background:rgba(0,179,227,.10)}
.vision-card{background:linear-gradient(145deg,#F8F9FF,#FFFFFF)}
.vision-card::before{background:rgba(62,67,119,.10)}
.objective-card{background:linear-gradient(145deg,#FCFDFF,#FFFFFF)}
.objective-card::before{background:rgba(0,179,227,.08)}
.philosophy-card{background:linear-gradient(145deg,#FAFBFC,#FFFFFF)}
.philosophy-card::before{background:rgba(62,67,119,.08)}

.purpose-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.purpose-card-head > span{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:900;
  background:#EAF7FB;
  color:#067E9A;
}
.vision-card .purpose-card-head > span,
.philosophy-card .purpose-card-head > span{
  background:#EFF0FA;
  color:#4D538C;
}
.purpose-card h3{
  font-size:24px;
  line-height:1.05;
  margin:0 0 16px;
  max-width:540px;
}
.purpose-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.purpose-card ul{
  margin:0;
  padding-left:18px;
}
.purpose-card li{
  margin:9px 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.purpose-card li b{
  color:var(--text);
}

/* infographic icons */
.purpose-icon{
  position:relative;
  width:56px;
  height:56px;
  flex:0 0 56px;
}
.purpose-icon-target{
  border-radius:50%;
  border:2px solid rgba(0,179,227,.25);
}
.purpose-icon-target i{
  position:absolute;
  inset:11px;
  border:2px solid rgba(0,179,227,.45);
  border-radius:50%;
}
.purpose-icon-target b{
  position:absolute;
  inset:22px;
  border-radius:50%;
  background:var(--cyan);
}

.purpose-icon-network i,
.purpose-icon-network b{
  position:absolute;
  display:block;
}
.purpose-icon-network i{
  width:12px;height:12px;border-radius:50%;background:var(--indigo);
}
.purpose-icon-network i:nth-child(1){left:6px;top:22px}
.purpose-icon-network i:nth-child(2){right:6px;top:10px}
.purpose-icon-network i:nth-child(3){right:10px;bottom:10px}
.purpose-icon-network b{
  left:16px;right:16px;top:27px;height:2px;background:#AAB2EB;
  transform-origin:left;
}
.purpose-icon-network b:nth-of-type(1){transform:rotate(-22deg)}
.purpose-icon-network b:nth-of-type(2){transform:rotate(28deg)}

.purpose-icon-bridge i,
.purpose-icon-bridge b{
  position:absolute;display:block
}
.purpose-icon-bridge i:nth-child(1),
.purpose-icon-bridge i:nth-child(2){
  width:14px;height:28px;border:2px solid var(--cyan);border-bottom:0;border-radius:10px 10px 0 0;bottom:6px
}
.purpose-icon-bridge i:nth-child(1){left:8px}
.purpose-icon-bridge i:nth-child(2){right:8px}
.purpose-icon-bridge b{
  left:10px;right:10px;top:22px;height:8px;background:linear-gradient(90deg,var(--cyan),var(--indigo));border-radius:999px
}

.purpose-icon-stack i{
  position:absolute;left:10px;right:10px;height:10px;border-radius:999px;background:linear-gradient(90deg,#D9F5FC,#97E3F4)
}
.purpose-icon-stack i:nth-child(1){top:10px}
.purpose-icon-stack i:nth-child(2){top:24px;background:linear-gradient(90deg,#EEF0FA,#BDC2F2)}
.purpose-icon-stack i:nth-child(3){top:38px;background:linear-gradient(90deg,#D9F5FC,#97E3F4)}

.objective-flow{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:18px;
  overflow-x:auto;
}
.objective-flow span{
  white-space:nowrap;
  padding:8px 11px;
  border-radius:999px;
  background:#EEF8FB;
  color:#056C85;
  font-size:11px;
  font-weight:800;
}
.objective-flow i{
  font-style:normal;
  color:#93A3AE;
}

.mindset-panel{
  margin-top:18px;
  padding:30px;
  border-radius:24px;
  background:linear-gradient(145deg,#0B141D,#152538);
  color:#fff;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:50px;
  align-items:center;
  overflow:hidden;
}
.mindset-copy .eyebrow{color:#86E0F4}
.mindset-copy h3{
  font-size:34px;
  line-height:1;
  margin:0 0 14px;
}
.mindset-copy p{
  margin:0;
  color:#A6B9C7;
  font-size:15px;
  line-height:1.6;
}
.mindset-graphic{
  position:relative;
  min-height:220px;
  display:grid;
  place-items:center;
}
.mindset-core{
  width:170px;
  height:170px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
}
.mindset-core strong{
  display:block;
  font-size:18px;
  letter-spacing:.06em;
}
.mindset-core span{
  display:block;
  max-width:95px;
  margin-top:7px;
  font-size:10px;
  color:#9FB3C2;
}
.mindset-pills{
  position:absolute;
  inset:0;
}
.mindset-pills div{
  position:absolute;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;
  color:#E6F2F7;
}
.mindset-pills div:nth-child(1){top:10px;left:50%;transform:translateX(-50%)}
.mindset-pills div:nth-child(2){top:70px;right:4px}
.mindset-pills div:nth-child(3){bottom:26px;right:44px}
.mindset-pills div:nth-child(4){bottom:10px;left:44px}
.mindset-pills div:nth-child(5){top:70px;left:4px}

/* Success enhancements */
.success-impact-section{
  border-top:1px solid rgba(255,255,255,.08);
}
.success-impact-grid{
  align-items:stretch;
}
.success-impact-primary{
  overflow:hidden;
}
.success-mini-orbit{
  position:absolute;
  top:24px;
  right:26px;
  width:120px;
  height:120px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
}
.success-mini-orbit .orbit-center{
  position:absolute;
  inset:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#B8D1DA;
  font-size:11px;
  letter-spacing:.08em;
}
.success-mini-orbit span{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#7CE1F6;
  box-shadow:0 0 0 8px rgba(124,225,246,.08);
}
.success-mini-orbit .o1{top:-5px;left:55px}
.success-mini-orbit .o2{top:25px;right:2px}
.success-mini-orbit .o3{bottom:22px;right:8px}
.success-mini-orbit .o4{bottom:8px;left:18px}
.success-side-graphic{
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
}
.ss-line{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0;
}
.ss-line span{
  font-size:10px;
  color:#8FA4AE;
  white-space:nowrap;
}
.ss-line i{
  height:1px;
  flex:1;
  background:linear-gradient(90deg,#2A3E48,#7CE1F6,#2A3E48);
}

@media(max-width:1000px){
  .brand-purpose-grid{
    grid-template-columns:1fr;
  }
  .mindset-panel{
    grid-template-columns:1fr;
    gap:30px;
  }
}
@media(max-width:700px){
  .brand-purpose-section{
    padding:72px 0;
  }
  .purpose-card{
    padding:22px;
    border-radius:18px;
  }
  .purpose-card h3{
    font-size:21px;
  }
  .mindset-panel{
    padding:24px;
    border-radius:18px;
  }
  .mindset-copy h3{
    font-size:28px;
  }
  .success-mini-orbit{
    position:relative;
    top:auto;
    right:auto;
    margin-top:12px;
  }
}

/* One-to-One Conversation message */
.elegant-content-theme .contact-intro{
  max-width:650px;
  margin:22px 0 14px;
  color:#B9C8D2;
  font-size:17px;
  line-height:1.6;
}
.elegant-content-theme .contact-path-note{
  max-width:650px;
  margin:0;
  padding:18px 20px;
  border-left:3px solid var(--cyan);
  background:rgba(255,255,255,.055);
  color:#A9BBC7;
  font-size:14px;
  line-height:1.6;
}
.elegant-content-theme .contact-path-note strong{
  color:#fff;
}

/* ================================================================
   INDUSTRY READY WORKFLOW UNDER SUCCESS
   ================================================================ */
.industry-ready-workflow{
  margin-top:42px;
  padding:34px;
  border-radius:24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
}
.workflow-head{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:30px;
  align-items:end;
  margin-bottom:28px;
}
.workflow-head h3{
  margin:8px 0 0;
  font-size:clamp(28px,3vw,42px);
  line-height:1.02;
  color:#fff;
}
.workflow-head p{
  margin:0;
  max-width:480px;
  color:#9DB1BB;
  font-size:14px;
  line-height:1.6;
}
.workflow-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px 22px;
  position:relative;
}
.workflow-grid::before{
  content:"";
  position:absolute;
  left:16.66%;
  right:16.66%;
  top:50%;
  height:2px;
  background:linear-gradient(90deg,rgba(124,225,246,.18),rgba(124,225,246,.6),rgba(124,225,246,.18));
  transform:translateY(-50%);
  z-index:0;
}
.workflow-tile{
  position:relative;
  z-index:1;
  min-height:235px;
  padding:22px;
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  box-shadow:0 18px 45px rgba(0,0,0,.12);
}
.workflow-tile::after{
  content:"";
  position:absolute;
  top:50%;
  right:-23px;
  width:22px;
  height:2px;
  background:linear-gradient(90deg,rgba(124,225,246,.7),rgba(124,225,246,.18));
}
.workflow-tile:nth-child(3)::after,
.workflow-tile:nth-child(6)::after{
  display:none;
}
.workflow-tile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.workflow-tile-head > span{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(124,225,246,.10);
  color:#8CE7FB;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:900;
}
.workflow-tile strong{
  display:block;
  font-size:20px;
  line-height:1.15;
  color:#fff;
  margin-bottom:10px;
  max-width:230px;
}
.workflow-tile p{
  margin:0;
  color:#A9BCC6;
  font-size:13px;
  line-height:1.55;
}

/* Workflow tile infographic icons */
.workflow-icon{
  width:62px;
  height:62px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  flex:0 0 62px;
}
.workflow-icon i,
.workflow-icon b{
  position:absolute;
  display:block;
}

.icon-code i{
  left:13px; right:13px; height:4px; border-radius:999px; background:#7CE1F6;
}
.icon-code i:nth-child(1){top:17px}
.icon-code i:nth-child(2){top:29px; width:24px; right:auto}
.icon-code i:nth-child(3){top:41px; width:32px; right:auto}

.icon-requirement i{
  left:14px; right:14px; top:14px; bottom:14px; border-radius:14px; border:2px solid #7CE1F6;
}
.icon-requirement b{
  width:16px; height:16px; border-radius:50%; background:#7CE1F6; right:10px; bottom:10px;
  box-shadow:0 0 0 5px rgba(124,225,246,.12);
}

.icon-build i:nth-child(1){
  left:13px; top:18px; width:14px; height:14px; border-radius:6px; background:#7CE1F6;
}
.icon-build i:nth-child(2){
  right:13px; top:18px; width:14px; height:14px; border-radius:6px; background:#AAB2EB;
}
.icon-build b{
  left:16px; right:16px; bottom:18px; height:8px; border-radius:999px; background:linear-gradient(90deg,#7CE1F6,#AAB2EB);
}

.icon-test i{
  width:9px; height:9px; border-radius:50%; background:#7CE1F6; top:18px;
}
.icon-test i:nth-child(1){left:15px}
.icon-test i:nth-child(2){left:27px}
.icon-test i:nth-child(3){left:39px}
.icon-test::after{
  content:"";
  position:absolute;
  left:18px; right:18px; bottom:15px; height:20px;
  border-radius:10px 10px 14px 14px;
  border:2px solid #AAB2EB;
  border-top:0;
}

.icon-collab i{
  width:12px;height:12px;border-radius:50%;background:#7CE1F6;
}
.icon-collab i:nth-child(1){left:10px;top:18px}
.icon-collab i:nth-child(2){right:10px;top:18px;background:#AAB2EB}
.icon-collab i:nth-child(3){left:24px;bottom:12px}
.icon-collab b{
  left:18px; right:18px; top:27px; height:2px; background:#8FDCEB;
}

.icon-deliver i{
  left:14px; right:14px; top:18px; height:10px; border-radius:999px; background:linear-gradient(90deg,#7CE1F6,#AAB2EB);
}
.icon-deliver b{
  width:20px; height:20px; border-radius:50%; right:10px; bottom:10px; background:#7CE1F6;
  box-shadow:0 0 0 5px rgba(124,225,246,.12);
}

@media(max-width:1050px){
  .workflow-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .workflow-grid::before{
    display:none;
  }
  .workflow-tile::after{
    display:none;
  }
}
@media(max-width:760px){
  .industry-ready-workflow{
    padding:24px;
    border-radius:18px;
  }
  .workflow-head{
    grid-template-columns:1fr;
    margin-bottom:18px;
  }
  .workflow-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .workflow-tile{
    min-height:unset;
    border-radius:18px;
  }
}

/* ================================================================
   CLICKABLE INDUSTRY-READY WORKFLOW
   ================================================================ */
.industry-ready-workflow{
  margin-top:42px;
  padding:36px;
  border-radius:28px;
  background:
    linear-gradient(145deg,rgba(9,18,24,.82),rgba(17,31,40,.88));
  border:1px solid rgba(124,225,246,.18);
  box-shadow:0 26px 70px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
}
.workflow-head{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:32px;
  align-items:end;
  margin-bottom:28px;
}
.workflow-head .eyebrow{
  color:#89E7FA;
}
.workflow-head .eyebrow::before{
  background:#89E7FA;
}
.workflow-head h3{
  margin:8px 0 0;
  font-size:clamp(30px,3.1vw,44px);
  line-height:1.02;
  color:#FFFFFF;
  letter-spacing:-.03em;
}
.workflow-head p{
  margin:0;
  max-width:520px;
  color:#B3C6D0;
  font-size:14px;
  line-height:1.6;
}

.workflow-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px 22px;
  position:relative;
}
.workflow-grid::before{
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  top:50%;
  height:2px;
  background:linear-gradient(90deg,rgba(124,225,246,.15),rgba(124,225,246,.75),rgba(124,225,246,.15));
  transform:translateY(-50%);
  z-index:0;
}
.workflow-tile{
  position:relative;
  z-index:1;
  min-height:250px;
  padding:22px;
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  box-shadow:0 16px 36px rgba(0,0,0,.12);
  cursor:pointer;
  transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;
  outline:none;
}
.workflow-tile:hover{
  transform:translateY(-4px);
  border-color:rgba(124,225,246,.32);
}
.workflow-tile:focus-visible{
  box-shadow:0 0 0 3px rgba(124,225,246,.25),0 16px 36px rgba(0,0,0,.12);
}
.workflow-tile.active{
  background:linear-gradient(145deg,rgba(124,225,246,.16),rgba(255,255,255,.07));
  border-color:rgba(124,225,246,.45);
  transform:translateY(-6px);
}
.workflow-tile::after{
  content:"";
  position:absolute;
  top:50%;
  right:-23px;
  width:22px;
  height:2px;
  background:linear-gradient(90deg,rgba(124,225,246,.85),rgba(124,225,246,.18));
}
.workflow-tile:nth-child(3)::after,
.workflow-tile:nth-child(6)::after{
  display:none;
}
.workflow-tile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.workflow-tile-head > span{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(124,225,246,.12);
  color:#9AECFD;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:900;
}
.workflow-tile strong{
  display:block;
  font-size:21px;
  line-height:1.15;
  color:#FFFFFF;
  margin-bottom:10px;
  max-width:230px;
}
.workflow-summary{
  margin:0;
  color:#B1C2CB;
  font-size:13px;
  line-height:1.55;
}
.workflow-toggle{
  margin-top:14px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  color:#86E0F4;
  opacity:.9;
}
.workflow-tile.active .workflow-toggle{
  color:#FFFFFF;
}

.workflow-detail{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .38s ease,opacity .28s ease,margin-top .28s ease;
  margin-top:0;
}
.workflow-tile.active .workflow-detail{
  max-height:260px;
  opacity:1;
  margin-top:16px;
}

.workflow-mini-graphic{
  height:78px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
  margin-bottom:14px;
}
.workflow-mini-graphic::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:20px 20px;
}
.workflow-points{
  margin:0;
  padding-left:18px;
}
.workflow-points li{
  color:#D7E5EB;
  font-size:12px;
  line-height:1.45;
  margin:7px 0;
}

/* Main tile icons */
.workflow-icon{
  width:62px;
  height:62px;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  flex:0 0 62px;
}
.workflow-icon i,.workflow-icon b,
.workflow-mini-graphic i,.workflow-mini-graphic b,.workflow-mini-graphic div,.workflow-mini-graphic span{
  position:absolute;
  display:block;
}

/* Existing icons kept and visually tuned */
.icon-code i{left:13px; right:13px; height:4px; border-radius:999px; background:#7CE1F6}
.icon-code i:nth-child(1){top:17px}
.icon-code i:nth-child(2){top:29px; width:24px; right:auto}
.icon-code i:nth-child(3){top:41px; width:32px; right:auto}

.icon-requirement i{left:14px; right:14px; top:14px; bottom:14px; border-radius:14px; border:2px solid #7CE1F6}
.icon-requirement b{width:16px; height:16px; border-radius:50%; background:#7CE1F6; right:10px; bottom:10px; box-shadow:0 0 0 5px rgba(124,225,246,.12)}

.icon-build i:nth-child(1){left:13px; top:18px; width:14px; height:14px; border-radius:6px; background:#7CE1F6}
.icon-build i:nth-child(2){right:13px; top:18px; width:14px; height:14px; border-radius:6px; background:#AAB2EB}
.icon-build b{left:16px; right:16px; bottom:18px; height:8px; border-radius:999px; background:linear-gradient(90deg,#7CE1F6,#AAB2EB)}

.icon-test i{width:9px; height:9px; border-radius:50%; background:#7CE1F6; top:18px}
.icon-test i:nth-child(1){left:15px}
.icon-test i:nth-child(2){left:27px}
.icon-test i:nth-child(3){left:39px}
.icon-test::after{content:""; position:absolute; left:18px; right:18px; bottom:15px; height:20px; border-radius:10px 10px 14px 14px; border:2px solid #AAB2EB; border-top:0}

.icon-collab i{width:12px;height:12px;border-radius:50%;background:#7CE1F6}
.icon-collab i:nth-child(1){left:10px;top:18px}
.icon-collab i:nth-child(2){right:10px;top:18px;background:#AAB2EB}
.icon-collab i:nth-child(3){left:24px;bottom:12px}
.icon-collab b{left:18px; right:18px; top:27px; height:2px; background:#8FDCEB}

.icon-deliver i{left:14px; right:14px; top:18px; height:10px; border-radius:999px; background:linear-gradient(90deg,#7CE1F6,#AAB2EB)}
.icon-deliver b{width:20px; height:20px; border-radius:50%; right:10px; bottom:10px; background:#7CE1F6; box-shadow:0 0 0 5px rgba(124,225,246,.12)}

/* animated mini graphics */
.graphic-code .line{
  left:16px; right:16px; height:4px; border-radius:999px; background:#7CE1F6;
  transform-origin:left; animation:wfGrow 1.3s ease-in-out infinite alternate;
}
.graphic-code .l1{top:18px; width:56px}
.graphic-code .l2{top:35px; width:86px; animation-delay:.15s}
.graphic-code .l3{top:52px; width:66px; animation-delay:.3s}

.graphic-requirement .sheet{
  left:16px; top:12px; width:76px; height:52px; border-radius:12px; border:2px solid #8CE7FB;
}
.graphic-requirement .sheet::before,
.graphic-requirement .sheet::after{
  content:""; position:absolute; left:12px; right:12px; height:3px; border-radius:999px; background:#7CE1F6;
}
.graphic-requirement .sheet::before{top:14px}
.graphic-requirement .sheet::after{top:28px}
.graphic-requirement .dot{
  width:16px; height:16px; border-radius:50%; right:18px; bottom:16px; background:#7CE1F6;
  box-shadow:0 0 0 0 rgba(124,225,246,.30); animation:wfPulse 1.5s ease infinite;
}

.graphic-build .box{
  width:16px; height:16px; border-radius:6px; top:16px;
}
.graphic-build .b1{left:18px; background:#7CE1F6; animation:wfFloat 1.5s ease-in-out infinite}
.graphic-build .b2{left:48px; background:#AAB2EB; animation:wfFloat 1.5s ease-in-out infinite .2s}
.graphic-build .bar{
  left:18px; right:18px; bottom:18px; height:10px; border-radius:999px;
  background:linear-gradient(90deg,#7CE1F6,#AAB2EB);
  transform-origin:left; animation:wfGrow 1.3s ease-in-out infinite alternate .1s;
}

.graphic-test .bubble{
  width:10px; height:10px; border-radius:50%; top:15px; background:#7CE1F6;
}
.graphic-test .c1{left:22px}
.graphic-test .c2{left:38px; animation:wfPulse 1.5s ease infinite .15s}
.graphic-test .c3{left:54px}
.graphic-test .flask{
  left:26px; right:26px; bottom:14px; height:24px; border:2px solid #AAB2EB; border-top:0;
  border-radius:8px 8px 12px 12px;
}
.graphic-test .flask::after{
  content:""; position:absolute; left:8px; right:8px; bottom:5px; height:8px;
  border-radius:999px; background:#7CE1F6; animation:wfLiquid 1.6s ease-in-out infinite;
}

.graphic-collab .node{
  width:12px; height:12px; border-radius:50%; background:#7CE1F6;
}
.graphic-collab .n1{left:18px; top:26px}
.graphic-collab .n2{right:18px; top:16px; background:#AAB2EB}
.graphic-collab .n3{left:50%; bottom:15px; transform:translateX(-50%)}
.graphic-collab .link{
  left:24px; right:24px; top:32px; height:2px; background:linear-gradient(90deg,#7CE1F6,#AAB2EB,#7CE1F6);
  transform-origin:left; animation:wfGrow 1.4s ease-in-out infinite alternate;
}

.graphic-deliver .track{
  left:18px; right:18px; top:34px; height:8px; border-radius:999px; background:#2A394C;
}
.graphic-deliver .pulse{
  width:18px; height:18px; border-radius:50%; top:29px; left:18px; background:#7CE1F6;
  box-shadow:0 0 0 0 rgba(124,225,246,.28);
  animation:wfMove 1.9s ease-in-out infinite, wfPulse 1.9s ease-in-out infinite;
}

@keyframes wfGrow{
  from{transform:scaleX(.4); opacity:.65}
  to{transform:scaleX(1); opacity:1}
}
@keyframes wfPulse{
  0%{box-shadow:0 0 0 0 rgba(124,225,246,.24)}
  70%{box-shadow:0 0 0 10px rgba(124,225,246,0)}
  100%{box-shadow:0 0 0 0 rgba(124,225,246,0)}
}
@keyframes wfFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes wfLiquid{
  0%,100%{transform:scaleX(.78)}
  50%{transform:scaleX(1)}
}
@keyframes wfMove{
  0%{transform:translateX(0)}
  50%{transform:translateX(88px)}
  100%{transform:translateX(0)}
}

@media(max-width:1050px){
  .workflow-head{
    grid-template-columns:1fr;
  }
  .workflow-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .workflow-grid::before,
  .workflow-tile::after{
    display:none;
  }
}
@media(max-width:760px){
  .industry-ready-workflow{
    padding:24px;
    border-radius:18px;
  }
  .workflow-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .workflow-tile{
    min-height:unset;
    border-radius:18px;
  }
}
@media(prefers-reduced-motion:reduce){
  .workflow-tile,
  .workflow-detail,
  .workflow-mini-graphic *,
  .workflow-tile *{
    animation:none !important;
    transition:none !important;
  }
}

/* ================================================================
   THE CODE FACTORY ENGINEERING WORKSPACE
   Interactive internal workflow component
   ================================================================ */
.engineering-workspace-section{
  padding:100px 0;
  background:
    radial-gradient(circle at 88% 12%,rgba(0,179,227,.10),transparent 28%),
    linear-gradient(180deg,#F7FAFB 0%,#FFFFFF 100%);
  border-top:1px solid #E3EBEE;
  border-bottom:1px solid #E3EBEE;
}
.engineering-workspace-head{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:end;
  margin-bottom:30px;
}
.engineering-workspace-head h2{
  margin:0;
  color:#101820;
}
.engineering-workspace-head h2 span{
  color:var(--indigo);
}
.engineering-workspace-head p{
  margin:0;
  color:#5E6C74;
  font-size:17px;
  line-height:1.65;
  max-width:590px;
}
.workspace-intro-strip{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;
  align-items:center;
  margin-bottom:26px;
  padding:22px 26px;
  border-radius:18px;
  background:#0B151C;
  color:#fff;
}
.workspace-intro-strip small{
  display:block;
  color:#84E4F8;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  margin-bottom:7px;
}
.workspace-intro-strip strong{
  display:block;
  font-size:20px;
  line-height:1.2;
}
.workspace-intro-strip p{
  margin:0;
  color:#9FB3BE;
  font-size:13px;
  line-height:1.55;
}

.workspace-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.workspace-card{
  position:relative;
  min-height:260px;
  padding:28px;
  border-radius:24px;
  border:1px solid #DBE5E8;
  background:#fff;
  cursor:pointer;
  overflow:hidden;
  outline:none;
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}
.workspace-card:hover{
  transform:translateY(-4px);
  border-color:#B7DDE7;
  box-shadow:0 20px 50px rgba(13,32,42,.07);
}
.workspace-card:focus-visible{
  box-shadow:0 0 0 4px rgba(0,179,227,.14);
}
.workspace-card.active{
  background:
    radial-gradient(circle at 90% 8%,rgba(0,179,227,.10),transparent 30%),
    #fff;
  border-color:#92DCEB;
  box-shadow:0 24px 60px rgba(9,37,48,.10);
  transform:translateY(-5px);
}
.workspace-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:16px;
}
.workspace-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  min-width:42px;
  padding:0 9px;
  border-radius:999px;
  background:#EEF8FB;
  color:#087C96;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.workspace-card h3{
  margin:0 0 9px;
  font-size:27px;
  line-height:1.05;
  color:#101820;
}
.workspace-card > p{
  max-width:500px;
  margin:0;
  color:#66747C;
  font-size:14px;
  line-height:1.55;
}
.workspace-open-label{
  display:inline-flex;
  margin-top:18px;
  color:#087B96;
  font-size:11px;
  font-weight:850;
  letter-spacing:.04em;
}
.workspace-card.active .workspace-open-label{
  color:var(--indigo);
}
.workspace-card-detail{
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  transition:max-height .42s ease,opacity .28s ease,margin-top .28s ease;
}
.workspace-card.active .workspace-card-detail{
  max-height:380px;
  opacity:1;
  margin-top:22px;
}
.workspace-card-detail ul{
  margin:15px 0 0;
  padding-left:19px;
}
.workspace-card-detail li{
  color:#5D6A72;
  font-size:12.5px;
  line-height:1.5;
  margin:6px 0;
}

/* top icons */
.workspace-icon{
  width:62px;
  height:62px;
  border-radius:18px;
  position:relative;
  background:#F1F9FB;
  border:1px solid #D6EEF4;
  flex:0 0 62px;
}
.workspace-icon i,
.workspace-icon b{
  display:block;
  position:absolute;
}

/* Agile icon */
.agile-icon i{
  width:10px;height:32px;bottom:14px;border-radius:5px;
  background:linear-gradient(180deg,var(--cyan),#62CBE5);
}
.agile-icon i:nth-child(1){left:14px;height:22px}
.agile-icon i:nth-child(2){left:27px;height:34px}
.agile-icon i:nth-child(3){left:40px;height:27px}

/* Sprint icon */
.sprint-icon i{
  left:13px;right:13px;top:22px;height:8px;border-radius:999px;background:#D6E8EE;
}
.sprint-icon i::after{
  content:"";display:block;width:68%;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--indigo));
}
.sprint-icon b{
  width:14px;height:14px;border-radius:50%;right:11px;bottom:10px;background:var(--cyan);
}

/* Evaluator icon */
.evaluator-icon i{
  bottom:14px;width:7px;border-radius:4px;background:linear-gradient(180deg,#7CE2F7,var(--indigo));
}
.evaluator-icon i:nth-child(1){left:16px;height:17px}
.evaluator-icon i:nth-child(2){left:27px;height:27px}
.evaluator-icon i:nth-child(3){left:38px;height:37px}
.evaluator-icon b{
  width:12px;height:12px;border-radius:50%;right:8px;top:9px;background:var(--cyan);
  box-shadow:0 0 0 5px rgba(0,179,227,.10);
}

/* Slack icon */
.slack-icon i{
  height:9px;border-radius:999px;background:linear-gradient(90deg,var(--cyan),#7CDCF0);
}
.slack-icon i:nth-child(1){left:13px;right:13px;top:16px}
.slack-icon i:nth-child(2){left:19px;right:13px;top:29px}
.slack-icon i:nth-child(3){left:13px;right:23px;top:42px}

/* shared graphic surface */
.agile-board-graphic,
.sprint-board-graphic,
.evaluator-graphic,
.slack-message-graphic{
  min-height:145px;
  padding:14px;
  border-radius:18px;
  background:#0D1820;
  border:1px solid #22333E;
  position:relative;
  overflow:hidden;
}
.agile-board-graphic::before,
.sprint-board-graphic::before,
.evaluator-graphic::before,
.slack-message-graphic::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:24px 24px;
}

/* Agile board animation */
.agile-board-graphic{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.agile-col{
  position:relative;
  z-index:1;
  padding:10px;
  border-radius:10px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.06);
}
.agile-col small{
  display:block;
  color:#8AA0AD;
  font-size:8px;
  font-weight:850;
  letter-spacing:.1em;
  margin-bottom:10px;
}
.agile-col .task{
  position:relative;
  display:block;
  height:21px;
  border-radius:6px;
  margin:7px 0;
  background:#243744;
}
.agile-col .task::after{
  content:"";
  position:absolute;
  left:7px;right:12px;top:8px;height:3px;border-radius:999px;background:#6DDDF4;
}
.agile-col .moving-task{
  animation:agilePulse 1.9s ease-in-out infinite;
}
@keyframes agilePulse{
  0%,100%{transform:translateY(0);box-shadow:0 0 0 rgba(0,179,227,0)}
  50%{transform:translateY(8px);box-shadow:0 7px 18px rgba(0,179,227,.14)}
}

/* Sprint board */
.sprint-progress,
.sprint-days,
.sprint-burndown{position:relative;z-index:1}
.sprint-progress small{
  color:#8EA3AF;font-size:8px;font-weight:850;letter-spacing:.1em
}
.sprint-track{
  height:9px;margin-top:9px;border-radius:999px;background:#283946;overflow:hidden
}
.sprint-track i{
  display:block;width:74%;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),#767FC9);
  animation:sprintProgress 2.2s ease-in-out infinite alternate
}
@keyframes sprintProgress{from{width:48%}to{width:82%}}
.sprint-days{
  display:flex;gap:8px;margin-top:13px
}
.sprint-days span{
  flex:1;padding:7px 4px;border-radius:7px;text-align:center;background:#172833;color:#88A0AC;font-size:8px
}
.sprint-burndown{
  height:45px;margin-top:10px;border-left:1px solid #344955;border-bottom:1px solid #344955
}
.sprint-burndown i{
  position:absolute;left:5px;right:5px;top:10px;height:2px;background:#72DFF5;
  transform:rotate(-9deg);transform-origin:left;animation:burnLine 2.2s ease-in-out infinite alternate
}
@keyframes burnLine{from{transform:rotate(-4deg) scaleX(.7)}to{transform:rotate(-13deg) scaleX(1)}}

/* Evaluator */
.evaluator-graphic{
  display:grid;
  grid-template-columns:105px 1fr;
  gap:18px;
  align-items:center;
}
.eval-score{
  position:relative;z-index:1;width:88px;height:88px;margin:auto;border-radius:50%;
  border:9px solid #263B48;border-top-color:var(--cyan);border-right-color:#7A83C8;
  display:grid;place-items:center;align-content:center;
  animation:evalRotate 5s linear infinite
}
.eval-score strong,.eval-score span{animation:evalCounterRotate 5s linear infinite}
.eval-score strong{color:#fff;font-size:23px;line-height:1}
.eval-score span{margin-top:4px;color:#8FA5B1;font-size:7px;letter-spacing:.1em}
@keyframes evalRotate{to{transform:rotate(360deg)}}
@keyframes evalCounterRotate{to{transform:rotate(-360deg)}}
.eval-bars{position:relative;z-index:1;display:grid;gap:10px}
.eval-bars > div{display:grid;grid-template-columns:62px 1fr;gap:8px;align-items:center}
.eval-bars span{color:#91A6B1;font-size:8px}
.eval-bars i{height:6px;border-radius:999px;background:#283A46;overflow:hidden}
.eval-bars i b{
  display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),#7A83C8);
  transform-origin:left;animation:evalGrow 1.6s ease-in-out infinite alternate
}
@keyframes evalGrow{from{transform:scaleX(.45)}to{transform:scaleX(1)}}

/* Slack messenger */
.slack-message-graphic{
  display:grid;
  align-content:center;
  gap:8px
}
.message-bubble{
  position:relative;z-index:1;display:flex;align-items:center;gap:8px;
  width:78%;padding:9px 11px;border-radius:10px;background:#172A35;
  opacity:.55;transform:translateX(-8px);animation:messageIn 4.2s ease-in-out infinite
}
.message-bubble.m2{margin-left:auto;animation-delay:.55s;background:#1C3040}
.message-bubble.m3{animation-delay:1.1s}
.message-bubble i{
  position:static;width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:0 0 9px
}
.message-bubble span{color:#DCEAF0;font-size:9px}
@keyframes messageIn{
  0%,20%{opacity:.28;transform:translateX(-8px)}
  35%,80%{opacity:1;transform:translateX(0)}
  100%{opacity:.28;transform:translateX(8px)}
}

/* connected flow */
.workspace-connection{
  margin-top:18px;
  padding:18px 20px;
  border-radius:16px;
  background:#0B151C;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.workspace-connection span{
  color:#B6C6CE;
  font-size:10px;
  font-weight:850;
  letter-spacing:.1em;
}
.workspace-connection i{
  color:var(--cyan);
  font-style:normal;
}
.workspace-connection strong{
  color:#8AE4F7;
  font-size:10px;
  letter-spacing:.12em;
}

/* responsive */
@media(max-width:1000px){
  .engineering-workspace-head,
  .workspace-intro-strip{
    grid-template-columns:1fr;
    gap:22px;
  }
}
@media(max-width:800px){
  .workspace-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:700px){
  .engineering-workspace-section{
    padding:72px 0;
  }
  .workspace-card{
    padding:22px;
    border-radius:18px;
  }
  .workspace-card h3{
    font-size:23px;
  }
  .agile-board-graphic,
  .sprint-board-graphic,
  .evaluator-graphic,
  .slack-message-graphic{
    min-height:130px;
  }
  .evaluator-graphic{
    grid-template-columns:1fr;
  }
}
@media(prefers-reduced-motion:reduce){
  .workspace-card,
  .workspace-card-detail,
  .workspace-card *,
  .workspace-card *::before,
  .workspace-card *::after{
    animation:none!important;
    transition:none!important;
  }
}

/* ================================================================
   COMPACT ENGINEERING WORKSPACE
   One block, clickable tools, one visible panel at a time
   ================================================================ */
.workspace-compact-section{
  padding:74px 0;
  background:#F6F9FA;
  border-top:1px solid #E3EAED;
  border-bottom:1px solid #E3EAED;
}
.workspace-shell{
  border-radius:26px;
  overflow:hidden;
  background:#fff;
  border:1px solid #DDE6E9;
  box-shadow:0 24px 65px rgba(12,31,40,.07);
}
.workspace-shell-head{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:52px;
  align-items:end;
  padding:34px 36px 26px;
}
.workspace-shell-head h2{
  margin:0;
  font-size:clamp(34px,3.8vw,52px);
  line-height:.98;
  color:#101820;
}
.workspace-shell-head h2 span{
  color:var(--indigo);
}
.workspace-shell-head p{
  margin:0;
  max-width:530px;
  color:#65727A;
  font-size:14px;
  line-height:1.6;
}

.workspace-tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #E5EBED;
  border-bottom:1px solid #E5EBED;
  background:#FBFCFD;
}
.workspace-tab{
  min-height:58px;
  padding:13px 16px;
  border:0;
  border-right:1px solid #E5EBED;
  background:transparent;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  text-align:left;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.workspace-tab:last-child{border-right:0}
.workspace-tab span{
  color:#A0ACB2;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}
.workspace-tab b{
  color:#47545B;
  font-size:12px;
}
.workspace-tab.active{
  background:#F1FAFC;
  box-shadow:inset 0 -3px 0 var(--cyan);
}
.workspace-tab.active span{color:#087F99}
.workspace-tab.active b{color:#111B20}

.workspace-panels{
  position:relative;
  min-height:315px;
}
.workspace-panel{
  display:none;
  grid-template-columns:.9fr 1.1fr;
  gap:42px;
  align-items:center;
  padding:30px 36px 34px;
}
.workspace-panel.active{
  display:grid;
  animation:workspacePanelIn .28s ease both;
}
@keyframes workspacePanelIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
.workspace-panel-copy small{
  display:block;
  color:#07829D;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  margin-bottom:9px;
}
.workspace-panel-copy h3{
  margin:0 0 10px;
  font-size:30px;
  color:#101820;
}
.workspace-panel-copy p{
  margin:0 0 14px;
  max-width:460px;
  color:#65727A;
  font-size:14px;
  line-height:1.55;
}
.workspace-panel-copy ul{
  margin:0;
  padding-left:18px;
}
.workspace-panel-copy li{
  margin:5px 0;
  color:#59666D;
  font-size:12.5px;
}
.workspace-panel-visual{
  min-height:185px!important;
  border-radius:18px;
}

.workspace-bottom-flow{
  padding:15px 18px;
  border-top:1px solid #E5EBED;
  background:#0B151C;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
}
.workspace-bottom-flow span{
  color:#B5C6CE;
  font-size:9px;
  font-weight:850;
  letter-spacing:.1em;
}
.workspace-bottom-flow i{
  color:var(--cyan);
  font-style:normal;
}
.workspace-bottom-flow strong{
  color:#8AE4F7;
  font-size:9px;
  letter-spacing:.12em;
}

/* compact existing infographic internals */
.workspace-panel .agile-board-graphic,
.workspace-panel .sprint-board-graphic,
.workspace-panel .evaluator-graphic,
.workspace-panel .slack-message-graphic{
  min-height:185px;
}
.workspace-panel .evaluator-graphic{
  grid-template-columns:100px 1fr;
}
.workspace-panel .eval-score{
  width:82px;
  height:82px;
}
.workspace-panel .message-bubble{
  padding:8px 10px;
}

/* hide obsolete large workspace styles from affecting this compact version */
.workspace-compact-section .workspace-card,
.workspace-compact-section .workspace-grid,
.workspace-compact-section .workspace-intro-strip,
.workspace-compact-section .workspace-connection{
  display:none!important;
}

@media(max-width:900px){
  .workspace-shell-head,
  .workspace-panel{
    grid-template-columns:1fr;
    gap:24px;
  }
  .workspace-tabs{
    grid-template-columns:1fr 1fr;
  }
  .workspace-tab:nth-child(2){
    border-right:0;
  }
  .workspace-tab:nth-child(-n+2){
    border-bottom:1px solid #E5EBED;
  }
}
@media(max-width:650px){
  .workspace-compact-section{
    padding:62px 0;
  }
  .workspace-shell{
    border-radius:20px;
  }
  .workspace-shell-head{
    padding:26px 22px 20px;
  }
  .workspace-tabs{
    grid-template-columns:1fr;
  }
  .workspace-tab{
    border-right:0;
    border-bottom:1px solid #E5EBED!important;
  }
  .workspace-tab:last-child{
    border-bottom:0!important;
  }
  .workspace-panel{
    padding:24px 22px 28px;
  }
  .workspace-panel-visual{
    min-height:155px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .workspace-panel.active{
    animation:none!important;
  }
}

/* ================================================================
   WHY THE CODE FACTORY — ANIMATED DROPDOWN + INFOGRAPHIC
   ================================================================ */
.why-tcf-section{
  padding:82px 0;
  background:
    radial-gradient(circle at 88% 12%,rgba(0,179,227,.08),transparent 26%),
    linear-gradient(180deg,#F7FAFB 0%,#FFFFFF 100%);
  border-top:1px solid #E4EBED;
  border-bottom:1px solid #E4EBED;
}
.why-tcf-shell{
  border-radius:26px;
  overflow:hidden;
  background:#fff;
  border:1px solid #DCE6E9;
  box-shadow:0 24px 65px rgba(10,29,37,.07);
}
.why-tcf-head{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:52px;
  align-items:end;
  padding:38px 40px 30px;
}
.why-tcf-head h2{
  margin:0;
  font-size:clamp(38px,4.2vw,58px);
  line-height:.98;
  color:#101820;
}
.why-tcf-head h2 span{
  color:var(--indigo);
}
.why-tcf-head p{
  margin:0;
  max-width:560px;
  color:#627078;
  font-size:15px;
  line-height:1.65;
}

.why-tcf-grid{
  display:grid;
  grid-template-columns:1fr .92fr;
  min-height:520px;
  border-top:1px solid #E6ECEE;
}
.why-tcf-accordion{
  border-right:1px solid #E6ECEE;
}
.why-tcf-item{
  border-bottom:1px solid #E6ECEE;
  background:#fff;
  transition:background .2s ease;
}
.why-tcf-item:last-child{border-bottom:0}
.why-tcf-item[open]{
  background:#F7FCFD;
}
.why-tcf-item summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:42px 1fr 34px;
  gap:14px;
  align-items:center;
  padding:22px 24px;
}
.why-tcf-item summary::-webkit-details-marker{display:none}
.why-index{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#EEF8FB;
  color:#087D97;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}
.why-summary-copy small{
  display:block;
  margin-bottom:4px;
  color:#07819B;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}
.why-summary-copy strong{
  display:block;
  color:#182228;
  font-size:17px;
  line-height:1.25;
}
.why-plus{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#EFF5F7;
  color:#495760;
  display:grid;
  place-items:center;
  font-size:20px;
  transition:transform .22s ease,background .22s ease,color .22s ease;
}
.why-tcf-item[open] .why-plus{
  transform:rotate(45deg);
  background:#DDF5FA;
  color:#07819B;
}
.why-tcf-content{
  padding:0 24px 22px 80px;
  color:#5E6B73;
  font-size:13px;
}
.why-tcf-content ul{
  margin:0;
  padding-left:18px;
}
.why-tcf-content li{
  margin:7px 0;
  line-height:1.5;
}
.why-tcf-content p{
  margin:0;
  line-height:1.6;
}
.why-mini-flow{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  overflow-x:auto;
}
.why-mini-flow span{
  padding:7px 10px;
  border-radius:999px;
  background:#EAF8FB;
  color:#087C96;
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
}
.why-mini-flow i{
  color:#A0AEB5;
  font-style:normal;
}

/* right infographic panel */
.why-tcf-visual{
  position:relative;
  min-height:520px;
  background:
    radial-gradient(circle at 78% 20%,rgba(0,179,227,.17),transparent 27%),
    linear-gradient(145deg,#0B151C,#142636);
  color:#fff;
  overflow:hidden;
}
.why-tcf-visual::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:32px 32px;
}
.why-visual-top{
  position:absolute;
  z-index:3;
  top:24px;
  left:26px;
  right:26px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.why-visual-top small{
  color:#8CE8FB;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}
.why-visual-top span{
  color:#728995;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}
.why-visual-stage{
  position:absolute;
  inset:70px 0 0;
  padding:28px;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .34s ease,transform .34s ease;
  display:grid;
  grid-template-rows:1fr auto;
}
.why-visual-stage.active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.why-visual-caption{
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.10);
}
.why-visual-caption b{
  display:block;
  color:#fff;
  font-size:15px;
  margin-bottom:5px;
}
.why-visual-caption span{
  display:block;
  max-width:440px;
  color:#9FB2BC;
  font-size:11px;
  line-height:1.5;
}

/* mission infographic */
.mission-infographic{
  position:relative;
  min-height:330px;
  display:grid;
  place-items:center;
}
.mission-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(124,225,246,.25);
  animation:missionPulse 3.4s ease-in-out infinite;
}
.mission-ring.ring-a{width:220px;height:220px}
.mission-ring.ring-b{width:310px;height:310px;animation-delay:.45s}
.mission-core{
  width:124px;height:124px;border-radius:50%;
  display:grid;place-items:center;
  background:#101F29;border:1px solid #31515E;
  color:#fff;font-size:13px;font-weight:850;letter-spacing:.05em;
  box-shadow:0 0 0 14px rgba(0,179,227,.05);
}
.mission-node{
  position:absolute;
  padding:8px 11px;
  border-radius:999px;
  background:#172B36;
  border:1px solid #31515E;
  color:#9BE9FA;
  font-size:9px;
  font-weight:850;
}
.mission-node.n1{top:28px;left:50%;transform:translateX(-50%)}
.mission-node.n2{right:32px;top:50%;transform:translateY(-50%)}
.mission-node.n3{bottom:28px;left:50%;transform:translateX(-50%)}
.mission-node.n4{left:32px;top:50%;transform:translateY(-50%)}
@keyframes missionPulse{
  0%,100%{transform:scale(.94);opacity:.42}
  50%{transform:scale(1.04);opacity:1}
}

/* vision infographic */
.vision-infographic{
  position:relative;
  min-height:330px;
}
.vision-path{
  position:absolute;
  left:55px;right:55px;top:50%;
  height:3px;
  background:linear-gradient(90deg,#26414E,#7CE1F6,#737CC5);
}
.vision-step{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}
.vision-step.s1{left:18%}
.vision-step.s2{left:50%}
.vision-step.s3{left:82%}
.vision-step i{
  display:block;
  width:52px;height:52px;border-radius:50%;
  background:#101F29;border:1px solid #355866;
  box-shadow:0 0 0 8px rgba(124,225,246,.05);
  margin:0 auto 10px;
}
.vision-step.s2 i{background:#163342;border-color:#4A8295}
.vision-step.s3 i{background:#252D56;border-color:#5D68A6}
.vision-step span{
  color:#DCE9EE;font-size:10px;font-weight:800
}
.vision-signal{
  position:absolute;
  top:calc(50% - 5px);
  left:15%;
  width:10px;height:10px;border-radius:50%;
  background:#7CE1F6;
  box-shadow:0 0 0 8px rgba(124,225,246,.10);
  animation:visionMove 3.2s ease-in-out infinite;
}
@keyframes visionMove{
  0%{left:16%}
  50%{left:50%}
  100%{left:82%}
}

/* objective infographic */
.objective-infographic{
  min-height:280px;
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:12px;
  align-items:center;
}
.objective-left,.objective-right{
  min-height:110px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:#11242E;
  border:1px solid #2D4652;
  color:#A8BBC4;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.objective-right{
  background:#252D56;
  border-color:#525D94;
  color:#DCE0FF;
}
.objective-bridge{
  height:70px;
  display:flex;
  align-items:center;
  gap:6px;
}
.objective-bridge span{
  height:8px;
  flex:1;
  border-radius:999px;
  background:#24404C;
  animation:bridgeGlow 1.9s ease-in-out infinite alternate;
}
.objective-bridge span:nth-child(2){animation-delay:.25s}
.objective-bridge span:nth-child(3){animation-delay:.5s}
@keyframes bridgeGlow{
  from{background:#24404C;box-shadow:none}
  to{background:#7CE1F6;box-shadow:0 0 16px rgba(124,225,246,.25)}
}
.objective-progress{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.objective-progress span{
  color:#A7B9C3;font-size:9px;font-weight:850
}
.objective-progress i{
  flex:1;height:2px;background:linear-gradient(90deg,#2D4753,#7CE1F6,#2D4753)
}

/* philosophy infographic */
.philosophy-infographic{
  position:relative;
  min-height:330px;
  display:grid;
  place-items:center;
}
.philosophy-core{
  width:120px;height:120px;border-radius:50%;
  display:grid;place-items:center;
  background:#101F29;border:1px solid #385661;
  color:#fff;font-size:13px;font-weight:850;
}
.orbit-item{
  position:absolute;
  min-width:74px;
  padding:9px 11px;
  text-align:center;
  border-radius:999px;
  background:#172B36;
  border:1px solid #35545F;
  color:#A5E9F7;
  font-size:9px;
  font-weight:850;
}
.orbit-item.o1{top:22px;left:50%;transform:translateX(-50%)}
.orbit-item.o2{right:34px;top:34%}
.orbit-item.o3{right:58px;bottom:34px}
.orbit-item.o4{left:58px;bottom:34px}
.orbit-item.o5{left:34px;top:34%}
.philosophy-infographic::after{
  content:"";
  position:absolute;
  width:250px;height:250px;border-radius:50%;
  border:1px dashed rgba(124,225,246,.22);
  animation:philosophySpin 12s linear infinite;
}
@keyframes philosophySpin{to{transform:rotate(360deg)}}

@media(max-width:1000px){
  .why-tcf-head{grid-template-columns:1fr;gap:20px}
  .why-tcf-grid{grid-template-columns:1fr}
  .why-tcf-accordion{border-right:0;border-bottom:1px solid #E6ECEE}
  .why-tcf-visual{min-height:470px}
}
@media(max-width:700px){
  .why-tcf-section{padding:66px 0}
  .why-tcf-shell{border-radius:20px}
  .why-tcf-head{padding:28px 24px 22px}
  .why-tcf-item summary{grid-template-columns:38px 1fr 30px;padding:18px 18px}
  .why-tcf-content{padding:0 18px 19px 70px}
  .why-tcf-visual{min-height:430px}
  .why-visual-stage{padding:22px}
  .mission-ring.ring-b{width:260px;height:260px}
}
@media(prefers-reduced-motion:reduce){
  .why-tcf-section *,
  .why-tcf-section *::before,
  .why-tcf-section *::after{
    animation:none!important;
    transition:none!important;
  }
}

/* ================================================================
   GOOGLE REVIEWS — SLOW RIGHT-TO-LEFT TESTIMONIAL MARQUEE
   ================================================================ */
.google-reviews-section{
  padding:88px 0 72px;
  background:
    radial-gradient(circle at 88% 10%,rgba(0,179,227,.08),transparent 27%),
    linear-gradient(180deg,#FFFFFF 0%,#F6FAFB 100%);
  border-top:1px solid #E3EAED;
  border-bottom:1px solid #E3EAED;
  overflow:hidden;
}
.google-reviews-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:52px;
  align-items:end;
  margin-bottom:34px;
}
.google-reviews-head h2{
  margin:0;
  max-width:820px;
  font-size:clamp(38px,4.2vw,58px);
  line-height:.98;
  letter-spacing:-.045em;
  color:#101820;
}
.google-reviews-head h2 span{
  color:var(--indigo);
}
.google-rating-summary{
  min-width:235px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:18px 20px;
  border-radius:18px;
  background:#fff;
  border:1px solid #DDE7EA;
  box-shadow:0 12px 35px rgba(12,31,40,.05);
}
.google-rating-summary > strong{
  font-size:48px;
  line-height:.9;
  color:#101820;
  letter-spacing:-.055em;
}
.google-rating-summary > div{
  display:grid;
  gap:4px;
}
.google-rating-stars{
  color:#F4B400;
  font-size:16px;
  letter-spacing:1px;
}
.google-rating-summary small{
  color:#718087;
  font-size:11px;
}

.google-review-marquee{
  width:100%;
  overflow:hidden;
  position:relative;
  padding:8px 0 12px;
}
.google-review-marquee::before,
.google-review-marquee::after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:min(11vw,150px);
  pointer-events:none;
}
.google-review-marquee::before{
  left:0;
  background:linear-gradient(90deg,#F9FBFC 0%,rgba(249,251,252,0) 100%);
}
.google-review-marquee::after{
  right:0;
  background:linear-gradient(270deg,#F9FBFC 0%,rgba(249,251,252,0) 100%);
}
.google-review-track{
  width:max-content;
  display:flex;
  gap:18px;
  padding-left:18px;
  animation:googleReviewsScroll 54s linear infinite;
  will-change:transform;
}
.google-review-marquee:hover .google-review-track{
  animation-play-state:paused;
}
@keyframes googleReviewsScroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 9px))}
}

.google-review-card{
  width:390px;
  min-height:235px;
  flex:0 0 390px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:26px;
  border-radius:22px;
  background:#fff;
  border:1px solid #DCE6E9;
  box-shadow:0 16px 42px rgba(11,29,38,.06);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.google-review-card:hover{
  transform:translateY(-4px);
  border-color:#B8E1EB;
  box-shadow:0 22px 50px rgba(11,29,38,.09);
}
.google-review-card-top{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.google-review-source{
  display:flex;
  align-items:center;
  gap:11px;
}
.google-g{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #DDE5E8;
  color:#4285F4;
  font-size:20px;
  font-weight:900;
  font-family:Arial,sans-serif;
}
.google-review-source b{
  display:block;
  color:#1C252A;
  font-size:12px;
}
.google-review-source small{
  display:block;
  margin-top:2px;
  color:#F4B400;
  font-size:11px;
  letter-spacing:.5px;
}
.review-verified{
  padding:6px 8px;
  border-radius:999px;
  background:#EEF8FB;
  color:#087D97;
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.google-review-card blockquote{
  margin:24px 0 26px;
  color:#172127;
  font-size:20px;
  line-height:1.38;
  letter-spacing:-.018em;
  font-weight:550;
}
.review-card-footer{
  padding-top:15px;
  border-top:1px solid #E7ECEE;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}
.review-card-footer span{
  color:#536169;
  font-size:11px;
  font-weight:750;
}
.review-card-footer small{
  color:#89959B;
  font-size:10px;
}
.google-reviews-note{
  display:flex;
  justify-content:center;
  padding-top:20px;
}
.google-reviews-note span{
  color:#89949A;
  font-size:10px;
  text-align:center;
}

@media(max-width:800px){
  .google-reviews-head{
    grid-template-columns:1fr;
    gap:22px;
  }
  .google-rating-summary{
    width:max-content;
  }
  .google-review-card{
    width:320px;
    flex-basis:320px;
    min-height:220px;
    padding:22px;
  }
  .google-review-card blockquote{
    font-size:17px;
  }
  .google-review-track{
    animation-duration:48s;
  }
}
@media(prefers-reduced-motion:reduce){
  .google-review-track{
    width:auto;
    overflow-x:auto;
    animation:none!important;
    padding:0 18px 12px;
  }
  .google-review-card{
    transform:none!important;
  }
}

/* ================================================================
   WHY THE CODE FACTORY — CLEAN ALIGNED DROPDOWN BOXES
   Infographic panel removed
   ================================================================ */
.why-tcf-grid.text-only{
  display:block;
  min-height:0;
  border-top:1px solid #E6ECEE;
}
.why-tcf-grid.text-only .why-tcf-accordion{
  border-right:0;
  padding:22px;
  display:grid;
  gap:12px;
  background:#F8FAFB;
}
.why-tcf-grid.text-only .why-tcf-item{
  border:1px solid #DCE5E8;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:none;
}
.why-tcf-grid.text-only .why-tcf-item:last-child{
  border-bottom:1px solid #DCE5E8;
}
.why-tcf-grid.text-only .why-tcf-item[open]{
  border-color:#A9DFEB;
  background:#FCFEFF;
  box-shadow:0 12px 30px rgba(10,29,37,.05);
}
.why-tcf-grid.text-only .why-tcf-item summary{
  padding:20px 22px;
  grid-template-columns:42px 1fr 34px;
}
.why-tcf-grid.text-only .why-tcf-content{
  padding:0 22px 22px 78px;
  max-width:920px;
}
.why-tcf-grid.text-only .why-summary-copy strong{
  font-size:18px;
  line-height:1.25;
}
.why-tcf-grid.text-only .why-tcf-content li,
.why-tcf-grid.text-only .why-tcf-content p{
  font-size:13.5px;
  line-height:1.55;
}
@media(max-width:700px){
  .why-tcf-grid.text-only .why-tcf-accordion{
    padding:14px;
  }
  .why-tcf-grid.text-only .why-tcf-item summary{
    padding:17px 16px;
    grid-template-columns:38px 1fr 30px;
  }
  .why-tcf-grid.text-only .why-tcf-content{
    padding:0 16px 18px 64px;
  }
}

/* ================================================================
   WHY THE CODE FACTORY — 2x2 EQUAL CARDS WITH INFOGRAPHICS
   ================================================================ */
.why-tcf-cards-section{
  padding:86px 0;
  background:
    radial-gradient(circle at 85% 10%, rgba(0,179,227,.08), transparent 26%),
    linear-gradient(180deg,#F7FAFB 0%,#FFFFFF 100%);
  border-top:1px solid #E4EBED;
  border-bottom:1px solid #E4EBED;
}
.why-tcf-cards-head{
  max-width:940px;
  margin-bottom:30px;
}
.why-tcf-cards-head h2{
  margin:0 0 14px;
  font-size:clamp(38px,4.1vw,58px);
  line-height:.98;
  color:#101820;
  letter-spacing:-.045em;
}
.why-tcf-cards-head h2 span{
  color:var(--indigo);
}
.why-tcf-cards-head p{
  margin:0;
  max-width:760px;
  color:#637179;
  font-size:16px;
  line-height:1.6;
}

.why-tcf-cards-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.why-card{
  min-height:510px;
  display:flex;
  flex-direction:column;
  padding:26px;
  border-radius:22px;
  background:#fff;
  border:1px solid #DCE6E9;
  box-shadow:0 16px 42px rgba(11,29,38,.06);
}
.why-card-top{
  margin-bottom:18px;
}
.why-card-tag{
  display:inline-flex;
  margin-bottom:14px;
  padding:7px 10px;
  border-radius:999px;
  background:#EEF8FB;
  color:#087D97;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}
.why-card h3{
  margin:0 0 14px;
  color:#101820;
  font-size:24px;
  line-height:1.1;
  max-width:460px;
}
.why-card p{
  margin:0;
  color:#617078;
  font-size:14px;
  line-height:1.6;
}
.why-card ul{
  margin:0;
  padding-left:18px;
}
.why-card li{
  margin:7px 0;
  color:#5A6870;
  font-size:13px;
  line-height:1.55;
}
.why-card li b{
  color:#172127;
}
.why-card-flow{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:15px;
}
.why-card-flow span{
  white-space:nowrap;
  padding:7px 10px;
  border-radius:999px;
  background:#EAF8FB;
  color:#087C96;
  font-size:10px;
  font-weight:850;
}
.why-card-flow i{
  color:#9BA9B0;
  font-style:normal;
}

/* shared visual surface */
.why-card-visual{
  height:180px;
  border-radius:18px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 15%, rgba(0,179,227,.18), transparent 26%),
    linear-gradient(145deg,#0B151C,#142636);
  border:1px solid #21323C;
}
.why-card-visual::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:24px 24px;
}

/* mission */
.mission-visual{
  display:grid;
  place-items:center;
}
.mission-core{
  position:relative;
  z-index:2;
  width:92px;
  height:92px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#101F29;
  border:1px solid #31515E;
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow:0 0 0 12px rgba(0,179,227,.05);
}
.m-node{
  position:absolute;
  z-index:2;
  padding:6px 10px;
  border-radius:999px;
  background:#172B36;
  border:1px solid #31515E;
  color:#9BE9FA;
  font-size:8px;
  font-weight:850;
}
.m-node.n1{top:14px;left:50%;transform:translateX(-50%)}
.m-node.n2{right:18px;top:50%;transform:translateY(-50%)}
.m-node.n3{bottom:14px;left:50%;transform:translateX(-50%)}
.m-node.n4{left:18px;top:50%;transform:translateY(-50%)}

/* vision */
.vision-visual{position:relative}
.v-line{
  position:absolute;
  left:38px; right:38px; top:50%;
  height:3px;
  background:linear-gradient(90deg,#26414E,#7CE1F6,#737CC5);
}
.v-step{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  z-index:2;
}
.v-step.s1{left:18%}
.v-step.s2{left:50%}
.v-step.s3{left:82%}
.v-step i{
  display:block;
  width:42px;height:42px;border-radius:50%;
  margin:0 auto 8px;
  background:#101F29;
  border:1px solid #355866;
  box-shadow:0 0 0 7px rgba(124,225,246,.05);
}
.v-step.s2 i{background:#163342;border-color:#4A8295}
.v-step.s3 i{background:#252D56;border-color:#5D68A6}
.v-step span{
  color:#DCE9EE;
  font-size:8px;
  font-weight:800;
}

/* objective */
.objective-visual{
  display:grid;
  grid-template-columns:1fr 1.1fr 1fr;
  gap:10px;
  align-items:center;
  padding:0 16px;
}
.obj-left,.obj-right{
  min-height:76px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#11242E;
  border:1px solid #2D4652;
  color:#A8BBC4;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
  z-index:2;
}
.obj-right{
  background:#252D56;
  border-color:#525D94;
  color:#DCE0FF;
}
.obj-bridge{
  height:56px;
  display:flex;
  align-items:center;
  gap:6px;
  z-index:2;
}
.obj-bridge span{
  flex:1;
  height:7px;
  border-radius:999px;
  background:#24404C;
}

/* philosophy */
.philosophy-visual{
  display:grid;
  place-items:center;
}
.p-core{
  position:relative;
  z-index:2;
  width:90px;height:90px;border-radius:50%;
  display:grid;place-items:center;
  background:#101F29;border:1px solid #385661;
  color:#fff;font-size:11px;font-weight:850;
}
.p-item{
  position:absolute;
  z-index:2;
  min-width:60px;
  padding:7px 9px;
  text-align:center;
  border-radius:999px;
  background:#172B36;
  border:1px solid #35545F;
  color:#A5E9F7;
  font-size:8px;
  font-weight:850;
}
.p-item.p1{top:12px;left:50%;transform:translateX(-50%)}
.p-item.p2{right:20px;top:31%}
.p-item.p3{right:34px;bottom:16px}
.p-item.p4{left:34px;bottom:16px}
.p-item.p5{left:20px;top:31%}
.philosophy-visual::after{
  content:"";
  position:absolute;
  width:190px;height:190px;border-radius:50%;
  border:1px dashed rgba(124,225,246,.22);
}

/* responsive */
@media(max-width:900px){
  .why-tcf-cards-grid{
    grid-template-columns:1fr;
  }
  .why-card{
    min-height:unset;
  }
}
@media(max-width:700px){
  .why-tcf-cards-section{
    padding:68px 0;
  }
  .why-card{
    padding:20px;
    border-radius:18px;
  }
  .why-card h3{
    font-size:22px;
  }
  .why-card-visual{
    height:165px;
  }
}

/* ================================================================
   GOOGLE REVIEWS WITH PHOTO CARDS
   ================================================================ */
.google-review-marquee.people-style{
  width:100%;
  overflow:hidden;
  position:relative;
  padding:10px 0 14px;
}
.google-review-marquee.people-style::before,
.google-review-marquee.people-style::after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:min(11vw,150px);
  pointer-events:none;
}
.google-review-marquee.people-style::before{
  left:0;
  background:linear-gradient(90deg,#F9FBFC 0%,rgba(249,251,252,0) 100%);
}
.google-review-marquee.people-style::after{
  right:0;
  background:linear-gradient(270deg,#F9FBFC 0%,rgba(249,251,252,0) 100%);
}
.people-track{
  width:max-content;
  display:flex;
  gap:20px;
  padding-left:18px;
  animation:googleReviewsScrollPeople 72s linear infinite;
  will-change:transform;
}
.google-review-marquee.people-style:hover .people-track{
  animation-play-state:paused;
}
@keyframes googleReviewsScrollPeople{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 10px))}
}

.google-review-person-card{
  width:420px;
  min-height:260px;
  flex:0 0 420px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:24px;
  border-radius:22px;
  background:#fff;
  border:1px solid #DDE7EA;
  box-shadow:0 16px 42px rgba(11,29,38,.06);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.google-review-person-card:hover{
  transform:translateY(-4px);
  border-color:#B7DEE8;
  box-shadow:0 22px 52px rgba(11,29,38,.09);
}
.google-review-person-head{
  display:flex;
  align-items:center;
  gap:14px;
}
.google-review-person-head img{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #E6EEF1;
  background:#F3F6F7;
  flex:0 0 60px;
}
.google-review-person-meta strong{
  display:block;
  color:#162026;
  font-size:15px;
  line-height:1.2;
}
.google-review-person-meta span{
  display:block;
  margin-top:3px;
  color:#7C8A92;
  font-size:11px;
}
.google-review-person-meta small{
  display:block;
  margin-top:6px;
  color:#F4B400;
  font-size:12px;
  letter-spacing:.7px;
}
.google-review-person-card blockquote{
  margin:22px 0 24px;
  color:#172127;
  font-size:18px;
  line-height:1.45;
  letter-spacing:-.015em;
  font-weight:550;
}
.google-review-person-footer{
  padding-top:14px;
  border-top:1px solid #E8ECEE;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
}
.review-source-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#4A5960;
  font-size:11px;
  font-weight:750;
}
.review-source-badge i{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #DDE6E9;
  color:#4285F4;
  font-style:normal;
  font-weight:900;
  font-family:Arial,sans-serif;
}
.google-review-person-footer small{
  color:#89959B;
  font-size:10px;
}
@media(max-width:800px){
  .google-review-person-card{
    width:330px;
    flex-basis:330px;
    min-height:250px;
    padding:20px;
  }
  .google-review-person-card blockquote{
    font-size:16px;
  }
  .people-track{
    animation-duration:62s;
  }
}
@media(prefers-reduced-motion:reduce){
  .people-track{
    width:auto;
    overflow-x:auto;
    animation:none!important;
    padding:0 18px 12px;
  }
}

/* ================================================================
   FOOTER SOCIAL MEDIA
   ================================================================ */
.footer-social{
  margin-top:34px;
  padding:20px 0 22px;
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.footer-social-copy{
  display:grid;
  gap:4px;
}
.footer-social-copy small{
  color:#7FE3F7;
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}
.footer-social-copy strong{
  color:#fff;
  font-size:17px;
  line-height:1.2;
}
.footer-social-links{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.social-link{
  min-height:42px;
  padding:9px 13px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.045);
  color:#CBD9E0;
  text-decoration:none;
  font-size:11px;
  font-weight:750;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.social-link:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.08);
  border-color:rgba(124,225,246,.28);
  color:#fff;
}
.social-link svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:currentColor;
  stroke:currentColor;
  stroke-width:1.7;
}
.social-link.instagram svg{
  fill:none;
}
.social-link.instagram svg circle:last-child{
  fill:currentColor;
  stroke:none;
}
.placeholder-social{
  opacity:.72;
}
@media(max-width:700px){
  .footer-social{
    align-items:flex-start;
    flex-direction:column;
  }
  .footer-social-links{
    width:100%;
  }
  .social-link{
    flex:1 1 120px;
    justify-content:center;
  }
}

/* ================================================================
   WHY THE CODE FACTORY — 4 SIMPLE DROPDOWN BLOCKS
   ================================================================ */
.why-simple-section{
  padding:84px 0;
  background:linear-gradient(180deg,#F7FAFB 0%,#FFFFFF 100%);
  border-top:1px solid #E4EBED;
  border-bottom:1px solid #E4EBED;
}
.why-simple-head{
  max-width:900px;
  margin-bottom:30px;
}
.why-simple-head h2{
  margin:0 0 14px;
  font-size:clamp(38px,4.1vw,58px);
  line-height:.98;
  letter-spacing:-.045em;
  color:#101820;
}
.why-simple-head h2 span{
  color:var(--indigo);
}
.why-simple-head p{
  margin:0;
  max-width:760px;
  color:#637179;
  font-size:15px;
  line-height:1.6;
}

.why-simple-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
}
.why-simple-card{
  border-radius:20px;
  background:#fff;
  border:1px solid #DCE6E9;
  box-shadow:0 14px 38px rgba(11,29,38,.05);
  overflow:hidden;
  min-height:270px;
  display:flex;
  flex-direction:column;
  padding:24px;
}
.why-simple-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.why-simple-card-head span{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#EEF8FB;
  color:#087D97;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}
.why-simple-card-head small{
  color:#087D97;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}
.why-simple-card h3{
  margin:0 0 11px;
  color:#101820;
  font-size:23px;
  line-height:1.12;
  max-width:460px;
}
.why-simple-intro{
  margin:0;
  color:#64727A;
  font-size:13.5px;
  line-height:1.58;
}
.why-simple-details{
  margin-top:auto;
  padding-top:18px;
}
.why-simple-details summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 13px;
  border-radius:12px;
  background:#F3F8FA;
  color:#1A252B;
  font-size:11px;
  font-weight:850;
  letter-spacing:.03em;
  transition:background .2s ease,color .2s ease;
}
.why-simple-details summary::-webkit-details-marker{
  display:none;
}
.why-simple-details summary i{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  border:1px solid #DCE7EA;
  color:#087D97;
  font-style:normal;
  font-size:17px;
  transition:transform .2s ease;
}
.why-simple-details[open] summary{
  background:#EAF8FB;
  color:#087D97;
}
.why-simple-details[open] summary i{
  transform:rotate(45deg);
}
.why-simple-content{
  padding:15px 2px 2px;
  color:#59676F;
  font-size:12.5px;
  line-height:1.55;
}
.why-simple-content ul{
  margin:0;
  padding-left:18px;
}
.why-simple-content li{
  margin:7px 0;
}
.why-simple-content p{
  margin:0;
}
.why-simple-flow{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:13px;
}
.why-simple-flow span{
  padding:6px 9px;
  border-radius:999px;
  background:#EEF8FB;
  color:#087D97;
  font-size:9px;
  font-weight:850;
}
.why-simple-flow b{
  color:#9AA8AF;
  font-weight:500;
}

@media(max-width:850px){
  .why-simple-grid{
    grid-template-columns:1fr;
  }
  .why-simple-card{
    min-height:unset;
  }
}
@media(max-width:700px){
  .why-simple-section{
    padding:66px 0;
  }
  .why-simple-card{
    padding:20px;
    border-radius:17px;
  }
  .why-simple-card h3{
    font-size:21px;
  }
}

/* SEO context line: visible, concise and non-intrusive */
.seo-footer-summary{
  max-width:980px;
  margin:28px 0 0;
  color:#84959E;
  font-size:10px;
  line-height:1.6;
}