/*
Theme Name: Synstech
Theme URI: https://synstech.com.au
Author: Synstech
Description: Synstech enterprise technology consulting website.
Version: 1.1.0
License: Private
Text Domain: synstech
*/

/* ── Reset Elementor / WP interference ── */
body.dialog-body,
body.dialog-buttons-body {
  overflow: visible !important;
  overflow-y: auto !important;
}
body {
  overflow-x: hidden !important;
}
/* Remove WP default margins */
body.wp-theme-synstech-theme { margin: 0; padding: 0; }
/* Disable Elementor dialog backdrop */
.elementor-templates-modal__backdrop { display: none !important; }

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=Inter:ital,wght@0,300;0,400;0,500;1,300&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#F2F2F5;
--bg2:#EBEBEF;
--surface:#FFFFFF;
--ink:#0C0C14;
--ink2:#1A1A26;
--mid:#65657A;
--dim:#9898AE;
--border:#E0E0EA;
--border2:#C8C8D8;
--accent:#3B3BFF;
--accent2:#6060FF;
--accent-dim:rgba(59,59,255,0.09);
--accent-glow:rgba(59,59,255,0.18);
--r-sm:8px;
--r-md:14px;
--r-lg:20px;
--r-xl:28px;
--r-pill:999px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}

nav{
background:rgba(242,242,245,0.88);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--border);
padding:0 48px;height:62px;
display:flex;align-items:center;justify-content:space-between;
position:sticky;top:0;z-index:100;
}
.n-logo{font-family:'Syne',sans-serif;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:0.01em}
.n-links{display:flex;gap:30px}
.n-links a{font-size:13px;font-weight:400;color:var(--mid);transition:color .15s}
.n-links a:hover{color:var(--ink)}
.n-btn{
font-size:12px;font-weight:500;letter-spacing:0.04em;
color:var(--surface);background:var(--ink);
padding:9px 22px;border-radius:var(--r-pill);
transition:background .2s,transform .15s;
}
.n-btn:hover{background:var(--accent);transform:scale(1.03)}

.hero{
background:var(--surface);
padding:110px 48px 96px;
border-bottom:1px solid var(--border);
position:relative;overflow:hidden;
}
.hero-orb{
position:absolute;right:-80px;top:-120px;
width:560px;height:560px;border-radius:50%;
background:radial-gradient(circle at 40% 40%,rgba(59,59,255,0.09) 0%,transparent 70%);
pointer-events:none;
}
.hero-orb2{
position:absolute;right:200px;bottom:-160px;
width:360px;height:360px;border-radius:50%;
background:radial-gradient(circle at 50% 50%,rgba(59,59,255,0.05) 0%,transparent 70%);
pointer-events:none;
}
.hero-inner{position:relative;z-index:2;max-width:800px}
.h-kicker{
font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
color:var(--accent);margin-bottom:28px;
display:inline-flex;align-items:center;gap:8px;
background:var(--accent-dim);padding:7px 14px 7px 10px;border-radius:var(--r-pill);
border:1px solid rgba(59,59,255,0.15);
}
.h-kicker-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}
h1{font-family:'Syne',sans-serif;font-size:66px;font-weight:700;line-height:1.04;color:var(--ink);margin-bottom:26px;letter-spacing:-0.025em}
.h1-em{color:var(--accent);position:relative;display:inline-block}
.h1-em::after{content:'';position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;animation:underline-in 0.6s cubic-bezier(.16,1,.3,1) 0.8s forwards}
@keyframes underline-in{to{transform:scaleX(1)}}
.h-sub{font-size:16px;font-weight:300;line-height:1.8;color:var(--mid);max-width:520px;margin-bottom:44px}
.h-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:52px}
.btn-p{
background:var(--ink);color:var(--surface);
padding:13px 28px;border-radius:var(--r-pill);
font-size:13px;font-weight:500;letter-spacing:0.02em;
transition:background .2s,transform .15s,box-shadow .2s;
}
.btn-p:hover{background:var(--accent);transform:translateY(-1px);box-shadow:0 8px 24px rgba(59,59,255,0.25)}
.btn-s{
border:1.5px solid var(--border2);color:var(--ink);
padding:13px 28px;border-radius:var(--r-pill);
font-size:13px;font-weight:400;
transition:border-color .2s,background .2s,transform .15s;
}
.btn-s:hover{border-color:var(--ink);background:var(--bg);transform:translateY(-1px)}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px}
.h-tag{
font-size:11px;font-weight:400;color:var(--mid);
background:var(--bg);border:1px solid var(--border);
padding:6px 14px;border-radius:var(--r-pill);
letter-spacing:0.02em;transition:border-color .2s,color .2s;cursor:default;
}
.h-tag:hover{border-color:var(--border2);color:var(--ink)}
.h-tag.a{color:var(--accent);border-color:rgba(59,59,255,0.25);background:var(--accent-dim)}
.h-tag.a:hover{border-color:rgba(59,59,255,0.5)}

.t-strip{background:var(--bg2);border-bottom:1px solid var(--border);padding:16px 48px;display:flex;align-items:center;gap:40px;overflow:hidden}
.t-label{font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.t-ticker{flex:1;overflow:hidden;position:relative}
.t-ticker-inner{display:flex;gap:48px;animation:ticker 22s linear infinite;white-space:nowrap}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.t-item{font-size:13px;font-weight:300;color:var(--dim);flex-shrink:0}
.t-sep{font-size:13px;color:var(--border2);flex-shrink:0}

.sec{padding:88px 48px}
.s-eye{
font-size:10px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
color:var(--accent);margin-bottom:14px;
display:inline-flex;align-items:center;gap:8px;
}
.s-eye::before{content:'';display:block;width:14px;height:1px;background:var(--accent)}
h2{font-family:'Syne',sans-serif;font-size:44px;font-weight:700;line-height:1.08;color:var(--ink);letter-spacing:-0.02em;margin-bottom:14px}
.s-sub{font-size:15px;font-weight:300;line-height:1.8;color:var(--mid);max-width:480px}

.services{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.svc-header{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:52px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-card{
background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-xl);
padding:36px 32px;transition:border-color .25s,transform .25s,box-shadow .25s;
cursor:pointer;position:relative;overflow:hidden;
}
.svc-card::before{
content:'';position:absolute;inset:0;border-radius:var(--r-xl);
background:radial-gradient(circle at var(--mx,50%) var(--my,50%),var(--accent-glow) 0%,transparent 60%);
opacity:0;transition:opacity .3s;
}
.svc-card:hover{border-color:rgba(59,59,255,0.3);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.07)}
.svc-card:hover::before{opacity:1}
.svc-idx{font-size:10px;font-weight:500;letter-spacing:0.14em;color:var(--dim);margin-bottom:20px}
.svc-line{width:24px;height:2px;background:var(--accent);border-radius:2px;margin-bottom:22px;transition:width .3s cubic-bezier(.16,1,.3,1)}
.svc-card:hover .svc-line{width:44px}
h3.svc-t{font-family:'Syne',sans-serif;font-size:18px;font-weight:600;color:var(--ink);margin-bottom:12px;line-height:1.25;letter-spacing:-0.01em}
.svc-d{font-size:13px;font-weight:300;line-height:1.8;color:var(--mid)}
.svc-more{
margin-top:24px;display:inline-flex;align-items:center;gap:6px;
font-size:12px;font-weight:500;color:var(--accent);
background:var(--accent-dim);border:1px solid rgba(59,59,255,0.2);
padding:7px 14px;border-radius:var(--r-pill);
opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;
}
.svc-card:hover .svc-more{opacity:1;transform:translateY(0)}

.platforms{background:var(--bg);border-bottom:1px solid var(--border)}
.plat-header{margin-bottom:48px}
.plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.plat-card{
background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);
padding:28px;transition:border-color .2s,transform .2s,box-shadow .2s;cursor:pointer;
}
.plat-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,0.06)}
.plat-cat{font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.plat-name{font-family:'Syne',sans-serif;font-size:21px;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:-0.01em}
.plat-d{font-size:12px;font-weight:300;color:var(--mid);line-height:1.65}
.plat-wide{
grid-column:span 3;background:var(--ink);border:none;border-radius:var(--r-xl);
padding:28px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;
cursor:pointer;transition:background .2s,transform .2s;
}
.plat-wide:hover{background:var(--ink2);transform:translateY(-2px)}
.plat-wide h4{font-family:'Syne',sans-serif;font-size:17px;font-weight:600;color:#fff;margin-bottom:4px}
.plat-wide p{font-size:13px;font-weight:300;color:rgba(255,255,255,0.45)}
.plat-wide-cta{
font-size:12px;font-weight:500;color:var(--surface);
background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);
padding:10px 22px;border-radius:var(--r-pill);white-space:nowrap;
transition:background .15s,border-color .15s;
}
.plat-wide:hover .plat-wide-cta{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.4)}

.stats-strip{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);padding:0 48px}
.stat-cell{padding:44px 28px;border-right:1px solid var(--border);position:relative;overflow:hidden}
.stat-cell:last-child{border-right:none}
.stat-cell::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--accent);border-radius:2px;transition:width .4s cubic-bezier(.16,1,.3,1)}
.stat-cell:hover::after{width:100%}
.stat-n{font-family:'Syne',sans-serif;font-size:48px;font-weight:700;color:var(--ink);line-height:1;margin-bottom:8px;letter-spacing:-0.025em}
.stat-l{font-size:12px;font-weight:300;color:var(--mid);line-height:1.55}

.about{background:var(--bg);border-bottom:1px solid var(--border)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:56px}
.about-copy p{font-size:15px;font-weight:300;line-height:1.9;color:var(--mid);margin-bottom:20px}
.about-copy p strong{font-weight:500;color:var(--ink)}
.about-copy p:last-child{margin-bottom:0}
.val-list{display:flex;flex-direction:column;gap:12px}
.val-row{
background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);
padding:22px 24px;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;
transition:border-color .2s,transform .2s,box-shadow .2s;cursor:default;
}
.val-row:hover{border-color:rgba(59,59,255,0.25);transform:translateX(4px);box-shadow:0 4px 16px rgba(0,0,0,0.05)}
.val-n{font-family:'Syne',sans-serif;font-size:12px;font-weight:600;color:var(--dim);padding-top:2px}
.val-content h4{font-family:'Syne',sans-serif;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px}
.val-content p{font-size:13px;font-weight:300;color:var(--mid);line-height:1.7}

.contact-sec{background:var(--surface);border-bottom:1px solid var(--border)}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;margin-top:52px}
.contact-info h3{font-family:'Syne',sans-serif;font-size:26px;font-weight:600;color:var(--ink);margin-bottom:14px;letter-spacing:-0.01em}
.contact-info p{font-size:14px;font-weight:300;line-height:1.85;color:var(--mid);margin-bottom:32px}
.c-details{display:flex;flex-direction:column;gap:14px}
.c-item{
display:flex;align-items:center;gap:12px;
background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);
padding:14px 16px;transition:border-color .2s,transform .15s;
}
.c-item:hover{border-color:var(--border2);transform:translateX(3px)}
.c-ico{width:34px;height:34px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.c-ico svg{width:14px;height:14px;stroke:var(--mid);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.c-item-t span{display:block;font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
.c-item-t a,.c-item-t p{font-size:14px;font-weight:300;color:var(--ink)}
.cform{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:36px;display:flex;flex-direction:column;gap:14px}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform label{display:block;font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--mid);margin-bottom:7px}
.cform input,.cform select,.cform textarea{
width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-md);
padding:11px 14px;font-family:'Inter',sans-serif;font-size:14px;font-weight:300;color:var(--ink);
outline:none;transition:border-color .15s;-webkit-appearance:none;
}
.cform input::placeholder,.cform textarea::placeholder{color:var(--dim)}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--accent)}
.cform textarea{resize:vertical;min-height:90px}
.cform-submit{
background:var(--ink);color:#fff;padding:13px 28px;border:none;border-radius:var(--r-pill);
font-family:'Inter',sans-serif;font-size:13px;font-weight:500;letter-spacing:0.02em;
cursor:pointer;align-self:flex-start;transition:background .2s,transform .15s,box-shadow .2s;
}
.cform-submit:hover{background:var(--accent);transform:translateY(-1px);box-shadow:0 8px 24px rgba(59,59,255,0.25)}

.marquee-sec{
background:var(--ink);padding:0;overflow:hidden;
border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06);
}
.marquee-wrap{display:flex;padding:22px 0;position:relative}
.marquee-track{display:flex;gap:0;animation:marquee 28s linear infinite;flex-shrink:0}
.marquee-track2{animation-delay:-14s}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.m-item{display:flex;align-items:center;gap:20px;padding:0 32px;flex-shrink:0}
.m-word{font-family:'Syne',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.3);white-space:nowrap}
.m-dot{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:0.5;flex-shrink:0}

footer{background:var(--surface);border-top:1px solid var(--border);padding:56px 48px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px}
.f-brand .f-logo{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;color:var(--ink);display:block;margin-bottom:12px}
.f-brand p{font-size:13px;font-weight:300;line-height:1.7;color:var(--mid)}
.f-col h5{font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.f-col a{display:block;font-size:13px;font-weight:300;color:var(--mid);margin-bottom:10px;transition:color .15s}
.f-col a:hover{color:var(--ink)}
.f-bottom{background:var(--bg);border-top:1px solid var(--border);padding:16px 48px;display:flex;justify-content:space-between;align-items:center}
.f-bottom p{font-size:11px;font-weight:300;color:var(--dim)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-l{opacity:0;transform:translateX(-20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal-l.in{opacity:1;transform:translateX(0)}
.reveal-r{opacity:0;transform:translateX(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal-r.in{opacity:1;transform:translateX(0)}
.s1{transition-delay:.04s}.s2{transition-delay:.1s}.s3{transition-delay:.17s}
.s4{transition-delay:.24s}.s5{transition-delay:.31s}.s6{transition-delay:.38s}.s7{transition-delay:.45s}
/* ── WordPress compatibility overrides ── */
.entry-content img, .wp-block-image img { max-width: 100%; height: auto; }
/* Responsive */
@media(max-width:1024px){
  nav{padding:0 28px}
  .hero{padding:80px 28px 72px}
  h1{font-size:52px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .plat-grid{grid-template-columns:repeat(2,1fr)}
  .plat-wide{grid-column:span 2}
  .stats-inner{grid-template-columns:repeat(2,1fr);padding:0 28px}
  .about-grid{gap:40px}
  .contact-grid{gap:40px}
  footer{padding:44px 28px;grid-template-columns:1fr 1fr}
  .f-bottom{padding:14px 28px}
  .sec{padding:72px 28px}
  .t-strip{padding:16px 28px}
  .stats-inner{padding:0 28px}
}
@media(max-width:768px){
  nav .n-links{display:none}
  h1{font-size:40px}
  h2{font-size:34px}
  .svc-grid{grid-template-columns:1fr}
  .plat-grid{grid-template-columns:1fr}
  .plat-wide{grid-column:span 1;flex-direction:column;align-items:flex-start;gap:16px}
  .stats-inner{grid-template-columns:1fr 1fr}
  .stat-cell{border-right:none;border-bottom:1px solid var(--border);padding:32px 20px}
  .stat-cell:nth-child(odd){border-right:1px solid var(--border)}
  .about-grid{grid-template-columns:1fr}
  .svc-header{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .cform-row{grid-template-columns:1fr}
  footer{grid-template-columns:1fr}
  .f-bottom{flex-direction:column;gap:6px;text-align:center}
}