/*
Theme Name: Aurora Digital
Theme URI: https://www.auroradigi.com
Author: Aurora Digital
Author URI: https://www.auroradigi.com
Description: A premium, fully bilingual (English / Arabic RTL) WordPress theme for a digital solutions and automation agency in Iraq. Built for B2B lead generation: website development, e-commerce, AI and WhatsApp automation, company profiles, branding and digital marketing. Includes a built-in language switcher (no plugin required), a working Request-a-Quote system, a Portfolio post type, SEO/schema output and WooCommerce compatibility.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: madar
Tags: business, corporate, agency, rtl-language-support, translation-ready, custom-logo, custom-menu, featured-images, two-columns, right-sidebar, e-commerce

All company details (name, phone, WhatsApp, email, address, social links, logo) are Customizer
settings — see Appearance > Customize > Madar: Company Details. Nothing is hard-coded.
*/

/* =========================================================
   DESIGN TOKENS
   Deep navy ground, modern blue action, cyan accent.
   ========================================================= */
:root{
  --navy:#0B1E3B;
  --navy-2:#112C54;
  --navy-3:#16385F;
  --ink:#101B2D;
  --ink-soft:#55637A;
  --ink-mute:#8A94A6;
  --blue:#1B5FD9;
  --blue-dark:#1449AC;
  --blue-tint:#EAF1FE;
  --cyan:#12C2D6;
  --cyan-tint:#E4F8FB;
  --green:#12A87C;
  --amber:#C9860E;
  --bg:#FFFFFF;
  --bg-alt:#F5F7FB;
  --bg-alt-2:#EEF2F8;
  --line:#E2E8F1;
  --line-soft:#EDF1F7;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(16,27,45,.05), 0 2px 8px rgba(16,27,45,.04);
  --shadow:0 4px 12px rgba(16,27,45,.06), 0 18px 40px -20px rgba(16,27,45,.22);
  --shadow-lg:0 10px 24px rgba(11,30,59,.10), 0 30px 60px -28px rgba(11,30,59,.35);
  --font-en:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-ar:'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --maxw:1220px;
  --nav-h:76px;
}

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-en); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
html[dir="rtl"] body{font-family:var(--font-ar); line-height:1.85;}
img{max-width:100%; height:auto; display:block;}
svg{display:block;}
a{color:var(--blue); text-decoration:none;}
a:hover{color:var(--blue-dark);}
:focus-visible{outline:3px solid var(--cyan); outline-offset:2px; border-radius:4px;}
h1,h2,h3,h4,h5{margin:0 0 .5em; line-height:1.2; font-weight:700; color:var(--ink); letter-spacing:-.02em; text-wrap:balance;}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{letter-spacing:0; line-height:1.4;}
h1{font-size:clamp(34px,4.6vw,56px); font-weight:800;}
h2{font-size:clamp(27px,3.2vw,40px);}
h3{font-size:clamp(20px,2vw,25px);}
h4{font-size:18px;}
p{margin:0 0 1.1em;}
ul,ol{margin:0 0 1.1em; padding-inline-start:1.25em;}
.mdr-plain{list-style:none; margin:0; padding:0;}
hr{border:none; border-top:1px solid var(--line); margin:40px 0;}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;}
/* Moved out of view with a transform rather than a large offset, so it can
   never extend the page's scroll width in either text direction. */
.skip-link{position:absolute; inset-inline-start:0; top:0; transform:translateY(-200%); background:var(--navy); color:#fff; padding:12px 18px; z-index:200;}
.skip-link:focus{transform:translateY(0); color:#fff;}

.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px;}
.section{padding-block:clamp(56px,7vw,96px);}
.section-sm{padding-block:clamp(40px,5vw,64px);}
.section-alt{background:var(--bg-alt);}
.section-navy{background:var(--navy); color:#D9E3F2;}
.section-navy h2,.section-navy h3,.section-navy h4{color:#fff;}
.section-navy p{color:#B7C6DC;}

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:14px;
}
html[dir="rtl"] .eyebrow{letter-spacing:.02em;}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--cyan); border-radius:2px;}
.section-navy .eyebrow{color:var(--cyan);}
.sect-head{max-width:720px; margin-bottom:clamp(32px,4vw,52px);}
.sect-head.center{margin-inline:auto; text-align:center;}
.sect-head p{color:var(--ink-soft); font-size:17px; margin:0;}
.section-navy .sect-head p{color:#B7C6DC;}
.sect-head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,48px);}
.sect-head-row .sect-head{margin-bottom:0;}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:15px; font-weight:600; line-height:1;
  padding:15px 26px; border-radius:var(--radius-sm); border:1.5px solid transparent;
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  text-align:center; white-space:nowrap; max-width:100%;
}
/* On narrow screens a long CTA label must be allowed to wrap: kept on one
   line it sets a minimum width that pushes its whole column off-screen. */
@media(max-width:640px){
  .btn{white-space:normal; line-height:1.35;}
}
.btn svg{width:17px; height:17px; flex:none;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 8px 20px -8px rgba(27,95,217,.6);}
.btn-primary:hover{background:var(--blue-dark); color:#fff; box-shadow:0 12px 26px -8px rgba(27,95,217,.7);}
.btn-dark{background:var(--navy); color:#fff;}
.btn-dark:hover{background:var(--navy-2); color:#fff;}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-outline:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-tint);}
.btn-ghost-light{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.28);}
.btn-ghost-light:hover{background:rgba(255,255,255,.16); color:#fff;}
.btn-white{background:#fff; color:var(--navy);}
.btn-white:hover{color:var(--blue); background:#fff;}
.btn-wa{background:#1FA855; color:#fff;}
.btn-wa:hover{background:#178643; color:#fff;}
.btn-sm{padding:11px 18px; font-size:13.5px;}
.btn-lg{padding:17px 32px; font-size:16px;}
.btn-block{width:100%;}
.btn-row{display:flex; gap:12px; flex-wrap:wrap;}
.link-arrow{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14.5px; color:var(--blue);}
.link-arrow svg{width:15px; height:15px; transition:transform .16s ease;}
html[dir="rtl"] .link-arrow svg{transform:scaleX(-1);}
.link-arrow:hover svg{transform:translateX(3px);}
html[dir="rtl"] .link-arrow:hover svg{transform:scaleX(-1) translateX(3px);}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.topbar{background:var(--navy); color:#AFC0D8; font-size:13px;}
.topbar .container{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:40px; flex-wrap:wrap;}
.topbar a{color:#D6E2F2;}
.topbar a:hover{color:#fff;}
.topbar-items{display:flex; gap:20px; align-items:center; flex-wrap:wrap;}
.topbar-items span{display:inline-flex; align-items:center; gap:7px;}
.topbar svg{width:14px; height:14px; opacity:.85;}
@media(max-width:820px){.topbar{display:none;}}

.site-header{position:sticky; top:0; z-index:90; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft); transition:box-shadow .2s ease;}
.site-header.is-stuck{box-shadow:0 6px 24px -12px rgba(16,27,45,.3);}
.nav-inner{display:flex; align-items:center; gap:22px; min-height:var(--nav-h);}
/* Do not shrink: the brand keeps its natural width, and a very long
   owner-supplied company name is capped by .brand-name's max-width instead
   of being squeezed into an ellipsis when there is room to show it. */
.brand{display:flex; align-items:center; gap:11px; flex:0 1 auto; min-width:0;}
.brand img{max-height:46px; width:auto;}
.brand-mark{width:40px; height:40px; flex:none;}
.brand-text{display:flex; flex-direction:column; line-height:1.15; min-width:0;}
/* The company name is owner-supplied and can be very long (Iraqi B2B names
   often are). In the header it stays on one line and is capped so it can
   never push the navigation off screen; the footer shows it in full. */
.brand-name{font-size:19px; font-weight:800; color:var(--navy); letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:18ch;}
@media(max-width:1200px){ .brand-name{max-width:26ch;} }
.brand-tag{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);}
html[dir="rtl"] .brand-tag{letter-spacing:0; text-transform:none; font-size:11.5px;}

.main-nav{margin-inline-start:auto;}
.main-nav ul{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0;}
.main-nav li{position:relative;}
.main-nav a{display:block; padding:9px 11px; font-size:14px; font-weight:600; color:var(--ink); border-radius:8px; white-space:nowrap;}
.main-nav a:hover{color:var(--blue); background:var(--blue-tint);}
.main-nav .current-menu-item>a,.main-nav .current_page_item>a{color:var(--blue);}
.main-nav .sub-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-start:0; min-width:250px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:8px;
  display:block; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s ease; z-index:20;
}
.main-nav li:hover>.sub-menu,.main-nav li:focus-within>.sub-menu{opacity:1; visibility:visible; transform:translateY(0);}
.main-nav .sub-menu a{font-size:14px; font-weight:500; padding:10px 12px;}
.menu-item-has-children>a::after{content:""; display:inline-block; width:6px; height:6px; margin-inline-start:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px);}

.nav-actions{display:flex; align-items:center; gap:10px; flex:none;}
.lang-switch{display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.lang-switch-top{border-color:rgba(255,255,255,.22); border-radius:6px;}
.lang-switch-top a{background:transparent; color:#AFC0D8; padding:3px 9px; font-size:12px;}
.lang-switch-top a.is-active{background:rgba(255,255,255,.14); color:#fff;}
.lang-switch-top a:hover:not(.is-active){background:rgba(255,255,255,.07); color:#fff;}
.lang-switch a{padding:7px 11px; font-size:13px; font-weight:700; color:var(--ink-soft); background:#fff;}
.lang-switch a.is-active{background:var(--navy); color:#fff;}
.lang-switch a:hover:not(.is-active){background:var(--bg-alt); color:var(--blue);}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:9px; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; color:var(--navy);}
.nav-toggle svg{width:22px; height:22px;}

@media(max-width:1200px){
  .main-nav,.nav-actions .btn-quote-desktop{display:none;}
  .nav-toggle{display:inline-flex;}
  /* Below the nav breakpoint the WhatsApp button goes icon-only; the full
     labelled button is in the drawer, and the floating button stays on screen. */
  .nav-actions .wa-label{display:none;}
  .nav-actions .btn-wa{padding:11px 13px;}
}
@media(max-width:600px){
  /* Collapse the header to: brand · WhatsApp icon · menu. The language
     switcher, the quote button and the WhatsApp label all live in the
     drawer, and the floating WhatsApp button stays on screen regardless. */
  .nav-actions .lang-switch{display:none;}
  .nav-actions .wa-label{display:none;}
  .nav-actions .btn-wa{padding:11px 12px;}
  .brand-tag{display:none;}
  .brand-name{font-size:17px; max-width:44vw;}
  .brand img{max-height:38px;}
  .nav-inner{gap:12px;}
}

/* mobile drawer */
.mobile-nav{position:fixed; inset:0; z-index:120; background:rgba(11,30,59,.55); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:.22s ease;}
.mobile-nav.open{opacity:1; visibility:visible;}
.mobile-nav .panel{
  position:absolute; inset-block:0; inset-inline-end:0; width:min(340px,88vw); background:#fff;
  padding:22px 20px 32px; overflow-y:auto; transform:translateX(100%); transition:transform .26s ease;
}
html[dir="rtl"] .mobile-nav .panel{transform:translateX(-100%);}
.mobile-nav.open .panel{transform:translateX(0);}
.mobile-nav .panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.mobile-nav ul{list-style:none; margin:0 0 18px; padding:0;}
.mobile-nav li{border-bottom:1px solid var(--line-soft);}
.mobile-nav a{display:block; padding:13px 2px; font-size:15.5px; font-weight:600; color:var(--ink);}
.mobile-nav .sub-menu{margin:0 0 8px; padding-inline-start:14px;}
.mobile-nav .sub-menu a{font-size:14px; font-weight:500; color:var(--ink-soft); padding:9px 2px;}
.icon-btn{width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9px; background:#fff; cursor:pointer; color:var(--navy);}
.icon-btn svg{width:20px; height:20px;}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative; background:var(--navy); color:#fff; overflow:hidden;}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(760px 380px at 82% 12%, rgba(18,194,214,.20), transparent 62%),
    radial-gradient(620px 420px at 8% 92%, rgba(27,95,217,.30), transparent 65%);
}
.hero-grid-lines{position:absolute; inset:0; opacity:.5;}
.hero .container{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; padding-block:clamp(56px,7vw,104px);}
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:#CFF3F8;
  background:rgba(18,194,214,.13); border:1px solid rgba(18,194,214,.3); padding:7px 14px; border-radius:30px; margin-bottom:22px;
}
.hero-badge svg{width:15px; height:15px;}
.hero h1{color:#fff; margin-bottom:20px;}
.hero h1 .hl{color:var(--cyan);}
.hero .lede{font-size:clamp(16px,1.35vw,18.5px); color:#BCCDE4; max-width:56ch; margin-bottom:30px;}
.hero .btn-row{margin-bottom:26px;}
.hero-note{display:flex; align-items:center; gap:9px; font-size:13.5px; color:#93A8C6;}
.hero-note svg{width:16px; height:16px; color:var(--cyan);}
.hero-art{position:relative;}
@media(max-width:920px){
  .hero .container{grid-template-columns:1fr; gap:38px;}
  .hero-art{order:-1; max-width:460px; margin-inline:auto; width:100%;}
}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust-strip{background:var(--bg-alt); border-bottom:1px solid var(--line-soft);}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media(max-width:980px){.trust-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.trust-grid{grid-template-columns:1fr;}}
.trust-item{display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px;}
.trust-item svg{width:19px; height:19px; flex:none; color:var(--green);}

/* =========================================================
   CARD GRIDS
   ========================================================= */
.grid{display:grid; gap:22px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:700px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px;
  display:flex; flex-direction:column; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover{border-color:#C9D8EE; box-shadow:var(--shadow); transform:translateY(-3px);}
.card h3{font-size:19px; margin-bottom:9px;}
.card p{color:var(--ink-soft); font-size:14.8px; margin-bottom:16px;}
.card .link-arrow{margin-top:auto;}
.card-icon{
  width:50px; height:50px; border-radius:13px; background:var(--blue-tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.card-icon svg{width:24px; height:24px;}
.card-icon.cyan{background:var(--cyan-tint); color:#0A93A3;}
.card-icon.green{background:#E6F7F1; color:var(--green);}
.card-icon.navy{background:#E9EEF6; color:var(--navy);}
.card-flat{border-color:var(--line-soft); background:var(--bg-alt); box-shadow:none;}
.card-flat:hover{background:#fff;}

/* feature list with ticks */
.tick-list{list-style:none; margin:0; padding:0; display:grid; gap:11px;}
.tick-list li{display:flex; align-items:flex-start; gap:10px; font-size:14.8px; color:var(--ink-soft);}
.tick-list li svg{width:18px; height:18px; flex:none; margin-top:2px; color:var(--green);}
.section-navy .tick-list li{color:#C3D2E7;}
.section-navy .tick-list li svg{color:var(--cyan);}

/* split feature rows */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center;}
.split.narrow-art{grid-template-columns:1.1fr .9fr;}
@media(max-width:900px){.split,.split.narrow-art{grid-template-columns:1fr; gap:34px;}}
.split-art{position:relative;}

/* =========================================================
   INDUSTRIES
   ========================================================= */
.industry-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; transition:.18s ease;}
.industry-card:hover{border-color:var(--blue); box-shadow:var(--shadow); transform:translateY(-3px);}
.industry-card .ic{width:42px; height:42px; border-radius:11px; background:var(--navy); color:var(--cyan); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.industry-card .ic svg{width:21px; height:21px;}
.industry-card h4{font-size:16.5px; margin-bottom:6px;}
.industry-card p{font-size:13.8px; color:var(--ink-soft); margin-bottom:10px;}
.tag-row{display:flex; flex-wrap:wrap; gap:6px;}
.tag{font-size:11.5px; font-weight:600; color:var(--ink-soft); background:var(--bg-alt-2); border-radius:20px; padding:4px 10px;}

/* =========================================================
   PROCESS / STEPS
   ========================================================= */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step;}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.steps{grid-template-columns:1fr;}}
.step{position:relative; padding-top:20px;}
.step::before{content:""; position:absolute; top:0; inset-inline:0; height:3px; background:var(--line); border-radius:3px;}
.step.is-first::before{background:linear-gradient(90deg,var(--blue),var(--cyan));}
.step .num{font-size:13px; font-weight:800; color:var(--blue); letter-spacing:.08em; display:block; margin-bottom:9px;}
.step h4{font-size:17px; margin-bottom:7px;}
.step p{font-size:14.3px; color:var(--ink-soft); margin:0;}
.section-navy .step::before{background:rgba(255,255,255,.16);}
.section-navy .step .num{color:var(--cyan);}

/* =========================================================
   WHATSAPP / CHAT MOCKUPS
   ========================================================= */
.chat-mock{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; max-width:400px;}
.chat-head{display:flex; align-items:center; gap:11px; padding:14px 16px; background:#0F6B3F; color:#fff;}
.chat-head .avatar{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;}
.chat-head .avatar svg{width:20px; height:20px;}
.chat-head b{display:block; font-size:14.5px; line-height:1.3;}
.chat-head span{font-size:11.5px; opacity:.85;}
.chat-body{background:#ECE5DD; padding:16px; display:grid; gap:10px;}
.bubble{max-width:82%; padding:10px 13px; border-radius:12px; font-size:13.6px; line-height:1.55; box-shadow:0 1px 1px rgba(0,0,0,.08);}
.bubble.in{background:#fff; border-start-start-radius:3px; justify-self:start;}
.bubble.out{background:#DCF8C6; border-start-end-radius:3px; justify-self:end;}
.bubble .meta{display:block; font-size:10px; color:#7A8A99; margin-top:4px; text-align:end;}
.bubble .opt{display:block; margin-top:7px; padding:7px 10px; background:var(--bg-alt); border:1px solid var(--line); border-radius:8px; font-size:12.5px; font-weight:600; color:var(--ink);}
.typing{display:inline-flex; gap:4px; align-items:center;}
.typing i{width:6px; height:6px; border-radius:50%; background:#9CB0A6; display:block; animation:blink 1.2s infinite;}
.typing i:nth-child(2){animation-delay:.2s;} .typing i:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.3;} 30%{opacity:1;}}

/* flow diagram */
.flow{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:30px;}
.flow-node{display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; min-width:96px;}
.flow-node .ic{width:56px; height:56px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:var(--cyan);}
.flow-node .ic svg{width:25px; height:25px;}
.flow-node span{font-size:13px; font-weight:600; color:#C3D2E7;}
.flow-link{width:44px; height:2px; background:linear-gradient(90deg,rgba(18,194,214,.15),rgba(18,194,214,.9),rgba(18,194,214,.15)); position:relative; overflow:hidden;}
.flow-link::after{content:""; position:absolute; top:-2px; inset-inline-start:-20%; width:20%; height:6px; background:var(--cyan); border-radius:3px; filter:blur(2px); animation:flowmove 2.4s linear infinite;}
@keyframes flowmove{to{inset-inline-start:120%;}}
@media(max-width:640px){.flow-link{width:26px;}}

/* =========================================================
   E-COMMERCE MOCK
   ========================================================= */
.shop-mock{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden;}
.shop-bar{display:flex; align-items:center; gap:8px; padding:11px 14px; background:var(--bg-alt); border-bottom:1px solid var(--line);}
.shop-bar .dots{display:flex; gap:5px;}
.shop-bar .dots i{width:9px; height:9px; border-radius:50%; background:#D3DBE6; display:block;}
.shop-bar .url{flex:1; background:#fff; border:1px solid var(--line); border-radius:6px; font-size:11px; color:var(--ink-mute); padding:4px 9px;}
.shop-body{padding:16px;}
.shop-row{display:grid; grid-template-columns:repeat(3,1fr); gap:11px;}
.shop-prod{border:1px solid var(--line-soft); border-radius:10px; overflow:hidden;}
.shop-prod .ph{aspect-ratio:1/1; background:linear-gradient(135deg,var(--bg-alt-2),var(--blue-tint)); display:flex; align-items:center; justify-content:center; color:#A9BBD4;}
.shop-prod .ph svg{width:28px; height:28px;}
.shop-prod .meta{padding:8px 9px;}
.shop-prod .meta b{display:block; height:7px; width:72%; background:var(--bg-alt-2); border-radius:4px; margin-bottom:6px;}
.shop-prod .meta span{display:block; height:7px; width:42%; background:var(--blue-tint); border-radius:4px;}

/* =========================================================
   DOCUMENT / PROFILE MOCK
   ========================================================= */
.doc-mock{position:relative; display:flex; justify-content:center; gap:16px; max-width:100%;}
.doc-page{width:210px; flex:0 1 210px; min-width:0; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:18px;}
@media (max-width:560px){
  .doc-mock{gap:10px;}
  .doc-page{flex:0 1 150px; width:150px; padding:12px;}
  .doc-page .block{height:40px;}
}
.doc-page.tilt-a{transform:rotate(-4deg) translateY(10px);}
.doc-page.tilt-b{transform:rotate(3deg);}
.doc-page .bar{height:8px; border-radius:4px; background:var(--bg-alt-2); margin-bottom:7px;}
.doc-page .bar.w60{width:60%;} .doc-page .bar.w40{width:40%;} .doc-page .bar.w80{width:80%;}
.doc-page .bar.accent{background:var(--blue); height:10px; width:46%; margin-bottom:12px;}
.doc-page .block{height:54px; border-radius:6px; background:linear-gradient(135deg,var(--blue-tint),var(--cyan-tint)); margin:12px 0;}

/* =========================================================
   PORTFOLIO
   ========================================================= */
.filter-row{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:28px;}
.filter-btn{font-family:inherit; font-size:13.5px; font-weight:600; padding:9px 17px; border-radius:30px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; transition:.16s ease;}
.filter-btn:hover{border-color:var(--blue); color:var(--blue);}
.filter-btn.is-active{background:var(--navy); border-color:var(--navy); color:#fff;}
.pf-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:.18s ease;}
.pf-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.pf-media{aspect-ratio:16/10; background:var(--navy); position:relative; overflow:hidden;}
.pf-media img{width:100%; height:100%; object-fit:cover;}
.pf-media .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.pf-body{padding:18px 20px 22px;}
.pf-body .kicker{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan-tint); }
.pf-ind{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:8px;}
html[dir="rtl"] .pf-ind{letter-spacing:0; text-transform:none;}
.pf-body h4{font-size:17px; margin-bottom:7px;}
.pf-body p{font-size:14px; color:var(--ink-soft); margin:0;}
.pf-flag{position:absolute; top:12px; inset-inline-start:12px; background:rgba(255,255,255,.92); color:var(--navy); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:20px;}
html[dir="rtl"] .pf-flag{letter-spacing:0; text-transform:none;}

/* =========================================================
   PRICING
   ========================================================= */
.price-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch;}
@media(max-width:1060px){.price-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.price-grid{grid-template-columns:1fr;}}
.price-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; display:flex; flex-direction:column; position:relative;}
.price-card.featured{border-color:var(--blue); box-shadow:var(--shadow-lg);}
.price-flag{position:absolute; top:-12px; inset-inline-start:24px; background:var(--blue); color:#fff; font-size:11.5px; font-weight:700; padding:5px 13px; border-radius:20px;}
.price-card .tier{font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:8px;}
html[dir="rtl"] .price-card .tier{letter-spacing:0; text-transform:none; font-size:14px;}
.price-card .for{font-size:14px; color:var(--ink-soft); margin-bottom:18px;}
.price-card .quote-line{font-size:15px; font-weight:700; color:var(--ink); padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line-soft);}
.price-card .tick-list{margin-bottom:24px;}
.price-card .btn{margin-top:auto;}
.price-note{margin-top:24px; text-align:center; font-size:14.5px; color:var(--ink-soft);}

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq-list{display:grid; gap:12px; max-width:860px; margin-inline:auto;}
.faq-item{border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; overflow:hidden;}
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:start;
  font-family:inherit; font-size:15.5px; font-weight:600; color:var(--ink); background:none; border:none;
  padding:18px 20px; cursor:pointer;
}
.faq-q .chev{width:20px; height:20px; flex:none; color:var(--blue); transition:transform .2s ease;}
.faq-item.open .faq-q .chev{transform:rotate(180deg);}
.faq-a{display:none; padding:0 20px 20px; color:var(--ink-soft); font-size:14.8px;}
.faq-item.open .faq-a{display:block;}
.faq-a p:last-child{margin-bottom:0;}

/* =========================================================
   FORMS
   ========================================================= */
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:clamp(24px,3.4vw,40px);}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
@media(max-width:700px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex; flex-direction:column; gap:7px;}
.field.full{grid-column:1/-1;}
.field label{font-size:13.5px; font-weight:600; color:var(--ink);}
.field .req{color:#D33B3B;}
.field input,.field select,.field textarea{
  font-family:inherit; font-size:15px; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:13px 15px; width:100%;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field textarea{min-height:130px; resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-tint);}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute);}
.field .hint{font-size:12.5px; color:var(--ink-mute);}
/* Honeypot: hidden with the clip technique so it stays out of the layout in
   both LTR and RTL, while remaining present for bots to fill in. */
.hp-field{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}
.form-alert{border-radius:var(--radius-sm); padding:16px 18px; font-size:14.8px; margin-bottom:22px; border:1px solid;}
.form-alert.ok{background:#E9F8F2; border-color:#B7E5D3; color:#0B6A4C;}
.form-alert.err{background:#FDECEC; border-color:#F5C6C6; color:#9B2121;}
.form-alert ul{margin:8px 0 0; padding-inline-start:20px;}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft);}
.consent input{width:18px; height:18px; margin-top:2px; flex:none;}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,52px);}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-item{display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line-soft);}
.contact-item:last-child{border-bottom:none;}
.contact-item .ic{width:44px; height:44px; border-radius:12px; background:var(--blue-tint); color:var(--blue); display:flex; align-items:center; justify-content:center; flex:none;}
.contact-item .ic svg{width:21px; height:21px;}
.contact-item b{display:block; font-size:14px; margin-bottom:3px;}
.contact-item a,.contact-item span{font-size:15px; color:var(--ink-soft);}
.contact-item a:hover{color:var(--blue);}
.map-placeholder{
  border:1px dashed var(--line); border-radius:var(--radius); background:var(--bg-alt);
  min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--ink-mute); font-size:14px; text-align:center; padding:24px;
}
.map-placeholder svg{width:34px; height:34px; color:var(--blue);}
.map-embed iframe{width:100%; min-height:320px; border:0; border-radius:var(--radius); display:block;}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{position:relative; background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:clamp(32px,4.5vw,56px); overflow:hidden;}
.cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 88% 10%, rgba(18,194,214,.22), transparent 60%);}
.cta-band>*{position:relative;}
.cta-band h2{color:#fff; margin-bottom:12px;}
.cta-band p{color:#B7C6DC; max-width:60ch; margin-bottom:26px;}

/* =========================================================
   PAGE HEADER (inner pages)
   ========================================================= */
.page-hero{background:var(--navy); color:#fff; position:relative; overflow:hidden;}
.page-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 320px at 85% 0%, rgba(18,194,214,.18), transparent 62%);}
.page-hero .container{position:relative; padding-block:clamp(44px,5.5vw,76px);}
.page-hero h1{color:#fff; margin-bottom:14px;}
.page-hero p{color:#B7C6DC; font-size:17px; max-width:66ch; margin:0;}
.breadcrumb{font-size:13px; color:#8FA4C2; margin-bottom:16px;}
.breadcrumb a{color:#C6D6EC;}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{opacity:.5; margin-inline:7px;}

/* =========================================================
   ENTRY CONTENT (WP editor output)
   ========================================================= */
.entry-content{max-width:820px;}
.entry-content h2{margin-top:40px;}
.entry-content h3{margin-top:30px;}
.entry-content img{border-radius:var(--radius); margin-block:20px;}
.entry-content blockquote{margin:26px 0; padding:18px 22px; border-inline-start:3px solid var(--blue); background:var(--bg-alt); border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--ink);}
html[dir="rtl"] .entry-content blockquote{border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
.entry-content table{width:100%; border-collapse:collapse; margin-block:22px; font-size:14.5px;}
.entry-content th,.entry-content td{border:1px solid var(--line); padding:11px 13px; text-align:start;}
.entry-content th{background:var(--bg-alt); font-weight:700;}
.page-body{padding-block:clamp(44px,5vw,72px);}

/* blog */
.post-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:.18s ease;}
.post-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.post-media{aspect-ratio:16/9; background:var(--bg-alt-2); overflow:hidden;}
.post-media img{width:100%; height:100%; object-fit:cover;}
.post-body{padding:18px 20px 22px;}
.post-meta{font-size:12.5px; color:var(--ink-mute); margin-bottom:8px;}
.post-body h3{font-size:18px; margin-bottom:8px;}
.post-body p{font-size:14.3px; color:var(--ink-soft); margin:0;}
.pagination{display:flex; gap:7px; justify-content:center; margin-top:38px; flex-wrap:wrap;}
.pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); font-weight:600; font-size:14px; background:#fff;}
.pagination .page-numbers.current{background:var(--navy); border-color:var(--navy); color:#fff;}
.pagination .page-numbers:hover:not(.current){border-color:var(--blue); color:var(--blue);}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--navy); color:#A8BAD3; padding-block:clamp(48px,6vw,72px) 0; margin-top:0;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:38px;}
@media(max-width:940px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;}}
.site-footer h4{font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:18px;}
html[dir="rtl"] .site-footer h4{letter-spacing:0; text-transform:none; font-size:15px;}
.site-footer ul{list-style:none; margin:0; padding:0;}
.site-footer li a{display:block; padding:6px 0; font-size:14.3px; color:#A8BAD3;}
.site-footer li a:hover{color:#fff;}
.foot-brand{align-items:flex-start;}
/* There is vertical room in the footer, so show the full company name. */
.foot-brand .brand-name{color:#fff; white-space:normal; overflow:visible; text-overflow:clip; max-width:24ch; line-height:1.3;}
.foot-brand .brand-tag{color:#7C90AE; display:block;}
.foot-desc{font-size:14.3px; line-height:1.8; max-width:36ch; margin:16px 0 20px;}
.foot-contact{display:grid; gap:12px; font-size:14.3px;}
.foot-contact div{display:flex; gap:10px; align-items:flex-start;}
.foot-contact svg{width:17px; height:17px; color:var(--cyan); flex:none; margin-top:3px;}
.foot-contact a{color:#C6D6EC;}
.foot-contact a:hover{color:#fff;}
.foot-social{display:flex; gap:10px; margin-top:18px;}
.foot-social a{width:40px; height:40px; border:1px solid rgba(255,255,255,.18); border-radius:10px; display:flex; align-items:center; justify-content:center; color:#C6D6EC;}
.foot-social a:hover{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.35);}
.foot-social svg{width:18px; height:18px;}
.foot-bottom{margin-top:46px; border-top:1px solid rgba(255,255,255,.12); padding-block:20px 24px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:#8298B7;}
.foot-bottom a{color:#A8BAD3;}
.foot-bottom a:hover{color:#fff;}
.foot-lang{display:flex; gap:8px; align-items:center;}
.foot-lang a.is-active{color:#fff; font-weight:700;}

/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */
.wa-float{
  position:fixed; bottom:22px; inset-inline-end:22px; z-index:80; display:inline-flex; align-items:center; gap:10px;
  background:#1FA855; color:#fff; padding:13px 20px; border-radius:36px; font-size:14.5px; font-weight:600;
  box-shadow:0 12px 28px -10px rgba(31,168,85,.8);
}
.wa-float:hover{background:#178643; color:#fff;}
.wa-float svg{width:23px; height:23px;}
@media(max-width:640px){
  .wa-float span{display:none;}
  .wa-float{padding:15px; bottom:18px; inset-inline-end:18px;}
}

/* =========================================================
   WOOCOMMERCE (optional — styled if the plugin is active)
   ========================================================= */
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info{border-top-color:var(--blue); background:var(--bg-alt);}
.woocommerce ul.products{display:grid!important; grid-template-columns:repeat(4,1fr); gap:22px; list-style:none; margin:0; padding:0;}
@media(max-width:1000px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)!important;}}
@media(max-width:620px){.woocommerce ul.products{grid-template-columns:1fr!important;}}
.woocommerce ul.products li.product{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; padding:0!important; margin:0!important; width:auto!important; float:none!important;}
.woocommerce ul.products li.product img{border-radius:0; margin:0;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:16px!important; font-weight:600; padding:14px 16px 4px!important;}
.woocommerce ul.products li.product .price{display:block; padding:0 16px 12px; color:var(--ink); font-weight:700;}
.woocommerce ul.products li.product .button{margin:0 16px 18px!important; background:var(--blue)!important; color:#fff!important; border-radius:var(--radius-sm)!important; padding:12px 18px!important; font-weight:600!important;}
.woocommerce div.product .single_add_to_cart_button,.woocommerce #respond input#submit,.woocommerce button.button,.woocommerce input.button,.woocommerce a.button.alt{
  background:var(--blue)!important; color:#fff!important; border-radius:var(--radius-sm)!important; font-weight:600!important; padding:14px 26px!important;
}
.woocommerce div.product .single_add_to_cart_button:hover,.woocommerce a.button.alt:hover{background:var(--blue-dark)!important;}
.woocommerce table.shop_table{border-radius:var(--radius); border-color:var(--line);}
.woocommerce-cart table.cart img{width:64px; border-radius:8px;}

/* =========================================================
   MOTION
   ========================================================= */
.reveal{opacity:1; transform:none;}
@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
  .js .reveal.in{opacity:1; transform:none;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important;}
}

/* =========================================================
   UTILITIES
   ========================================================= */
.text-center{text-align:center;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-40{margin-top:40px;}
.mw-720{max-width:720px;} .mw-820{max-width:820px;}
.mx-auto{margin-inline:auto;}
.muted{color:var(--ink-soft);}
.small{font-size:13.5px;}
.placeholder-note{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--amber);
  background:#FDF6E7; border:1px solid #F2E0B6; border-radius:8px; padding:7px 12px;
}
.placeholder-note svg{width:15px; height:15px;}