/*
Theme Name: T&G Technology
Author: T&G Technology Solutions
Version: 2.0.0
*/

:root{
--ink:#07111d;
--ink2:#0a1725;
--blue:#08aeea;
--cyan:#38e2f2;
--white:#ffffff;
--snow:#f5f8fb;
--pale:#eaf1f6;
--text:#0b1723;
--muted:#637486;
--darkmuted:#9eb0c1;
--line:rgba(7,17,29,.12);
--darkline:rgba(255,255,255,.10);
--shell:1360px;
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
background:var(--ink);
color:white;
-webkit-font-smoothing:antialiased;
}

a{
text-decoration:none;
color:inherit;
}

.shell{
width:min(calc(100% - 64px),var(--shell));
margin-inline:auto;
}


/* NAV */

.site-header{
position:sticky;
top:0;
z-index:100;
background:rgba(5,12,20,.86);
border-bottom:1px solid var(--darkline);
backdrop-filter:blur(18px);
}

.nav{
height:82px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
}

.brand{
display:flex;
align-items:center;
gap:13px;
}

.brand-symbol{
width:43px;
height:43px;
display:grid;
place-items:center;
background:linear-gradient(135deg,#29b7f5,#45e4ef);
border-radius:12px;
color:#04111c;
font-weight:900;
}

.brand-name{
font-size:16px;
font-weight:800;
}

.brand-name small{
display:block;
font-size:9px;
margin-top:3px;
letter-spacing:.16em;
color:#7d91a5;
}

.desktop-nav{
display:flex;
align-items:center;
gap:29px;
font-size:14px;
color:#bdcad5;
}

.desktop-nav>a:not(.nav-cta):hover{
color:white;
}

.nav-cta{
padding:14px 21px;
border-radius:11px;
font-weight:800;
color:#06131d;
background:linear-gradient(135deg,#4dbdff,#43e5ef);
}


/* TYPOGRAPHY */

.kicker{
display:block;
font-size:11px;
font-weight:900;
letter-spacing:.18em;
text-transform:uppercase;
color:#6edfff;
}

.dark-kicker{
color:#087da5;
}

em{
font-style:normal;
color:#0b9ac7;
}


/* HERO */

.hero{
position:relative;
overflow:hidden;
min-height:790px;
display:flex;
align-items:center;
background:
radial-gradient(circle at 15% 25%,rgba(27,164,237,.20),transparent 31%),
radial-gradient(circle at 85% 65%,rgba(23,215,222,.11),transparent 32%),
linear-gradient(135deg,#07111d,#0a1b2c 65%,#07111d);
}

.hero:before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:56px 56px;
mask-image:linear-gradient(to bottom,black,transparent);
}

.hero-light{
position:absolute;
border-radius:50%;
filter:blur(3px);
}

.hero-light-a{
width:800px;
height:800px;
right:-250px;
top:-320px;
border:1px solid rgba(69,205,255,.13);
}

.hero-light-b{
width:1050px;
height:1050px;
right:-380px;
top:-420px;
border:1px solid rgba(69,205,255,.08);
}

.hero-layout{
position:relative;
z-index:3;
display:grid;
grid-template-columns:1.03fr .97fr;
gap:80px;
align-items:center;
padding:105px 0;
}

.hero h1{
font-size:clamp(63px,7vw,107px);
line-height:.9;
letter-spacing:-.064em;
margin:21px 0 31px;
max-width:800px;
}

.hero h1 em{
background:linear-gradient(100deg,#9bddff,#43e4ef);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}

.hero-copy{
max-width:720px;
font-size:20px;
line-height:1.7;
color:#a6bbce;
}

.hero-actions{
display:flex;
gap:12px;
margin-top:32px;
flex-wrap:wrap;
}

.button{
min-height:54px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 24px;
border-radius:12px;
font-weight:800;
}

.button.primary{
background:linear-gradient(135deg,#4ab8ff,#43e5ee);
color:#04121d;
}

.button.secondary{
border:1px solid var(--darkline);
background:rgba(255,255,255,.04);
}

.hero-mini{
display:flex;
gap:20px;
flex-wrap:wrap;
margin-top:31px;
font-size:12px;
color:#7089a0;
}

.hero-mini span:before{
content:"●";
font-size:7px;
color:#42e4bf;
margin-right:8px;
}


/* EXPERIENCE */

.main-experience{
min-height:570px;
padding:24px;
border:1px solid rgba(85,204,255,.20);
border-radius:28px;
background:
linear-gradient(145deg,rgba(16,31,47,.93),rgba(6,13,22,.94));
box-shadow:0 50px 100px rgba(0,0,0,.38);
}

.experience-head,
.experience-bottom{
display:flex;
justify-content:space-between;
color:#718ba0;
font-size:10px;
letter-spacing:.12em;
}

.experience-head b{
color:#67e8be;
}

.experience-core{
height:445px;
position:relative;
}

.core-ring{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:1px solid rgba(74,209,255,.12);
border-radius:50%;
}

.ring-one{width:410px;height:410px}
.ring-two{width:305px;height:305px}
.ring-three{width:205px;height:205px}

.core-center{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:145px;
height:145px;
border-radius:50%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background:radial-gradient(circle,#153e57,#0c1a28);
border:1px solid #1d94bd;
box-shadow:0 0 60px rgba(34,193,236,.20);
}

.core-center small,
.core-center span{
font-size:9px;
letter-spacing:.13em;
color:#55dfff;
}

.core-center strong{
font-size:35px;
margin:3px 0;
}

.experience-chip{
position:absolute;
width:98px;
padding:14px;
border-radius:13px;
text-align:center;
font-weight:800;
font-size:12px;
border:1px solid var(--darkline);
background:#0a1724;
box-shadow:0 13px 30px rgba(0,0,0,.25);
}

.experience-chip small{
display:block;
font-weight:400;
font-size:9px;
margin-top:4px;
color:#7891a6;
}

.chip-ai{top:40px;left:50%;transform:translateX(-50%)}
.chip-saas{right:10px;top:170px}
.chip-voice{right:65px;bottom:35px}
.chip-api{left:10px;top:170px}
.chip-crm{left:65px;bottom:35px}


/* MARQUEE */

.marquee{
overflow:hidden;
border-block:1px solid var(--darkline);
background:#07101a;
}

.marquee-track{
width:max-content;
display:flex;
gap:48px;
padding:22px 0;
animation:marquee 34s linear infinite;
}

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

.marquee-track span:after{
content:"•";
position:absolute;
right:-27px;
color:#38dcf2;
}

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


/* SECTIONS */

.section{
padding:110px 0;
}

.light-section{
background:var(--snow);
color:var(--text);
}

.pale-section{
background:var(--pale);
color:var(--text);
}

.section-heading{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:90px;
align-items:end;
margin-bottom:55px;
}

.section-heading h2{
font-size:clamp(47px,5.6vw,76px);
line-height:.98;
letter-spacing:-.052em;
margin:14px 0 0;
}

.section-heading p{
font-size:18px;
line-height:1.65;
color:var(--muted);
max-width:570px;
}

.dark-heading p{
color:var(--darkmuted);
}


/* CAPABILITIES */

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

.capability-card{
min-height:335px;
padding:30px;
border-radius:20px;
background:white;
border:1px solid rgba(9,31,46,.10);
display:flex;
flex-direction:column;
transition:
transform .25s ease,
box-shadow .25s ease,
background .25s ease;
}

.capability-card:hover{
transform:translateY(-7px);
box-shadow:0 28px 65px rgba(24,65,91,.12);
background:#fbfeff;
}

.capability-card>span{
color:#049bc9;
font-weight:900;
font-size:12px;
}

.capability-card h3{
font-size:27px;
letter-spacing:-.032em;
margin:auto 0 13px;
}

.capability-card p{
color:#637483;
line-height:1.55;
margin:0 0 22px;
}

.capability-card b{
font-size:13px;
color:#087fa8;
}

.section-more{
margin-top:32px;
font-weight:800;
}

.section-more a{
border-bottom:1px solid currentColor;
padding-bottom:4px;
}


/* WORK */

.work-home{
background:
radial-gradient(circle at 85% 12%,rgba(33,175,229,.09),transparent 30%),
#07111d;
}

.featured-work{
display:grid;
grid-template-columns:1.3fr .7fr;
gap:14px;
}

.work-card{
border:1px solid var(--darkline);
border-radius:22px;
overflow:hidden;
background:#0b1826;
transition:transform .3s ease,border-color .3s ease;
}

.work-card:hover{
transform:translateY(-5px);
border-color:rgba(66,215,255,.32);
}

.work-large{
grid-row:span 2;
}

.work-art{
min-height:280px;
display:grid;
place-items:center;
overflow:hidden;
background:
radial-gradient(circle,rgba(23,164,222,.13),transparent 55%),
#07131e;
}

.work-large .work-art{
min-height:430px;
}

.work-description{
padding:29px;
}

.work-description small{
color:#4edfff;
font-weight:900;
font-size:10px;
letter-spacing:.13em;
}

.work-description h3{
font-size:29px;
line-height:1.08;
letter-spacing:-.035em;
margin:13px 0 12px;
}

.work-description p{
color:#91a7b9;
line-height:1.55;
}

.work-description strong{
display:block;
margin-top:20px;
color:#6bdfff;
font-size:13px;
}


/* MOCKUPS */

.mock-window{
width:78%;
border:1px solid rgba(255,255,255,.14);
border-radius:14px;
background:#0b1825;
box-shadow:0 30px 60px rgba(0,0,0,.35);
overflow:hidden;
transform:perspective(900px) rotateX(3deg) rotateY(-4deg);
}

.mock-bar{
height:38px;
display:flex;
align-items:center;
gap:6px;
padding:0 13px;
border-bottom:1px solid var(--darkline);
}

.mock-bar span{
width:7px;
height:7px;
border-radius:50%;
background:#425466;
}

.mock-dashboard{
display:grid;
grid-template-columns:20% 80%;
min-height:250px;
}

.mock-side{
border-right:1px solid var(--darkline);
background:#08131e;
}

.mock-content{
padding:20px;
}

.mock-row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
}

.mock-row i{
height:53px;
border:1px solid var(--darkline);
border-radius:8px;
background:#101f2e;
}

.mock-row.small{
grid-template-columns:repeat(4,1fr);
}

.mock-row.small i{
height:31px;
}

.mock-chart{
height:105px;
margin:12px 0;
border-radius:8px;
background:
linear-gradient(180deg,rgba(40,190,241,.14),transparent),
repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.035) 40px);
}

.phone-system{
display:flex;
align-items:center;
gap:15px;
font-weight:900;
}

.phone-system div{
width:76px;
height:76px;
display:grid;
place-items:center;
border-radius:18px;
border:1px solid rgba(69,211,255,.23);
background:#102536;
}

.phone-system span{
color:#55dcff;
}

.radar{
width:190px;
height:190px;
position:relative;
border:1px solid rgba(67,217,255,.12);
border-radius:50%;
}

.radar div{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:1px solid rgba(67,217,255,.17);
border-radius:50%;
}

.radar div:nth-child(1){width:145px;height:145px}
.radar div:nth-child(2){width:100px;height:100px}
.radar div:nth-child(3){width:55px;height:55px}

.radar strong{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}


/* INDUSTRIES */

.industry-strip{
display:grid;
grid-template-columns:repeat(5,1fr);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}

.industry-strip a{
min-height:210px;
padding:25px;
border-right:1px solid var(--line);
display:flex;
flex-direction:column;
justify-content:space-between;
transition:background .2s;
}

.industry-strip a:last-child{
border-right:0;
}

.industry-strip a:hover{
background:white;
}

.industry-strip strong{
color:#079ac4;
font-size:11px;
}

.industry-strip span{
font-size:18px;
font-weight:800;
}


/* STATEMENT */

.statement-section{
background:#07111d;
}

.statement-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:100px;
align-items:center;
}

.statement-layout h2{
font-size:clamp(53px,6vw,84px);
line-height:.96;
letter-spacing:-.055em;
margin:17px 0 0;
}

.statement-copy p{
font-size:19px;
line-height:1.7;
color:#9eb1c2;
}

.statement-tags{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:27px 0;
}

.statement-tags span{
padding:9px 13px;
border:1px solid var(--darkline);
border-radius:999px;
color:#9cb0c2;
font-size:11px;
}

.statement-copy a{
color:#58dcff;
font-weight:800;
}


/* CONTACT */

.contact-section{
background:white;
color:var(--text);
}

.contact-section .kicker{
color:#078caf;
}

.contact-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
align-items:center;
}

.contact-layout h2{
font-size:clamp(50px,5.3vw,73px);
line-height:.98;
letter-spacing:-.05em;
margin:15px 0 20px;
}

.contact-layout p{
color:var(--muted);
font-size:18px;
line-height:1.65;
}

.contact-box{
border:1px solid var(--line);
border-radius:20px;
overflow:hidden;
}

.contact-box a{
display:block;
padding:26px;
border-bottom:1px solid var(--line);
transition:background .2s;
}

.contact-box a:last-child{
border-bottom:0;
}

.contact-box a:hover{
background:#f2f8fb;
}

.contact-box small{
display:block;
font-size:9px;
font-weight:900;
letter-spacing:.14em;
color:#708190;
margin-bottom:8px;
}

.contact-box strong{
font-size:18px;
}


/* SUBPAGES */

.sub-hero{
padding:135px 0 110px;
background:
radial-gradient(circle at 80% 10%,rgba(21,171,231,.13),transparent 30%),
#07111d;
}

.sub-hero.light-section{
background:var(--snow);
}

.sub-hero h1{
font-size:clamp(65px,7vw,105px);
line-height:.9;
letter-spacing:-.06em;
margin:20px 0 30px;
max-width:980px;
}

.sub-hero p{
max-width:750px;
font-size:20px;
line-height:1.7;
color:#97adbf;
}

.sub-hero.light-section p{
color:var(--muted);
}


/* SERVICES */

.service-page{
padding-bottom:120px;
}

.service-stack{
border-top:1px solid var(--line);
}

.service-detail{
display:grid;
grid-template-columns:100px 1fr;
gap:30px;
padding:55px 0;
border-bottom:1px solid var(--line);
}

.service-detail>span{
color:#079bc4;
font-weight:900;
}

.service-detail h2{
font-size:40px;
letter-spacing:-.04em;
margin:0 0 15px;
}

.service-detail p{
max-width:800px;
color:var(--muted);
font-size:17px;
line-height:1.6;
}

.service-detail ul{
display:flex;
flex-wrap:wrap;
gap:8px;
padding:0;
list-style:none;
margin-top:25px;
}

.service-detail li{
padding:9px 13px;
border-radius:999px;
border:1px solid var(--line);
font-size:12px;
}


/* CASE STUDIES */

.case-study{
padding:110px 0;
background:#07111d;
}

.case-light{
background:var(--snow);
color:var(--text);
}

.case-layout{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:80px;
align-items:center;
}

.case-layout.reverse .case-visual{
order:2;
}

.large-art{
min-height:500px;
border:1px solid var(--darkline);
border-radius:22px;
}

.case-light .large-art{
border-color:var(--line);
}

.case-label{
color:#4edfff;
font-size:10px;
font-weight:900;
letter-spacing:.14em;
}

.case-light .case-label{
color:#0888ae;
}

.case-study h2{
font-size:47px;
line-height:1.02;
letter-spacing:-.045em;
margin:15px 0 30px;
}

.case-study h4{
margin:25px 0 7px;
font-size:12px;
letter-spacing:.1em;
text-transform:uppercase;
color:#55dfff;
}

.case-light h4{
color:#087fa5;
}

.case-study p,
.case-study li{
color:#96aabc;
line-height:1.6;
}

.case-light p,
.case-light li{
color:var(--muted);
}


/* INDUSTRY PAGE */

.industry-page{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
padding-bottom:120px;
}

.industry-page article{
min-height:280px;
padding:32px;
background:white;
border:1px solid var(--line);
border-radius:18px;
}

.industry-page span{
color:#079ac3;
font-weight:900;
font-size:11px;
}

.industry-page h2{
margin:75px 0 12px;
font-size:30px;
}

.industry-page p{
color:var(--muted);
line-height:1.6;
}


/* ABOUT */

.about-page{
padding:110px 0;
}

.about-page-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:100px;
}

.about-page h2{
font-size:60px;
letter-spacing:-.05em;
line-height:1;
margin:0;
}

.about-page p{
font-size:19px;
line-height:1.7;
color:var(--muted);
}


/* CONTACT PAGE */

.contact-page{
padding:110px 0;
background:white;
color:var(--text);
}

.contact-page-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.contact-page-grid>*{
padding:35px;
border:1px solid var(--line);
border-radius:17px;
}

.contact-page-grid small{
display:block;
font-size:9px;
font-weight:900;
letter-spacing:.15em;
color:#758693;
margin-bottom:15px;
}

.contact-page-grid strong{
font-size:23px;
}


/* MOTION */

.reveal{
opacity:0;
transform:translateY(22px);
transition:
opacity .65s ease,
transform .65s ease;
}

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


/* FOOTER */

.site-footer{
background:#050b12;
border-top:1px solid var(--darkline);
padding:38px 0;
color:#758da1;
font-size:12px;
}

.footer-grid{
display:flex;
justify-content:space-between;
gap:20px;
}


/* RESPONSIVE */

@media(max-width:1050px){

.hero-layout,
.section-heading,
.statement-layout,
.contact-layout,
.case-layout,
.about-page-grid{
grid-template-columns:1fr;
}

.hero-experience{
max-width:700px;
}

.capability-grid{
grid-template-columns:1fr 1fr;
}

.featured-work{
grid-template-columns:1fr;
}

.work-large{
grid-row:auto;
}

.industry-strip{
grid-template-columns:1fr;
}

.industry-strip a{
min-height:100px;
border-right:0;
border-bottom:1px solid var(--line);
}

.desktop-nav>a:not(.nav-cta){
display:none;
}

}

@media(max-width:700px){

.shell{
width:min(calc(100% - 28px),var(--shell));
}

.nav{
height:70px;
}

.brand-name{
display:none;
}

.hero{
min-height:auto;
}

.hero-layout{
padding:75px 0;
}

.hero h1{
font-size:53px;
}

.hero-copy{
font-size:17px;
}

.main-experience{
min-height:470px;
}

.experience-core{
height:360px;
}

.ring-one{width:320px;height:320px}
.ring-two{width:240px;height:240px}
.ring-three{width:165px;height:165px}

.experience-chip{
width:80px;
padding:10px;
}

.chip-saas{right:0}
.chip-api{left:0}
.chip-voice{right:28px}
.chip-crm{left:28px}

.section{
padding:78px 0;
}

.section-heading{
gap:28px;
}

.section-heading h2{
font-size:46px;
}

.capability-grid,
.industry-page,
.contact-page-grid{
grid-template-columns:1fr;
}

.capability-card{
min-height:280px;
}

.statement-layout h2{
font-size:50px;
}

.sub-hero{
padding:85px 0 65px;
}

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

.service-detail{
grid-template-columns:1fr;
}

.case-layout.reverse .case-visual{
order:initial;
}

.large-art{
min-height:340px;
}

.mock-window{
width:90%;
}

}