/*
Theme Name: SY Technology Child
Theme URI: https://sytechnology.sg
Description: Code-first block child theme for SY Technology Pte Ltd (Singapore digital marketing agency - Facebook, Instagram, Google & TikTok ads). Config-driven; provisioning engine in inc/provision.php. Deploys to Hostinger via MCP, no SSH.
Author: WarelyEcom
Template: twentytwentyfive
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: sytech-child
*/

:root{
  --ss-ink:#0B1020; --ss-graphite:#141A2E; --ss-panel:#1B2440;
  --ss-violet:#7C3AED; --ss-violet-deep:#6D28D9; --ss-blue:#2563EB; --ss-blue-bright:#3B82F6;
  --ss-cyan:#7C3AED; --ss-cyan-deep:#6D28D9; /* legacy aliases mapped to violet */
  --ss-silver:#AEB6CC; --ss-cloud:#F4F6FB; --ss-white:#fff; --ss-body:#2A3142;
  --ss-grad:linear-gradient(110deg,#7C3AED 0%,#4F46E5 48%,#2563EB 100%);
  --ss-shadow:0 22px 50px -28px rgba(11,16,32,.6); --ss-radius:16px;
}
body{ background:var(--ss-white); color:var(--ss-body); }
.wp-site-blocks{ overflow-x:clip; }

/* sections */
.ss-section{ padding:clamp(3.2rem,7vw,6.5rem) 1.5rem; }
.ss-wrap{ max-width:1240px; margin-inline:auto; }
.ss-narrow{ max-width:800px; margin-inline:auto; }
.ss-center{ text-align:center; }
.ss-eyebrow{ display:inline-block; font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.78rem; color:var(--ss-violet); margin:0 0 .9rem; }
.ss-h{ font-family:"Space Grotesk","Sora",sans-serif; font-weight:700; color:var(--ss-ink); line-height:1.08; margin:0 0 1rem; letter-spacing:-.015em; }
.ss-h--xl{ font-size:clamp(2.05rem,3.8vw,3rem); }
.ss-lead{ font-size:1.13rem; color:#55607A; max-width:62ch; line-height:1.7; }
.ss-center .ss-lead{ margin-inline:auto; }
.ss-rule{ width:66px; height:4px; background:var(--ss-grad); border:0; margin:1.1rem 0; border-radius:3px; }
.ss-center .ss-rule{ margin-inline:auto; }
.ss-grad-text{ background:var(--ss-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* buttons */
.ss-btn{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1rem; padding:.95rem 2rem; border-radius:10px; text-decoration:none; transition:transform .15s,box-shadow .2s,background .2s,color .2s; }
.ss-btn--cyan{ background:var(--ss-grad); color:#fff; box-shadow:0 16px 34px -16px rgba(124,58,237,.75); }
.ss-btn--cyan:hover{ transform:translateY(-2px); box-shadow:0 22px 42px -16px rgba(124,58,237,.9); color:#fff; }
.ss-btn--ghost{ background:transparent; color:var(--ss-white); border:2px solid rgba(255,255,255,.4); }
.ss-btn--ghost:hover{ background:var(--ss-white); color:var(--ss-ink); border-color:#fff; }
.ss-btn--dark{ background:var(--ss-ink); color:var(--ss-white); box-shadow:var(--ss-shadow); }
.ss-btn--dark:hover{ background:var(--ss-grad); color:#fff; transform:translateY(-2px); }

/* header */
.ss-header{ position:sticky; top:0; z-index:100; background:rgba(11,16,32,.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.06); }
.ss-header .wp-block-site-title a{ text-decoration:none; color:var(--ss-white); font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-.01em; }
.ss-header .wp-block-navigation{ font-family:"Space Grotesk",sans-serif; font-weight:500; }
.ss-header .wp-block-navigation a{ color:#CCD4E8; }
.ss-header .wp-block-navigation a:hover{ color:#fff; }
.ss-brand-cn{ color:var(--ss-blue-bright); font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; line-height:1; }

/* hero */
.ss-hero{ position:relative; color:var(--ss-white); padding:clamp(4.5rem,12vw,8rem) 1.5rem; min-height:84vh; display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(108deg, rgba(11,16,32,.96) 0%, rgba(11,16,32,.82) 46%, rgba(37,99,235,.42) 100%), url(assets/img/hero.jpg) center/cover no-repeat; overflow:hidden; }
.ss-hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(900px 520px at 88% 8%, rgba(124,58,237,.35), transparent 60%); pointer-events:none; }
.ss-hero-inner{ max-width:1240px; margin-inline:auto; width:100%; position:relative; z-index:1; }
.ss-hero-eyebrow{ color:var(--ss-blue-bright); font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.82rem; }
.ss-hero h1{ font-family:"Space Grotesk","Sora",sans-serif; font-weight:700; color:var(--ss-white); font-size:clamp(2.5rem,6vw,4.5rem); line-height:1.02; letter-spacing:-.02em; margin:.6rem 0 1rem; max-width:18ch; }
.ss-hero p{ font-size:clamp(1.05rem,2vw,1.32rem); color:#C3CCE2; max-width:50ch; margin:0 0 2rem; line-height:1.65; }
.ss-hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.ss-hero-strip{ margin-top:2.6rem; display:flex; gap:1.9rem; flex-wrap:wrap; color:#94A0BE; font-weight:500; font-size:.92rem; }
.ss-hero-strip span{ display:inline-flex; align-items:center; gap:.45rem; }
.ss-hero-strip b{ color:var(--ss-white); font-family:"Space Grotesk",sans-serif; }

/* trust bar */
.ss-trust{ background:var(--ss-graphite); color:#E7ECF7; }
.ss-trust .ss-wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; padding:1.6rem 1.5rem; }
.ss-trust-item{ display:flex; align-items:center; gap:.7rem; justify-content:center; font-weight:600; font-size:.98rem; }
.ss-trust-item svg{ color:var(--ss-blue-bright); flex:0 0 auto; }

/* packages */
.ss-pkgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.6rem; }
.ss-pkg{ position:relative; background:var(--ss-white); border:1px solid #E6EAF4; border-radius:var(--ss-radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--ss-shadow); transition:transform .18s,box-shadow .18s,border-color .18s; }
.ss-pkg:hover{ transform:translateY(-6px); box-shadow:0 32px 60px -30px rgba(11,16,32,.62); border-color:#D7DDEF; }
.ss-pkg--feat{ border-color:var(--ss-violet); box-shadow:0 30px 60px -28px rgba(124,58,237,.5); }
.ss-pkg-tag{ position:absolute; top:1rem; right:1rem; z-index:2; background:var(--ss-grad); color:#fff; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:.32rem .75rem; border-radius:999px; }
.ss-pkg-img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ss-graphite); }
.ss-pkg-img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s; }
.ss-pkg-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,16,32,0) 40%,rgba(11,16,32,.45) 100%); }
.ss-pkg:hover .ss-pkg-img img{ transform:scale(1.07); }
.ss-pkg-body{ padding:1.3rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.ss-pkg-body h3{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.2rem; color:var(--ss-ink); margin:0; }
.ss-pkg-body p{ margin:0; color:#5A647D; font-size:.95rem; flex:1; line-height:1.6; }
.ss-price{ font-family:"Space Grotesk",sans-serif; font-weight:700; color:var(--ss-ink); font-size:1.55rem; display:flex; align-items:baseline; gap:.25rem; }
.ss-price small{ font-size:.82rem; font-weight:600; color:#8089A0; }
.ss-price .ss-from{ font-size:.72rem; font-weight:600; color:var(--ss-violet); text-transform:uppercase; letter-spacing:.08em; margin-right:.15rem; }
.ss-pkg .ss-btn{ width:100%; justify-content:center; padding:.78rem 1rem; font-size:.95rem; margin-top:.5rem; }

/* process steps */
.ss-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.6rem; }
.ss-step{ position:relative; padding:1.8rem 1.4rem; background:var(--ss-white); border:1px solid #E6EAF4; border-radius:var(--ss-radius); box-shadow:var(--ss-shadow); }
.ss-step-n{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:2.4rem; line-height:1; background:var(--ss-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ss-step h3{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.12rem; color:var(--ss-ink); margin:.6rem 0 .35rem; }
.ss-step p{ margin:0; color:#5A647D; font-size:.94rem; line-height:1.6; }

/* why us (dark band) */
.ss-why{ background:var(--ss-ink); color:#E7ECF7; }
.ss-why h2{ color:var(--ss-white); }
.ss-why .ss-eyebrow{ color:var(--ss-blue-bright); }
.ss-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.6rem; }
.ss-why-card{ background:var(--ss-graphite); border:1px solid rgba(255,255,255,.06); border-radius:var(--ss-radius); padding:1.9rem 1.5rem; text-align:center; }
.ss-why-ico{ width:58px; height:58px; border-radius:14px; background:rgba(124,58,237,.16); color:var(--ss-blue-bright); display:grid; place-items:center; margin:0 auto 1rem; }
.ss-why-card h3{ font-family:"Space Grotesk",sans-serif; font-weight:700; color:var(--ss-white); font-size:1.12rem; margin:0 0 .4rem; }
.ss-why-card p{ margin:0; color:#9AA6C2; font-size:.94rem; line-height:1.6; }

/* stats band */
.ss-stats{ background:var(--ss-graphite); color:#fff; }
.ss-stats .ss-wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.ss-stat{ text-align:center; padding:.5rem; }
.ss-stat .n{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(2.2rem,4vw,3rem); line-height:1; background:var(--ss-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ss-stat .l{ margin:.6rem 0 0; color:#AEB6CC; font-size:.96rem; font-weight:500; }

/* platforms band (replaces gallery) */
.ss-plat{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.4rem; }
.ss-plat-card{ background:var(--ss-white); border:1px solid #E6EAF4; border-radius:var(--ss-radius); padding:1.7rem 1.3rem; text-align:center; box-shadow:var(--ss-shadow); transition:transform .18s,box-shadow .18s; }
.ss-plat-card:hover{ transform:translateY(-5px); box-shadow:0 28px 54px -28px rgba(11,16,32,.55); }
.ss-plat-ico{ width:56px; height:56px; border-radius:14px; display:grid; place-items:center; margin:0 auto .9rem; color:#fff; }
.ss-plat-ico svg{ width:28px; height:28px; }
.ss-plat-card h3{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.08rem; color:var(--ss-ink); margin:0 0 .35rem; }
.ss-plat-card p{ margin:0; color:#5A647D; font-size:.92rem; line-height:1.55; }
.ss-ico-fb{ background:#1877F2; } .ss-ico-ig{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4); }
.ss-ico-gg{ background:#fff; border:1px solid #E6EAF4; } .ss-ico-tt{ background:#000; }

/* media split (image + text) */
.ss-split .ss-wrap{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.ss-split-img{ border-radius:var(--ss-radius); overflow:hidden; box-shadow:var(--ss-shadow); aspect-ratio:4/3; background:var(--ss-graphite); }
.ss-split-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-split-list{ list-style:none; padding:0; margin:1.4rem 0 0; display:flex; flex-direction:column; gap:1rem; }
.ss-split-list li{ display:flex; gap:.8rem; align-items:flex-start; color:#3D465C; font-size:1.02rem; line-height:1.55; }
.ss-split-list svg{ color:var(--ss-violet); flex:0 0 auto; margin-top:.2rem; }

/* testimonials */
.ss-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.4rem; }
.ss-quote{ background:var(--ss-white); border:1px solid #E6EAF4; border-radius:var(--ss-radius); padding:1.8rem 1.6rem; box-shadow:var(--ss-shadow); }
.ss-stars{ color:#F5A524; letter-spacing:2px; font-size:1.05rem; margin-bottom:.7rem; }
.ss-quote p{ font-style:italic; color:#3D465C; margin:0 0 1.1rem; line-height:1.65; }
.ss-quote .who{ font-family:"Space Grotesk",sans-serif; font-weight:700; color:var(--ss-ink); font-size:.95rem; }
.ss-quote .who span{ display:block; font-family:"Inter",sans-serif; font-weight:500; color:#7A8299; font-size:.85rem; margin-top:.15rem; }

/* location */
.ss-loc{ background:var(--ss-graphite); color:#E7ECF7; }
.ss-loc .ss-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; padding:clamp(2.6rem,5vw,4rem) 1.5rem; }
.ss-loc h2{ color:var(--ss-white); }
.ss-loc .ss-eyebrow{ color:var(--ss-blue-bright); }
.ss-loc-list{ list-style:none; padding:0; margin:1.2rem 0 0; display:flex; flex-direction:column; gap:.95rem; font-size:1.05rem; }
.ss-loc-list li{ display:flex; gap:.8rem; align-items:flex-start; }
.ss-loc-list svg{ color:var(--ss-blue-bright); flex:0 0 auto; margin-top:.15rem; }

/* cta band */
.ss-cta{ position:relative; color:var(--ss-white); text-align:center; background:var(--ss-grad); }
.ss-cta::after{ content:""; position:absolute; inset:0; background:radial-gradient(700px 400px at 15% 120%, rgba(11,16,32,.4), transparent 60%); pointer-events:none; }
.ss-cta>*{ position:relative; z-index:1; }
.ss-cta h2{ color:var(--ss-white); }
.ss-cta .ss-lead{ color:#EAE6FF; }
.ss-cta .ss-btn--cyan{ background:#fff; color:var(--ss-violet-deep); box-shadow:0 18px 40px -18px rgba(0,0,0,.5); }
.ss-cta .ss-btn--cyan:hover{ background:#fff; color:var(--ss-ink); }

/* footer */
.ss-footer{ background:var(--ss-ink); color:#AEB6CC; }
.ss-footer a{ color:#AEB6CC; text-decoration:none; }
.ss-footer a:hover{ color:var(--ss-blue-bright); }
.ss-footer h3{ color:var(--ss-white); font-family:"Space Grotesk",sans-serif; font-weight:700; }

/* WooCommerce */
.woocommerce ul.products li.product .price, .woocommerce div.product p.price{ color:var(--ss-ink) !important; font-weight:700; font-family:"Space Grotesk",sans-serif; }
.woocommerce span.onsale{ background:var(--ss-violet); color:#fff; }
.woocommerce a.button,.woocommerce button.button,.woocommerce #respond input#submit,.woocommerce .button.alt,.wc-block-components-button{
  background:var(--ss-grad) !important; color:#fff !important; border-radius:10px !important; font-weight:700 !important; font-family:"Space Grotesk",sans-serif !important; }
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button.alt:hover{ filter:brightness(1.08); color:#fff !important; }
.home .wp-block-post-title,.page .wp-block-post-title{ display:none !important; }

/* CF7 */
.wpcf7 label{ display:block; font-family:"Space Grotesk",sans-serif; font-weight:600; color:var(--ss-ink); margin-bottom:1rem; font-size:.95rem; }
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 textarea{ width:100%; margin-top:.4rem; padding:.7rem .85rem; border:1px solid #D7DDEF; border-radius:9px; font-family:"Inter",sans-serif; font-size:1rem; background:#fff; }
.wpcf7 input:focus,.wpcf7 textarea:focus{ outline:none; border-color:var(--ss-violet); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.wpcf7 input[type=submit]{ background:var(--ss-grad); color:#fff; border:0; border-radius:10px; padding:.85rem 2rem; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1rem; cursor:pointer; transition:transform .15s,box-shadow .2s; }
.wpcf7 input[type=submit]:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(124,58,237,.8); }

/* responsive */
@media (max-width:960px){
  .ss-pkgs{ grid-template-columns:repeat(2,1fr); }
  .ss-steps,.ss-why-grid,.ss-plat,.ss-stats .ss-wrap{ grid-template-columns:repeat(2,1fr); }
  .ss-quotes{ grid-template-columns:1fr; }
  .ss-trust .ss-wrap{ grid-template-columns:repeat(2,1fr); }
  .ss-loc .ss-wrap,.ss-split .ss-wrap{ grid-template-columns:1fr; }
  .ss-split-img{ order:-1; }
}
@media (max-width:560px){
  .ss-pkgs,.ss-steps,.ss-why-grid,.ss-plat,.ss-trust .ss-wrap,.ss-stats .ss-wrap{ grid-template-columns:1fr; }
}

/* Remove TT5 default block-gap between sticky header and first section (and above footer) */
.wp-site-blocks > main, .wp-site-blocks > footer{ margin-block-start:0 !important; }

/* ---- UX / mobile / a11y polish pass ---- */
html{ scroll-behavior:smooth; }
img{ max-width:100%; height:auto; }
a:focus-visible,button:focus-visible,summary:focus-visible,.ss-btn:focus-visible,.rx-btn:focus-visible,.wp-element-button:focus-visible{ outline:3px solid var(--ss-cyan,var(--rx-gold,#C9A84C)); outline-offset:3px; }
.wpcf7 label{ display:block; font-weight:600; font-size:.92rem; margin:.2rem 0 .9rem; color:inherit; }
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 input[type=number],.wpcf7 input[type=date],.wpcf7 textarea{ width:100%; margin-top:.35rem; padding:.7rem .85rem; border:1px solid rgba(0,0,0,.18); border-radius:8px; font:inherit; box-sizing:border-box; background:#fff; color:#222; }
.wpcf7 textarea{ min-height:120px; }
.wpcf7 input:focus,.wpcf7 textarea:focus{ outline:2px solid var(--ss-cyan,var(--rx-gold,#C9A84C)); border-color:transparent; }
.wpcf7 .wpcf7-submit{ cursor:pointer; border:0; color:#fff; background:var(--ss-cyan,var(--rx-red,#5C1A1A)); font-weight:700; padding:.8rem 1.8rem; border-radius:999px; margin-top:.5rem; width:auto; }
.wpcf7 .wpcf7-submit:hover{ filter:brightness(.93); }
@media (max-width:600px){
  .ss-hero,.rx-hero{ min-height:auto !important; padding-top:3.2rem !important; padding-bottom:3.4rem !important; }
  .ss-hero h1,.rx-hero-title{ font-size:clamp(2rem,9vw,2.8rem) !important; }
  .ss-hero-cta,.rx-hero-cta{ flex-direction:column; align-items:stretch; }
  .ss-hero-cta .ss-btn,.rx-hero-cta .rx-btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; animation:none !important; } }