/* ==========================================================
   T&G TECHNOLOGY SOLUTIONS
   LIGHT PREMIUM GLOBAL ART DIRECTION
   ========================================================== */

:root{
  --tg-bg:#f7fbff;
  --tg-white:#ffffff;
  --tg-soft:#edf6fc;
  --tg-soft2:#e7f3fb;
  --tg-blue:#138eea;
  --tg-cyan:#27d9ea;
  --tg-navy:#08213b;
  --tg-ink:#10243a;
  --tg-muted:#637b91;
  --tg-line:rgba(9,57,91,.12);
  --tg-shadow:0 30px 80px rgba(35,95,132,.13);
}

html{
  background:var(--tg-bg);
}

body{
  background:
    radial-gradient(circle at 12% 8%,rgba(60,183,255,.10),transparent 28%),
    var(--tg-bg)!important;
  color:var(--tg-ink)!important;
}

/* ----------------------------------------------------------
   HEADER / BRAND
   ---------------------------------------------------------- */

.site-header{
  background:rgba(255,255,255,.88)!important;
  border-bottom:1px solid rgba(14,76,112,.10)!important;
  box-shadow:0 8px 35px rgba(42,94,128,.06);
  backdrop-filter:blur(18px);
}

.brand{
  color:var(--tg-navy)!important;
}

.brand-symbol,
.brand-mark{
  background:linear-gradient(135deg,#1aa6f5,#39e0e8)!important;
  color:#05213a!important;
  box-shadow:
    0 10px 30px rgba(19,142,234,.22),
    inset 0 1px rgba(255,255,255,.7);
  transform:rotate(-2deg);
}

.brand-name,
.brand-text{
  color:#09233d!important;
}

.brand-name small,
.brand-text small{
  color:#68839b!important;
}

.desktop-nav,
.nav-links{
  color:#29435a!important;
}

.desktop-nav a:not(.nav-cta),
.nav-links a:not(.btn){
  color:#29435a!important;
}

.desktop-nav a:not(.nav-cta):hover,
.nav-links a:not(.btn):hover{
  color:#078dd5!important;
}

.nav-cta,
.btn-primary{
  background:linear-gradient(135deg,#1599ee,#35dfe9)!important;
  color:#042038!important;
  border:0!important;
  box-shadow:0 12px 30px rgba(21,153,238,.23);
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.hero,
.hero-world{
  position:relative;
  color:var(--tg-navy)!important;
  background:
    radial-gradient(circle at 72% 25%,rgba(55,202,255,.23),transparent 30%),
    radial-gradient(circle at 18% 20%,rgba(71,153,255,.12),transparent 27%),
    linear-gradient(135deg,#ffffff 0%,#f2f9ff 53%,#e8f7ff 100%)!important;
}

.hero:before,
.hero-grid-lines{
  opacity:.28!important;
  background-image:
    linear-gradient(rgba(38,115,163,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(38,115,163,.08) 1px,transparent 1px)!important;
  background-size:68px 68px!important;
}

.hero:after{
  content:"";
  position:absolute;
  width:680px;
  height:680px;
  right:-160px;
  top:-210px;
  border-radius:50%;
  border:1px solid rgba(28,155,225,.12);
  box-shadow:
    0 0 0 90px rgba(36,184,241,.03),
    0 0 0 180px rgba(36,184,241,.02);
  pointer-events:none;
}

.hero h1{
  color:#0a2440!important;
  text-shadow:none!important;
}

.hero h1 em,
.hero .gradient-text{
  background:linear-gradient(100deg,#147cca,#23d7df)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}

.hero-copy,
.hero-lead{
  color:#516e87!important;
}

.kicker,
.eyebrow{
  color:#087fb9!important;
}

.hero-mini,
.micro{
  color:#617d95!important;
}

.hero-mini span:before,
.micro span:before{
  color:#18b6d9!important;
}


/* ----------------------------------------------------------
   HERO SYSTEM / MACHINE
   ---------------------------------------------------------- */

.main-experience,
.hero-machine,
.system-panel{
  background:
    radial-gradient(circle at 60% 40%,rgba(45,198,250,.13),transparent 43%),
    rgba(255,255,255,.90)!important;
  border:1px solid rgba(33,128,187,.16)!important;
  color:#0d2942!important;
  box-shadow:
    0 35px 90px rgba(48,109,147,.18),
    inset 0 1px rgba(255,255,255,.9)!important;
}

.experience-head,
.experience-bottom,
.machine-header,
.machine-footer,
.panel-head{
  color:#597891!important;
}

.status{
  color:#00a977!important;
}

.core-ring,
.machine-center:before,
.machine-center:after{
  border-color:rgba(24,138,202,.15)!important;
}

.core-center,
.machine-core{
  background:
    radial-gradient(circle,#ffffff,#dff5ff)!important;
  border:1px solid rgba(21,145,210,.30)!important;
  box-shadow:
    0 0 70px rgba(48,180,236,.20)!important;
  color:#0c2944!important;
}

.core-center strong,
.machine-core strong{
  color:#0c2944!important;
}

.experience-chip,
.orbit-node,
.metric{
  color:#16334c!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(33,107,151,.13)!important;
  box-shadow:0 14px 35px rgba(48,109,147,.10)!important;
}

.experience-chip small,
.orbit-node span,
.metric small,
.metric span{
  color:#688299!important;
}


/* ----------------------------------------------------------
   MARQUEE / MOVING TECHNOLOGY BAND
   ---------------------------------------------------------- */

.marquee,
.ticker-section{
  background:#ffffff!important;
  border-block:1px solid rgba(15,80,120,.10)!important;
  color:#17354f!important;
  box-shadow:0 12px 35px rgba(31,91,129,.05);
}

.marquee-track span,
.ticker-track span{
  color:#385873!important;
}

.marquee-track span:after,
.ticker-track span:after{
  color:#13a9da!important;
}

.marquee-track,
.ticker-track{
  animation-duration:28s!important;
}


/* ----------------------------------------------------------
   GLOBAL SECTIONS
   ---------------------------------------------------------- */

.section,
.capabilities-section,
.numbers-section,
.work-section,
.industries-section,
.process-world,
.manifesto-section,
.contact-world,
.statement-section,
.contact-section,
.case-study,
.subpage{
  color:var(--tg-ink);
}

.light-section,
.pale-section,
.industries-section{
  background:
    radial-gradient(circle at 92% 10%,rgba(45,185,240,.07),transparent 25%),
    #f7fbff!important;
  color:var(--tg-ink)!important;
}

.work-home,
.work-section,
.statement-section,
.process-world,
.manifesto-section{
  background:
    radial-gradient(circle at 85% 15%,rgba(47,185,240,.11),transparent 30%),
    linear-gradient(180deg,#f4faff,#ffffff)!important;
  color:var(--tg-ink)!important;
}

.section-heading h2,
.section-intro h2,
.statement-layout h2,
.manifesto h2,
.contact-message h2{
  color:#0a2844!important;
}

.section-heading p,
.section-intro>p,
.statement-copy p,
.contact-message p{
  color:#637d93!important;
}

.dark-heading p{
  color:#637d93!important;
}


/* ----------------------------------------------------------
   CAPABILITY CARDS
   ---------------------------------------------------------- */

.capability-card,
.problem-card,
.industry-card,
.principle,
.contact-primary,
.contact-detail{
  background:
    linear-gradient(145deg,#ffffff,#f7fbfe)!important;
  color:#0d2942!important;
  border:1px solid rgba(17,90,134,.11)!important;
  box-shadow:0 14px 40px rgba(31,91,128,.06);
}

.capability-card:hover,
.industry-card:hover{
  transform:translateY(-8px) scale(1.01)!important;
  box-shadow:0 28px 65px rgba(37,102,143,.14)!important;
}

.capability-card h3,
.problem-card h3,
.industry-card h3{
  color:#0a2945!important;
}

.capability-card p,
.problem-card p,
.industry-card p{
  color:#687f92!important;
}


/* ----------------------------------------------------------
   CAPABILITY TABS / CLOUD
   ---------------------------------------------------------- */

.capability-stage{
  background:
    linear-gradient(145deg,#ffffff,#edf8ff)!important;
  border:1px solid rgba(20,109,162,.14)!important;
  box-shadow:var(--tg-shadow);
}

.cap-panel{
  color:#0d2942!important;
}

.cap-panel h3{
  color:#0b2943!important;
}

.service-cloud span{
  background:#ffffff!important;
  color:#36536d!important;
  border:1px solid rgba(12,82,125,.12)!important;
  box-shadow:0 8px 20px rgba(50,105,139,.06);
}

.cap-tab{
  background:#ffffff!important;
  color:#47667f!important;
  border:1px solid rgba(18,90,134,.13)!important;
}

.cap-tab.active,
.cap-tab:hover{
  background:linear-gradient(135deg,#1698eb,#36dfe8)!important;
  color:#04213a!important;
}


/* ----------------------------------------------------------
   BUILD / AUTOMATE / CONNECT / OPERATE
   ---------------------------------------------------------- */

.numbers-section{
  background:#ffffff!important;
  border-block:1px solid rgba(18,82,122,.10)!important;
}

.number-block{
  border-color:rgba(18,82,122,.10)!important;
}

.number-block strong{
  color:#078fd0!important;
}

.number-block span{
  color:#607a90!important;
}


/* ----------------------------------------------------------
   HOME WORK / PORTFOLIO CARDS
   ---------------------------------------------------------- */

.work-card,
.work-slide{
  background:#ffffff!important;
  color:#102d48!important;
  border:1px solid rgba(17,87,129,.12)!important;
  box-shadow:0 20px 55px rgba(34,92,128,.09);
}

.work-card:hover{
  box-shadow:0 30px 80px rgba(24,98,143,.15)!important;
}

.work-description h3,
.work-copy h3{
  color:#0a2946!important;
}

.work-description p,
.work-copy p,
.work-copy li{
  color:#607b91!important;
}

.work-art,
.work-visual{
  background:
    radial-gradient(circle at 70% 30%,rgba(32,193,244,.15),transparent 34%),
    linear-gradient(145deg,#eaf8ff,#ffffff)!important;
  border-color:rgba(15,97,146,.10)!important;
}


/* ----------------------------------------------------------
   LIGHT DASHBOARD MOCKUPS
   ---------------------------------------------------------- */

.mock-window{
  background:#ffffff!important;
  border:1px solid rgba(17,87,129,.16)!important;
  box-shadow:
    0 35px 70px rgba(38,94,128,.17)!important;
}

.mock-bar{
  background:#f5f9fc!important;
  border-color:rgba(13,81,124,.09)!important;
}

.mock-bar span:nth-child(1){background:#ff8d8d!important}
.mock-bar span:nth-child(2){background:#ffd465!important}
.mock-bar span:nth-child(3){background:#58dd9b!important}

.mock-side{
  background:
    linear-gradient(180deg,#0b3657,#0b2740)!important;
}

.mock-content{
  background:#f8fcff!important;
}

.mock-row i{
  background:#ffffff!important;
  border:1px solid rgba(17,88,132,.11)!important;
  box-shadow:0 8px 20px rgba(48,102,134,.07);
}

.mock-chart{
  background:
    linear-gradient(180deg,rgba(34,175,235,.17),transparent),
    repeating-linear-gradient(
      90deg,
      transparent 0 39px,
      rgba(22,92,134,.05) 40px
    )!important;
}


/* ----------------------------------------------------------
   PHONE / AI / RADAR VISUALS
   ---------------------------------------------------------- */

.phone-system div{
  color:#0b3656!important;
  background:#ffffff!important;
  border:1px solid rgba(15,111,165,.18)!important;
  box-shadow:0 18px 45px rgba(31,103,146,.13);
}

.phone-system span{
  color:#078fca!important;
}

.radar{
  border-color:rgba(16,119,178,.19)!important;
  background:
    radial-gradient(circle,#ffffff 0%,#eaf8ff 72%)!important;
  box-shadow:
    0 25px 65px rgba(34,112,156,.16);
}

.radar div{
  border-color:rgba(15,133,194,.20)!important;
}

.radar strong{
  width:72px;
  height:72px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#138eea,#29d9e4);
  color:#ffffff!important;
  box-shadow:0 0 45px rgba(23,163,222,.24);
}


/* ----------------------------------------------------------
   REALIZACJE PAGE
   ---------------------------------------------------------- */

.case-study,
.case-light{
  background:
    radial-gradient(circle at 85% 20%,rgba(44,188,241,.10),transparent 28%),
    #f8fcff!important;
  color:#102d47!important;
  border-bottom:1px solid rgba(17,89,132,.08);
}

.case-study:nth-of-type(even){
  background:
    radial-gradient(circle at 15% 25%,rgba(41,186,240,.10),transparent 28%),
    #eef8fe!important;
}

.case-study h2{
  color:#0b2a47!important;
}

.case-study h4,
.case-label{
  color:#078dc9!important;
}

.case-study p,
.case-study li,
.case-light p,
.case-light li{
  color:#607c93!important;
}

.large-art{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,rgba(34,187,239,.15),transparent 38%),
    linear-gradient(135deg,#eaf7ff,#ffffff)!important;
  border:1px solid rgba(21,105,157,.13)!important;
  box-shadow:0 30px 80px rgba(38,96,131,.12);
}

.large-art:before{
  content:"T&G";
  position:absolute;
  right:28px;
  bottom:18px;
  font-size:88px;
  font-weight:900;
  letter-spacing:-.08em;
  color:rgba(8,87,132,.04);
  pointer-events:none;
}


/* ----------------------------------------------------------
   FILL EMPTY CONTROL-CENTER VISUAL
   ---------------------------------------------------------- */

.control-art{
  min-height:520px!important;
}

.control-art:after{
  content:"SYSTEMS   AUTOMATION   TASKS   ALERTS";
  position:absolute;
  left:34px;
  right:34px;
  bottom:34px;
  padding:18px 22px;
  border-radius:14px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(15,91,136,.10);
  color:#517089;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-align:center;
  box-shadow:0 14px 35px rgba(34,90,124,.08);
}


/* ----------------------------------------------------------
   INDUSTRIES
   ---------------------------------------------------------- */

.industry-strip{
  border-color:rgba(19,82,122,.12)!important;
}

.industry-strip a{
  color:#12314a!important;
  border-color:rgba(19,82,122,.12)!important;
  background:rgba(255,255,255,.50);
  transition:.25s ease;
}

.industry-strip a:hover{
  background:#ffffff!important;
  transform:translateY(-5px);
  box-shadow:0 18px 45px rgba(37,94,128,.09);
}

.industry-page{
  background:#f7fbff!important;
}

.industry-page article{
  background:#ffffff!important;
  color:#0b2a45!important;
  box-shadow:0 16px 45px rgba(38,93,127,.07);
}


/* ----------------------------------------------------------
   SERVICES
   ---------------------------------------------------------- */

.service-page,
.service-stack{
  background:#f7fbff!important;
  color:#102d46!important;
}

.service-detail{
  border-color:rgba(17,82,122,.10)!important;
}

.service-detail h2{
  color:#0b2945!important;
}

.service-detail p{
  color:#647f94!important;
}

.service-detail li{
  background:#ffffff!important;
  color:#36536b!important;
  border:1px solid rgba(13,82,124,.11)!important;
  box-shadow:0 6px 18px rgba(42,92,124,.05);
}


/* ----------------------------------------------------------
   SUBPAGE HEROES
   ---------------------------------------------------------- */

.sub-hero,
.sub-hero.light-section,
.page-hero{
  background:
    radial-gradient(circle at 77% 22%,rgba(39,190,242,.17),transparent 28%),
    radial-gradient(circle at 20% 20%,rgba(60,150,245,.09),transparent 25%),
    linear-gradient(135deg,#ffffff,#eef9ff)!important;
  color:#0a2946!important;
}

.sub-hero h1,
.page-hero h1{
  color:#0a2946!important;
}

.sub-hero p,
.page-hero p{
  color:#617d94!important;
}

.sub-hero em{
  background:linear-gradient(100deg,#147fca,#25d8df);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}


/* ----------------------------------------------------------
   ABOUT
   ---------------------------------------------------------- */

.about-page{
  background:#f8fcff!important;
  color:#0d2a44!important;
}

.about-page h2{
  color:#0b2945!important;
}

.about-page p{
  color:#637d93!important;
}


/* ----------------------------------------------------------
   PROCESS / TIMELINE
   ---------------------------------------------------------- */

.timeline:before{
  background:rgba(12,97,147,.13)!important;
}

.timeline-progress{
  background:linear-gradient(#1399e9,#2ddbe5)!important;
  box-shadow:0 0 18px rgba(37,196,229,.35)!important;
}

.timeline-step{
  border-color:rgba(13,86,130,.10)!important;
}

.timeline-step:before{
  background:#ffffff!important;
  border-color:#14a7dd!important;
}

.timeline-step h3{
  color:#0b2a46!important;
}

.timeline-step p{
  color:#627d93!important;
}


/* ----------------------------------------------------------
   CONTACT
   ---------------------------------------------------------- */

.contact-section,
.contact-world,
.contact-page{
  background:
    radial-gradient(circle at 88% 15%,rgba(41,195,240,.14),transparent 30%),
    #ffffff!important;
  color:#102d47!important;
}

.contact-box,
.contact-card,
.contact-page-grid>*{
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(16,87,130,.12)!important;
  box-shadow:0 20px 55px rgba(36,93,127,.08);
}

.contact-box a,
.contact-action{
  color:#12314b!important;
  border-color:rgba(16,87,130,.10)!important;
}

.contact-box a:hover,
a.contact-action:hover{
  background:#ecf8ff!important;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.site-footer{
  background:
    linear-gradient(135deg,#eaf7ff,#ffffff)!important;
  color:#5f7c92!important;
  border-top:1px solid rgba(19,83,123,.10)!important;
}


/* ----------------------------------------------------------
   MOTION / PREMIUM INTERACTION
   ---------------------------------------------------------- */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.2,.7,.2,1);
}

.reveal.is-visible,
.reveal.visible{
  opacity:1;
  transform:none;
}

.work-card,
.capability-card,
.industry-card,
.contact-box,
.main-experience,
.hero-machine,
.large-art{
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease;
}

.main-experience,
.hero-machine{
  animation:tgFloat 6s ease-in-out infinite;
}

@keyframes tgFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

.core-center,
.machine-core{
  animation:tgPulse 4s ease-in-out infinite;
}

@keyframes tgPulse{
  0%,100%{
    box-shadow:0 0 45px rgba(33,175,231,.13)
  }
  50%{
    box-shadow:0 0 75px rgba(33,175,231,.28)
  }
}

.mock-window{
  animation:tgDashboard 7s ease-in-out infinite;
}

@keyframes tgDashboard{
  0%,100%{
    transform:perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(0)
  }
  50%{
    transform:perspective(900px) rotateX(1deg) rotateY(2deg) translateY(-7px)
  }
}

.radar{
  animation:tgRadar 9s linear infinite;
}

@keyframes tgRadar{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

.radar strong{
  animation:tgRadarReverse 9s linear infinite;
}

@keyframes tgRadarReverse{
  0%{transform:translate(-50%,-50%) rotate(0deg)}
  100%{transform:translate(-50%,-50%) rotate(-360deg)}
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media(max-width:900px){

  .main-experience,
  .hero-machine{
    animation:none;
  }

  .case-layout,
  .hero-layout{
    gap:45px!important;
  }

}

@media(max-width:700px){

  .hero h1{
    font-size:50px!important;
  }

  .large-art{
    min-height:350px!important;
  }

  .control-art{
    min-height:400px!important;
  }

}


/* ==========================================================
   T&G ABOUT — FULL COMPANY SCOPE
   ========================================================== */

.about-premium{
  background:#f7fbff;
  color:#0c2943;
}

.about-hero{
  position:relative;
  overflow:hidden;
  min-height:760px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 82% 28%,rgba(46,196,245,.20),transparent 28%),
    radial-gradient(circle at 15% 25%,rgba(65,147,244,.09),transparent 28%),
    linear-gradient(135deg,#ffffff,#edf8ff);
}

.about-hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:80px;
  align-items:center;
  padding:100px 0;
}

.about-hero h1{
  max-width:830px;
  margin:18px 0 28px;
  font-size:clamp(64px,7vw,105px);
  line-height:.91;
  letter-spacing:-.062em;
  color:#0a2946;
}

.about-hero h1 em,
.about-section-head h2 em{
  background:linear-gradient(100deg,#1382d0,#27d8df);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.about-hero-copy>p{
  max-width:760px;
  font-size:19px;
  line-height:1.7;
  color:#5d7890;
}

.about-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.light-button{
  color:#173954!important;
  border:1px solid rgba(10,82,126,.13)!important;
  background:#fff!important;
}


/* HERO BRAND STAGE */

.about-brand-stage{
  position:relative;
  min-height:530px;
  border:1px solid rgba(17,104,157,.13);
  border-radius:34px;
  background:
    radial-gradient(circle,#ffffff,#e9f7ff);
  box-shadow:0 35px 90px rgba(37,99,137,.15);
}

.about-brand-stage:before,
.about-brand-stage:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(25,144,205,.14);
}

.about-brand-stage:before{
  width:390px;
  height:390px;
}

.about-brand-stage:after{
  width:280px;
  height:280px;
}

.about-brand-core{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:170px;
  height:170px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#ffffff,#dff5ff);
  border:1px solid rgba(16,143,206,.25);
  box-shadow:0 20px 60px rgba(32,145,198,.18);
}

.about-brand-core small{
  color:#078bbf;
  font-size:28px;
  font-weight:900;
}

.about-brand-core strong,
.about-brand-core span,
.about-brand-core b,
.about-brand-core i{
  font-style:normal;
  font-size:9px;
  letter-spacing:.12em;
  color:#667f94;
}

.brand-satellite{
  position:absolute;
  z-index:4;
  width:108px;
  min-height:72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border-radius:15px;
  background:#fff;
  border:1px solid rgba(16,97,145,.12);
  box-shadow:0 15px 40px rgba(38,99,136,.10);
  color:#13334d;
  font-weight:900;
}

.brand-satellite small{
  font-size:9px;
  margin-top:4px;
  color:#72899d;
  font-weight:500;
}

.sat-one{
  top:45px;
  left:50%;
  transform:translateX(-50%);
}

.sat-two{
  right:28px;
  top:175px;
}

.sat-three{
  right:80px;
  bottom:40px;
}

.sat-four{
  left:28px;
  top:175px;
}

.sat-five{
  left:80px;
  bottom:40px;
}


/* MARQUEE */

.about-marquee{
  overflow:hidden;
  background:#ffffff;
  border-block:1px solid rgba(18,89,133,.10);
}

.about-marquee-track{
  width:max-content;
  display:flex;
  gap:52px;
  padding:23px 0;
  animation:aboutTicker 31s linear infinite;
}

.about-marquee-track span{
  position:relative;
  white-space:nowrap;
  color:#395c75;
  font-size:13px;
  font-weight:750;
}

.about-marquee-track span:after{
  content:"•";
  position:absolute;
  right:-29px;
  color:#13afdb;
}

@keyframes aboutTicker{
  to{
    transform:translateX(-50%);
  }
}


/* SECTIONS */

.about-section{
  padding:115px 0;
}

.about-section-head{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:90px;
  align-items:end;
  margin-bottom:60px;
}

.about-section-head h2{
  margin:15px 0 0;
  font-size:clamp(48px,5.5vw,76px);
  line-height:.98;
  letter-spacing:-.052em;
  color:#0a2945;
}

.about-section-head>p{
  max-width:590px;
  color:#647e93;
  line-height:1.7;
  font-size:17px;
}


/* CAPABILITY MAP */

.about-capabilities{
  background:#f7fbff;
}

.about-cap-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.about-cap{
  min-height:290px;
  padding:28px;
  display:flex;
  flex-direction:column;
  border-radius:19px;
  background:#fff;
  border:1px solid rgba(17,85,128,.10);
  box-shadow:0 13px 38px rgba(37,92,126,.055);
  transition:.3s ease;
}

.about-cap:hover{
  transform:translateY(-7px);
  box-shadow:0 26px 65px rgba(32,97,137,.13);
}

.about-cap>span{
  color:#078fc5;
  font-size:11px;
  font-weight:900;
}

.about-cap h3{
  margin:auto 0 12px;
  color:#0c2b47;
  font-size:22px;
  line-height:1.08;
  letter-spacing:-.025em;
}

.about-cap p{
  margin:0;
  color:#667f93;
  font-size:14px;
  line-height:1.55;
}


/* DELIVERY */

.about-delivery{
  background:
    radial-gradient(circle at 90% 5%,rgba(40,192,240,.10),transparent 28%),
    #eaf6fc;
}

.delivery-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}

.delivery-card{
  min-height:260px;
  padding:27px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(17,91,135,.11);
  box-shadow:0 15px 40px rgba(37,93,126,.06);
}

.delivery-card b{
  color:#078fc4;
  font-size:11px;
}

.delivery-card h3{
  margin:70px 0 12px;
  color:#0b2944;
  font-size:21px;
}

.delivery-card p{
  color:#657e93;
  line-height:1.55;
  font-size:14px;
}


/* ENGINEERING */

.about-engineering{
  background:#ffffff;
}

.engineering-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:100px;
}

.engineering-message h2{
  margin:16px 0 22px;
  font-size:clamp(50px,5vw,72px);
  line-height:.96;
  letter-spacing:-.05em;
  color:#0a2945;
}

.engineering-message p{
  color:#637e94;
  font-size:18px;
  line-height:1.7;
}

.engineering-message a{
  display:inline-block;
  margin-top:22px;
  color:#078fc8;
  font-weight:800;
}

.engineering-path{
  border-top:1px solid rgba(15,84,126,.11);
}

.engineering-path>div{
  display:grid;
  grid-template-columns:60px 180px 1fr;
  gap:18px;
  padding:24px 0;
  border-bottom:1px solid rgba(15,84,126,.10);
  align-items:center;
}

.engineering-path span{
  color:#078fc4;
  font-size:11px;
  font-weight:900;
}

.engineering-path strong{
  color:#0b2945;
  font-size:19px;
}

.engineering-path small{
  color:#6b8295;
}


/* FINAL CTA */

.about-final{
  padding:40px 0 110px;
  background:#fff;
}

.about-final-box{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:80px;
  align-items:center;
  padding:62px;
  border-radius:26px;
  background:
    radial-gradient(circle at 90% 20%,rgba(43,208,238,.25),transparent 30%),
    linear-gradient(135deg,#e8f6ff,#ffffff);
  border:1px solid rgba(20,110,164,.12);
  box-shadow:0 25px 70px rgba(33,95,133,.10);
}

.about-final h2{
  margin:15px 0 0;
  color:#092a46;
  font-size:clamp(43px,4.5vw,64px);
  line-height:.98;
  letter-spacing:-.045em;
}

.about-final p{
  color:#617b91;
  font-size:18px;
  line-height:1.7;
  margin-bottom:25px;
}


/* RESPONSIVE */

@media(max-width:1100px){

  .about-cap-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .delivery-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:900px){

  .about-hero-grid,
  .about-section-head,
  .engineering-grid,
  .about-final-box{
    grid-template-columns:1fr;
  }

  .about-brand-stage{
    max-width:700px;
  }

}

@media(max-width:650px){

  .about-hero{
    min-height:auto;
  }

  .about-hero-grid{
    padding:75px 0;
  }

  .about-hero h1{
    font-size:52px;
  }

  .about-cap-grid,
  .delivery-grid{
    grid-template-columns:1fr;
  }

  .about-cap{
    min-height:240px;
  }

  .engineering-path>div{
    grid-template-columns:45px 1fr;
  }

  .engineering-path small{
    grid-column:2;
  }

  .about-final-box{
    padding:35px 25px;
  }

}


/* =========================================================
   T&G ABOUT — EDITORIAL GLOBAL TECH
   ========================================================= */

.tg-about{
  background:#f7fbff;
  color:#0b2946;
}

.tg-about-hero{
  position:relative;
  min-height:760px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 20%,rgba(53,199,245,.22),transparent 28%),
    radial-gradient(circle at 15% 20%,rgba(71,145,240,.09),transparent 25%),
    linear-gradient(135deg,#ffffff,#eef9ff);
}

.tg-about-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:80px;
  align-items:center;
  padding:100px 0;
}

.tg-about-copy h1{
  font-size:clamp(62px,7vw,102px);
  line-height:.91;
  letter-spacing:-.06em;
  margin:18px 0 28px;
  color:#0a2946;
}

.tg-about-copy h1 em{
  background:linear-gradient(100deg,#147fc9,#28d9df);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.tg-about-copy>p{
  max-width:760px;
  font-size:19px;
  line-height:1.7;
  color:#5e7990;
}

.tg-about-visual{
  min-height:520px;
  display:grid;
  place-items:center;
}

.tg-brand-orbit{
  position:relative;
  width:470px;
  height:470px;
  border-radius:50%;
  border:1px solid rgba(18,132,194,.13);
  box-shadow:
    0 0 0 72px rgba(25,168,222,.035),
    0 0 0 145px rgba(25,168,222,.02);
}

.tg-brand-orbit:before{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  border-radius:50%;
  border:1px solid rgba(18,132,194,.13);
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.tg-brand-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:165px;
  height:165px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(16,124,184,.16);
  box-shadow:0 25px 70px rgba(31,118,164,.17);
}

.tg-brand-center span{
  font-size:42px;
  font-weight:900;
  color:#0b2b47;
}

.tg-brand-center small{
  font-size:8px;
  letter-spacing:.12em;
  color:#678198;
}

.tg-node{
  position:absolute;
  min-width:110px;
  padding:14px 16px;
  text-align:center;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(17,94,140,.12);
  color:#14344e;
  font-size:11px;
  font-weight:900;
  box-shadow:0 14px 35px rgba(35,99,136,.10);
}

.n1{top:10px;left:50%;transform:translateX(-50%)}
.n2{right:-20px;top:150px}
.n3{right:35px;bottom:35px}
.n4{left:35px;bottom:35px}
.n5{left:-20px;top:150px}


/* RAIL */

.tg-scope-rail{
  overflow:hidden;
  background:#fff;
  border-block:1px solid rgba(19,89,132,.10);
}

.tg-scope-track{
  width:max-content;
  display:flex;
  gap:52px;
  padding:22px 0;
  animation:tgScope 30s linear infinite;
}

.tg-scope-track span{
  position:relative;
  white-space:nowrap;
  color:#385b74;
  font-size:13px;
  font-weight:800;
}

.tg-scope-track span:after{
  content:"•";
  position:absolute;
  right:-29px;
  color:#15a9d6;
}

@keyframes tgScope{
  to{transform:translateX(-50%)}
}


/* EDITORIAL */

.tg-about-section{
  padding:110px 0;
}

.tg-white{
  background:#fff;
}

.tg-bluewash{
  background:
    radial-gradient(circle at 90% 10%,rgba(41,185,240,.11),transparent 28%),
    #eef8fd;
}

.tg-editorial-head{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:90px;
  align-items:end;
  margin-bottom:55px;
}

.tg-editorial-head h2{
  max-width:850px;
  margin:15px 0 0;
  font-size:clamp(47px,5.3vw,74px);
  line-height:.98;
  letter-spacing:-.05em;
  color:#0b2945;
}

.tg-editorial-head>p{
  max-width:580px;
  color:#647e93;
  font-size:18px;
  line-height:1.7;
}


/* 3 PILLARS */

.tg-three-pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
}

.tg-three-pillars article{
  min-height:300px;
  padding:31px;
  border-radius:20px;
  background:linear-gradient(145deg,#f7fbff,#ffffff);
  border:1px solid rgba(17,87,130,.10);
  box-shadow:0 16px 45px rgba(35,91,125,.06);
}

.tg-three-pillars span{
  color:#078fc5;
  font-size:11px;
  font-weight:900;
}

.tg-three-pillars h3{
  margin:95px 0 12px;
  font-size:27px;
  color:#0b2945;
}

.tg-three-pillars p{
  color:#657e92;
  line-height:1.6;
}


/* 4 GROUPS */

.tg-four{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:13px;
}

.tg-four-card{
  min-height:365px;
  padding:34px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(15,92,137,.11);
  box-shadow:0 17px 50px rgba(35,91,127,.07);
  transition:.3s;
}

.tg-four-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 65px rgba(29,103,147,.13);
}

.tg-four-card>b{
  color:#078fc7;
  font-size:12px;
  letter-spacing:.13em;
}

.tg-four-card h3{
  margin:65px 0 14px;
  color:#0a2945;
  font-size:32px;
  letter-spacing:-.035em;
}

.tg-four-card p{
  color:#637e93;
  line-height:1.65;
}

.tg-four-card div{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:24px;
}

.tg-four-card div span{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(14,87,131,.11);
  color:#45677f;
  font-size:11px;
  background:#f8fcff;
}

.tg-center-link{
  text-align:center;
  margin-top:35px;
}

.tg-center-link a{
  color:#078fc4;
  font-weight:800;
}


/* PROOF */

.tg-proof-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
}

.tg-proof{
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(17,87,130,.11);
  box-shadow:0 16px 45px rgba(36,91,124,.07);
  transition:.3s;
}

.tg-proof:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 65px rgba(35,101,140,.13);
}

.tg-proof-visual{
  min-height:270px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at center,rgba(39,188,237,.17),transparent 45%),
    linear-gradient(145deg,#eaf7ff,#fff);
}

.fake-ui{
  width:76%;
  min-height:170px;
  padding:18px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(16,91,136,.12);
  box-shadow:0 24px 55px rgba(31,93,130,.13);
}

.fake-ui i{
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:4px;
  border-radius:50%;
  background:#60bddf;
}

.fake-ui strong{
  display:block;
  margin:24px 0 18px;
  color:#0b2945;
}

.fake-ui span{
  display:block;
  height:65px;
  border-radius:9px;
  background:
    linear-gradient(180deg,rgba(35,177,233,.16),transparent);
}

.voice-flow{
  display:flex;
  align-items:center;
  gap:10px;
}

.voice-flow b{
  padding:18px;
  border-radius:14px;
  background:#fff;
  color:#12344e;
  border:1px solid rgba(15,91,137,.12);
  box-shadow:0 12px 30px rgba(38,94,128,.09);
}

.voice-flow i{
  font-style:normal;
  color:#0aa7d4;
}

.control-mini{
  position:relative;
  width:190px;
  height:190px;
  border-radius:50%;
  border:1px solid rgba(12,119,177,.17);
  display:grid;
  place-items:center;
}

.control-mini i{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(12,119,177,.16);
}

.control-mini i:nth-child(2){width:145px;height:145px}
.control-mini i:nth-child(3){width:100px;height:100px}
.control-mini i:nth-child(4){width:55px;height:55px}

.control-mini span{
  z-index:2;
  font-weight:900;
  color:#0b2945;
}

.tg-proof-copy{
  padding:28px;
}

.tg-proof-copy small{
  color:#078fc4;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.tg-proof-copy h3{
  margin:11px 0 22px;
  color:#0b2945;
  font-size:25px;
  line-height:1.08;
}

.tg-proof-copy>span{
  color:#078fc5;
  font-size:12px;
  font-weight:800;
}


/* DELIVERY */

.tg-delivery{
  background:
    radial-gradient(circle at 85% 10%,rgba(41,188,238,.12),transparent 28%),
    #edf8fd;
}

.tg-delivery-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px;
  align-items:center;
}

.tg-delivery h2{
  margin:15px 0 20px;
  font-size:clamp(50px,5vw,72px);
  line-height:.96;
  letter-spacing:-.05em;
  color:#0b2945;
}

.tg-delivery p{
  color:#647e93;
  line-height:1.7;
  font-size:18px;
}

.tg-path{
  border-top:1px solid rgba(17,88,132,.11);
}

.tg-path div{
  display:grid;
  grid-template-columns:60px 1fr;
  padding:22px 0;
  border-bottom:1px solid rgba(17,88,132,.10);
}

.tg-path span{
  color:#078fc5;
  font-size:11px;
  font-weight:900;
}

.tg-path strong{
  color:#0b2945;
  font-size:20px;
}


/* CTA */

.tg-about-cta{
  padding:45px 0 110px;
  background:#fff;
}

.tg-about-cta-box{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:80px;
  align-items:center;
  padding:62px;
  border-radius:26px;
  background:
    radial-gradient(circle at 88% 15%,rgba(42,204,239,.24),transparent 30%),
    linear-gradient(135deg,#e9f7ff,#fff);
  border:1px solid rgba(18,104,157,.12);
  box-shadow:0 28px 75px rgba(33,96,134,.10);
}

.tg-about-cta h2{
  margin:15px 0 0;
  color:#0b2945;
  font-size:clamp(43px,4.5vw,64px);
  line-height:.98;
  letter-spacing:-.045em;
}

.tg-about-cta p{
  color:#627d93;
  font-size:18px;
  line-height:1.7;
}


/* RESPONSIVE */

@media(max-width:1000px){

  .tg-about-hero-grid,
  .tg-editorial-head,
  .tg-delivery-grid,
  .tg-about-cta-box{
    grid-template-columns:1fr;
  }

  .tg-three-pillars,
  .tg-proof-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:750px){

  .tg-about-hero{
    min-height:auto;
  }

  .tg-about-hero-grid{
    padding:75px 0;
  }

  .tg-about-copy h1{
    font-size:52px;
  }

  .tg-brand-orbit{
    width:330px;
    height:330px;
  }

  .tg-node{
    min-width:82px;
    padding:10px;
    font-size:9px;
  }

  .tg-four{
    grid-template-columns:1fr;
  }

  .tg-about-cta-box{
    padding:35px 25px;
  }

}